完善视频录制功能

src/views/page/cameraCenter.vue

@@ -6,13 +6,10 @@
             @mousedown="mouseDownVideo">
         </video> -->
         <div id="videoPlayer" @mousedown="mouseDownVideo"></div>
-        <div v-for="item in labelList"
+        <div v-for="item in labelList" :class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
-             :class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
+            :key="item.id" :id="item.id"
-             :key="item.id"
-             :id="item.id"
             :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
-             @click="itemClick(item)"
+            @click="itemClick(item)">
-        >
             <a-dropdown :trigger="['contextmenu']">
                 <div class="labels-item" v-if="item.groupName == '视频标签'">
                     <!-- <div class="labels-item" v-if="item.inFlag"> -->
@@ -95,6 +92,7 @@ let isActiveChoose = ref(false)
 let labelList = ref<any[]>([])
 let addLabel = storeToRefs(piniaStore).addLabel
 let screenshot = storeToRefs(piniaStore).screenshot
+let record = storeToRefs(piniaStore).record
 let addLabelLeft = ref(0);
 let addLabelTop = ref(0);
 var jessibuca = ref();
@@ -106,21 +104,7 @@ onMounted(() => {
         loadVideoCanvas();
     }
 })
-watch(screenshot, (newVal, oldVal) => {
-    if (newVal) {
-        console.log(123);
 
-        //jessibuca.value.isPlaying() 判断是否正在播放
-        if (!jessibuca.value.isPlaying()) {
-            Msg.info("请先选择监控画面")
-            piniaStore.updateScreenshot(false)
-            return
-         }
-        jessibuca.value.screenshot("", "png", 1)
-        piniaStore.updateScreenshot(false)
-
-    }
-})
 watch(curSelectKey, (newVal, oldVal) => {
     switchCamera(newVal)
 })
@@ -141,7 +125,33 @@ watch(addLabel, (newVal, oldVal) => {
         }
     }
 })
+watch(screenshot, (newVal, oldVal) => {
+    if (newVal) {
+        //jessibuca.value.isPlaying() 判断是否正在播放
+        if (!jessibuca.value.isPlaying()) {
+            Msg.info("请先选择监控画面")
+            piniaStore.updateScreenshot(false)
+            return
+        }
+        jessibuca.value.screenshot("", "png", 1)
+        piniaStore.updateScreenshot(false)
 
+    }
+})
+watch(record, (newVal, oldVal) => {
+    if (!jessibuca.value.isPlaying()) {
+        Msg.info("请先选择监控画面")
+        piniaStore.updateRecord(false)
+        return
+    }
+    if (newVal) {
+        jessibuca.value.startRecord()
+        Msg.info("开始录制")
+    } else {
+        jessibuca.value.stopRecordAndSave()
+        Msg.info("录制完毕")
+    }
+})
 function closeVideo() {
     jessibuca.value.close();
     labelList.value = []
@@ -202,6 +212,11 @@ function loadVideoPlayer() {
     jessibuca.value.onPlay = () => console.log('onPlay');
     jessibuca.value.onFullscreen = (msg: any) => console.log('onFullscreen', msg);
     jessibuca.value.onMute = (msg: any) => console.log('onMute', msg);
+    //监听录制结束
+    // jessibuca.value.on("recordEnd", function () {
+    //     console.log("record end")
+    //     piniaStore.updateRecord(false)
+    // })
 }
 
 function loadVideoCanvas() {
@@ -488,6 +503,7 @@ onUnmounted(() => {
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -55%);
+                color: white;
             }
 
             img {