小窗

components.d.ts

@@ -17,6 +17,7 @@ declare module '@vue/runtime-core' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ATree: typeof import('ant-design-vue/es')['Tree']

src/views/page/cameraCenter.vue

@@ -34,6 +34,18 @@
                     </a-menu>
                 </template>
             </a-dropdown>
+            <a-popconfirm 
+                placement="bottomRight" 
+                ok-text="Yes" 
+                cancel-text="No"  
+                :visible="item.windowVisible"
+                @cancel="windowCancel(item)"
+            >
+               <template #title>
+                   <cameraWindow :itemData="item"></cameraWindow>
+               </template>
+               <!-- <a-button>TL</a-button> -->
+            </a-popconfirm>
         </div>
         <div class="labels lavels-build" v-if="addLabel.isAddLabel && addLabel.labelType == '建筑标签'"
             :style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
@@ -189,9 +201,16 @@ function deleteLabel(id: number) {
 //标签点击事件
 function itemClick(item:any){
     // console.log("点击",item);
-    popup("监控画面", [h(cameraWindow, { windowData: item })], "cameraWindow");
+    // popup("监控画面", [h(cameraWindow, { windowData: item })], "cameraWindow");
+    //打开小窗
+    item.windowVisible = true
+}
+//小窗关闭
+function windowCancel(item: any){
+    item.windowVisible = false
 }
 
+
 function loadVideoPlayer() {
     let elmId = 'videoPlayer';
     let url = apiUrl.WebRtcUrl;
@@ -296,7 +315,8 @@ function mouseDownVideo(e: MouseEvent) {
                         isDelete: false,
                         inFlag: true,
                         name: name,
-                        groupName: name
+                        groupName: name,
+                        windowVisible: false //小窗开关状态
                     }
                     labelList.value.push(obj)
                     isActiveChoose.value = false

src/views/page/cameraWindow.vue

@@ -1,10 +1,236 @@
 <template>
-<div>asdasdasdasdasdasd</div>
 
+    <div id="videoWrapper">
+        <div id="windowVideoPlayer" ></div>
+     
+        <CameraLeftMenu></CameraLeftMenu>
+        <!-- 云台控制 -->
+        <VideoControlSimple></VideoControlSimple>
+    </div>
 </template>
 
 <script setup lang='ts'>
+////@ts-nocheck
+import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch } from "vue";
+import * as markSearchApi from '@/axios/core/markSearchApi';
+import { useStore } from '@/store/index';
+import { apiUrl } from "@/axios";
+import { storeToRefs } from 'pinia';
+import Msg from "@/utils/message";
+import CameraLeftMenu from '@/views/page/Aside/cameraLeftMenu.vue'
+import VideoControlSimple from './VideoControl/VideoControlSimple.vue';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+let piniaStore = useStore();
+let player = <HTMLVideoElement>document.querySelector('#windowVideoPlayer')
+let canvasWidth = ref(0)
+let canvasHeight = ref(0)
+let curSelectKey = storeToRefs(piniaStore).curSelectKey
+let closeVideoKey = storeToRefs(piniaStore).closeVideoKey
+let cameraMap = storeToRefs(piniaStore).cameraMap
+let isActiveChoose = ref(false)
+let labelList = ref<any[]>([])
+let addLabel = storeToRefs(piniaStore).addLabel
+let addLabelLeft = ref(0);
+let addLabelTop = ref(0);
+var jessibuca = ref();
+const curVideoKey = ref()
+onMounted(() => {
+    {
+        player = <HTMLVideoElement>document.querySelector('#windowVideoPlayer');
+        loadVideoCanvas();
+        changeVideoCanvasSize();
+        create()
+    }
+})
+
+
+
+watch(curSelectKey, (newVal, oldVal) => {
+    switchCamera(newVal)
+})
+watch(closeVideoKey, (newVal, oldVal) => {
+    if (curVideoKey.value == newVal) {
+        destroyVideo()
+        piniaStore.updateCloseVideoKey("")
+        piniaStore.updateCurSelectKey("")
+    }
+
+})
+watch(addLabel, (newVal, oldVal) => {
+    if (newVal.isAddLabel) {
+        isActiveChoose.value = true
+        document.body.onmousemove = (e) => {
+            addLabelTop.value = e.clientY
+            addLabelLeft.value = e.clientX
+
+        }
+    }
+})
+function destroyVideo() {
+    jessibuca.value.destroy();
+    create()
+    labelList.value = []
+}
+//创建流媒体
+function create() {
+    var showOperateBtns = false; // 是否显示按钮
+    var forceNoOffscreen = true;  //
+
+    jessibuca.value = new Jessibuca({
+        container: player,
+        videoBuffer: 0.5, // 缓存时长
+        isResize: false,
+        text: "",
+        loadingText: "",
+        useMSE: false,
+        debug: true,
+        showBandwidth: showOperateBtns, // 显示网速
+        operateBtns: {
+            fullscreen: showOperateBtns,
+            screenshot: showOperateBtns,
+            play: showOperateBtns,
+            audio: false,
+            recorder: false
+        },
+        forceNoOffscreen: forceNoOffscreen,
+        isNotMute: false,
+    },);
+
+    jessibuca.value.onLog = (msg: any) => console.error(msg);
+    jessibuca.value.onRecord = (status: any) => console.log('onRecord', status);
+    jessibuca.value.onPause = () => console.log('onPause');
+    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.play("ws://192.168.1.117:8080/jessica/live/test.flv")
+}
+
+
+function loadVideoCanvas() {
+    window.addEventListener('resize', () => {
+        changeVideoCanvasSize();
+    });
+}
+
+function changeVideoCanvasSize() {
+    canvasWidth.value = player.clientWidth;
+    canvasHeight.value = player.clientHeight;
+}
+
+
+
+function switchCamera(cameraId: string) {
+    console.log('camera switch.', cameraId, typeof cameraId);
+
+    // step1, get camera obj.
+    console.log('get camera obj.', cameraMap.value);
+    let cameraObj = cameraMap.value.get(cameraId);
+    console.log(cameraObj, 'cameraObj');
+
+    if (!cameraObj) {
+        console.log('camera obj not found.');
+
+        return;
+    }
+    destroyVideo()
+    console.log('connect webrtc-steamer.');
+    jessibuca.value.play("ws://192.168.1.117:8080/jessica/live/test.flv")
+    curVideoKey.value = cameraId
+    // step4, active camera searcher.
+    markSearchApi.IsExistsSearcher({
+        'cameraId': cameraObj.id
+    }).then((res: any) => {
+        let flag: boolean = res.data.data;
+        if (!flag) {
+            console.log('not exist searcher.');
+            markSearchApi.ActiveSearcher({
+                'cameraId': cameraObj.id
+            }).then((res: any) => {
+                let flag: boolean = res.data.data;
+                console.log('activate searcher : ', flag);
+                if (flag) {
+                    console.log('load camera labels');
+                }
+            });
+        } else {
+            console.log('load camera labels');
+        }
+    })
+
+    // step5, load camera labels.
+}
+
+
+//刷新页面
+window.onbeforeunload = () => {
+    jessibuca.value.destroy()
+};
+onUnmounted(() => {
+    {
+        jessibuca.value.destroy()
+    }
+}) 
 </script>
 
-<style lang="less" scoped>
+<style scoped lang='less'>
+#videoWrapper {
+    // height: 100vh;
+    position: relative;
+    overflow: hidden;
+
+
+    #windowVideoPlayer {
+        height: 100%;
+        width: 100%;
+        object-fit: fill;
+
+    }
+
+    .labels {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+
+        .labels-item {
+            position: relative;
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            >div {
+                position: relative;
+            }
+
+            .label-content {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -55%);
+            }
+
+            img {
+                width: 120px;
+                height: 50px;
+            }
+        }
+    }
+
+    .lavels-video {
+        position: fixed;
+        transform: translate(-50%, -100%);
+    }
+
+    .lavels-build {
+
+        transform: translate(-10px, -10px);
+        position: fixed;
+    }
+
+}
+
+:deep(.ant-dropdown-menu-title-content) {
+    color: #000 !important;
+}
 </style>