完善视频录制功能

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"
+            :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
-             :id="item.id"
+            @click="itemClick(item)">
-             :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
-             @click="itemClick(item)"
-        >
             <a-dropdown :trigger="['contextmenu']">
                 <div class="labels-item" v-if="item.groupName == '视频标签'">
                     <!-- <div class="labels-item" v-if="item.inFlag"> -->
@@ -37,7 +34,7 @@
             </a-dropdown>
         </div>
         <div class="labels lavels-build" v-if="addLabel.isAddLabel && addLabel.labelType == '建筑标签'"
-             :style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
+            :style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
             <div class="labels-item" alt="">
                 <img src="@/assets/images/buildLabelLine.png">
                 <div>
@@ -47,7 +44,7 @@
             </div>
         </div>
         <div class="labels lavels-video" v-if="addLabel.isAddLabel && addLabel.labelType == '视频标签'"
-             :style="`top:${addLabelTop}px;left:${addLabelLeft}px`">
+            :style="`top:${addLabelTop}px;left:${addLabelLeft}px`">
             <div class="labels-item">
                 <!-- <div class="labels-item" v-if="item.inFlag"> -->
                 <div>
@@ -66,15 +63,15 @@
 
 <script setup lang='ts'>
 ////@ts-nocheck
-import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import {Modal} from 'ant-design-vue';
+import { Modal } from 'ant-design-vue';
-import {ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch, createVNode} from "vue";
+import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch, createVNode } from "vue";
 import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
 import * as markSearchApi from '@/axios/core/markSearchApi';
 import * as zlmApi from '@/axios/core/zlmApi';
-import {useStore} from '@/store/index';
+import { useStore } from '@/store/index';
-import {apiUrl} from "@/axios";
+import { apiUrl } from "@/axios";
-import {storeToRefs} from 'pinia';
+import { storeToRefs } from 'pinia';
 import Msg from "@/utils/message";
 import CameraLeftMenu from '@/views/page/Aside/cameraLeftMenu.vue'
 import CameraRightMenu from '@/views/page/Aside/cameraRightMenu.vue'
@@ -83,7 +80,7 @@ import cameraWindow from '@/views/page/cameraWindow.vue'
 import popup from "@/utils/popup";
 import VideoControlSimple from './VideoControl/VideoControlSimple.vue';
 
-const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 let piniaStore = useStore();
 let player = <HTMLVideoElement>document.querySelector('#videoPlayer')
 let canvasWidth = ref(0)
@@ -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 = []
@@ -149,7 +159,7 @@ function closeVideo() {
 
 //删除标签
 function deleteLabel(id: number) {
-    markLabelApi.Delete({id}).then((res: any) => {
+    markLabelApi.Delete({ id }).then((res: any) => {
         if (judgeResponse(res)) return;
         let flag = res.data.data;
         let msg = flag === true ? "删除成功" : "删除失败";
@@ -167,7 +177,7 @@ function deleteLabel(id: number) {
 //标签点击事件
 function itemClick(item: any) {
     // console.log("点击",item);
-    popup("监控画面", [h(cameraWindow, {windowData: item})], "cameraWindow");
+    popup("监控画面", [h(cameraWindow, { windowData: item })], "cameraWindow");
 }
 
 function loadVideoPlayer() {
@@ -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() {
@@ -215,7 +230,7 @@ const onContextMenuClick = (item: any, menuKey: string,) => {
     // console.log(`labelId: ${item.id}, menuKey: ${menuKey}`);
     //防止添加多个key值，再次点击不能关闭。数组去重
     if (menuKey == "edit") {
-        popup("编辑标签", [h(LabelEditModel, {modelData: item})], "editLabel");
+        popup("编辑标签", [h(LabelEditModel, { modelData: item })], "editLabel");
     } else if (menuKey == "delete") {
         Modal.confirm({
             zIndex: 10000,
@@ -224,11 +239,11 @@ const onContextMenuClick = (item: any, menuKey: string,) => {
             content: () =>
                 h(
                     "span",
-                    {style: {color: "black"}},
+                    { style: { color: "black" } },
                     "是否确认删除该标签？"
                 ),
             okText:
-            //  () => h('span', { style: { color: 'black' } }, '确定'),
+                //  () => h('span', { style: { color: 'black' } }, '确定'),
                 "确定",
             // okType: 'primary',
             cancelText: () => "取消",
@@ -307,14 +322,14 @@ function mouseDownVideo(e: MouseEvent) {
                     }
                     labelList.value.push(obj)
                     isActiveChoose.value = false
-                    piniaStore.updateIsAddLabel({cmMarkGroupId: 0, labelType: "", isAddLabel: false})
+                    piniaStore.updateIsAddLabel({ cmMarkGroupId: 0, labelType: "", isAddLabel: false })
                 }
             });
         })
     } else {
         //右键取消
         isActiveChoose.value = false
-        piniaStore.updateIsAddLabel({cmMarkGroupId: 0, labelType: "", isAddLabel: false})
+        piniaStore.updateIsAddLabel({ cmMarkGroupId: 0, labelType: "", isAddLabel: false })
     }
 }
 
@@ -336,26 +351,26 @@ function switchCamera(cameraId: string) {
     zlmApi.AddStreamProxy({
         'cameraId': cameraObj.id
     }).then((res: any) => {
-            if (judgeResponse(res)) return;
+        if (judgeResponse(res)) return;
-            // step3, connect stream.
+        // step3, connect stream.
-            // closeVideo();
+        // closeVideo();
-            let connInfo = res.data.data;
+        let connInfo = res.data.data;
-            let app = connInfo.app;
+        let app = connInfo.app;
-            let stream = connInfo.stream;
+        let stream = connInfo.stream;
-            let wsStreamUrl = apiUrl.ZlmWsStreamUrl;
+        let wsStreamUrl = apiUrl.ZlmWsStreamUrl;
-            wsStreamUrl = `${wsStreamUrl}/${app}/${stream}.live.flv`;
+        wsStreamUrl = `${wsStreamUrl}/${app}/${stream}.live.flv`;
-            jessibuca.value.play(wsStreamUrl);
+        jessibuca.value.play(wsStreamUrl);
-        }
+    }
     );
-        console.log("step4, active camera searcher.");
+    console.log("step4, active camera searcher.");
-        
+
     // step4, active camera searcher.
     markSearchApi.IsExistsSearcher({
         'cameraId': cameraObj.id
     }).then((res: any) => {
         if (judgeResponse(res)) return;
         let flag: boolean = res.data.data;
-        
+
         if (!flag) {
             console.log('not exist searcher.');
             markSearchApi.ActiveSearcher({
@@ -381,8 +396,8 @@ function switchCamera(cameraId: string) {
 }
 
 function getLabel(cbCameraId: string | number) {
-    let str = JSON.stringify({cbCameraId})
+    let str = JSON.stringify({ cbCameraId })
-    markLabelApi.GetList({queryJson: str}).then((res: any) => {
+    markLabelApi.GetList({ queryJson: str }).then((res: any) => {
         if (judgeResponse(res)) return;
         labelList.value = res.data.data
         labelList.value = labelList.value.map((item: any) => {
@@ -398,7 +413,7 @@ function getLabel(cbCameraId: string | number) {
 }
 
 function loadMarkLabelsByLoop(cameraObj: any, ms: number = 1000) {
-    
+
     if (curSelectKey.value != cameraObj.id) {
         console.log('load camera labels end.');
         return;
@@ -408,7 +423,7 @@ function loadMarkLabelsByLoop(cameraObj: any, ms: number = 1000) {
         loadMarkLabelsByLoop(cameraObj, ms);
         clearTimeout(timer)
         console.log(new Date());
-        
+
     }, ms);
 }
 
@@ -479,7 +494,7 @@ onUnmounted(() => {
             justify-content: center;
             align-items: center;
 
-            > div {
+            >div {
                 position: relative;
             }
 
@@ -488,6 +503,7 @@ onUnmounted(() => {
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -55%);
+                color: white;
             }
 
             img {