两个摄像头

src/views/yunying/scheduling/index.vue

@@ -163,6 +163,15 @@
         autoplay
         muted
       ></video>
+      <video
+      v-if="showvideo"
+      style="width: 99%; margin-left: 0.5%"
+      ref="videoElement2"
+      class="centeredVideo"
+      controls
+      autoplay
+      muted
+    ></video>
     </el-dialog>
   </div>
 </template>
@@ -210,6 +219,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const carInfoList = ref<CarInfoVO[]>([]);
 // const videoElement = ref(video)
 const buttonLoading = ref(false);
+const showvideo = ref(false)
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref<Array<string | number>>([]);
@@ -265,6 +275,31 @@ const flvLoad = (url) => {
   }
 };
 
+const flvLoad2 = (url) => {
+  console.log(flvjs.isSupported());
+  if (flvjs.isSupported()) {
+    let videoElement = proxy.$refs.videoElement2;
+    flvPlayer.value = flvjs.createPlayer(
+      {
+        type: "flv", //媒体类型
+        url: url || "", //flv格式媒体URL
+        isLive: true, //数据源是否为直播流
+        hasAudio: false, //数据源是否包含有音频
+        hasVideo: true, //数据源是否包含有视频
+        enableStashBuffer: false, //是否启用缓存区
+      },
+      {
+        enableWorker: false, // 是否启用分离的线程进行转换
+        enableStashBuffer: false, //关闭IO隐藏缓冲区
+        autoCleanupSourceBuffer: true, //自动清除缓存
+      }
+    );
+    flvPlayer.value.attachMediaElement(videoElement); //将播放实例注册到节点
+    flvPlayer.value.load(); //加载数据流
+    flvPlayer.value.play(); //播放数据流
+  }
+};
+
 const openVideo = (item) => {
   var findVideo = false;
   for (var index in carInfoList.value) {
@@ -275,12 +310,21 @@ const openVideo = (item) => {
       ) {
         var drivesInfo = JSON.parse(carInfoList.value[index].deviceInfos);
         console.log(drivesInfo);
+        var i = 0;
         for (var j in drivesInfo) {
-          if (drivesInfo[j].type == "摄像头") {
+          if (drivesInfo[j].type == "camera") {
             findVideo = true;
             dialog.visible = true;
             setTimeout(() => {
-              flvLoad(drivesInfo[j].code);
+              if(i == 0){
+                flvLoad(drivesInfo[j].code);
+                i++
+              }else{
+                showvideo.value = true;
+                setTimeout(() => {
+                  flvLoad2(drivesInfo[j].code);
+                }, 100);
+              }
             }, 1000);
           }
         }