webRtc

public/antd_color.less

@@ -1389,13 +1389,13 @@ tr.ant-table-expanded-row:hover {background: #fbfbfb;}
 .ant-tag-gold-inverse {color: #fff;background: #faad14;border-color: #faad14;}
 .ant-tag-cyan {color: #13c2c2;background: #e6fffb;border-color: #87e8de;}
 .ant-tag-cyan-inverse {color: #fff;background: #13c2c2;border-color: #13c2c2;}
-.ant-tag-lime {color: #a0d911;background: color(~`colorPalette("@{text-color}", 1)`);border-color: #eaff8f;}
+.ant-tag-lime {color: #a0d911;background: #fcffe6;border-color: #eaff8f;}
 .ant-tag-lime-inverse {color: #fff;background: #a0d911;border-color: #a0d911;}
 .ant-tag-green {color: #52c41a;background: #f6ffed;border-color: #b7eb8f;}
 .ant-tag-green-inverse {color: #fff;background: #52c41a;border-color: #52c41a;}
 .ant-tag-blue {color: #1890ff;background: #e6f7ff;border-color: #91d5ff;}
 .ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;}
-.ant-tag-geekblue {color: #2f54eb;background: #f0f5ff;border-color: #adc6ff;}
+.ant-tag-geekblue {color: #2f54eb;background: color(~`colorPalette("@{text-color-secondary}", 3)`);border-color: #adc6ff;}
 .ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;}
 .ant-tag-purple {color: #722ed1;background: #f9f0ff;border-color: #d3adf7;}
 .ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;}

public/index.html

@@ -11,7 +11,6 @@
     <script src="/video_play_plugins/video.js"></script>
     <script src="/video_play_plugins/videojs-contrib-hls.min.js"></script>
     <script src="/video_play_plugins/videojs-contrib-hls.min.js"></script>
-    
     <title>垛机视觉系统</title>
 </head>
 
@@ -20,6 +19,7 @@
         <strong>We're sorry but 垛机视觉系统 doesn't work properly without JavaScript enabled. Please enable it to
             continue.</strong>
     </noscript>
+    
     <div id="app"></div>
 <!--    动态更新antd主题-->
     <link rel="stylesheet/less" type="text/css" href="/antd_color.less" />

public/video_play_plugins/webrtcplayer.js

@@ -1,121 +0,0 @@
-class WebRtcPlayer {
-  static server = '127.0.0.1:8083';
-  webrtc = null;
-  video = null;
-  server = null;
-  codecLink = null;
-  rsdpLink = null;
-  stream = new MediaStream();
-  uuid = null;
-  options={
-    onStatusChange:null 
-  };
-
-  constructor(id, uuid, options={}) {
-    this.server = WebRtcPlayer.server;
-    this.video = document.getElementById(id);
-    this.uuid = uuid;
-    Object.assign(this.options, options);
-    this.createLinks();
-    this.play();
-  }
-
-  createLinks() {
-    this.codecLink = "//" + this.server + "/stream/codec/" + this.uuid
-    this.rsdpLink = "//" + this.server + "/stream/receiver/" + this.uuid
-  }
-
-  play() {
-    this.webrtc = new RTCPeerConnection({
-      iceServers: [{
-        urls: ["stun:stun.l.google.com:19302"]
-      }]
-    });
-    if(this.webrtc){
-
-    }else{
-      console.log("no")
-    }
-    this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
-    this.webrtc.ontrack = this.onTrack.bind(this);
-    fetch(this.codecLink)
-      .then((response) => {
-        response.json().then((data) => {
-          data.forEach((item, i) => {
-            this.webrtc.addTransceiver(item.Type, {
-              'direction': 'sendrecv'
-            });
-          });
-        });
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-
-    this.webrtc.onconnectionstatechange = () => {
-	   if(this.webrtc.connectionState == 'connected' || this.webrtc.connectionState == 'connecting'){
-		   
-	   }else{
-		   console.log(this.webrtc.connectionState)
-		   this.load(this.uuid);
-	   }
-      
-    }
-  }
-
-  async handleNegotiationNeeded() {
-    let offer = await this.webrtc.createOffer();
-    await this.webrtc.setLocalDescription(offer);
-    let formData = new FormData();
-    formData.append('suuid', this.uuid);
-    formData.append('data', btoa(this.webrtc.localDescription.sdp));
-    fetch(this.rsdpLink, {
-        method: 'POST',
-        body: formData
-      })
-      .then((response) => {
-        response.text().then((data) => {
-          this.webrtc.setRemoteDescription(new RTCSessionDescription({
-            type: 'answer',
-            sdp: atob(data)
-          }))
-        });
-      })
-      .catch((err) => {})
-  }
-
-  onTrack(event) {
-    this.stream.addTrack(event.track);
-    this.video.srcObject = this.stream;
-    this.video.play();
-  }
-
-  load(uuid) {
-    this.destroy();
-    this.uuid = uuid;
-    this.createLinks();
-    this.play();
-  }
-
-  destroy() {
-
-    this.webrtc.close();
-    this.webrtc = null;
-    this.video.srcObject = null;
-    this.stream = new MediaStream();
-  }
-
-  getImageUrl() {
-    let canvas = document.createElement("canvas");
-    canvas.width = this.video.videoWidth;
-    canvas.height = this.video.videoHeight;
-    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
-    let dataURL = canvas.toDataURL();
-    canvas.remove();
-    return dataURL;
-  }
-
-  static setServer(serv) {
-    this.server = serv;
-  }
-}

src/api/http/http-api.js

@@ -45,6 +45,11 @@ export default  {
         url: "/camera/page",
         name: "获取球机列表"
     },
+    getVideoServer:{
+        method: "GET",
+        url: "/realTime/videoServer",
+        name: "获取视频服务器"
+    },
     addCamera: {
         method: "POST",
         url: "/camera",

src/views/realTimeMonitoring/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="realTime bg-white">
-        <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange">
+        <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange" padding:10px>
             <a-tab-pane :key="item.streetId.toString()" :tab="item.streetName" v-for="item in realTimeListData"></a-tab-pane>
         </a-tabs>
 <!--        {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
@@ -14,7 +14,7 @@
                         marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
                     }"
             >
-                <video :id=item.id autoplay controls muted ></video>
+                <video :id="`camera${item.id}`" autoplay controls muted ></video>
                 <!-- <video-player
                     v-if="showVideo"
                     @showModel="showModel(item)"
@@ -59,6 +59,7 @@ export default {
     },
     inject: ['reload'],
     mounted() {
+        this.setVideoServer()
         this.getRealTimeList()
         if (sessionStorage.getItem('tabKey') == null) {
             sessionStorage.setItem('tabKey', 0)
@@ -86,8 +87,11 @@ export default {
                 if(res.code == 200) {
                     this.realTimeListData = res.data.reverse();
                     this.showVideo = true;
-                    this.autoPlay()
+                    this.$nextTick(() => {
+                        this.autoPlay()
+                    })
                 }
+                
             }).catch(err => {
                 console.log(err)
             })
@@ -103,27 +107,35 @@ export default {
             })
         },
         autoPlay(){
-            WebRtcPlayer.setServer('localhost:8083');
-            console.log("here")
-            console.log(this.realTimeListData)
             for(var a of this.realTimeListData){
-                console.log(a)
                 for (let b of a.cameras){
-                    console.log("www")
+                    let video = document.getElementById('camera'+b.id);
-                    console.log(b.id)
+                    let player = new WebRtcPlayer(video,'camera'+b.id);
-                    let player = new WebRtcPlayer(b.id.toString(),'H264_AAC');
+                    player.load('camera'+b.id);
-                    player.load('H264_AAC');
                 }
                 
             }
         
-        }   
+        },
+        setVideoServer(){
+            this.$api.httpApi.getVideoServer({
+                data: {}
+            }).then(res => {
+                if(res.code == 200) {
+                    WebRtcPlayer.setServer(res.data.toString());
+                }
+                
+            }).catch(err => {
+                console.log(err)
+            })
+        }
+  
     },
 };
 </script>
 
 <style lang='scss' scoped>
 .realTime {
-    padding: 24px;
+    padding: 10px;
 }
 </style>

src/views/realTimeMonitoring/webrtcplayer.js

@@ -8,12 +8,13 @@ class WebRtcPlayer {
   stream = new MediaStream();
   uuid = null;
   options={
-    onStatusChange:null 
+    onStatusChange:null
   };
 
-  constructor(id, uuid, options={}) {
+  constructor(video1, uuid, options={}) {
     this.server = WebRtcPlayer.server;
-    this.video = document.getElementById(id);
+    //this.video = document.getElementById(id);
+    this.video = video1
     this.uuid = uuid;
     Object.assign(this.options, options);
     this.createLinks();