feat: 提交 CameraCenter 页面

Frontend/index.html

@@ -11,3 +11,7 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+<!-- 全局配置 -->
+<script src="/webrtc-streamer/webrtcstreamer.js"></script>
+<script>
+</script>

Frontend/public/webrtc-streamer/webrtcstreamer.js

@@ -0,0 +1,317 @@
+var WebRtcStreamer = (function () {
+
+    /**
+     * Interface with WebRTC-streamer API
+     * @constructor
+     * @param {string} videoElement - id of the video element tag
+     * @param {string} srvurl -  url of webrtc-streamer (default is current location)
+     */
+    var WebRtcStreamer = function WebRtcStreamer(videoElement, srvurl) {
+        if (typeof videoElement === "string") {
+            this.videoElement = document.getElementById(videoElement);
+        } else {
+            this.videoElement = videoElement;
+        }
+        this.srvurl = srvurl || location.protocol + "//" + window.location.hostname + ":" + window.location.port;
+        this.pc = null;
+
+        this.mediaConstraints = {offerToReceiveAudio: true, offerToReceiveVideo: true};
+
+        this.iceServers = null;
+        this.earlyCandidates = [];
+    }
+
+    WebRtcStreamer.prototype._handleHttpErrors = function (response) {
+        if (!response.ok) {
+            throw Error(response.statusText);
+        }
+        return response;
+    }
+
+    /**
+     * Connect a WebRTC Stream to videoElement
+     * @param {string} videourl - id of WebRTC video stream
+     * @param {string} audiourl - id of WebRTC audio stream
+     * @param {string} options -  options of WebRTC call
+     * @param {string} stream  -  local stream to send
+     */
+    WebRtcStreamer.prototype.connect = function (videourl, audiourl, options, localstream) {
+        this.disconnect();
+
+        // getIceServers is not already received
+        if (!this.iceServers) {
+            console.log("Get IceServers");
+
+            fetch(this.srvurl + "/api/getIceServers")
+                .then(this._handleHttpErrors)
+                .then((response) => (response.json()))
+                .then((response) => this.onReceiveGetIceServers.call(this, response, videourl, audiourl, options, localstream))
+                .catch((error) => this.onError("getIceServers " + error))
+
+        } else {
+            this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream);
+        }
+    }
+
+    /**
+     * Disconnect a WebRTC Stream and clear videoElement source
+     */
+    WebRtcStreamer.prototype.disconnect = function () {
+        if (this.videoElement?.srcObject) {
+            this.videoElement.srcObject.getTracks().forEach(track => {
+                track.stop()
+                this.videoElement.srcObject.removeTrack(track);
+            });
+        }
+        if (this.pc) {
+            fetch(this.srvurl + "/api/hangup?peerid=" + this.pc.peerid)
+                .then(this._handleHttpErrors)
+                .catch((error) => this.onError("hangup " + error))
+
+
+            try {
+                this.pc.close();
+            } catch (e) {
+                console.log("Failure close peer connection:" + e);
+            }
+            this.pc = null;
+        }
+    }
+
+    /*
+    * GetIceServers callback
+    */
+    WebRtcStreamer.prototype.onReceiveGetIceServers = function (iceServers, videourl, audiourl, options, stream) {
+        this.iceServers = iceServers;
+        this.pcConfig = iceServers || {"iceServers": []};
+        try {
+            this.createPeerConnection();
+
+            var callurl = this.srvurl + "/api/call?peerid=" + this.pc.peerid + "&url=" + encodeURIComponent(videourl);
+            if (audiourl) {
+                callurl += "&audiourl=" + encodeURIComponent(audiourl);
+            }
+            if (options) {
+                callurl += "&options=" + encodeURIComponent(options);
+            }
+
+            if (stream) {
+                this.pc.addStream(stream);
+            }
+
+            // clear early candidates
+            this.earlyCandidates.length = 0;
+
+            // create Offer
+            var bind = this;
+            this.pc.createOffer(this.mediaConstraints).then(function (sessionDescription) {
+                console.log("Create offer:" + JSON.stringify(sessionDescription));
+
+                bind.pc.setLocalDescription(sessionDescription
+                    , function () {
+                        fetch(callurl, {method: "POST", body: JSON.stringify(sessionDescription)})
+                            .then(bind._handleHttpErrors)
+                            .then((response) => (response.json()))
+                            .catch((error) => bind.onError("call " + error))
+                            .then((response) => bind.onReceiveCall.call(bind, response))
+                            .catch((error) => bind.onError("call " + error))
+
+                    }
+                    , function (error) {
+                        console.log("setLocalDescription error:" + JSON.stringify(error));
+                    });
+
+            }, function (error) {
+                alert("Create offer error:" + JSON.stringify(error));
+            });
+
+        } catch (e) {
+            this.disconnect();
+            alert("connect error: " + e);
+        }
+    }
+
+
+    WebRtcStreamer.prototype.getIceCandidate = function () {
+        fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid)
+            .then(this._handleHttpErrors)
+            .then((response) => (response.json()))
+            .then((response) => this.onReceiveCandidate.call(this, response))
+            .catch((error) => bind.onError("getIceCandidate " + error))
+    }
+
+    /*
+    * create RTCPeerConnection
+    */
+    WebRtcStreamer.prototype.createPeerConnection = function () {
+        console.log("createPeerConnection  config: " + JSON.stringify(this.pcConfig));
+        this.pc = new RTCPeerConnection(this.pcConfig);
+        var pc = this.pc;
+        pc.peerid = Math.random();
+
+        var bind = this;
+        pc.onicecandidate = function (evt) {
+            bind.onIceCandidate.call(bind, evt);
+        };
+        pc.onaddstream = function (evt) {
+            bind.onAddStream.call(bind, evt);
+        };
+        pc.oniceconnectionstatechange = function (evt) {
+            console.log("oniceconnectionstatechange  state: " + pc.iceConnectionState);
+            if (bind.videoElement) {
+                if (pc.iceConnectionState === "connected") {
+                    bind.videoElement.style.opacity = "1.0";
+                } else if (pc.iceConnectionState === "disconnected") {
+                    bind.videoElement.style.opacity = "0.25";
+                } else if ((pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed")) {
+                    bind.videoElement.style.opacity = "0.5";
+                } else if (pc.iceConnectionState === "new") {
+                    bind.getIceCandidate.call(bind)
+                }
+            }
+        }
+        pc.ondatachannel = function (evt) {
+            console.log("remote datachannel created:" + JSON.stringify(evt));
+
+            evt.channel.onopen = function () {
+                console.log("remote datachannel open");
+                this.send("remote channel openned");
+            }
+            evt.channel.onmessage = function (event) {
+                console.log("remote datachannel recv:" + JSON.stringify(event.data));
+            }
+        }
+        pc.onicegatheringstatechange = function () {
+            if (pc.iceGatheringState === "complete") {
+                const recvs = pc.getReceivers();
+
+                recvs.forEach((recv) => {
+                    if (recv.track && recv.track.kind === "video") {
+                        console.log("codecs:" + JSON.stringify(recv.getParameters().codecs))
+                    }
+                });
+            }
+        }
+
+        try {
+            var dataChannel = pc.createDataChannel("ClientDataChannel");
+            dataChannel.onopen = function () {
+                console.log("local datachannel open");
+                this.send("local channel openned");
+            }
+            dataChannel.onmessage = function (evt) {
+                console.log("local datachannel recv:" + JSON.stringify(evt.data));
+            }
+        } catch (e) {
+            console.log("Cannor create datachannel error: " + e);
+        }
+
+        console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig));
+        return pc;
+    }
+
+
+    /*
+    * RTCPeerConnection IceCandidate callback
+    */
+    WebRtcStreamer.prototype.onIceCandidate = function (event) {
+        if (event.candidate) {
+            if (this.pc.currentRemoteDescription) {
+                this.addIceCandidate(this.pc.peerid, event.candidate);
+            } else {
+                this.earlyCandidates.push(event.candidate);
+            }
+        } else {
+            console.log("End of candidates.");
+        }
+    }
+
+
+    WebRtcStreamer.prototype.addIceCandidate = function (peerid, candidate) {
+        fetch(this.srvurl + "/api/addIceCandidate?peerid=" + peerid, {method: "POST", body: JSON.stringify(candidate)})
+            .then(this._handleHttpErrors)
+            .then((response) => (response.json()))
+            .then((response) => {
+                console.log("addIceCandidate ok:" + response)
+            })
+            .catch((error) => this.onError("addIceCandidate " + error))
+    }
+
+    /*
+    * RTCPeerConnection AddTrack callback
+    */
+    WebRtcStreamer.prototype.onAddStream = function (event) {
+        console.log("Remote track added:" + JSON.stringify(event));
+
+        this.videoElement.srcObject = event.stream;
+        var promise = this.videoElement.play();
+        if (promise !== undefined) {
+            var bind = this;
+            promise.catch(function (error) {
+                console.warn("error:" + error);
+                bind.videoElement.setAttribute("controls", true);
+            });
+        }
+    }
+
+    /*
+    * AJAX /call callback
+    */
+    WebRtcStreamer.prototype.onReceiveCall = function (dataJson) {
+        var bind = this;
+        console.log("offer: " + JSON.stringify(dataJson));
+        var descr = new RTCSessionDescription(dataJson);
+        this.pc.setRemoteDescription(descr
+            , function () {
+                console.log("setRemoteDescription ok");
+                while (bind.earlyCandidates.length) {
+                    var candidate = bind.earlyCandidates.shift();
+                    bind.addIceCandidate.call(bind, bind.pc.peerid, candidate);
+                }
+
+                bind.getIceCandidate.call(bind)
+            }
+            , function (error) {
+                console.log("setRemoteDescription error:" + JSON.stringify(error));
+            });
+    }
+
+    /*
+    * AJAX /getIceCandidate callback
+    */
+    WebRtcStreamer.prototype.onReceiveCandidate = function (dataJson) {
+        console.log("candidate: " + JSON.stringify(dataJson));
+        if (dataJson) {
+            for (var i = 0; i < dataJson.length; i++) {
+                var candidate = new RTCIceCandidate(dataJson[i]);
+
+                console.log("Adding ICE candidate :" + JSON.stringify(candidate));
+                this.pc.addIceCandidate(candidate
+                    , function () {
+                        console.log("addIceCandidate OK");
+                    }
+                    , function (error) {
+                        console.log("addIceCandidate error:" + JSON.stringify(error));
+                    });
+            }
+            this.pc.addIceCandidate();
+        }
+    }
+
+
+    /*
+    * AJAX callback for Error
+    */
+    WebRtcStreamer.prototype.onError = function (status) {
+        console.log("onError:" + status);
+    }
+
+    return WebRtcStreamer;
+})();
+
+if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
+    window.WebRtcStreamer = WebRtcStreamer;
+}
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = WebRtcStreamer;
+}

Frontend/src/api/cameraBase/cameraApi.ts

@@ -0,0 +1,25 @@
+import {axios} from '@/utils/axios';
+import {apiUrl} from "@/api";
+
+enum Api {
+    Add = '/cbCamera/add',
+    Update = '/cbCamera/update',
+    Delete = '/cbCamera/delete',
+    Get = '/cbCamera/get',
+    GetList = '/cbCamera/getList',
+    GetPageList = '/cbCamera/getPageList',
+}
+
+const CisApiUrl = apiUrl.CisApiUrl;
+
+export const Add = (params?: any) => axios.post(CisApiUrl + Api.Add, params)
+
+export const Update = (params?: any) => axios.post(CisApiUrl + Api.Update, params)
+
+export const Delete = (params?: any) => axios.post(CisApiUrl + Api.Delete, params)
+
+export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, {params: params})
+
+export const GetList = (params?: any) => axios.get(CisApiUrl + Api.GetList, {params: params})
+
+export const GetPageList = (params?: any) => axios.get(CisApiUrl + Api.GetPageList, {params: params})

Frontend/src/api/cameraMark/cameraGroupApi.ts

@@ -0,0 +1,25 @@
+import {axios} from '@/utils/axios';
+import {apiUrl} from "@/api";
+
+enum Api {
+    Add = '/cmMarkGroup/add',
+    Update = '/cmMarkGroup/update',
+    Delete = '/cmMarkGroup/delete',
+    Get = '/cmMarkGroup/get',
+    GetList = '/cmMarkGroup/getList',
+    GetPageList = '/cmMarkGroup/getPageList',
+}
+
+const CisApiUrl = apiUrl.CisApiUrl;
+
+export const Add = (params?: any) => axios.post(CisApiUrl + Api.Add, params)
+
+export const Update = (params?: any) => axios.post(CisApiUrl + Api.Update, params)
+
+export const Delete = (params?: any) => axios.post(CisApiUrl + Api.Delete, params)
+
+export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, {params: params})
+
+export const GetList = (params?: any) => axios.get(CisApiUrl + Api.GetList, {params: params})
+
+export const GetPageList = (params?: any) => axios.get(CisApiUrl + Api.GetPageList, {params: params})

Frontend/src/api/cameraMark/cameraLabelApi.ts

@@ -0,0 +1,25 @@
+import {axios} from '@/utils/axios';
+import {apiUrl} from "@/api";
+
+enum Api {
+    Add = '/cmMarkGroup/add',
+    Update = '/cmMarkGroup/update',
+    Delete = '/cmMarkGroup/delete',
+    Get = '/cmMarkGroup/get',
+    GetList = '/cmMarkGroup/getList',
+    GetPageList = '/cmMarkGroup/getPageList',
+}
+
+const CisApiUrl = apiUrl.CisApiUrl;
+
+export const Add = (params?: any) => axios.post(CisApiUrl + Api.Add, params)
+
+export const Update = (params?: any) => axios.post(CisApiUrl + Api.Update, params)
+
+export const Delete = (params?: any) => axios.post(CisApiUrl + Api.Delete, params)
+
+export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, {params: params})
+
+export const GetList = (params?: any) => axios.get(CisApiUrl + Api.GetList, {params: params})
+
+export const GetPageList = (params?: any) => axios.get(CisApiUrl + Api.GetPageList, {params: params})

Frontend/src/api/cameraMark/markSearchApi.ts

@@ -0,0 +1,22 @@
+import {axios} from '@/utils/axios';
+import {apiUrl} from "@/api";
+
+enum Api {
+    ActiveCamera = '/markSearch/activeCamera',
+    DeActiveCamera = '/markSearch/deActiveCamera',
+    AddCameraMarkLabel = '/markSearch/addCameraMarkLabel',
+    DeleteCameraMarkLabel = '/markSearch/deleteCameraMarkLabel',
+    GetMarkLabelCalcResultList = '/markSearch/GetMarkLabelCalcResultList',
+}
+
+const CisApiUrl = apiUrl.CisApiUrl;
+
+export const ActiveCamera = (params?: any) => axios.post(CisApiUrl + Api.ActiveCamera, params)
+
+export const DeActiveCamera = (params?: any) => axios.post(CisApiUrl + Api.DeActiveCamera, params)
+
+export const AddCameraMarkLabel = (params?: any) => axios.post(CisApiUrl + Api.AddCameraMarkLabel, params)
+
+export const DeleteCameraMarkLabel = (params?: any) => axios.post(CisApiUrl + Api.DeleteCameraMarkLabel, params)
+
+export const GetMarkLabelCalcResultList = (params?: any) => axios.get(CisApiUrl + Api.GetMarkLabelCalcResultList, {params: params})

Frontend/src/api/index.ts

@@ -0,0 +1,5 @@
+export const apiUrl = {
+    CisApiUrl: 'http://192.168.1.119:5000/api',
+    WebRtcUrl: 'http://192.168.1.119:8000',
+    // CisApiUrl: 'https://192.168.1.119:5001/api'
+}

Frontend/src/utils/axios.ts

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+let apiBaseUrl = "/api";
+
+const service = axios.create({
+    baseURL: apiBaseUrl, // api base_url
+    timeout: 9000 // 请求超时时间
+})
+
+export {
+    service as axios,
+}

Frontend/src/views/cameraBase/camera/index.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

Frontend/src/views/cameraMark/markGroup/index.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

Frontend/src/views/cameraMark/markLabel/index.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

Frontend/src/views/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout style="height: 100vh;">
+  <a-layout style="height: 100%;">
 
     <a-layout-header class="header" style="padding: 0;">
       <div style="float: left; padding: 0 20px 0 20px;"><img src="@assets/vue.svg" alt=""/></div>
@@ -9,34 +9,36 @@
           style="line-height: 64px;"
       >
         <a-menu-item key="curd" @click="pageName='curd'">Curd</a-menu-item>
-        <a-menu-item key="videoCenter" @click="pageName='videoCenter'">VideoCenter</a-menu-item>
+        <a-menu-item key="cameraCenter" @click="pageName='cameraCenter'">CameraCenter</a-menu-item>
       </a-menu>
     </a-layout-header>
 
-    <a-layout class="page-wrapper">
+    <a-layout>
+      <div class="page-wrapper">
         <div class="page-tab" v-if="pageName==='curd'">
           <Curd/>
         </div>
-      <div class="page-tab" v-else-if="pageName==='videoCenter'">
+        <div class="page-tab" v-else-if="pageName==='cameraCenter'">
-        <VideoCenter/>
+          <CameraCenter/>
+        </div>
       </div>
     </a-layout>
 
   </a-layout>
 </template>
 
-<script lang="ts">
+<script>
-import Curd from '@views/page/Curd.vue';
+import Curd from '@views/page/curd.vue';
-import VideoCenter from '@views/page/VideoCenter.vue';
+import CameraCenter from '@views/page/cameraCenter.vue';
 
 export default {
-  components: {VideoCenter, Curd},
+  name: 'Index',
-  data() {
+  components: {Curd, CameraCenter},
-    return {
+  props: {
-      pageName: "curd", //默认选中 curd 页面
+    pageName: {type: String, default: 'curd'}
-    };
+  },
-  }
 }
+
 </script>
 
 <style scoped>

Frontend/src/views/page/VideoCenter.vue

@@ -1,17 +0,0 @@
-<template>
-  <a-layout style="position: fixed; height: 100%; width: 100%;">
-    <div>
-      <h1>This is video center page.</h1>
-    </div>
-  </a-layout>
-</template>
-
-<script>
-export default {
-  name: "VideoCenter"
-}
-</script>
-
-<style scoped>
-
-</style>

Frontend/src/views/page/cameraCenter.vue

@@ -0,0 +1,121 @@
+<template>
+  <a-layout style="position: absolute; height: 100%; width: 100%;">
+
+    <a-layout-sider width="200" style="background: #fff">
+
+      <div style="background: aqua; height: 50%">
+        <a-tree
+            :tree-data="treeData"
+            @select="selectTreeNode"
+        />
+      </div>
+
+      <div style="background: bisque; height: 50%">
+
+      </div>
+
+    </a-layout-sider>
+
+    <a-layout style="padding: 0 16px 16px;">
+
+      <div id="videoWrapper">
+        <div id="videoCanvas">
+          <video id="videoPlayer" autoplay muted>
+
+          </video>
+        </div>
+      </div>
+
+    </a-layout>
+
+  </a-layout>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+import type {TreeProps} from 'ant-design-vue';
+import * as cameraApi from '@/api/cameraBase/cameraApi';
+import {apiUrl} from "@/api";
+
+export default defineComponent({
+  data() {
+    return {
+      curSelectKey: '',
+      cameraMap: new Map<string, any>(),
+      webRtcServer: WebRtcStreamer
+    }
+  },
+  setup() {
+    let treeData = ref<TreeProps['treeData']>([]);
+    return {
+      treeData,
+    };
+  },
+  created() {
+    this.$nextTick(() => {
+      this.loadTreeData();
+      this.loadVideoPlayer();
+    });
+  },
+  methods: {
+    loadTreeData() {
+      let that: any = this;
+      cameraApi.GetList().then((res) => {
+        let list = res.data.data;
+        for (let item of list) {
+          this.cameraMap.set(item.id, item);
+          that.treeData.push({title: item.ip, key: item.id});
+        }
+      });
+    },
+    selectTreeNode(selectedKeys: any, e: any) {
+      if (!e.selected) return;
+      let key = selectedKeys[0];
+      if (this.curSelectKey !== key) {
+        this.curSelectKey = key;
+        this.switchCamera(key);
+      }
+    },
+    loadVideoPlayer() {
+      let elmId = 'videoPlayer';
+      let url = apiUrl.WebRtcUrl;
+      this.webRtcServer = new WebRtcStreamer(elmId, url);
+      document.querySelector('#videoPlayer').addEventListener('loadmetadata',function (){
+        console.log("============================================================");
+        console.log(this);
+        console.log("============================================================");
+      });
+    },
+    switchCamera(cameraId: string) {
+      console.log('camera switch.');
+      let cameraObj = this.cameraMap.get(cameraId);
+      // step1, get camera obj.
+      if (cameraObj == null) {
+        console.log('camera not found.');
+        return;
+      }
+
+      // step2, get camera rtsp url.
+      let rtspUrl = this.getRtspUrl(cameraObj);
+
+      // step3, connect webrtc-steamer.
+      this.webRtcServer.disconnect();
+      this.webRtcServer.connect(rtspUrl);
+
+    },
+    getRtspUrl(cameraObj: any): string {
+      return "rtsp://admin:hk123456@192.168.1.65:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1"
+    }
+  },
+  beforeDestroy() {
+    // 释放 webRtcServer
+    if (this.webRtcServer === null) return;
+    this.webRtcServer.disconnect();
+    this.webRtcServer = null;
+  }
+});
+</script>
+
+<style>
+
+</style>

Frontend/src/views/page/Curd.vue → Frontend/src/views/page/curd.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout style="position: fixed; height: 100%; width: 100%;">
+  <a-layout style="position: absolute; height: 100%; width: 100%;">
 
     <a-layout-sider width="200" style="background: #fff">
       <a-menu
@@ -50,6 +50,7 @@
   </a-layout>
 </template>
 
+
 <script>
 export default {
   name: "Curd"

Frontend/vite.config.ts

@@ -9,17 +9,18 @@ export default defineConfig({
     alias:{
       '~': resolve(__dirname, './'),
       "@": resolve(__dirname, "./src"),
+      "@api": resolve(__dirname, "./src/api"),
       "@assets": resolve(__dirname, "./src/assets"),
       "@components": resolve(__dirname, "./src/components"),
-      "@images": resolve(__dirname, "./src/assets/images"),
-      "@views": resolve(__dirname, "./src/views"),
       "@store": resolve(__dirname, "./src/store"),
+      "@views": resolve(__dirname, "./src/views"),
     }
   },
   server: {
     host: true, // 类型：string | boolean 指定服务器应该监听哪个 IP 地址
     port: 3100, // 类型： number 指定服务器端口
     cors: true, // 类型： boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源
+    hmr : true
   },
   css: {
     preprocessorOptions: {