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

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

@@ -2,6 +2,7 @@
<div v-show="isActive" class="myVideo-container">
<video
class="myVideo"
id="video"
ref="videoElement"
muted
playsinline
@@ -15,9 +16,9 @@
</template>
<script>
import Hls from 'hls.js'
export default {
import Hls from 'hls.js'
import mpegtsjs from 'mpegts.js'
export default {
name: 'HlsPlayer',
props: {
url: {
@@ -162,6 +163,28 @@
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）
@@ -211,6 +234,8 @@
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})
}
},
initVideo() {
this.beforeDestroy()
@@ -314,24 +339,24 @@
}
this.fullCleanup()
}
}
}
</script>
<style scoped lang="scss">
.myVideo-container {
.myVideo-container {
position: relative;
height: 100%;
}
}
.myVideo {
.myVideo {
width: 100%;
height: 100%;
// aspect-ratio: 16/9;
/* border: 1px solid #ccc; */
// border-radius: vw(5);
}
}
.loading-overlay {
.loading-overlay {
position: absolute;
top: 0;
left: 0;
@@ -341,12 +366,12 @@
display: flex;
justify-content: center;
align-items: center;
}
}
.loading-text {
.loading-text {
color: white;
padding: vw(10);
border-radius: vw(4);
background: rgba(0, 0, 0, 0.6);
}
}
</style>

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

@@ -49,8 +49,8 @@
</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 class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==0">收藏</div>
<div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==1">取消收藏</div>
</div>
</div>
@@ -61,22 +61,29 @@
</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({
const props = defineProps({
src: {
type: String,
default: ''
@@ -93,28 +100,28 @@
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(
})
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
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) => {
)
const emit = defineEmits(['isDiyChange']);
// 收藏
const handleCollectAdd = async () => {
await getColletDiyApi({
cameraIndexCode:props.cameraIndexCode,
isDiy: props.isDiy == 0 ? 1 : 0
@@ -129,9 +136,9 @@
emit('isDiyChange', isDayCurr.value);
pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
}
// 关注
const handleCollect = async (id, status, index) => {
}
// 关注
const handleCollect = async (id, status, index) => {
await postVideoCollectApi({
cameraIndexCode:props.cameraIndexCode,
isCollect: colletCond.value == 0 ? 1 : 0
@@ -145,10 +152,11 @@
}
pubSub.publish('videoCollect', props.cameraIndexCode)
}
const handleAction = async (e) => {
}
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
@@ -165,15 +173,15 @@
message: '操作成功',
type: 'success'
})
}
const handleClose = () => {
}
const handleClose = () => {
if (hlsRef) {
hlsRef.destroy()
hlsRef = null
}
modelValue.value = false
}
const init = () => {
}
const init = () => {
hlsRef = new Hls({
enableWorker: false, // 禁用 Worker 来避免额外的线程
enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
@@ -202,15 +210,15 @@
}
}
})
}
}
onMounted(()=>{
onMounted(()=>{
})
})
</script>
<style scoped lang="scss">
.video-follow,.video-unfollow {
.video-follow,.video-unfollow {
// cursor: pointer;
// display: none;
// position: absolute;
@@ -223,15 +231,15 @@
text-align: center;
// line-height: vh(24);
font-weight: 400;
font-size: font-vw(18);
font-size: vw(16);
color: #ffffff;
// background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
}
.video-item__follow {
}
.video-item__follow {
// background-image: url('@/assets/images/unfollow.png');
}
.dialog {
}
.dialog {
z-index: 9999;
.action {
&-box {
@@ -255,7 +263,7 @@
> span {
margin: 0 vw(16);
font-weight: 400;
font-size: font-vw(16);
font-size: vw(16);
color: #ffffff;
}
.pause {
@@ -271,7 +279,7 @@
height: vw(980);
color: #fff;
font-weight: bold;
font-size: font-vw(30);
font-size: vw(30);
transform: translate(-50%, -50%);
z-index: 999;
}
@@ -302,5 +310,5 @@
width: vw(60);
z-index: 9999;
}
}
}
</style>

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

@@ -12,7 +12,7 @@
@click="handleItem(item)"
>
<div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
<video class="item-video" :id="'video' + index" muted autoplay :controls="false">
<video class="item-video" :id="'videoall' + index" muted autoplay :controls="false">
<source type="application/x-mpegURL" />
</video>
<p>
@@ -36,13 +36,14 @@
</template>
<script setup>
import { getVideoListApi,getColletListApi } from '@/api/home'
import { 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);
})
})
}

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

@@ -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) => {

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

@@ -471,6 +471,7 @@
}
.btn-all{
position: absolute;
cursor: pointer;
left: vw(140);
top: vh(30);
min-width: vw(180);

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

@@ -42,7 +42,7 @@
:controls="false"
/>
<p class="video-item__title--primary">
{{ element.cameraName || element.scenicAreaId }}
{{ element.cameraName || element.cameraIndexCode }}
</p>
</div>
</div>
@@ -80,50 +80,58 @@
</template>
<script setup>
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
import {
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({
} 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 = () => {
})
let grad = ref(3)
let show = ref(false)
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
params.businessScenicArea = data.name
params.pageNum = 1
@@ -132,9 +140,9 @@
cond.value = false
getRegionsList()
})
}
//弹窗收藏监听
const isDiyChange = (val)=>{
}
//弹窗收藏监听
const isDiyChange = (val)=>{
console.log(val,11222)
isDiy.value = val
if(!val){
@@ -147,11 +155,11 @@
// it.isDiy = val
// }
// })
}
const onStart = (res)=>{
}
const onStart = (res)=>{
}
const onEnd = (evt)=>{
}
const onEnd = (evt)=>{
const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
getVideCollectCateSort({
key:videoList.value[itemIndex].key,
@@ -162,14 +170,13 @@
})
// postVideoRemain()
initVideo()
}
// 获取关注列表
const getVideCollectCateList = async () => {
}
// 获取关注列表
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){
@@ -181,9 +188,9 @@
// total.value = res.total
initVideo()
}
// 收藏
const handleCollect = async (id, status, index,element) => {
}
// 收藏
const handleCollect = async (id, status, index,element) => {
await getColletDiyApi({
cameraIndexCode:id,
isDiy: status == 0 ? 1 : 0
@@ -200,11 +207,12 @@
show.value = false
}
// pubSub.publish('videoCollect', id)
}
// 采集
const handleAction = async (e) => {
}
// 采集
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
@@ -221,18 +229,18 @@
message: '操作成功',
type: 'success'
})
}
// 返回列表
const handleBack = () => {
}
// 返回列表
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) => {
}
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({
@@ -243,25 +251,25 @@
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
//清除 hls
const clearHlsRefs = () => {
}
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
// 分页
const currentChange = (e) => {
}
// 分页
const currentChange = (e) => {
clearHlsRefs()
videoList.value = []
getRegionsList()
}
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
@@ -278,36 +286,88 @@
})
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)
}
const initVideo = () => {
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(`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)
}
const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
createPlayer(item.cameraIndexCode,video);
}, 1000)
})
})
})
}
watch(
}
watch(
() => videoList.value,
(val) => {
if (val.length) {
@@ -315,28 +375,27 @@
}
},
{ 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 () => {
)
// 更新视频
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
@@ -344,23 +403,23 @@
})
regionList.value[0].show = true
}
const handleRegions = (e) => {
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
}
const onInput = debounce((e) => {
}
const onInput = debounce((e) => {
getVideoRegions()
}, 500)
let hotelChange = null;
onMounted(()=>{
}, 500)
let hotelChange = null;
onMounted(()=>{
getVideCollectCateList()
console.log(draggable,'draggable')
})
onUnmounted(() => {
})
onUnmounted(() => {
if (timer) clearInterval(timer)
clearHlsRefs()
})
})
</script>
<style></style>
<style scoped lang="scss">

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

@@ -78,7 +78,7 @@
</div>
<video
class="video-item__video"
:id="'monitorVideo' + index"
:id="'hotelmonitorVideo' + index"
preload="auto"
muted
autoplay
@@ -154,7 +154,7 @@
</p>
<video
class="item-img"
:id="'monitorVideo' + index"
:id="'hotelmonitorVideo' + index"
muted
autoplay
:controls="false"
@@ -184,48 +184,58 @@
</template>
<script setup>
import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
import {
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,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({
} 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 show = ref(false)
const onMonitorChange = () => {
})
let grad = ref(3)
let show = ref(false)
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
params.businessScenicArea = data.name
params.pageNum = 1
@@ -234,27 +244,79 @@
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);
}
// 关注
const handleCollect = async (id, status, index) => {
await postVideoCollectApi({
// videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
// 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)=>{
// 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,
isCollect: status == 0 ? 1 : 0
isDiy: status == 0 ? 1 : 0
})
if (status == 0) {
thisVideo.value.isCollect=1
videoList.value[index].isCollect = 1
element.isDiy = 1
} else {
thisVideo.value.isCollect=0
videoList.value[index].isCollect = 0
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) => {
// pubSub.publish('videoCollect', id)
}
// 采集
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
@@ -271,17 +333,19 @@
message: '操作成功',
type: 'success'
})
}
// 返回列表
const handleBack = () => {
}
// 返回列表
const handleBack = () => {
videoLog.value = 1
hlsRef.destroy()
initVideo()
}
let isCollect = ref(0)
let isDiy = ref(0)
let videoSrc = ref('')
const handleCamera = async (itemCode,resource) => {
}
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',
@@ -291,84 +355,25 @@
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
//清除 hls
const clearHlsRefs = () => {
}
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
// 分页
const currentChange = (e) => {
}
// 分页
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
}
}
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
@@ -385,27 +390,88 @@
})
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)
}
const initVideo = () => {
clearHlsRefs()
nextTick(() => {
videoList.value.forEach(async (item, index) => {
const video = document.getElementById(`monitorVideo${index}`)
const hls = new Hls({
else{
const player = 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)
})
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;
}
watch(
}
})
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) {
@@ -413,16 +479,23 @@
}
},
{ immediate: true }
)
// 更新视频
const postVideoRemain = async () => {
timer = setInterval(() => {
postVideoRemainApi({
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
})
}, 1500)
}
const getVideoRegions = async () => {
)
// 更新视频
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
@@ -435,30 +508,23 @@
})
regionList.value[0].show = true
}
const handleRegions = (e) => {
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
}
const onInput = debounce((e) => {
}
const onInput = debounce((e) => {
getVideoRegions()
}, 500)
let hotelChange = null;
onMounted(()=>{
hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
cameraName.value = ''
params.businessScenicArea = data.name
getVideoRegions()
})
onMonitorChange()
})
onUnmounted(() => {
clearHlsRefs()
if (hotelChange) pubSub.unsubscribe(hotelChange)
}, 500)
let hotelChange = null;
onMounted(()=>{
getVideCollectCateList()
console.log(draggable,'draggable')
})
onUnmounted(() => {
if (timer) clearInterval(timer)
pubSub.unsubscribe(monitorChange)
})
clearHlsRefs()
})
</script>
<style></style>
<style scoped lang="scss">