lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

类型：开发

Browse Source 
描述：
This commit is contained in:
lixuefeng
2025-12-04 16:52:58 +08:00
parent caa474a5a9
commit 03e0ea4cb8
8 changed files with 458 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/views/collect/components/video-box.vue
View File

@@ -35,14 +35,14 @@
</div>
<video
class="video-item__video"
:id="'monitorVideo' + element.cameraIndexCode"
:id="'collectmonitorVideo' + element.cameraIndexCode"
preload="auto"
muted
autoplay
:controls="false"
/>
<p class="video-item__title--primary">
{{ element.cameraName || element.scenicAreaId }}
{{ element.cameraName || element.cameraIndexCode }}
</p>
</div>
</div>
@@ -52,29 +52,7 @@
</div>
</div>
<!-- <div class="pagination">
<el-pagination
v-model:current-page="params.pageNum"
:page-size="params.pageSize"
:total="total"
background
layout="prev, pager, next"
@current-change="currentChange"
/>
</div> -->
</div>
<!-- <ul class="videos">
<li class="video-item" v-for="item in 8" :key="item">
<img src="@/assets/images/sxzd.png" alt="" />
<p>
<span>核心路段：这是一条信息说明</span>
</p>
</li>
</ul> -->
<!-- <div class="pagination-box">
<el-pagination background layout="prev, pager, next" :total="1000" />
</div> -->
</div>
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" @isDiyChange="isDiyChange" :isDiy="isDiy" :isCollect="isCollect" :src="videoSrc" />
</template>
@@ -94,13 +72,20 @@
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
import mpegtsjs from "mpegts.js";
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const UP = 'UP' // 上转
const DOWN = 'DOWN' // 下转
const LEFT = 'LEFT' // 左转
const RIGHT = 'RIGHT' // 右转
const STOP = 'STOP' // 停止操作
// const Z00M_IN = 'ZOOM_IN' // 焦距变大
// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
// const UP = 'UP' // 上转
// const DOWN = 'DOWN' // 下转
// const LEFT = 'LEFT' // 左转
// const RIGHT = 'RIGHT' // 右转
// const STOP = 'STOP' // 停止操作
const Z00M_IN = 'zoomin' // 焦距变大
const Z00M_OUT = 'zoomout' // 焦距变小
const UP = 'up' // 上转
const DOWN = 'down' // 下转
const LEFT = 'left' // 左转
const RIGHT = 'right' // 右转
const STOP = 'stop' // 停止操作
let cond = ref(false)
let ACTION = '0'
let hlsRefs = []
@@ -170,7 +155,6 @@
params.businessVideoDisplayPosition = ''
let res = await getVideCollectCate(params)
videoList.value = res.data
console.log(res,videoList.value.length,'ressssssssssssss')
if(videoList.value.length<=3){
grad.value = 3
}else if(videoList.value.length<=6){
@@ -206,6 +190,7 @@
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
@@ -280,6 +265,69 @@
if (type == 100) initVideo()
}, 1000)
}
const createPlayer = (cameraIndexCode,videoElement) => {
getPreviewUrlApi({
type: 'hls',
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
})
hlsRefs.push(player)
}
else{
const player = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
player.loadSource(url)
player.attachMedia(videoElement)
player.on(Hls.Events.MANIFEST_PARSED, () => {
videoElement.play()
})
player.on(Hls.Events.ERROR, (event, data) => {
// 根据错误类型进行处理
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('网络错误，尝试重新加载');
player.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('媒体错误，尝试修复');
player.recoverMediaError();
break;
default:
console.log('无法恢复的错误，销毁播放器');
// hls.destroy();
break;
}
}
})
hlsRefs.push(player)
}
})
}
const initVideo = () => {
clearHlsRefs()
nextTick(() => {
@@ -287,42 +335,8 @@
it.videos.forEach((item,index)=>{
setTimeout(() => {
const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
if(item.hlsUrl.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: item.hlsUrl,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(video)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
})
}else{
if(item.hlsUrl){
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(item.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
hlsRefs.push(hls)
}
}
const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
createPlayer(item.cameraIndexCode,video);
}, 1000)
})