类型：开发
描述：
This commit is contained in:
@@ -1,167 +1,190 @@
|
||||
<template>
|
||||
<div v-show="isActive" class="myVideo-container">
|
||||
<video
|
||||
class="myVideo"
|
||||
ref="videoElement"
|
||||
muted
|
||||
playsinline
|
||||
:controls="false"
|
||||
disablePictureInPicture
|
||||
class="myVideo"
|
||||
id="video"
|
||||
ref="videoElement"
|
||||
muted
|
||||
playsinline
|
||||
:controls="false"
|
||||
disablePictureInPicture
|
||||
></video>
|
||||
<!-- <div v-if="loading" class="loading-overlay pointer-events-none">
|
||||
<div class="loading-text">{{ loadingText }}</div>
|
||||
</div> -->
|
||||
<!-- <div v-if="loading" class="loading-overlay pointer-events-none">
|
||||
<div class="loading-text">{{ loadingText }}</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Hls from 'hls.js'
|
||||
|
||||
export default {
|
||||
name: 'HlsPlayer',
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: '100%'
|
||||
import Hls from 'hls.js'
|
||||
import mpegtsjs from 'mpegts.js'
|
||||
export default {
|
||||
name: 'HlsPlayer',
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
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
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hls: null,
|
||||
video: null,
|
||||
loading: false,
|
||||
loadingText: '加载中...',
|
||||
retryCount: 0,
|
||||
maxRetries: 3,
|
||||
isReady: false,
|
||||
playAttempts: 0,
|
||||
maxPlayAttempts: 3,
|
||||
cleanupTimeout: null
|
||||
if (this.height) {
|
||||
style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
videoStyle() {
|
||||
const style = {}
|
||||
if (this.width) {
|
||||
style.width = typeof this.width === 'number' ? `${this.width}px` : this.width
|
||||
}
|
||||
if (this.height) {
|
||||
style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
|
||||
}
|
||||
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) {
|
||||
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()
|
||||
}
|
||||
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({
|
||||
// 内存优化配置
|
||||
maxBufferSize: 0, // 降低缓冲区大小（15MB）
|
||||
@@ -199,154 +222,156 @@
|
||||
this.safePlay()
|
||||
})
|
||||
this.hls.on(Hls.Events.ERROR, (event, data) => {
|
||||
console.log('核心视频错误',data.type)
|
||||
// this.hls.startLoad(); //重连
|
||||
if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
|
||||
console.error('缓冲停滞错误，尝试重新加载视频');
|
||||
this.hls.startLoad(); // 尝试重新加载视频
|
||||
}
|
||||
console.log('核心视频错误',data.type)
|
||||
// this.hls.startLoad(); //重连
|
||||
if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
|
||||
console.error('缓冲停滞错误，尝试重新加载视频');
|
||||
this.hls.startLoad(); // 尝试重新加载视频
|
||||
}
|
||||
this.handleHlsError(data)
|
||||
})
|
||||
|
||||
this.hls.on(Hls.Events.BUFFER_EOS, () => {
|
||||
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)
|
||||
})
|
||||
},
|
||||
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.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)
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
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
|
||||
// 事件处理
|
||||
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 {
|
||||
this.playAttempts++
|
||||
if (this.video.readyState >= 2) {
|
||||
await this.video.play()
|
||||
this.playAttempts = 0
|
||||
} else {
|
||||
setTimeout(this.safePlay, 500)
|
||||
const currentTime = this.video.currentTime
|
||||
this.hls.mediaBuffer = null
|
||||
if (this.hls.bufferTimer) {
|
||||
clearInterval(this.hls.bufferTimer)
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('播放失败:', error)
|
||||
setTimeout(this.safePlay, 1000)
|
||||
this.hls.flushBuffer()
|
||||
this.video.currentTime = currentTime
|
||||
} catch (e) {
|
||||
console.warn('Buffer cleanup error:', e)
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 移除所有事件监听
|
||||
if (this.video) {
|
||||
const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend']
|
||||
events.forEach((event) => {
|
||||
this.video.removeEventListener(event, this.handleVideoEvent)
|
||||
})
|
||||
|
||||
handleHlsError(data) {
|
||||
// console.error('HLS Error:', data)
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.myVideo-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.myVideo-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.myVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// aspect-ratio: 16/9;
|
||||
/* border: 1px solid #ccc; */
|
||||
// border-radius: vw(5);
|
||||
}
|
||||
.myVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// aspect-ratio: 16/9;
|
||||
/* border: 1px solid #ccc; */
|
||||
// border-radius: vw(5);
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: white;
|
||||
padding: vw(10);
|
||||
border-radius: vw(4);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.loading-text {
|
||||
color: white;
|
||||
padding: vw(10);
|
||||
border-radius: vw(4);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="dialog">
|
||||
<el-dialog
|
||||
v-model="modelValue"
|
||||
align-center
|
||||
:modal="false"
|
||||
:show-close="false"
|
||||
:z-index="9999"
|
||||
destroy-on-close
|
||||
v-model="modelValue"
|
||||
align-center
|
||||
:modal="false"
|
||||
:show-close="false"
|
||||
:z-index="9999"
|
||||
destroy-on-close
|
||||
>
|
||||
<div class="dialog-box">
|
||||
<div class="video">
|
||||
@@ -16,20 +16,20 @@
|
||||
<source type="application/x-mpegURL" />
|
||||
</video> -->
|
||||
<div class="action-box">
|
||||
<div class="action-item">
|
||||
<div
|
||||
v-if="colletCond == 1"
|
||||
class="video-follow"
|
||||
@click.stop="handleCollect()"
|
||||
>取消关注
|
||||
</div>
|
||||
<div
|
||||
v-if="colletCond == 0"
|
||||
class="video-unfollow"
|
||||
@click.stop="handleCollect()"
|
||||
>关注
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-item">
|
||||
<div
|
||||
v-if="colletCond == 1"
|
||||
class="video-follow"
|
||||
@click.stop="handleCollect()"
|
||||
>取消关注
|
||||
</div>
|
||||
<div
|
||||
v-if="colletCond == 0"
|
||||
class="video-unfollow"
|
||||
@click.stop="handleCollect()"
|
||||
>关注
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-item">
|
||||
<img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
|
||||
<span>聚焦</span>
|
||||
@@ -39,19 +39,19 @@
|
||||
<img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" />
|
||||
<img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" />
|
||||
<img
|
||||
class="pause"
|
||||
src="@/assets/images/pause.png"
|
||||
title="停止操作"
|
||||
@click="handleAction(STOP)"
|
||||
class="pause"
|
||||
src="@/assets/images/pause.png"
|
||||
title="停止操作"
|
||||
@click="handleAction(STOP)"
|
||||
/>
|
||||
<img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
|
||||
<img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
|
||||
|
||||
</div>
|
||||
<div class="action-item">
|
||||
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-if="isDiy==0">收藏</div>
|
||||
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-else="isDiy==1">取消收藏</div>
|
||||
</div>
|
||||
<div class="action-item">
|
||||
<div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==0">收藏</div>
|
||||
<div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==1">取消收藏</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,246 +61,254 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Hls from 'hls.js'
|
||||
import { ElMessage } from 'element-plus'
|
||||
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' // 停止操作
|
||||
let ACTION = '0'
|
||||
let command = ref('')
|
||||
import Hls from 'hls.js'
|
||||
import { ElMessage } from 'element-plus'
|
||||
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 = '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('')
|
||||
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
cameraIndexCode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isCollect:{
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
isDiy:{
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
let modelValue = defineModel()
|
||||
let videoRef = ref()
|
||||
let webRtcServer = null
|
||||
let hlsRef = null
|
||||
let colletCond = ref(props.isCollect)
|
||||
let isDayCurr = ref(props.isDiy)
|
||||
watch(
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
cameraIndexCode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isCollect:{
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
isDiy:{
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
let modelValue = defineModel()
|
||||
let videoRef = ref()
|
||||
let webRtcServer = null
|
||||
let hlsRef = null
|
||||
let colletCond = ref(props.isCollect)
|
||||
let isDayCurr = ref(props.isDiy)
|
||||
watch(
|
||||
() =>modelValue.value,
|
||||
(val) => {
|
||||
// colletCond.value = props.isCollect
|
||||
// isDayCurr.value = props.isDiy
|
||||
console.log(props.isDiy,'val[0].value')
|
||||
colletCond.value = props.isCollect
|
||||
isDayCurr.value = props.isDiy
|
||||
console.log(props.isDiy,'val[0].value')
|
||||
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
const emit = defineEmits(['isDiyChange']);
|
||||
// 收藏
|
||||
const handleCollectAdd = async (id, status, index) => {
|
||||
await getColletDiyApi({
|
||||
cameraIndexCode:props.cameraIndexCode,
|
||||
isDiy: props.isDiy == 0 ? 1 : 0
|
||||
})
|
||||
|
||||
if(props.isDiy==1){
|
||||
isDayCurr.value=0
|
||||
// modelValue.value = false
|
||||
}else{
|
||||
isDayCurr.value=1
|
||||
}
|
||||
emit('isDiyChange', isDayCurr.value);
|
||||
pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
|
||||
)
|
||||
const emit = defineEmits(['isDiyChange']);
|
||||
// 收藏
|
||||
const handleCollectAdd = async () => {
|
||||
await getColletDiyApi({
|
||||
cameraIndexCode:props.cameraIndexCode,
|
||||
isDiy: props.isDiy == 0 ? 1 : 0
|
||||
})
|
||||
|
||||
if(props.isDiy==1){
|
||||
isDayCurr.value=0
|
||||
// modelValue.value = false
|
||||
}else{
|
||||
isDayCurr.value=1
|
||||
}
|
||||
// 关注
|
||||
const handleCollect = async (id, status, index) => {
|
||||
await postVideoCollectApi({
|
||||
cameraIndexCode:props.cameraIndexCode,
|
||||
isCollect: colletCond.value == 0 ? 1 : 0
|
||||
})
|
||||
emit('isDiyChange', isDayCurr.value);
|
||||
pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
|
||||
|
||||
if (colletCond.value == 0) {
|
||||
colletCond.value = 1
|
||||
} else {
|
||||
colletCond.value = 0
|
||||
modelValue.value = false
|
||||
}
|
||||
pubSub.publish('videoCollect', props.cameraIndexCode)
|
||||
}
|
||||
// 关注
|
||||
const handleCollect = async (id, status, index) => {
|
||||
await postVideoCollectApi({
|
||||
cameraIndexCode:props.cameraIndexCode,
|
||||
isCollect: colletCond.value == 0 ? 1 : 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
|
||||
}
|
||||
if (colletCond.value == 0) {
|
||||
colletCond.value = 1
|
||||
} else {
|
||||
colletCond.value = 0
|
||||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
pubSub.publish('videoCollect', props.cameraIndexCode)
|
||||
|
||||
}
|
||||
const handleAction = async (e) => {
|
||||
if (e == STOP) {
|
||||
ACTION = '1'
|
||||
command.value = e
|
||||
} else {
|
||||
ACTION = '0'
|
||||
command.value = e
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
|
||||
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
|
||||
}
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.video-follow,.video-unfollow {
|
||||
// cursor: pointer;
|
||||
// display: none;
|
||||
// position: absolute;
|
||||
// right: vw(8);
|
||||
// top: vw(8);
|
||||
// z-index: 9999;
|
||||
// margin-left:vw(20);
|
||||
padding: vw(10);
|
||||
// height: vh(24);
|
||||
text-align: center;
|
||||
// line-height: vh(24);
|
||||
font-weight: 400;
|
||||
font-size: font-vw(18);
|
||||
color: #ffffff;
|
||||
// background-image: url('@/assets/images/unfollow.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.video-item__follow {
|
||||
// background-image: url('@/assets/images/unfollow.png');
|
||||
}
|
||||
.dialog {
|
||||
z-index: 9999;
|
||||
.action {
|
||||
&-box {
|
||||
margin-top: vh(16);
|
||||
gap: vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.video-follow,.video-unfollow {
|
||||
// cursor: pointer;
|
||||
// display: none;
|
||||
// position: absolute;
|
||||
// right: vw(8);
|
||||
// top: vw(8);
|
||||
// z-index: 9999;
|
||||
// margin-left:vw(20);
|
||||
padding: vw(10);
|
||||
// height: vh(24);
|
||||
text-align: center;
|
||||
// line-height: vh(24);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
color: #ffffff;
|
||||
// background-image: url('@/assets/images/unfollow.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.video-item__follow {
|
||||
// background-image: url('@/assets/images/unfollow.png');
|
||||
}
|
||||
.dialog {
|
||||
z-index: 9999;
|
||||
.action {
|
||||
&-box {
|
||||
margin-top: vh(16);
|
||||
gap: vw(20);
|
||||
display: flex;
|
||||
align-items: 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 {
|
||||
padding: vw(16);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #0a4190;
|
||||
border-radius: vw(8);
|
||||
> img {
|
||||
cursor: pointer;
|
||||
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);
|
||||
}
|
||||
> span {
|
||||
margin: 0 vw(16);
|
||||
font-weight: 400;
|
||||
font-size: 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>
|
||||
|
||||
@@ -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 { getPreviewUrlApi,getColletListApi } 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)
|
||||
@@ -110,27 +111,78 @@
|
||||
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();
|
||||
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 () => {
|
||||
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);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@@ -82,12 +82,12 @@ let isCollect = ref(0)
|
||||
}
|
||||
|
||||
const postVideoRemain = () => {
|
||||
timer = setInterval(() => {
|
||||
if(!list.value.length) return false;
|
||||
postVideoRemainApi({
|
||||
cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
|
||||
})
|
||||
}, 1500)
|
||||
// timer = setInterval(() => {
|
||||
// if(!list.value.length) return false;
|
||||
// postVideoRemainApi({
|
||||
// cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
|
||||
// })
|
||||
// }, 1500)
|
||||
}
|
||||
|
||||
const getPreviewUrl = async (code) => {
|
||||
|
||||
@@ -471,6 +471,7 @@
|
||||
}
|
||||
.btn-all{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
left: vw(140);
|
||||
top: vh(30);
|
||||
min-width: vw(180);
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
:controls="false"
|
||||
/>
|
||||
<p class="video-item__title--primary">
|
||||
{{ element.cameraName || element.scenicAreaId }}
|
||||
{{ element.cameraName || element.cameraIndexCode }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,287 +80,346 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
|
||||
import {
|
||||
getVideoTypeApi,
|
||||
getVideoRegionsApi,
|
||||
postVideoRemainApi,
|
||||
postVideoControlApi,
|
||||
postVideoCollectApi
|
||||
} from '@/api/monitor'
|
||||
import draggable from 'vuedraggable';
|
||||
import pubSub from 'pubsub-js'
|
||||
import Hls from 'hls.js'
|
||||
import emptyIco from '@/assets/images/n-icon.png'
|
||||
import { debounce } from 'lodash'
|
||||
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' // 停止操作
|
||||
let cond = ref(false)
|
||||
let ACTION = '0'
|
||||
let hlsRefs = []
|
||||
let hlsRef = null
|
||||
let timer = null
|
||||
let videoLog = ref(1)
|
||||
let videoList = ref([])
|
||||
let cameraIndexCode = ref('')
|
||||
let videoRef = ref()
|
||||
let monitorChange = null
|
||||
let total = ref(0)
|
||||
let loading = ref(false)
|
||||
let command = ref('')
|
||||
let cameraName = ref('')
|
||||
let regionList = ref()
|
||||
let params = reactive({
|
||||
businessScenicArea: "",
|
||||
cameraName: "",
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
})
|
||||
let grad = ref(3)
|
||||
let show = ref(false)
|
||||
const onMonitorChange = () => {
|
||||
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
params.pageNum = 1
|
||||
videoList.value = []
|
||||
total.value = 0
|
||||
cond.value = false
|
||||
getRegionsList()
|
||||
})
|
||||
}
|
||||
//弹窗收藏监听
|
||||
const isDiyChange = (val)=>{
|
||||
console.log(val,11222)
|
||||
isDiy.value = val
|
||||
if(!val){
|
||||
show.value = false
|
||||
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) => {
|
||||
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
|
||||
import {
|
||||
getVideoTypeApi,
|
||||
getVideoRegionsApi,
|
||||
postVideoRemainApi,
|
||||
postVideoControlApi,
|
||||
postVideoCollectApi
|
||||
} from '@/api/monitor'
|
||||
import draggable from 'vuedraggable';
|
||||
import pubSub from 'pubsub-js'
|
||||
import Hls from 'hls.js'
|
||||
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 = '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 = []
|
||||
let hlsRef = null
|
||||
let timer = null
|
||||
let videoLog = ref(1)
|
||||
let videoList = ref([])
|
||||
let cameraIndexCode = ref('')
|
||||
let videoRef = ref()
|
||||
let monitorChange = null
|
||||
let total = ref(0)
|
||||
let loading = ref(false)
|
||||
let command = ref('')
|
||||
let cameraName = ref('')
|
||||
let regionList = ref()
|
||||
let params = reactive({
|
||||
businessScenicArea: "",
|
||||
cameraName: "",
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
})
|
||||
let grad = ref(3)
|
||||
let show = ref(false)
|
||||
const onMonitorChange = () => {
|
||||
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
params.pageNum = 1
|
||||
videoList.value = []
|
||||
total.value = 0
|
||||
cond.value = false
|
||||
getRegionsList()
|
||||
})
|
||||
}
|
||||
//弹窗收藏监听
|
||||
const isDiyChange = (val)=>{
|
||||
console.log(val,11222)
|
||||
isDiy.value = val
|
||||
if(!val){
|
||||
show.value = false
|
||||
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) => {
|
||||
|
||||
// if(it.cameraIndexCode == cameraIndexCode.value){
|
||||
// it.isDiy = val
|
||||
// }
|
||||
// })
|
||||
}
|
||||
const onStart = (res)=>{
|
||||
// if(it.cameraIndexCode == cameraIndexCode.value){
|
||||
// it.isDiy = val
|
||||
// }
|
||||
// })
|
||||
}
|
||||
const onStart = (res)=>{
|
||||
|
||||
}
|
||||
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)=>{
|
||||
}
|
||||
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
|
||||
// getVideCollectCateList()
|
||||
})
|
||||
// postVideoRemain()
|
||||
initVideo()
|
||||
}
|
||||
// 获取关注列表
|
||||
const getVideCollectCateList = async () => {
|
||||
clearHlsRefs()
|
||||
params.businessVideoDisplayPosition = ''
|
||||
let res = await getVideCollectCate(params)
|
||||
videoList.value = res.data
|
||||
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) {
|
||||
initVideo()
|
||||
}
|
||||
// 收藏
|
||||
const handleCollect = async (id, status, index,element) => {
|
||||
await getColletDiyApi({
|
||||
cameraIndexCode:id,
|
||||
isDiy: status == 0 ? 1 : 0
|
||||
})
|
||||
if (status == 0) {
|
||||
|
||||
element.isDiy = 1
|
||||
element.isDiy = 1
|
||||
|
||||
} else {
|
||||
} 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()
|
||||
}
|
||||
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'
|
||||
command.value = e
|
||||
} 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)
|
||||
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 initVideo = () => {
|
||||
clearHlsRefs()
|
||||
nextTick(() => {
|
||||
videoList.value.forEach(async (it, i) => {
|
||||
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)
|
||||
})
|
||||
|
||||
it.videos.forEach((item,index)=>{
|
||||
setTimeout(() => {
|
||||
const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
|
||||
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)
|
||||
}
|
||||
}, 1000)
|
||||
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)
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
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
|
||||
|
||||
}, 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()
|
||||
|
||||
}
|
||||
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>
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
</div>
|
||||
<video
|
||||
class="video-item__video"
|
||||
:id="'monitorVideo' + index"
|
||||
:id="'hotelmonitorVideo' + index"
|
||||
preload="auto"
|
||||
muted
|
||||
autoplay
|
||||
@@ -154,7 +154,7 @@
|
||||
</p>
|
||||
<video
|
||||
class="item-img"
|
||||
:id="'monitorVideo' + index"
|
||||
:id="'hotelmonitorVideo' + index"
|
||||
muted
|
||||
autoplay
|
||||
:controls="false"
|
||||
@@ -184,281 +184,347 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
|
||||
import {
|
||||
getVideoTypeApi,
|
||||
getVideoRegionsApi,
|
||||
postVideoRemainApi,
|
||||
postVideoControlApi,
|
||||
postVideoCollectApi
|
||||
} from '@/api/monitor'
|
||||
import pubSub from 'pubsub-js'
|
||||
import Hls from 'hls.js'
|
||||
import emptyIco from '@/assets/images/n-icon.png'
|
||||
import { debounce } from 'lodash'
|
||||
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' // 停止操作
|
||||
let cond = ref(false)
|
||||
let ACTION = '0'
|
||||
let hlsRefs = []
|
||||
let hlsRef = null
|
||||
let timer = null
|
||||
let videoLog = ref(1)
|
||||
let videoList = ref([])
|
||||
let cameraIndexCode = ref('')
|
||||
let videoRef = ref()
|
||||
let monitorChange = null
|
||||
let total = ref(0)
|
||||
let loading = ref(false)
|
||||
let command = ref('')
|
||||
let cameraName = ref('')
|
||||
let regionList = ref()
|
||||
let params = reactive({
|
||||
businessScenicArea: "",
|
||||
cameraName: "",
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
})
|
||||
let show = ref(false)
|
||||
const onMonitorChange = () => {
|
||||
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
params.pageNum = 1
|
||||
videoList.value = []
|
||||
total.value = 0
|
||||
cond.value = false
|
||||
getRegionsList()
|
||||
})
|
||||
}
|
||||
// 关注
|
||||
const handleCollect = async (id, status, index) => {
|
||||
await postVideoCollectApi({
|
||||
cameraIndexCode:id,
|
||||
isCollect: status == 0 ? 1 : 0
|
||||
})
|
||||
if (status == 0) {
|
||||
thisVideo.value.isCollect=1
|
||||
videoList.value[index].isCollect = 1
|
||||
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
|
||||
import {
|
||||
getVideoTypeApi,
|
||||
getVideoRegionsApi,
|
||||
postVideoRemainApi,
|
||||
postVideoControlApi,
|
||||
postVideoCollectApi
|
||||
} from '@/api/monitor'
|
||||
import draggable from 'vuedraggable';
|
||||
import pubSub from 'pubsub-js'
|
||||
import Hls from 'hls.js'
|
||||
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 = '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 = []
|
||||
let hlsRef = null
|
||||
let timer = null
|
||||
let videoLog = ref(1)
|
||||
let videoList = ref([])
|
||||
let cameraIndexCode = ref('')
|
||||
let videoRef = ref()
|
||||
let monitorChange = null
|
||||
let total = ref(0)
|
||||
let loading = ref(false)
|
||||
let command = ref('')
|
||||
let cameraName = ref('')
|
||||
let regionList = ref()
|
||||
let params = reactive({
|
||||
businessScenicArea: "",
|
||||
cameraName: "",
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
})
|
||||
let grad = ref(3)
|
||||
let show = ref(false)
|
||||
const onMonitorChange = () => {
|
||||
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
params.pageNum = 1
|
||||
videoList.value = []
|
||||
total.value = 0
|
||||
cond.value = false
|
||||
getRegionsList()
|
||||
})
|
||||
}
|
||||
//弹窗收藏监听
|
||||
const isDiyChange = (val)=>{
|
||||
console.log(val,11222)
|
||||
isDiy.value = val
|
||||
if(!val){
|
||||
show.value = false
|
||||
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) => {
|
||||
|
||||
} else {
|
||||
thisVideo.value.isCollect=0
|
||||
videoList.value[index].isCollect = 0
|
||||
}
|
||||
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('')
|
||||
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){
|
||||
// it.isDiy = val
|
||||
// }
|
||||
// })
|
||||
}
|
||||
const onStart = (res)=>{
|
||||
|
||||
}
|
||||
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 initVideo = () => {
|
||||
clearHlsRefs()
|
||||
nextTick(() => {
|
||||
videoList.value.forEach(async (item, index) => {
|
||||
const video = document.getElementById(`monitorVideo${index}`)
|
||||
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)
|
||||
})
|
||||
})
|
||||
}
|
||||
watch(
|
||||
() => videoList.value,
|
||||
(val) => {
|
||||
if (val.length) {
|
||||
postVideoRemain()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
// 更新视频
|
||||
const postVideoRemain = async () => {
|
||||
timer = setInterval(() => {
|
||||
postVideoRemainApi({
|
||||
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
|
||||
})
|
||||
}, 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 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)=>{
|
||||
|
||||
}
|
||||
const handleRegions = (e) => {
|
||||
regionList.value[e].show = !regionList.value[e].show
|
||||
}
|
||||
const onInput = debounce((e) => {
|
||||
getVideoRegions()
|
||||
}, 500)
|
||||
let hotelChange = null;
|
||||
onMounted(()=>{
|
||||
hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
|
||||
cameraName.value = ''
|
||||
params.businessScenicArea = data.name
|
||||
getVideoRegions()
|
||||
// getVideCollectCateList()
|
||||
})
|
||||
// postVideoRemain()
|
||||
initVideo()
|
||||
}
|
||||
// 获取关注列表
|
||||
const getVideCollectCateList = async () => {
|
||||
clearHlsRefs()
|
||||
params.businessVideoDisplayPosition = ''
|
||||
let res = await getVideCollectCate(params)
|
||||
videoList.value = res.data
|
||||
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
|
||||
|
||||
})
|
||||
onMonitorChange()
|
||||
initVideo()
|
||||
}
|
||||
// 收藏
|
||||
const handleCollect = async (id, status, index,element) => {
|
||||
await getColletDiyApi({
|
||||
cameraIndexCode:id,
|
||||
isDiy: status == 0 ? 1 : 0
|
||||
})
|
||||
if (status == 0) {
|
||||
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearHlsRefs()
|
||||
if (hotelChange) pubSub.unsubscribe(hotelChange)
|
||||
if (timer) clearInterval(timer)
|
||||
pubSub.unsubscribe(monitorChange)
|
||||
})
|
||||
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'
|
||||
command.value = e
|
||||
} 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)
|
||||
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>
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user