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

9
src/api/request.js
View File

@@ -41,10 +41,11 @@ instance.interceptors.response.use(
if (res.data.code == 200) {
return res.data
} else {
ElMessage({
message: res.data.msg,
type: 'error'
})
console.error("接口请求错误："+res.data.msg)
// ElMessage({
// message: res.data.msg,
// type: 'error'
// })
return Promise.reject(res.data)
}
},

BIN
src/assets/images/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

22
src/components/VideoDialog/index.vue
View File

@@ -66,13 +66,20 @@
import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
import { getColletDiyApi } from '@/api/home'
import pubSub from 'pubsub-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 ACTION = '0'
let command = ref('')
@@ -149,6 +156,7 @@
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e

95
src/layout/components/CoreVideo/allList.vue
View File

@@ -12,7 +12,7 @@
@click="handleItem(item)"
>
<div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
<video class="item-video" :id="'video' + index" muted autoplay :controls="false">
<video class="item-video" :id="'videoall' + index" muted autoplay :controls="false">
<source type="application/x-mpegURL" />
</video>
<p>
@@ -36,13 +36,14 @@
</template>
<script setup>
import { getVideoListApi,getColletListApi } from '@/api/home'
import {getVideoListApi, getColletListApi, getPreviewUrlApi} from '@/api/home'
import { postVideoCollectApi } from '@/api/monitor'
import primary from '@/assets/images/item-primary.png'
import Hls from 'hls.js'
import pubSub from 'pubsub-js'
import mpegtsjs from "mpegts.js";
let modelValue = defineModel()
let isCollect = ref(0)
@@ -75,9 +76,13 @@
getVideoList()
})
}
const handleItem = (item) => {
console.log(item,'iscollect')
src.value = item.hlsUrl
const handleItem = async (item) => {
console.log(item, 'iscollect')
let res = await getPreviewUrlApi({
cameraIndexCode: item.cameraIndexCode,
type: 'hls'
})
src.value = res.data.url
isCollect.value = item.isCollect
isDiy.value = item.isDiy
cameraIndexCode.value = item.cameraIndexCode
@@ -110,27 +115,77 @@
list.value = []
getVideoList()
}
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 getVideoList = async () => {
let res = await getColletListApi(params)
list.value = res.data
total.value = res.total
nextTick(() => {
list.value.forEach(async (item, index) => {
var video = document.getElementById(`video${index}`)
const hls = new Hls({
enableWorker: false, // 禁用 Worker 来避免额外的线程
enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
cache: true, // 启用缓存
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(item.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
hlsRefs.push(hls)
var video = document.getElementById(`videoall${index}`)
createPlayer(item.cameraIndexCode,video);
})
})
}

92
src/layout/components/CoreVideo/index.vue
View File

@@ -62,8 +62,12 @@ let isCollect = ref(0)
let hlsRefs = []
let timer = null
let isDiy = ref(0)
const handleItem = (item) => {
src.value = item.hlsUrl
const handleItem = async (item) => {
let res = await getPreviewUrlApi({
cameraIndexCode: item.cameraIndexCode,
type: 'hls'
})
src.value = res.data.url
cameraIndexCode.value = item.cameraIndexCode
isCollect.value = item.isCollect
isDiy.value = item.isDiy
@@ -87,6 +91,69 @@ let isCollect = ref(0)
src.value = res.data.url
videoShow.value = true
}
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 getVideoList = async () => {
let res = await getColletListApi({
pageNum: 1,
@@ -97,26 +164,7 @@ let isCollect = ref(0)
nextTick(() => {
list.value.forEach(async (item, index) => {
var videoElement = document.getElementById(`video${index}`)
const player = mpegtsjs.createPlayer({
url: item.hlsUrl,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
})
hlsRefs.push(player)
createPlayer(item.cameraIndexCode,videoElement);
})
})
}

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)
})

197
src/views/hotel/components/video-box.vue
View File

@@ -78,7 +78,7 @@
</div>
<video
class="video-item__video"
:id="'monitorVideo' + index"
:id="'hotelmonitorVideo' + index"
preload="auto"
muted
autoplay
@@ -87,7 +87,7 @@
<source type="application/x-mpegURL" />
</video>
<p class="video-item__title--primary">
{{ item.cameraName || item.scenicAreaId }}
{{ item.cameraName || item.cameraIndexCode }}
</p>
</div>
</div>
@@ -146,15 +146,15 @@
class="item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
@click="handleItemVideo(item.hlsUrl, 101, item.cameraIndexCode,item)"
>
<div>
<p class="item-title--primary">
{{ item.cameraName || item.scenicAreaId }}
{{ item.cameraName || item.cameraIndexCode }}
</p>
<video
class="item-img"
:id="'monitorVideo' + index"
:id="'hotelmonitorVideo' + index"
muted
autoplay
:controls="false"
@@ -197,13 +197,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 = []
@@ -259,6 +266,7 @@
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
@@ -311,6 +319,69 @@
videoList.value = []
getRegionsList()
}
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 getRegionsList = async()=>{
clearHlsRefs()
@@ -325,59 +396,8 @@
nextTick(() => {
if(!videoList.value.length) return false
videoList.value.forEach(async (x, index) => {
const video = document.getElementById(`monitorVideo${index}`)
if(x.hlsUrl.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: x.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{
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(x.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
hls.on(Hls.Events.ERROR, (event, data) => {
console.error('HLS 播放器遇到错误:', data);
// 根据错误类型进行处理
// initVideo()
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('网络错误，尝试重新加载');
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('媒体错误，尝试修复');
hls.recoverMediaError();
break;
default:
console.log('无法恢复的错误，销毁播放器');
// hls.destroy();
break;
}
}})
hlsRefs.push(hls)
}
const video = document.getElementById(`hotelmonitorVideo${index}`)
createPlayer(x.cameraIndexCode,video);
})
})
} else {
@@ -392,12 +412,17 @@
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
const handleItemVideo = async (url, type, code, item) => {
let res = await getPreviewUrlApi({
cameraIndexCode: code,
type: 'hls'
})
url = res.data.url
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
if(url.startsWith('ws')){
if (url.startsWith('ws')) {
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
@@ -416,7 +441,7 @@
player.play()
}, 3000)
})
}else{
} else {
hlsRef = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -436,40 +461,8 @@
clearHlsRefs()
nextTick(() => {
videoList.value.forEach(async (item, index) => {
const video = document.getElementById(`monitorVideo${index}`)
if(item.hlsUrl.startsWith('ws')){
var 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{
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(`hotelmonitorVideo${index}`)
createPlayer(item.cameraIndexCode,video);
})
})
}

163
src/views/monitor/components/box-2.vue
View File

@@ -93,16 +93,21 @@
@click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
>关注
</div>
<view class="video-item__video">
<video
class="video-item__video"
:id="'monitorVideo' + index"
preload="auto"
class="video-item__video"
muted
autoplay
:controls="false"
>
<source type="application/x-mpegURL"/>
</video>
</view>
<p class="video-item__title--primary">
{{ item.cameraName || item.cameraIndexCode }}
</p>
@@ -171,7 +176,7 @@
class="item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
@click="handleItemVideo(item.hlsUrl, 101, item.cameraIndexCode,item)"
>
<div>
<p class="item-title--primary">
@@ -212,13 +217,20 @@ import pubSub from 'pubsub-js'
import Hls from 'hls.js'
import HlsPlayer from "@/components/HlsPlayer/index.vue";
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 ACTION = '0'
const props = {
@@ -267,62 +279,7 @@ const initVideo = () => {
nextTick(() => {
videoList.value.forEach(async (item, index) => {
const videoElement = document.getElementById(`monitorVideo${index}`)
if(item.hlsUrl.startsWith("ws")){
const player = mpegtsjs.createPlayer({
url: item.hlsUrl,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
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(item.hlsUrl)
player.attachMedia(videoElement)
player.on(Hls.Events.MANIFEST_PARSED, () => {
videoElement.play()
})
player.on(Hls.Events.ERROR, (event, data) => {
// console.error('HLS 播放器遇到错误:', data);
// hls.startLoad();
// initVideo()
// 根据错误类型进行处理
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)
}
createPlayer(item.cameraIndexCode,videoElement);
})
})
}
@@ -388,12 +345,17 @@ const handleBack = () => {
initVideo()
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code, item) => {
const handleItemVideo = async (url, type, code, item) => {
let res = await getPreviewUrlApi({
cameraIndexCode: code,
type: 'hls'
})
url = res.data.url
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
if(url.startsWith('ws')){
if (url.startsWith('ws')) {
hlsRef = mpegtsjs.createPlayer({
url: url,
type: 'flv',
@@ -407,12 +369,13 @@ const handleItemVideo = (url, type, code, item) => {
hlsRef.on('error', (err) => {
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
hlsRef.unload()
setTimeout(() => {
hlsRef.load()
hlsRef.play()
}, 3000)
})
}else{
} else {
hlsRef = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -431,6 +394,7 @@ const handleItemVideo = (url, type, code, item) => {
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
@@ -461,7 +425,6 @@ const handleCamera = async (itemCode, resource) => {
type: 'hls',
cameraIndexCode: itemCode
})
console.log(res, 'rrrrrrrrrrrrrr')
cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
@@ -510,29 +473,15 @@ watch(
},
{immediate: true}
)
const getVideoList = async (val) => {
try {
if (loading.value) return
loading.value = true
if (val == 3) {
params.businessVideoDisplayPosition = ''
} else {
params.businessVideoDisplayPosition = navList.value[current.value]
}
let res = await getVideoListApi(params)
total.value = res.total
if (res.data.length > 0) {
videoList.value = res.data
// console.log(videoList.value,'1111111111111111111111')
// postVideoRemain()
nextTick(() => {
videoList.value.forEach(async (x, index) => {
const videoElement = document.getElementById(`monitorVideo${index}`)
if(x.hlsUrl.startsWith('ws')){
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: x.hlsUrl,
url: url,
type: 'flv',
isLive: true,
hasAudio: false
@@ -540,9 +489,9 @@ const getVideoList = async (val) => {
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
@@ -552,21 +501,19 @@ const getVideoList = async (val) => {
})
hlsRefs.push(player)
}else{
}
else{
const player = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
player.loadSource(x.hlsUrl)
player.loadSource(url)
player.attachMedia(videoElement)
player.on(Hls.Events.MANIFEST_PARSED, () => {
videoElement.play()
})
player.on(Hls.Events.ERROR, (event, data) => {
// console.error('HLS 播放器遇到错误:', data);
// hls.startLoad();
// initVideo()
// 根据错误类型进行处理
if (data.fatal) {
switch (data.type) {
@@ -588,6 +535,26 @@ const getVideoList = async (val) => {
hlsRefs.push(player)
}
})
}
const getVideoList = async (val) => {
try {
if (loading.value) return
loading.value = true
if (val == 3) {
params.businessVideoDisplayPosition = ''
} else {
params.businessVideoDisplayPosition = navList.value[current.value]
}
let res = await getVideoListApi(params)
total.value = res.total
if (res.data.length > 0) {
videoList.value = res.data
nextTick(() => {
videoList.value.forEach(async (x, index) => {
const videoElement = document.getElementById(`monitorVideo${index}`)
createPlayer(x.cameraIndexCode,videoElement);
})
})
} else {
if (timer) clearInterval(timer)