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-10 14:00:33 +08:00
parent 5cbb12f15d
commit 5fd201a41a
7 changed files with 1342 additions and 1131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

583
src/components/HlsPlayer/index.vue
View File

@@ -1,167 +1,190 @@
<template> <template>
<div v-show="isActive" class="myVideo-container"> <div v-show="isActive" class="myVideo-container">
<video <video
class="myVideo" class="myVideo"
ref="videoElement" id="video"
muted ref="videoElement"
playsinline muted
:controls="false" playsinline
disablePictureInPicture :controls="false"
disablePictureInPicture
></video> ></video>
<!-- <div v-if="loading" class="loading-overlay pointer-events-none"> <!-- <div v-if="loading" class="loading-overlay pointer-events-none">
<div class="loading-text">{{ loadingText }}</div> <div class="loading-text">{{ loadingText }}</div>
</div> --> </div> -->
</div> </div>
</template> </template>
<script> <script>
import Hls from 'hls.js' import Hls from 'hls.js'
import mpegtsjs from 'mpegts.js'
export default { export default {
name: 'HlsPlayer', name: 'HlsPlayer',
props: { props: {
url: { url: {
type: String, type: String,
default: '' default: ''
}, },
isActive: { isActive: {
type: Boolean, type: Boolean,
default: true default: true
}, },
width: { width: {
type: [String, Number], type: [String, Number],
default: '100%' default: '100%'
}, },
height: { height: {
type: [String, Number], type: [String, Number],
default: '100%' default: '100%'
}
},
data() {
return {
hls: null,
video: null,
loading: false,
loadingText: '加载中...',
retryCount: 0,
maxRetries: 3,
isReady: false,
playAttempts: 0,
maxPlayAttempts: 3,
cleanupTimeout: null
}
},
computed: {
videoStyle() {
const style = {}
if (this.width) {
style.width = typeof this.width === 'number' ? `${this.width}px` : this.width
} }
}, if (this.height) {
data() { style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
return {
hls: null,
video: null,
loading: false,
loadingText: '加载中...',
retryCount: 0,
maxRetries: 3,
isReady: false,
playAttempts: 0,
maxPlayAttempts: 3,
cleanupTimeout: null
} }
}, return style
computed: { }
videoStyle() { },
const style = {} watch: {
if (this.width) { isActive: {
style.width = typeof this.width === 'number' ? `${this.width}px` : this.width handler(newValue) {
} if (newValue) {
if (this.height) { this.$nextTick(this.initializePlayer)
style.height = typeof this.height === 'number' ? `${this.height}px` : this.height } else {
}
return style
}
},
watch: {
isActive: {
handler(newValue) {
if (newValue) {
this.$nextTick(this.initializePlayer)
} else {
this.immediateCleanup()
}
},
immediate: true
},
url(newUrl) {
// console.log(newUrl,'77777777777777777777777777777777')
if (newUrl && this.isActive) {
this.initializePlayer()
}
}
},
mounted() {
this.video = this.$refs.videoElement
this.registerVideoEvents()
},
methods: {
registerVideoEvents() {
const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend']
events.forEach((event) => {
this.video.addEventListener(event, this.handleVideoEvent)
})
},
handleVideoEvent(event) {
switch (event.type) {
case 'canplay':
this.isReady = true
break
case 'waiting':
this.showLoadingIndicator('缓冲中...')
break
case 'playing':
this.loading = false
break
case 'error':
this.handlePlaybackError()
break
case 'stalled':
this.showLoadingIndicator('播放卡顿...')
break
case 'suspend':
this.cleanupNetworkResources()
break
}
},
immediateCleanup() {
// 立即停止网络请求
if (this.hls) {
this.hls.stopLoad()
this.hls.detachMedia()
}
// 延迟完全清理以避免播放卡顿
this.cleanupTimeout = setTimeout(() => {
// 仅在不重新初始化播放器时才调用 fullCleanup
if (!this.url || !this.isActive) {
this.fullCleanup()
}
}, 1000)
},
fullCleanup() {
if (this.hls) {
this.hls.destroy()
this.hls = null
}
if (this.video) {
this.video.pause()
this.video.removeAttribute('src')
this.video.load()
}
this.loading = false
this.retryCount = 0
this.isReady = false
this.playAttempts = 0
if (this.cleanupTimeout) {
clearTimeout(this.cleanupTimeout)
}
},
initializePlayer() {
if (!this.isActive || !this.url) return
// 如果是重新初始化播放器，先清理已存在的资源
if (this.hls) {
this.immediateCleanup() this.immediateCleanup()
} }
},
immediate: true
},
url(newUrl) {
// console.log(newUrl,'77777777777777777777777777777777')
if (newUrl && this.isActive) {
this.initializePlayer()
}
}
},
mounted() {
this.video = this.$refs.videoElement
this.registerVideoEvents()
},
methods: {
registerVideoEvents() {
const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend']
events.forEach((event) => {
this.video.addEventListener(event, this.handleVideoEvent)
})
},
handleVideoEvent(event) {
switch (event.type) {
case 'canplay':
this.isReady = true
break
case 'waiting':
this.showLoadingIndicator('缓冲中...')
break
case 'playing':
this.loading = false
break
case 'error':
this.handlePlaybackError()
break
case 'stalled':
this.showLoadingIndicator('播放卡顿...')
break
case 'suspend':
this.cleanupNetworkResources()
break
}
},
immediateCleanup() {
// 立即停止网络请求
if (this.hls) {
this.hls.stopLoad()
this.hls.detachMedia()
}
// 延迟完全清理以避免播放卡顿
this.cleanupTimeout = setTimeout(() => {
// 仅在不重新初始化播放器时才调用 fullCleanup
if (!this.url || !this.isActive) {
this.fullCleanup()
}
}, 1000)
},
fullCleanup() {
if (this.hls) {
this.hls.destroy()
this.hls = null
}
if (this.video) {
this.video.pause()
this.video.removeAttribute('src')
this.video.load()
}
this.loading = false
this.retryCount = 0
this.isReady = false
this.playAttempts = 0
if (this.cleanupTimeout) {
clearTimeout(this.cleanupTimeout)
}
},
initializePlayer() {
if (!this.isActive || !this.url) return
// 如果是重新初始化播放器，先清理已存在的资源
if (this.hls) {
this.immediateCleanup()
}
if(this.url.startsWith('ws')){
const videoElement = document.getElementById('video')
const player = mpegtsjs.createPlayer({
url: this.url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
player.unload()
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
})
}else{
this.hls = new Hls({ this.hls = new Hls({
// 内存优化配置 // 内存优化配置
maxBufferSize: 0, // 降低缓冲区大小（15MB） maxBufferSize: 0, // 降低缓冲区大小（15MB）
@@ -199,154 +222,156 @@
this.safePlay() this.safePlay()
}) })
this.hls.on(Hls.Events.ERROR, (event, data) => { this.hls.on(Hls.Events.ERROR, (event, data) => {
console.log('核心视频错误',data.type) console.log('核心视频错误',data.type)
// this.hls.startLoad(); //重连 // this.hls.startLoad(); //重连
if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) { if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
console.error('缓冲停滞错误，尝试重新加载视频'); console.error('缓冲停滞错误，尝试重新加载视频');
this.hls.startLoad(); // 尝试重新加载视频 this.hls.startLoad(); // 尝试重新加载视频
} }
this.handleHlsError(data) this.handleHlsError(data)
}) })
this.hls.on(Hls.Events.BUFFER_EOS, () => { this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources() this.cleanupNetworkResources()
}) })
}, }
initVideo() {
this.beforeDestroy()
this.hls = new Hls({
maxBufferLength: 30, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
this.hls.attachMedia(this.video)
this.hls.loadSource(this.url)
// 事件处理
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.loading = false
this.retryCount = 0
this.safePlay()
})
this.hls.on(Hls.Events.ERROR, (event, data) => {
this.hls.startLoad(); //重连
this.handleHlsError(data)
})
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})
},
cleanupNetworkResources() {
// 清理已播放的缓冲数据
if (this.hls && this.video) {
try {
const currentTime = this.video.currentTime
this.hls.mediaBuffer = null
if (this.hls.bufferTimer) {
clearInterval(this.hls.bufferTimer)
}
this.hls.flushBuffer()
this.video.currentTime = currentTime
} catch (e) {
console.warn('Buffer cleanup error:', e)
}
}
},
handleHlsError(data) { },
// console.error('HLS Error:', data) initVideo() {
if (data.fatal) { this.beforeDestroy()
switch (data.type) { this.hls = new Hls({
case Hls.ErrorTypes.NETWORK_ERROR: maxBufferLength: 30, // 最大缓冲长度（秒）
this.retryLoad() maxMaxBufferLength: 15, // 缓冲区长度的上限
break maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
case Hls.ErrorTypes.MEDIA_ERROR: })
this.hls.recoverMediaError() this.hls.attachMedia(this.video)
break this.hls.loadSource(this.url)
default:
this.fullCleanup()
break
}
}
},
retryLoad() { // 事件处理
if (this.retryCount < this.maxRetries) { this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.retryCount++ this.loading = false
this.showLoadingIndicator(`重试第 ${this.retryCount} 次...`) this.retryCount = 0
setTimeout(() => this.initializePlayer(), 2000) this.safePlay()
} else { })
this.showLoadingIndicator('视频加载失败') this.hls.on(Hls.Events.ERROR, (event, data) => {
this.fullCleanup() this.hls.startLoad(); //重连
} this.handleHlsError(data)
}, })
showLoadingIndicator(text) {
this.loading = true
this.loadingText = text
},
async safePlay() {
if (!this.video || this.playAttempts >= this.maxPlayAttempts) return
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})
},
cleanupNetworkResources() {
// 清理已播放的缓冲数据
if (this.hls && this.video) {
try { try {
this.playAttempts++ const currentTime = this.video.currentTime
if (this.video.readyState >= 2) { this.hls.mediaBuffer = null
await this.video.play() if (this.hls.bufferTimer) {
this.playAttempts = 0 clearInterval(this.hls.bufferTimer)
} else {
setTimeout(this.safePlay, 500)
} }
} catch (error) { this.hls.flushBuffer()
console.warn('播放失败:', error) this.video.currentTime = currentTime
setTimeout(this.safePlay, 1000) } catch (e) {
console.warn('Buffer cleanup error:', e)
} }
} }
}, },
beforeDestroy() {
// 移除所有事件监听 handleHlsError(data) {
if (this.video) { // console.error('HLS Error:', data)
const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend'] if (data.fatal) {
events.forEach((event) => { switch (data.type) {
this.video.removeEventListener(event, this.handleVideoEvent) case Hls.ErrorTypes.NETWORK_ERROR:
}) this.retryLoad()
break
case Hls.ErrorTypes.MEDIA_ERROR:
this.hls.recoverMediaError()
break
default:
this.fullCleanup()
break
}
}
},
retryLoad() {
if (this.retryCount < this.maxRetries) {
this.retryCount++
this.showLoadingIndicator(`重试第 ${this.retryCount} 次...`)
setTimeout(() => this.initializePlayer(), 2000)
} else {
this.showLoadingIndicator('视频加载失败')
this.fullCleanup()
}
},
showLoadingIndicator(text) {
this.loading = true
this.loadingText = text
},
async safePlay() {
if (!this.video || this.playAttempts >= this.maxPlayAttempts) return
try {
this.playAttempts++
if (this.video.readyState >= 2) {
await this.video.play()
this.playAttempts = 0
} else {
setTimeout(this.safePlay, 500)
}
} catch (error) {
console.warn('播放失败:', error)
setTimeout(this.safePlay, 1000)
} }
this.fullCleanup()
} }
},
beforeDestroy() {
// 移除所有事件监听
if (this.video) {
const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend']
events.forEach((event) => {
this.video.removeEventListener(event, this.handleVideoEvent)
})
}
this.fullCleanup()
} }
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.myVideo-container { .myVideo-container {
position: relative; position: relative;
height: 100%; height: 100%;
} }
.myVideo { .myVideo {
width: 100%; width: 100%;
height: 100%; height: 100%;
// aspect-ratio: 16/9; // aspect-ratio: 16/9;
/* border: 1px solid #ccc; */ /* border: 1px solid #ccc; */
// border-radius: vw(5); // border-radius: vw(5);
} }
.loading-overlay { .loading-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.loading-text { .loading-text {
color: white; color: white;
padding: vw(10); padding: vw(10);
border-radius: vw(4); border-radius: vw(4);
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
} }
</style> </style>

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

@@ -1,12 +1,12 @@
<template> <template>
<div class="dialog"> <div class="dialog">
<el-dialog <el-dialog
v-model="modelValue" v-model="modelValue"
align-center align-center
:modal="false" :modal="false"
:show-close="false" :show-close="false"
:z-index="9999" :z-index="9999"
destroy-on-close destroy-on-close
> >
<div class="dialog-box"> <div class="dialog-box">
<div class="video"> <div class="video">
@@ -16,20 +16,20 @@
<source type="application/x-mpegURL" /> <source type="application/x-mpegURL" />
</video> --> </video> -->
<div class="action-box"> <div class="action-box">
<div class="action-item"> <div class="action-item">
<div <div
v-if="colletCond == 1" v-if="colletCond == 1"
class="video-follow" class="video-follow"
@click.stop="handleCollect()" @click.stop="handleCollect()"
>取消关注 >取消关注
</div> </div>
<div <div
v-if="colletCond == 0" v-if="colletCond == 0"
class="video-unfollow" class="video-unfollow"
@click.stop="handleCollect()" @click.stop="handleCollect()"
>关注 >关注
</div> </div>
</div> </div>
<div class="action-item"> <div class="action-item">
<img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" /> <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
<span>聚焦</span> <span>聚焦</span>
@@ -39,20 +39,20 @@
<img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" /> <img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" />
<img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" /> <img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" />
<img <img
class="pause" class="pause"
src="@/assets/images/pause.png" src="@/assets/images/pause.png"
title="停止操作" title="停止操作"
@click="handleAction(STOP)" @click="handleAction(STOP)"
/> />
<img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" /> <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
<img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" /> <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
</div> </div>
<div class="action-item"> <div class="action-item">
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-if="isDiy==0">收藏</div> <div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==0">收藏</div>
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-else="isDiy==1">取消收藏</div> <div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==1">取消收藏</div>
</div> </div>
</div> </div>
</div> </div>
<img class="close" src="@/assets/images/close.png" @click="handleClose" /> <img class="close" src="@/assets/images/close.png" @click="handleClose" />
@@ -61,246 +61,254 @@
</template> </template>
<script setup> <script setup>
import Hls from 'hls.js' import Hls from 'hls.js'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor' import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
import { getColletDiyApi } from '@/api/home' import { getColletDiyApi } from '@/api/home'
import pubSub from 'pubsub-js' import pubSub from 'pubsub-js'
const Z00M_IN = 'ZOOM_IN' // 焦距变大 // const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小 // const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const UP = 'UP' // 上转 // const UP = 'UP' // 上转
const DOWN = 'DOWN' // 下转 // const DOWN = 'DOWN' // 下转
const LEFT = 'LEFT' // 左转 // const LEFT = 'LEFT' // 左转
const RIGHT = 'RIGHT' // 右转 // const RIGHT = 'RIGHT' // 右转
const STOP = 'STOP' // 停止操作 // const STOP = 'STOP' // 停止操作
let ACTION = '0' const Z00M_IN = 'zoomin' // 焦距变大
let command = ref('') 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('')
const props = defineProps({ const props = defineProps({
src: { src: {
type: String, type: String,
default: '' default: ''
}, },
cameraIndexCode: { cameraIndexCode: {
type: String, type: String,
default: '' default: ''
}, },
isCollect:{ isCollect:{
type: Number, type: Number,
default: 0 default: 0
}, },
isDiy:{ isDiy:{
type: Number, type: Number,
default: 0 default: 0
} }
}) })
let modelValue = defineModel() let modelValue = defineModel()
let videoRef = ref() let videoRef = ref()
let webRtcServer = null let webRtcServer = null
let hlsRef = null let hlsRef = null
let colletCond = ref(props.isCollect) let colletCond = ref(props.isCollect)
let isDayCurr = ref(props.isDiy) let isDayCurr = ref(props.isDiy)
watch( watch(
() =>modelValue.value, () =>modelValue.value,
(val) => { (val) => {
// colletCond.value = props.isCollect colletCond.value = props.isCollect
// isDayCurr.value = props.isDiy isDayCurr.value = props.isDiy
console.log(props.isDiy,'val[0].value') console.log(props.isDiy,'val[0].value')
}, },
{ {
immediate: true immediate: true
} }
) )
const emit = defineEmits(['isDiyChange']); const emit = defineEmits(['isDiyChange']);
// 收藏 // 收藏
const handleCollectAdd = async (id, status, index) => { const handleCollectAdd = async () => {
await getColletDiyApi({ await getColletDiyApi({
cameraIndexCode:props.cameraIndexCode, cameraIndexCode:props.cameraIndexCode,
isDiy: props.isDiy == 0 ? 1 : 0 isDiy: props.isDiy == 0 ? 1 : 0
}) })
if(props.isDiy==1){ if(props.isDiy==1){
isDayCurr.value=0 isDayCurr.value=0
// modelValue.value = false // modelValue.value = false
}else{ }else{
isDayCurr.value=1 isDayCurr.value=1
}
emit('isDiyChange', isDayCurr.value);
pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
} }
// 关注 emit('isDiyChange', isDayCurr.value);
const handleCollect = async (id, status, index) => { pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
await postVideoCollectApi({
cameraIndexCode:props.cameraIndexCode, }
isCollect: colletCond.value == 0 ? 1 : 0 // 关注
}) const handleCollect = async (id, status, index) => {
await postVideoCollectApi({
if (colletCond.value == 0) { cameraIndexCode:props.cameraIndexCode,
colletCond.value = 1 isCollect: colletCond.value == 0 ? 1 : 0
} else { })
colletCond.value = 0
modelValue.value = false if (colletCond.value == 0) {
} colletCond.value = 1
pubSub.publish('videoCollect', props.cameraIndexCode) } else {
colletCond.value = 0
}
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
} else {
ACTION = '0'
command.value = e
}
await postVideoControlApi({
command: command.value,
action: ACTION,
cameraIndexCode: props.cameraIndexCode
})
if (e == STOP) {
command.value = ''
}
ElMessage({
message: '操作成功',
type: 'success'
})
}
const handleClose = () => {
if (hlsRef) {
hlsRef.destroy()
hlsRef = null
}
modelValue.value = false modelValue.value = false
} }
const init = () => { pubSub.publish('videoCollect', props.cameraIndexCode)
hlsRef = new Hls({
enableWorker: false, // 禁用 Worker 来避免额外的线程 }
enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求 const handleAction = async (e) => {
cache: true, // 启用缓存 if (e == STOP) {
maxBufferLength: 10, // 最大缓冲长度（秒） ACTION = '1'
maxMaxBufferLength: 15, // 缓冲区长度的上限 command.value = e
maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节） } else {
}) ACTION = '0'
hlsRef.loadSource(props.src) command.value = e
hlsRef.attachMedia(videoRef.value)
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play()
})
hlsRef.on(Hls.Events.ERROR, (event, data) => {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
hlsRef.startLoad()
break
case Hls.ErrorTypes.MEDIA_ERROR:
hlsRef.recoverMediaError()
break
default:
hlsRef.destroy()
break
}
}
})
} }
await postVideoControlApi({
onMounted(()=>{ command: command.value,
action: ACTION,
cameraIndexCode: props.cameraIndexCode
}) })
if (e == STOP) {
command.value = ''
}
ElMessage({
message: '操作成功',
type: 'success'
})
}
const handleClose = () => {
if (hlsRef) {
hlsRef.destroy()
hlsRef = null
}
modelValue.value = false
}
const init = () => {
hlsRef = new Hls({
enableWorker: false, // 禁用 Worker 来避免额外的线程
enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
cache: true, // 启用缓存
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
})
hlsRef.loadSource(props.src)
hlsRef.attachMedia(videoRef.value)
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play()
})
hlsRef.on(Hls.Events.ERROR, (event, data) => {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
hlsRef.startLoad()
break
case Hls.ErrorTypes.MEDIA_ERROR:
hlsRef.recoverMediaError()
break
default:
hlsRef.destroy()
break
}
}
})
}
onMounted(()=>{
})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.video-follow,.video-unfollow { .video-follow,.video-unfollow {
// cursor: pointer; // cursor: pointer;
// display: none; // display: none;
// position: absolute; // position: absolute;
// right: vw(8); // right: vw(8);
// top: vw(8); // top: vw(8);
// z-index: 9999; // z-index: 9999;
// margin-left:vw(20); // margin-left:vw(20);
padding: vw(10); padding: vw(10);
// height: vh(24); // height: vh(24);
text-align: center; text-align: center;
// line-height: vh(24); // line-height: vh(24);
font-weight: 400; font-weight: 400;
font-size: font-vw(18); font-size: vw(16);
color: #ffffff; color: #ffffff;
// background-image: url('@/assets/images/unfollow.png'); // background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.video-item__follow { .video-item__follow {
// background-image: url('@/assets/images/unfollow.png'); // background-image: url('@/assets/images/unfollow.png');
} }
.dialog { .dialog {
z-index: 9999; z-index: 9999;
.action { .action {
&-box { &-box {
margin-top: vh(16); margin-top: vh(16);
gap: vw(20); gap: vw(20);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
&-item {
padding: vw(16);
display: flex;
align-items: center;
background: #0a4190;
border-radius: vw(8);
> img {
cursor: pointer;
width: vw(34);
height: auto;
} }
&-item { > span {
padding: vw(16); margin: 0 vw(16);
display: flex; font-weight: 400;
align-items: center; font-size: vw(16);
background: #0a4190; color: #ffffff;
border-radius: vw(8); }
> img { .pause {
cursor: pointer; margin: 0 vw(10);
width: vw(34);
height: auto;
}
> span {
margin: 0 vw(16);
font-weight: 400;
font-size: font-vw(16);
color: #ffffff;
}
.pause {
margin: 0 vw(10);
}
} }
}
.none {
position: absolute;
left: 50%;
top: 50%;
width: vw(1814);
height: vw(980);
color: #fff;
font-weight: bold;
font-size: font-vw(30);
transform: translate(-50%, -50%);
z-index: 999;
}
:deep(.el-dialog) {
position: relative;
width: vw(1940);
background: transparent !important;
}
.dialog-box {
padding: vw(40) vw(30) vw(30) vw(30);
background-image: url('@/assets/images/video-bg.png');
background-size: 100% 100%;
}
:deep(.el-dialog__header) {
padding-bottom: 0 !important;
}
.video {
width: vw(1814);
height: vw(920);
object-fit: contain;
background-color: #062b57;
}
.close {
cursor: pointer;
position: absolute;
right: vw(70);
top: vw(80);
width: vw(60);
z-index: 9999;
} }
} }
.none {
position: absolute;
left: 50%;
top: 50%;
width: vw(1814);
height: vw(980);
color: #fff;
font-weight: bold;
font-size: vw(30);
transform: translate(-50%, -50%);
z-index: 999;
}
:deep(.el-dialog) {
position: relative;
width: vw(1940);
background: transparent !important;
}
.dialog-box {
padding: vw(40) vw(30) vw(30) vw(30);
background-image: url('@/assets/images/video-bg.png');
background-size: 100% 100%;
}
:deep(.el-dialog__header) {
padding-bottom: 0 !important;
}
.video {
width: vw(1814);
height: vw(920);
object-fit: contain;
background-color: #062b57;
}
.close {
cursor: pointer;
position: absolute;
right: vw(70);
top: vw(80);
width: vw(60);
z-index: 9999;
}
}
</style> </style>

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

@@ -12,7 +12,7 @@
@click="handleItem(item)" @click="handleItem(item)"
> >
<div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div> <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" /> <source type="application/x-mpegURL" />
</video> </video>
<p> <p>
@@ -36,13 +36,14 @@
</template> </template>
<script setup> <script setup>
import { getVideoListApi,getColletListApi } from '@/api/home' import { getPreviewUrlApi,getColletListApi } from '@/api/home'
import { postVideoCollectApi } from '@/api/monitor' import { postVideoCollectApi } from '@/api/monitor'
import primary from '@/assets/images/item-primary.png' import primary from '@/assets/images/item-primary.png'
import Hls from 'hls.js' import Hls from 'hls.js'
import pubSub from 'pubsub-js' import pubSub from 'pubsub-js'
import mpegtsjs from "mpegts.js";
let modelValue = defineModel() let modelValue = defineModel()
let isCollect = ref(0) let isCollect = ref(0)
@@ -110,27 +111,78 @@
list.value = [] list.value = []
getVideoList() 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();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 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 () => { const getVideoList = async () => {
let res = await getColletListApi(params) let res = await getColletListApi(params)
list.value = res.data list.value = res.data
total.value = res.total total.value = res.total
nextTick(() => { nextTick(() => {
list.value.forEach(async (item, index) => { list.value.forEach(async (item, index) => {
var video = document.getElementById(`video${index}`) var video = document.getElementById(`videoall${index}`)
const hls = new Hls({ createPlayer(item.cameraIndexCode,video);
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)
}) })
}) })
} }

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

@@ -16,7 +16,7 @@
<p class="item-title--primary"> <p class="item-title--primary">
{{ item.cameraName || item.cameraIndexCode }} {{ item.cameraName || item.cameraIndexCode }}
</p> </p>
<video <video
class="item-img" class="item-img"
:id="'video' + index" :id="'video' + index"
@@ -82,12 +82,12 @@ let isCollect = ref(0)
} }
const postVideoRemain = () => { const postVideoRemain = () => {
timer = setInterval(() => { // timer = setInterval(() => {
if(!list.value.length) return false; // if(!list.value.length) return false;
postVideoRemainApi({ // postVideoRemainApi({
cameraIndexCode: list.value.map((item) => item.cameraIndexCode) // cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
}) // })
}, 1500) // }, 1500)
} }
const getPreviewUrl = async (code) => { const getPreviewUrl = async (code) => {
@@ -166,9 +166,9 @@ let isCollect = ref(0)
pubSub.subscribe('videoIsDiy', (msg, data) => { pubSub.subscribe('videoIsDiy', (msg, data) => {
console.log(data,'收藏 ++++++++++++++') console.log(data,'收藏 ++++++++++++++')
getVideoList() getVideoList()
}) })
}) })

5
src/layout/components/Header/index.vue
View File

@@ -96,12 +96,12 @@
</div> </div>
</div> </div>
<!-- <div class="amplify" @click="handleAmplify"> <!-- <div class="amplify" @click="handleAmplify">
<img class="icon-qp" src="@/assets/images/qping.png" alt="" /> <img class="icon-qp" src="@/assets/images/qping.png" alt="" />
</div> --> </div> -->
<all-list v-model="allShow" /> <all-list v-model="allShow" />
</template> </template>
<script> <script>
</script> </script>
<script setup> <script setup>
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
@@ -471,6 +471,7 @@
} }
.btn-all{ .btn-all{
position: absolute; position: absolute;
cursor: pointer;
left: vw(140); left: vw(140);
top: vh(30); top: vh(30);
min-width: vw(180); min-width: vw(180);

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

@@ -7,19 +7,19 @@
</div> --> </div> -->
<div class="type-item" v-for="(item,index) in videoList"> <div class="type-item" v-for="(item,index) in videoList">
<div class="type-title">{{item.label}}</div> <div class="type-title">{{item.label}}</div>
<draggable <draggable
:data-item-index="index" :data-item-index="index"
class="item-element" class="item-element"
:item-key="item.key" :item-key="item.key"
:list="item.videos" :list="item.videos"
ghost-class="ghost" ghost-class="ghost"
:force-fallback="true" chosen-class="chosenClass" animation="300" :force-fallback="true" chosen-class="chosenClass" animation="300"
@start="onStart" @end="onEnd"> @start="onStart" @end="onEnd">
<template #item="{ element }"> <template #item="{ element }">
<div class="video-item" :style="{ <div class="video-item" :style="{
width:(100/grad)+'%' width:(100/grad)+'%'
}"> }">
<div class="video-item__inner" @click.stop="handleCamera(element.cameraIndexCode,element,index)"> <div class="video-item__inner" @click.stop="handleCamera(element.cameraIndexCode,element,index)">
<div <div
v-if="element.isDiy == 1" v-if="element.isDiy == 1"
@@ -42,15 +42,15 @@
:controls="false" :controls="false"
/> />
<p class="video-item__title--primary"> <p class="video-item__title--primary">
{{ element.cameraName || element.scenicAreaId }} {{ element.cameraName || element.cameraIndexCode }}
</p> </p>
</div> </div>
</div> </div>
</template> </template>
</draggable> </draggable>
</div> </div>
</div> </div>
<!-- <div class="pagination"> <!-- <div class="pagination">
<el-pagination <el-pagination
@@ -80,287 +80,346 @@
</template> </template>
<script setup> <script setup>
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home' import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
import { import {
getVideoTypeApi, getVideoTypeApi,
getVideoRegionsApi, getVideoRegionsApi,
postVideoRemainApi, postVideoRemainApi,
postVideoControlApi, postVideoControlApi,
postVideoCollectApi postVideoCollectApi
} from '@/api/monitor' } from '@/api/monitor'
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
import pubSub from 'pubsub-js' import pubSub from 'pubsub-js'
import Hls from 'hls.js' import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png' import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash' import { debounce } from 'lodash'
const Z00M_IN = 'ZOOM_IN' // 焦距变大 import mpegtsjs from "mpegts.js";
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小 // const Z00M_IN = 'ZOOM_IN' // 焦距变大
const UP = 'UP' // 上转 // const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const DOWN = 'DOWN' // 下转 // const UP = 'UP' // 上转
const LEFT = 'LEFT' // 左转 // const DOWN = 'DOWN' // 下转
const RIGHT = 'RIGHT' // 右转 // const LEFT = 'LEFT' // 左转
const STOP = 'STOP' // 停止操作 // const RIGHT = 'RIGHT' // 右转
let cond = ref(false) // const STOP = 'STOP' // 停止操作
let ACTION = '0' const Z00M_IN = 'zoomin' // 焦距变大
let hlsRefs = [] const Z00M_OUT = 'zoomout' // 焦距变小
let hlsRef = null const UP = 'up' // 上转
let timer = null const DOWN = 'down' // 下转
let videoLog = ref(1) const LEFT = 'left' // 左转
let videoList = ref([]) const RIGHT = 'right' // 右转
let cameraIndexCode = ref('') const STOP = 'stop' // 停止操作
let videoRef = ref() let cond = ref(false)
let monitorChange = null let ACTION = '0'
let total = ref(0) let hlsRefs = []
let loading = ref(false) let hlsRef = null
let command = ref('') let timer = null
let cameraName = ref('') let videoLog = ref(1)
let regionList = ref() let videoList = ref([])
let params = reactive({ let cameraIndexCode = ref('')
businessScenicArea: "", let videoRef = ref()
cameraName: "", let monitorChange = null
pageNum: 1, let total = ref(0)
pageSize: 6, let loading = ref(false)
}) let command = ref('')
let grad = ref(3) let cameraName = ref('')
let show = ref(false) let regionList = ref()
const onMonitorChange = () => { let params = reactive({
monitorChange = pubSub.subscribe('hotelChange', (res, data) => { businessScenicArea: "",
params.businessScenicArea = data.name cameraName: "",
params.pageNum = 1 pageNum: 1,
videoList.value = [] pageSize: 6,
total.value = 0 })
cond.value = false let grad = ref(3)
getRegionsList() let show = ref(false)
}) const onMonitorChange = () => {
} monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
//弹窗收藏监听 params.businessScenicArea = data.name
const isDiyChange = (val)=>{ params.pageNum = 1
console.log(val,11222) videoList.value = []
isDiy.value = val total.value = 0
if(!val){ cond.value = false
show.value = false getRegionsList()
videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value); })
} }
// videoList.value[diyIndex.value].videos.forEach(async (it, i) => { //弹窗收藏监听
const isDiyChange = (val)=>{
// if(it.cameraIndexCode == cameraIndexCode.value){ console.log(val,11222)
// it.isDiy = val isDiy.value = val
// } if(!val){
// }) show.value = false
} videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
const onStart = (res)=>{ }
// videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
}
const onEnd = (evt)=>{
const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
getVideCollectCateSort({
key:videoList.value[itemIndex].key,
cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
}).then((ress)=>{
// getVideCollectCateList()
})
// postVideoRemain()
initVideo()
}
// 获取关注列表
const getVideCollectCateList = async () => {
clearHlsRefs()
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){
grad.value = 2
}else{
grad.value = 1
}
postVideoRemain()
// total.value = res.total
initVideo()
}
// 收藏
const handleCollect = async (id, status, index,element) => {
await getColletDiyApi({
cameraIndexCode:id,
isDiy: status == 0 ? 1 : 0
})
if (status == 0) {
element.isDiy = 1
} else {
videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
console.log('取消收藏',)
element.isDiy = 0
show.value = false
}
// pubSub.publish('videoCollect', id)
}
// 采集
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
} else {
ACTION = '0'
command.value = e
}
await postVideoControlApi({
action: ACTION,
command: command.value,
cameraIndexCode: cameraIndexCode.value
})
if (e == STOP) {
command.value = ''
}
ElMessage({
message: '操作成功',
type: 'success'
})
}
// 返回列表
const handleBack = () => {
videoLog.value = 1
hlsRef.destroy()
initVideo()
}
let isCollect = ref(0)
let isDiy = ref(0)
let videoSrc = ref('')
let diyIndex = ref(null)
const handleCamera = async (itemCode,resource,index) => {
diyIndex.value = index
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
cameraIndexCode:itemCode
})
cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
// 分页
const currentChange = (e) => {
clearHlsRefs()
videoList.value = []
getRegionsList()
}
let thisVideo = ref(null) // if(it.cameraIndexCode == cameraIndexCode.value){
const handleItemVideo = (url, type, code,item) => { // it.isDiy = val
thisVideo.value = item // }
videoLog.value = 2 // })
cameraIndexCode.value = code }
setTimeout(() => { const onStart = (res)=>{
hlsRef = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒） }
maxMaxBufferLength: 15, // 缓冲区长度的上限 const onEnd = (evt)=>{
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节） const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
}) getVideCollectCateSort({
hlsRef.loadSource(url) key:videoList.value[itemIndex].key,
hlsRef.attachMedia(videoRef.value) cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => { }).then((ress)=>{
videoRef.value.play()
}) // getVideCollectCateList()
if (type == 100) initVideo() })
}, 1000) // postVideoRemain()
} initVideo()
const initVideo = () => { }
clearHlsRefs() // 获取关注列表
nextTick(() => { const getVideCollectCateList = async () => {
videoList.value.forEach(async (it, i) => { clearHlsRefs()
params.businessVideoDisplayPosition = ''
it.videos.forEach((item,index)=>{ let res = await getVideCollectCate(params)
setTimeout(() => { videoList.value = res.data
const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`) if(videoList.value.length<=3){
if(item.hlsUrl){ grad.value = 3
const hls = new Hls({ }else if(videoList.value.length<=6){
maxBufferLength: 10, // 最大缓冲长度（秒） grad.value = 2
maxMaxBufferLength: 15, // 缓冲区长度的上限 }else{
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节） grad.value = 1
}) }
hls.loadSource(item.hlsUrl) postVideoRemain()
hls.attachMedia(video) // total.value = res.total
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play() initVideo()
}) }
hlsRefs.push(hls) // 收藏
} const handleCollect = async (id, status, index,element) => {
}, 1000) await getColletDiyApi({
cameraIndexCode:id,
}) isDiy: status == 0 ? 1 : 0
})
}) if (status == 0) {
})
} element.isDiy = 1
watch(
() => videoList.value, } else {
(val) => {
if (val.length) { videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
postVideoRemain() console.log('取消收藏',)
} element.isDiy = 0
}, show.value = false
{ immediate: true } }
) // pubSub.publish('videoCollect', id)
// 更新视频 }
const postVideoRemain = async () => { // 采集
timer = setInterval(() => { const handleAction = async (e) => {
clearInterval(timer) if (e == STOP) {
videoList.value.forEach((items,index)=>{ ACTION = '1'
setTimeout(()=>{ command.value = e
postVideoRemainApi({ } else {
cameraIndexCode: items.videos.map((item) => item.cameraIndexCode) ACTION = '0'
}) command.value = e
},1500) }
await postVideoControlApi({
}) action: ACTION,
command: command.value,
}, 1500) cameraIndexCode: cameraIndexCode.value
} })
const getVideoRegions = async () => { if (e == STOP) {
let res = await getVideoRegionsApi({ command.value = ''
cameraName: cameraName.value, }
businessScenicArea: params.businessScenicArea ElMessage({
}) message: '操作成功',
console.log(res,11111111111111) type: 'success'
regionList.value = res.data })
regionList.value.forEach((item,index)=>{ }
// item.show = true // 返回列表
item.videoResources=item.resourcesList[0].videoResources const handleBack = () => {
}) videoLog.value = 1
regionList.value[0].show = true hlsRef.destroy()
initVideo()
} }
const handleRegions = (e) => { let isCollect = ref(0)
regionList.value[e].show = !regionList.value[e].show let isDiy = ref(0)
} let videoSrc = ref('')
const onInput = debounce((e) => { let diyIndex = ref(null)
getVideoRegions() const handleCamera = async (itemCode,resource,index) => {
}, 500) diyIndex.value = index
let hotelChange = null; show.value = true
onMounted(()=>{ let res = await getPreviewUrlApi({
getVideCollectCateList() type: 'hls',
console.log(draggable,'draggable') cameraIndexCode:itemCode
}) })
onUnmounted(() => { cameraIndexCode.value = itemCode;
if (timer) clearInterval(timer) isCollect.value = resource.isCollect
clearHlsRefs() isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}) }
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
// 分页
const currentChange = (e) => {
clearHlsRefs()
videoList.value = []
getRegionsList()
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
hlsRef = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hlsRef.loadSource(url)
hlsRef.attachMedia(videoRef.value)
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play()
})
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();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 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(() => {
videoList.value.forEach(async (it, i) => {
it.videos.forEach((item,index)=>{
setTimeout(() => {
const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
createPlayer(item.cameraIndexCode,video);
}, 1000)
})
})
})
}
watch(
() => videoList.value,
(val) => {
if (val.length) {
postVideoRemain()
}
},
{ immediate: true }
)
// 更新视频
const postVideoRemain = async () => {
// timer = setInterval(() => {
// clearInterval(timer)
// videoList.value.forEach((items,index)=>{
// setTimeout(()=>{
// postVideoRemainApi({
// cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
// })
// },1500)
//
// })
//
// }, 1500)
}
const getVideoRegions = async () => {
let res = await getVideoRegionsApi({
cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea
})
regionList.value = res.data
regionList.value.forEach((item,index)=>{
// item.show = true
item.videoResources=item.resourcesList[0].videoResources
})
regionList.value[0].show = true
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
}
const onInput = debounce((e) => {
getVideoRegions()
}, 500)
let hotelChange = null;
onMounted(()=>{
getVideCollectCateList()
console.log(draggable,'draggable')
})
onUnmounted(() => {
if (timer) clearInterval(timer)
clearHlsRefs()
})
</script> </script>
<style></style> <style></style>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -393,7 +452,7 @@
} }
overflow: auto; overflow: auto;
} }
.type-title{ .type-title{
position:absolute; position:absolute;
left:vw(-5); left:vw(-5);

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

@@ -26,7 +26,7 @@
<el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" /> <el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" /> <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
</div> </div>
<div class="tree-box"> <div class="tree-box">
<div class="tree-item" v-for="(item, i) in regionList" :key="i"> <div class="tree-item" v-for="(item, i) in regionList" :key="i">
<div class="tree-item__node" @click="handleRegions(i)"> <div class="tree-item__node" @click="handleRegions(i)">
@@ -78,7 +78,7 @@
</div> </div>
<video <video
class="video-item__video" class="video-item__video"
:id="'monitorVideo' + index" :id="'hotelmonitorVideo' + index"
preload="auto" preload="auto"
muted muted
autoplay autoplay
@@ -91,7 +91,7 @@
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@@ -154,7 +154,7 @@
</p> </p>
<video <video
class="item-img" class="item-img"
:id="'monitorVideo' + index" :id="'hotelmonitorVideo' + index"
muted muted
autoplay autoplay
:controls="false" :controls="false"
@@ -184,281 +184,347 @@
</template> </template>
<script setup> <script setup>
import { getRegionsListApi,getPreviewUrlApi } from '@/api/home' import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
import { import {
getVideoTypeApi, getVideoTypeApi,
getVideoRegionsApi, getVideoRegionsApi,
postVideoRemainApi, postVideoRemainApi,
postVideoControlApi, postVideoControlApi,
postVideoCollectApi postVideoCollectApi
} from '@/api/monitor' } from '@/api/monitor'
import pubSub from 'pubsub-js' import draggable from 'vuedraggable';
import Hls from 'hls.js' import pubSub from 'pubsub-js'
import emptyIco from '@/assets/images/n-icon.png' import Hls from 'hls.js'
import { debounce } from 'lodash' import emptyIco from '@/assets/images/n-icon.png'
const Z00M_IN = 'ZOOM_IN' // 焦距变大 import { debounce } from 'lodash'
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小 import mpegtsjs from "mpegts.js";
const UP = 'UP' // 上转 // const Z00M_IN = 'ZOOM_IN' // 焦距变大
const DOWN = 'DOWN' // 下转 // const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const LEFT = 'LEFT' // 左转 // const UP = 'UP' // 上转
const RIGHT = 'RIGHT' // 右转 // const DOWN = 'DOWN' // 下转
const STOP = 'STOP' // 停止操作 // const LEFT = 'LEFT' // 左转
let cond = ref(false) // const RIGHT = 'RIGHT' // 右转
let ACTION = '0' // const STOP = 'STOP' // 停止操作
let hlsRefs = [] const Z00M_IN = 'zoomin' // 焦距变大
let hlsRef = null const Z00M_OUT = 'zoomout' // 焦距变小
let timer = null const UP = 'up' // 上转
let videoLog = ref(1) const DOWN = 'down' // 下转
let videoList = ref([]) const LEFT = 'left' // 左转
let cameraIndexCode = ref('') const RIGHT = 'right' // 右转
let videoRef = ref() const STOP = 'stop' // 停止操作
let monitorChange = null let cond = ref(false)
let total = ref(0) let ACTION = '0'
let loading = ref(false) let hlsRefs = []
let command = ref('') let hlsRef = null
let cameraName = ref('') let timer = null
let regionList = ref() let videoLog = ref(1)
let params = reactive({ let videoList = ref([])
businessScenicArea: "", let cameraIndexCode = ref('')
cameraName: "", let videoRef = ref()
pageNum: 1, let monitorChange = null
pageSize: 6, let total = ref(0)
}) let loading = ref(false)
let show = ref(false) let command = ref('')
const onMonitorChange = () => { let cameraName = ref('')
monitorChange = pubSub.subscribe('hotelChange', (res, data) => { let regionList = ref()
params.businessScenicArea = data.name let params = reactive({
params.pageNum = 1 businessScenicArea: "",
videoList.value = [] cameraName: "",
total.value = 0 pageNum: 1,
cond.value = false pageSize: 6,
getRegionsList() })
}) let grad = ref(3)
} let show = ref(false)
// 关注 const onMonitorChange = () => {
const handleCollect = async (id, status, index) => { monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
await postVideoCollectApi({ params.businessScenicArea = data.name
cameraIndexCode:id, params.pageNum = 1
isCollect: status == 0 ? 1 : 0 videoList.value = []
}) total.value = 0
if (status == 0) { cond.value = false
thisVideo.value.isCollect=1 getRegionsList()
videoList.value[index].isCollect = 1 })
}
} else { //弹窗收藏监听
thisVideo.value.isCollect=0 const isDiyChange = (val)=>{
videoList.value[index].isCollect = 0 console.log(val,11222)
} isDiy.value = val
pubSub.publish('videoCollect', id) if(!val){
} show.value = false
// 采集 videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
const handleAction = async (e) => { }
if (e == STOP) { // videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
ACTION = '1'
} else {
ACTION = '0'
command.value = e
}
await postVideoControlApi({
action: ACTION,
command: command.value,
cameraIndexCode: cameraIndexCode.value
})
if (e == STOP) {
command.value = ''
}
ElMessage({
message: '操作成功',
type: 'success'
})
}
// 返回列表
const handleBack = () => {
videoLog.value = 1
hlsRef.destroy()
initVideo()
}
let isCollect = ref(0)
let isDiy = ref(0)
let videoSrc = ref('')
const handleCamera = async (itemCode,resource) => {
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
cameraIndexCode:itemCode
})
cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
// 分页
const currentChange = (e) => {
clearHlsRefs()
videoList.value = []
getRegionsList()
}
//获取酒店视频列表
const getRegionsList = async()=>{
clearHlsRefs()
videoLog.value = 1
try {
if (loading.value) return
let res = await getRegionsListApi({...params})
if (res.data.length > 0) {
videoList.value = res.data
cond.value = true
total.value = res.total
nextTick(() => {
if(!videoList.value.length) return false
videoList.value.forEach(async (x, index) => {
const video = document.getElementById(`monitorVideo${index}`)
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)
})
})
} else {
videoList.value = []
cond.value = true
if (timer) clearInterval(timer)
}
loading.value = false
}catch (error) {
loading.value = false
}
} // if(it.cameraIndexCode == cameraIndexCode.value){
let thisVideo = ref(null) // it.isDiy = val
const handleItemVideo = (url, type, code,item) => { // }
thisVideo.value = item // })
videoLog.value = 2 }
cameraIndexCode.value = code const onStart = (res)=>{
setTimeout(() => {
hlsRef = new Hls({ }
maxBufferLength: 10, // 最大缓冲长度（秒） const onEnd = (evt)=>{
maxMaxBufferLength: 15, // 缓冲区长度的上限 const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节） getVideCollectCateSort({
}) key:videoList.value[itemIndex].key,
hlsRef.loadSource(url) cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
hlsRef.attachMedia(videoRef.value) }).then((ress)=>{
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play() // getVideCollectCateList()
}) })
if (type == 100) initVideo() // postVideoRemain()
}, 1000) initVideo()
} }
const initVideo = () => { // 获取关注列表
clearHlsRefs() const getVideCollectCateList = async () => {
nextTick(() => { clearHlsRefs()
videoList.value.forEach(async (item, index) => { params.businessVideoDisplayPosition = ''
const video = document.getElementById(`monitorVideo${index}`) let res = await getVideCollectCate(params)
const hls = new Hls({ videoList.value = res.data
maxBufferLength: 10, // 最大缓冲长度（秒） if(videoList.value.length<=3){
maxMaxBufferLength: 15, // 缓冲区长度的上限 grad.value = 3
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节） }else if(videoList.value.length<=6){
}) grad.value = 2
hls.loadSource(item.hlsUrl) }else{
hls.attachMedia(video) grad.value = 1
hls.on(Hls.Events.MANIFEST_PARSED, () => { }
video.play() postVideoRemain()
}) // total.value = res.total
hlsRefs.push(hls)
}) initVideo()
}) }
} // 收藏
watch( const handleCollect = async (id, status, index,element) => {
() => videoList.value, await getColletDiyApi({
(val) => { cameraIndexCode:id,
if (val.length) { isDiy: status == 0 ? 1 : 0
postVideoRemain() })
} if (status == 0) {
},
{ immediate: true } element.isDiy = 1
)
// 更新视频 } else {
const postVideoRemain = async () => {
timer = setInterval(() => { videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
postVideoRemainApi({ console.log('取消收藏',)
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode) element.isDiy = 0
}) show.value = false
}, 1500) }
} // pubSub.publish('videoCollect', id)
const getVideoRegions = async () => { }
let res = await getVideoRegionsApi({ // 采集
cameraName: cameraName.value, const handleAction = async (e) => {
businessScenicArea: params.businessScenicArea if (e == STOP) {
}) ACTION = '1'
console.log(res,11111111111111) command.value = e
regionList.value = res.data } else {
regionList.value.forEach((item,index)=>{ ACTION = '0'
// item.show = true command.value = e
item.videoResources=item.resourcesList[0].videoResources }
}) await postVideoControlApi({
regionList.value[0].show = true action: ACTION,
command: command.value,
} cameraIndexCode: cameraIndexCode.value
const handleRegions = (e) => { })
regionList.value[e].show = !regionList.value[e].show if (e == STOP) {
} command.value = ''
const onInput = debounce((e) => { }
getVideoRegions() ElMessage({
}, 500) message: '操作成功',
let hotelChange = null; type: 'success'
onMounted(()=>{ })
hotelChange = pubSub.subscribe('hotelChange', (msg, data) => { }
cameraName.value = '' // 返回列表
params.businessScenicArea = data.name const handleBack = () => {
getVideoRegions() videoLog.value = 1
hlsRef.destroy()
}) initVideo()
onMonitorChange() }
let isCollect = ref(0)
}) let isDiy = ref(0)
onUnmounted(() => { let videoSrc = ref('')
clearHlsRefs() let diyIndex = ref(null)
if (hotelChange) pubSub.unsubscribe(hotelChange) const handleCamera = async (itemCode,resource,index) => {
if (timer) clearInterval(timer) diyIndex.value = index
pubSub.unsubscribe(monitorChange) show.value = true
}) let res = await getPreviewUrlApi({
type: 'hls',
cameraIndexCode:itemCode
})
cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
// 分页
const currentChange = (e) => {
clearHlsRefs()
videoList.value = []
getRegionsList()
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
hlsRef = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hlsRef.loadSource(url)
hlsRef.attachMedia(videoRef.value)
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play()
})
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();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 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(() => {
videoList.value.forEach(async (it, i) => {
it.videos.forEach((item,index)=>{
setTimeout(() => {
const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
createPlayer(item.cameraIndexCode,video);
}, 1000)
})
})
})
}
watch(
() => videoList.value,
(val) => {
if (val.length) {
postVideoRemain()
}
},
{ immediate: true }
)
// 更新视频
const postVideoRemain = async () => {
// timer = setInterval(() => {
// clearInterval(timer)
// videoList.value.forEach((items,index)=>{
// setTimeout(()=>{
// postVideoRemainApi({
// cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
// })
// },1500)
//
// })
//
// }, 1500)
}
const getVideoRegions = async () => {
let res = await getVideoRegionsApi({
cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea
})
console.log(res,11111111111111)
regionList.value = res.data
regionList.value.forEach((item,index)=>{
// item.show = true
item.videoResources=item.resourcesList[0].videoResources
})
regionList.value[0].show = true
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
}
const onInput = debounce((e) => {
getVideoRegions()
}, 500)
let hotelChange = null;
onMounted(()=>{
getVideCollectCateList()
console.log(draggable,'draggable')
})
onUnmounted(() => {
if (timer) clearInterval(timer)
clearHlsRefs()
})
</script> </script>
<style></style> <style></style>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -506,7 +572,7 @@
} }
} }
.video-box { .video-box {
display: flex; display: flex;
flex: 1; flex: 1;
flex: 1; flex: 1;