2023年4月22日 修改课堂直播

index.html

@@ -168,5 +168,9 @@
       </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
+    <script type="text/javascript" src="/resource/js/webrtc/adapter.min.js"></script>
+    <script type="text/javascript" src="/resource/js/webrtc/webrtcstreamer.js"></script>
+    <!-- <script type="module" src="/resource/js/webrtc/adapter.min.js"></script>
+    <script type="module" src="/resource/js/webrtc/webrtcstreamer.js"></script> -->
   </body>
 </html>

src/views/kc/jiaoshi/index.vue

@@ -16,7 +16,37 @@
         <!-- document.querySelector('.ant-layout .jeecg-default-layout-main > div').style.height -->
       </a-col>
       <a-col :span="20">
-        <bVideo ref="bVideoMainRef" :videoOption="{ autoPlay: true }" :videoKey="'main'+currentItem.id"/>
+        <!-- <a-row> -->
+          <!-- <a-col :span="12" v-if="currentItem?.child?.录播主机">
+            <div>{{ currentItem?.child?.录播主机?.xm }}</div>
+            <bVideo :ref="el=> bVideoRefs['main']=el" :videoOption="{ autoPlay: true }" :videoKey="'main'"/>
+          </a-col> -->
+          <!-- <a-col :span="12">
+            <a-row>
+              <a-col v-for="(item,index) of calcOtherVideo()" :span="12">
+                <div>{{ index }}</div>
+                <bVideo :ref="el=> bVideoRefs[index]=el" :videoOption="{ autoPlay: true }" :videoKey="'other-'+item.id"/>
+              </a-col>
+            </a-row>
+          </a-col> -->
+          <!-- <a-col v-for="(item,index) of calcOtherVideo()" :span="4">
+          </a-col> -->
+          <!-- <a-col :span="4"> -->
+            <!-- <bVideo ref="bVideoLeftRef" :videoOption="{ autoPlay: true }" :videoKey="'left-'+currentItem?.child?.学生定位?.id"/> -->
+          <!-- </a-col> -->
+        <!-- </a-row> -->
+        <div>
+
+
+          <video id="mainVideo" v-bind="videoOption" style="width:100%" @click.prevent.stop></video>
+        </div>
+        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: scroll;">
+          <div v-for="(item,index) of calcOtherVideo()" class="videoMax">
+            <a-card :title="item?.xm" style="width: 300px" class="videoCardMain">
+              <bVideo :ref="el=> bVideoRefs[index]=el" :videoOption="{ autoPlay: true, onClick: bVideoClick }" :videoKey="'other-'+item.id"/>
+            </a-card>
+          </div>
+        </div>
       </a-col>
     </a-row>
   </div>
@@ -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 = <any>ref([]);
 const _document = window.document;
 // const bVideoLeftRef = ref();
 
@@ -65,9 +96,45 @@ const leftList = <any>ref([]);
 const currentItem = <any>ref({});
 const topWidth = <any>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 => {
+  list({ pageSize: -1, sfyx: '0' }).then(res => {
-    leftList.value = (res?.records) ?? [];
+    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);
+  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 = <HTMLVideoElement> document.querySelector('#mainVideo');
+    let firstVideo = <HTMLVideoElement> document.querySelector('.videoMax video');
+    mainVideo.srcObject = firstVideo.srcObject
+    mainVideo.play();
+  });
+}
+
+function bVideoClick(e){
+  let mainVideo = <HTMLVideoElement> document.querySelector('#mainVideo');
+  let currentVideo = <HTMLVideoElement> e.srcElement;
+  mainVideo.srcObject = currentVideo.srcObject
+  mainVideo.play();
+}
 
 
 //页面销毁时销毁webRtc
 onBeforeUnmount(() => {
-  bVideoMainRef.value.closeWebRtcStreamerFn();
+  bVideoRefs.value.forEach(x => {
+    x.closeWebRtcStreamerFn();
+  });
 })
 
 
 </script>
 <style lang="less" scoped>
+.videoMax{
+  width: 300px;
+}
+.videoCardMain {
+  :deep(.ant-card-body) {
+    padding: 0;
+  }
+}
+/* 隐藏video 进度条 */
+video::-webkit-media-controls-timeline {
+    display: none;
+}
 </style>

src/views/site/common/webRTC/video.vue

@@ -3,7 +3,7 @@
   <div @click="onPlay2">点击开始播放(连接)直播2</div> -->
   <!-- <div>{{ route.query.url }}</div> -->
   <!-- <span>播放地址:{{ path }}</span> -->
-  <video :id="props.videoKey" v-bind="videoOption"></video>
+  <video :id="props.videoKey" v-bind="videoOption" @click.prevent.stop></video>
 
   <!-- <video id="video" muted="" playsinline="" controls="" style="opacity: 1;"></video> -->
 </template>
@@ -64,10 +64,10 @@ function closeWebRtcStreamerFn(){
 }
 
 function connectFn(url:string,type?){
-  let _path = `rtsp://${url}/stream/0?config.login=web`;
+  // let _path = `rtsp://${url}/stream/0?config.login=web`;
-  if(type == 'external'){
+  // if(type == 'external'){
-    _path = url;
+  // }
-  }
+  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;
+}
 </style>