Update package.json and package-lock.json to include flv.js and hls.js dependencies; enhance Vite config with additional API proxy; refactor App.vue and ChinaMap.vue for improved component functionality and layout; optimize MarketEnvironmentMonitor and MarketRealtimeMonitor components for better user experience; update SupplyDemandData and PurchaserAnalysis components for enhanced data presentation.
Swanky
1 week ago
@ -0,0 +1,54 @@ |
|||||||
|
{ |
||||||
|
"pageSize": 2, |
||||||
|
"autoPlayInterval": 10000, |
||||||
|
"cameras": [ |
||||||
|
{ |
||||||
|
"id": 1, |
||||||
|
"name": "交易大厅主区", |
||||||
|
"resolution": "1920x1080", |
||||||
|
"preview": "/images/monitor/交易大厅主区.jpg", |
||||||
|
"streamUrl": "", |
||||||
|
"status": "online" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 2, |
||||||
|
"name": "牦牛展示区", |
||||||
|
"resolution": "1920x1080", |
||||||
|
"preview": "/images/monitor/牦牛展示区.jpg", |
||||||
|
"streamUrl": "", |
||||||
|
"status": "online" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 3, |
||||||
|
"name": "停车场入口", |
||||||
|
"resolution": "1280x720", |
||||||
|
"preview": "/images/monitor/停车场入口.jpg", |
||||||
|
"streamUrl": "", |
||||||
|
"status": "online" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 4, |
||||||
|
"name": "安全出口", |
||||||
|
"resolution": "1280x720", |
||||||
|
"preview": "/images/monitor/安全出口.jpg", |
||||||
|
"streamUrl": "", |
||||||
|
"status": "offline" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 5, |
||||||
|
"name": "办公区域", |
||||||
|
"resolution": "1920x1080", |
||||||
|
"preview": "/images/monitor/办公区域.jpg", |
||||||
|
"streamUrl": "", |
||||||
|
"status": "error" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 6, |
||||||
|
"name": "仓储区域", |
||||||
|
"resolution": "1280x720", |
||||||
|
"preview": "/images/monitor/仓储区域.jpg", |
||||||
|
"streamUrl": "", |
||||||
|
"status": "online" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 878 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,76 @@ |
|||||||
|
<template> |
||||||
|
<div class="live-player"> |
||||||
|
<video |
||||||
|
ref="videoRef" |
||||||
|
class="screen-media" |
||||||
|
muted |
||||||
|
autoplay |
||||||
|
playsinline |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue' |
||||||
|
import { createLivePlayer, destroyLivePlayer } from '../utils/liveStreamPlayer.js' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
url: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
playerConfig: { |
||||||
|
type: Object, |
||||||
|
default: () => ({}) |
||||||
|
}, |
||||||
|
active: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const videoRef = ref(null) |
||||||
|
let playerInstance = null |
||||||
|
|
||||||
|
const teardown = () => { |
||||||
|
destroyLivePlayer(playerInstance) |
||||||
|
playerInstance = null |
||||||
|
} |
||||||
|
|
||||||
|
const setup = async () => { |
||||||
|
teardown() |
||||||
|
if (!props.active || !props.url) { |
||||||
|
return |
||||||
|
} |
||||||
|
await nextTick() |
||||||
|
if (!videoRef.value) { |
||||||
|
return |
||||||
|
} |
||||||
|
playerInstance = createLivePlayer(videoRef.value, props.url, props.playerConfig) |
||||||
|
} |
||||||
|
|
||||||
|
watch( |
||||||
|
() => [props.url, props.active, props.playerConfig], |
||||||
|
setup, |
||||||
|
{ deep: true } |
||||||
|
) |
||||||
|
|
||||||
|
onMounted(setup) |
||||||
|
onBeforeUnmount(teardown) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.live-player { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.screen-media { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
display: block; |
||||||
|
background: #0a1418; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,123 @@ |
|||||||
|
import Hls from 'hls.js' |
||||||
|
import flvjs from 'flv.js' |
||||||
|
|
||||||
|
const DEFAULT_FORMAT_RULES = [ |
||||||
|
{ type: 'hls', match: '.m3u8', library: 'hls.js' }, |
||||||
|
{ type: 'flv', match: '.flv', library: 'flv.js' }, |
||||||
|
{ type: 'mp4', match: '.mp4', library: 'native' }, |
||||||
|
{ type: 'webm', match: '.webm', library: 'native' } |
||||||
|
] |
||||||
|
|
||||||
|
export function getFormatRules(playerConfig) { |
||||||
|
const rules = playerConfig?.formatRules |
||||||
|
return Array.isArray(rules) && rules.length ? rules : DEFAULT_FORMAT_RULES |
||||||
|
} |
||||||
|
|
||||||
|
export function detectStreamType(url, playerConfig) { |
||||||
|
if (!url) { |
||||||
|
return 'native' |
||||||
|
} |
||||||
|
const lower = ('' + url).toLowerCase() |
||||||
|
const rules = getFormatRules(playerConfig) |
||||||
|
for (const rule of rules) { |
||||||
|
const match = rule.match ? ('' + rule.match).toLowerCase() : '' |
||||||
|
if (match && lower.includes(match)) { |
||||||
|
return rule.type || 'native' |
||||||
|
} |
||||||
|
} |
||||||
|
return 'native' |
||||||
|
} |
||||||
|
|
||||||
|
export function resolveStreamUrl(camera, playerConfig) { |
||||||
|
if (!camera) { |
||||||
|
return '' |
||||||
|
} |
||||||
|
const priority = playerConfig?.urlPriority || ['hdStreamUrl', 'streamUrl', 'playUrl', 'preview'] |
||||||
|
for (const key of priority) { |
||||||
|
const value = camera[key] |
||||||
|
if (value) { |
||||||
|
return value |
||||||
|
} |
||||||
|
} |
||||||
|
return '' |
||||||
|
} |
||||||
|
|
||||||
|
export function createLivePlayer(videoEl, url, playerConfig = {}) { |
||||||
|
if (!videoEl || !url) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
const streamType = detectStreamType(url, playerConfig) |
||||||
|
const options = playerConfig?.playerOptions || {} |
||||||
|
|
||||||
|
if (streamType === 'hls') { |
||||||
|
if (videoEl.canPlayType('application/vnd.apple.mpegurl')) { |
||||||
|
videoEl.src = url |
||||||
|
videoEl.play().catch(() => {}) |
||||||
|
return { type: 'native-hls', videoEl } |
||||||
|
} |
||||||
|
if (Hls.isSupported()) { |
||||||
|
const hls = new Hls({ |
||||||
|
enableWorker: true, |
||||||
|
lowLatencyMode: true, |
||||||
|
...(options.hls || {}) |
||||||
|
}) |
||||||
|
hls.loadSource(url) |
||||||
|
hls.attachMedia(videoEl) |
||||||
|
hls.on(Hls.Events.MANIFEST_PARSED, () => { |
||||||
|
videoEl.play().catch(() => {}) |
||||||
|
}) |
||||||
|
hls.on(Hls.Events.ERROR, (_, data) => { |
||||||
|
if (data?.fatal) { |
||||||
|
console.error('HLS 播放失败:', data) |
||||||
|
} |
||||||
|
}) |
||||||
|
return { type: 'hls', instance: hls, videoEl } |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (streamType === 'flv' && flvjs.isSupported()) { |
||||||
|
const flvPlayer = flvjs.createPlayer( |
||||||
|
{ |
||||||
|
type: 'flv', |
||||||
|
url, |
||||||
|
isLive: true, |
||||||
|
hasAudio: true, |
||||||
|
hasVideo: true, |
||||||
|
...(options.flv || {}) |
||||||
|
}, |
||||||
|
{ |
||||||
|
enableWorker: true, |
||||||
|
enableStashBuffer: false, |
||||||
|
...(options.flvMedia || {}) |
||||||
|
} |
||||||
|
) |
||||||
|
flvPlayer.attachMediaElement(videoEl) |
||||||
|
flvPlayer.load() |
||||||
|
flvPlayer.play().catch(() => {}) |
||||||
|
return { type: 'flv', instance: flvPlayer, videoEl } |
||||||
|
} |
||||||
|
|
||||||
|
videoEl.src = url |
||||||
|
videoEl.play().catch(() => {}) |
||||||
|
return { type: 'native', videoEl } |
||||||
|
} |
||||||
|
|
||||||
|
export function destroyLivePlayer(player) { |
||||||
|
if (!player) { |
||||||
|
return |
||||||
|
} |
||||||
|
if (player.type === 'hls' && player.instance) { |
||||||
|
player.instance.destroy() |
||||||
|
} else if (player.type === 'flv' && player.instance) { |
||||||
|
player.instance.pause() |
||||||
|
player.instance.unload() |
||||||
|
player.instance.detachMediaElement() |
||||||
|
player.instance.destroy() |
||||||
|
} |
||||||
|
if (player.videoEl) { |
||||||
|
player.videoEl.pause() |
||||||
|
player.videoEl.removeAttribute('src') |
||||||
|
player.videoEl.load() |
||||||
|
} |
||||||
|
} |
||||||