diff --git a/index.html b/index.html index 44f83a9..e8a5af3 100644 --- a/index.html +++ b/index.html @@ -168,5 +168,9 @@ + + + diff --git a/src/views/kc/jiaoshi/index.vue b/src/views/kc/jiaoshi/index.vue index c861212..5b1db0e 100644 --- a/src/views/kc/jiaoshi/index.vue +++ b/src/views/kc/jiaoshi/index.vue @@ -16,7 +16,37 @@ - + + + + + + + + +
+ + + +
+
+
+ + + +
+
@@ -54,10 +84,11 @@ import type { MenuProps } from 'ant-design-vue'; import { defHttp } from '/@/utils/http/axios'; import { useMessage } from "/@/hooks/web/useMessage"; -import { ref, onMounted, onBeforeUnmount, computed } from 'vue'; +import { ref, onMounted, onBeforeUnmount, reactive, computed, VideoHTMLAttributes } from 'vue'; import bVideo from '/@/views/site/common/webRTC/video.vue'; +import { nextTick } from 'vue'; -const bVideoMainRef = ref(); +const bVideoRefs = ref([]); const _document = window.document; // const bVideoLeftRef = ref(); @@ -65,9 +96,45 @@ const leftList = ref([]); const currentItem = ref({}); const topWidth = ref('0'); +const videoOption = reactive({ + // width: '800', //播放器高度 + // height: '450', //播放器高度 + color: "#409eff", //主题色 + title: '', //视频名称 + //src: "https://go.dreamwq.com/videos/IronMan.mp4", //视频源 + muted: true, //静音 + playsinline: true, + webFullScreen: false, + speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速 + autoPlay: false, //自动播放 + loop: false, //循环播放 + mirror: false, //镜像画面 + ligthOff: false, //关灯模式 + volume: 0.3, //默认音量大小 + controls: true, //是否显示控制器 +}); + + onMounted(() => { - list({ pageSize: -1 }).then(res => { - leftList.value = (res?.records) ?? []; + list({ pageSize: -1, sfyx: '0' }).then(res => { + let list = (res?.records) ?? []; + //聚合 + let map = {}; + list.forEach(x => { + let item = map[x.jsmc]; + if(item){ + item.child[x.xm] = x; + }else{ + let child = {}; + child[x.xm] = x; + map[x.jsmc] = { + ...x, + child + }; + } + }); + + leftList.value = Object.values(map); topWidth.value = _document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0'; // console.log(_document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0') }); @@ -97,19 +164,94 @@ const titleClick = (e: Event, item: any) => { }; function playerVideo(item){ - bVideoMainRef.value.connectFn(item.ip); - // bVideoMainRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external'); - // bVideoLeftRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external'); + nextTick(() => { + + //changshang == 奥威亚 + // bVideoMainRef.value.connectFn(item.ip); + //bVideoMainRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external'); + // bVideoLeftRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external'); + + //rtsp://admin:admin@10.250.116.235:8554/live + console.log('bVideoRefs ->',bVideoRefs,Object.values(bVideoRefs.value)); + + (Object.values(bVideoRefs.value)).forEach((x: any) => { + + console.log(`🚀 ----------------------------------------------🚀`); + console.log(`🚀 ~ file: index.vue:148 ~ playerVideo ~ x:`, x); + console.log(`🚀 ----------------------------------------------🚀`); + // x.connectFn('rtsp://admin:admin@10.250.116.235:8554/live','external') + // if(Number(Number(Math.random()).toFixed(1))*10 >= 5){ + // x.connectFn('rtsp://127.0.0.1:8554/video','external'); + // }else{ + // x.connectFn(`rtsp://${x.ip}/live`,'external') + // } + // return; + if(x.changshang == '奥威亚'){ + x.connectFn(`rtsp://${x.ip}/stream/0?config.login=web`,'external') + }else if(x.changshang == '卓智'){ + x.connectFn(`rtsp://${x.ip}/live`,'external') + } + }); + setTimeout(() => { + switchVideoToMain(); + },1000); + }) + //bVideoRefs['main'].connectFn('rtsp://admin:admin@10.250.116.235:8554/live','external'); } +function calcOtherVideo() :any{ + if(!currentItem.value.child) return {}; + let map = {}; + Object.keys(currentItem.value.child).forEach(key => { + // if(key != '录播主机' && key.indexOf('音频处理器') ==-1){ + map[key] = currentItem.value.child[key]; + // } + }); + return map; +} + +function switchVideoToMain(){ + + console.log(`🚀 ------------------------------------------------------------------------------------🚀`); + console.log(`🚀 ~ file: index.vue:188 ~ switchVideoToMain ~ switchVideoToMain:`); + console.log(`🚀 ------------------------------------------------------------------------------------🚀`); + + nextTick(() => { + let mainVideo = document.querySelector('#mainVideo'); + let firstVideo = document.querySelector('.videoMax video'); + mainVideo.srcObject = firstVideo.srcObject + mainVideo.play(); + }); +} + +function bVideoClick(e){ + let mainVideo = document.querySelector('#mainVideo'); + let currentVideo = e.srcElement; + mainVideo.srcObject = currentVideo.srcObject + mainVideo.play(); +} //页面销毁时销毁webRtc onBeforeUnmount(() => { - bVideoMainRef.value.closeWebRtcStreamerFn(); + bVideoRefs.value.forEach(x => { + x.closeWebRtcStreamerFn(); + }); }) \ No newline at end of file diff --git a/src/views/site/common/webRTC/video.vue b/src/views/site/common/webRTC/video.vue index 4be9dc8..d6d87b0 100644 --- a/src/views/site/common/webRTC/video.vue +++ b/src/views/site/common/webRTC/video.vue @@ -3,7 +3,7 @@
点击开始播放(连接)直播2
--> - + @@ -64,10 +64,10 @@ function closeWebRtcStreamerFn(){ } function connectFn(url:string,type?){ - let _path = `rtsp://${url}/stream/0?config.login=web`; - if(type == 'external'){ - _path = url; - } + // let _path = `rtsp://${url}/stream/0?config.login=web`; + // if(type == 'external'){ + // } + let _path = url; path.value = _path; connect(webRtcServer.value,path.value); return webRtcServer.value; @@ -112,4 +112,8 @@ video { //position: relative; background: grey; } +/* 隐藏video 进度条 */ +video::-webkit-media-controls-timeline { + display: none; +} \ No newline at end of file