4.17websocket调试成功

src/views/modules/monitoring/barrier.vue

@@ -387,10 +387,7 @@
 			 */
 			getWarningPicture(warningData) {
 				// warningData为数组说明是初始化数据，为对象说明是ws推送的数据
-            console.log("this warningDAta")
-            console.log(warningData)
             this.warningList = warningData
-            //this.warningList.unshift(warningData)
             console.log("this warningList")
             console.log(this.warningList)
 

src/views/modules/monitoring/video-control.vue

@@ -0,0 +1,97 @@
+<template>
+   <video style="width: 100%;height: 100%"  ref="video"></video>
+</template>
+
+
+<script>
+    import qs from "qs";
+    export default {
+        props: ['msg'],
+        data() {
+            return {
+                rtspUrl:this.msg,
+            }
+        },
+        created() {
+           console.log(this.rtspUrl)
+           this.startVideo();
+        },
+        methods: {
+            startVideo() {
+                this.status = false;
+                this.pc = new RTCPeerConnection();
+                this.pc.ontrack = (e) => {
+                    let el = this.$refs.video;
+                    if(el){
+                        el.srcObject = event.streams[0];
+                        el.muted = true;
+                        el.autoplay = true;
+                        el.controls = true;
+                        // el.width = 600;
+                    }
+                };
+                this.pc.oniceconnectionstatechange = (e) => {
+                    console.log(
+                        new Date() + " ConnectionState:" + this.pc.iceConnectionState
+                    );
+                };
+                this.pc.onnegotiationneeded = this.handleNegotiationNeededEvent;
+                this.pc.addTransceiver("video", {
+                    direction: "sendrecv",
+                });
+                // 用于服务器保持连接状态
+                let sendChannel = this.pc.createDataChannel("KeepAlive");
+                sendChannel.onclose = () => console.log("sendChannel has closed");
+                sendChannel.onopen = () => {
+                    console.log("sendChannel has opened");
+                    sendChannel.send("ping");
+                    this.timer = setInterval(() => {
+                        sendChannel.send("ping");
+                    }, 1000);
+                };
+            },
+            async handleNegotiationNeededEvent() {
+                let offer = await this.pc.createOffer();
+                await this.pc.setLocalDescription(offer);
+                let params = qs.stringify({
+                    url: this.rtspUrl,
+                    data: btoa(this.pc.localDescription.sdp),
+                });
+                this.$http
+                    .post(window.GLOBAL_CONFIG['rtspApi_URL']+"/api/v1/play", params, {emulateJSON: true})
+                    .then(({ data: res }) => {
+                      console.log(`msg: ${res.msg}; data:${res.data}`);
+                        this.pc.setRemoteDescription(
+                            new RTCSessionDescription({
+                                type: "answer",
+                                sdp: atob(res.data),
+                            })
+                        );
+                    })
+                    .catch((e) => {
+                        console.warn(e);
+                    });
+            },
+            stopVideo() {
+                this.status = true;
+                if (this.timer != null) {
+                    clearInterval(this.timer);
+                }
+                if (this.pc != null) {
+                    this.pc.close();
+                }
+                try {
+                    let arr=this.$map.getBuilding(this.mapData.mapName).getFloor(this.mapData.floorName).getLayer('videoFence');
+                    if(arr&&arr.children){
+                        arr.children.forEach(item=>{
+                            item.stopFlash();
+                        })
+                    }
+                }catch(err){
+
+                }
+
+            },
+        }
+    }
+</script>