视频流多服务器配置

public/antd_color.less

@@ -30,7 +30,7 @@ button::-moz-focus-inner,
 [type='submit']::-moz-focus-inner {border-style: none;}
 fieldset {border: 0;}
 legend {color: inherit;}
-mark {background-color: #feffe6;}
+mark {background-color: color(~`colorPalette("@{heading-color}", 1)`);}
 ::selection {color: #fff;background: @primary-color;}
 .anticon {color: inherit;}
 html {--antd-wave-shadow-color: @primary-color;}
@@ -1383,7 +1383,7 @@ tr.ant-table-expanded-row:hover {background: #fbfbfb;}
 .ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;}
 .ant-tag-orange {color: #fa8c16;background: #fff7e6;border-color: #ffd591;}
 .ant-tag-orange-inverse {color: #fff;background: #fa8c16;border-color: #fa8c16;}
-.ant-tag-yellow {color: #fadb14;background: #feffe6;border-color: #fffb8f;}
+.ant-tag-yellow {color: #fadb14;background: color(~`colorPalette("@{heading-color}", 1)`);border-color: #fffb8f;}
 .ant-tag-yellow-inverse {color: #fff;background: #fadb14;border-color: #fadb14;}
 .ant-tag-gold {color: #faad14;background: #fffbe6;border-color: #ffe58f;}
 .ant-tag-gold-inverse {color: #fff;background: #faad14;border-color: #faad14;}

public/static/webrtcplayer.js

@@ -1,5 +1,5 @@
 class WebRtcPlayer {
-    static server = '127.0.0.1:8083';
+   
     webrtc = null;
     video = null;
     server = null;
@@ -11,9 +11,9 @@ class WebRtcPlayer {
         onStatusChange:null
     };
 
-    constructor(video1, uuid, options={}) {
+    constructor(server,video1, uuid, options={}) {
         console.log("new uuid:"+uuid)
-        this.server = WebRtcPlayer.server;
+        this.server = server;
         //this.video = document.getElementById(id);
         this.video = video1
         this.uuid = uuid;
@@ -116,8 +116,5 @@ class WebRtcPlayer {
         return dataURL;
     }
 
-    static setServer(serv) {
-        this.server = serv;
-    }
 }
 export default WebRtcPlayer; 

src/views/cameraManage/index.vue

@@ -62,6 +62,10 @@ const columns = [
         title: '球机IP',
         dataIndex: 'ip',
     },
+    {
+        title: '视频流IP',
+        dataIndex: 'rtcServer',
+    },
     {
         title: '修改时间',
         dataIndex: 'updateTime',

src/views/cameraManage/model.vue

@@ -25,6 +25,11 @@
                              v-decorator="['ip', { rules: [{ required: true, message: '请输入球机ip!' }] }]"
                          />
                      </a-form-item>
+                     <a-form-item label="视频流IP" :label-col="formItemVerticalLayout.labelCol">
+                         <a-input
+                             v-decorator="['rtcServer']"
+                         />
+                     </a-form-item>
                  </a-form>
              </a-modal>
          </template>
@@ -220,15 +225,15 @@ export default {
                     this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
                         name:newVal.name,
                         ip:newVal.ip,
-                        rtsp:newVal.rtsp
+                        rtsp:newVal.rtsp,
+                        rtcServer:newVal.rtcServer,
+                        rtcServerPort:newVal.rtcServerPort
                     })
-
                 })
             }else if (newVal.id && this.type=='config'){
                 this.id = newVal.id
                 this.mdata = newVal
                 console.log(newVal)
-               
             }
 
         },
@@ -290,7 +295,10 @@ export default {
         }
     },
     destroy(){
-        //this.player.destroy()
+        if(this.player != null){
+            this.player.destroy()
+        }
+        
     },
     methods: {
         handleOk() {
@@ -346,7 +354,9 @@ export default {
         autoPlay(id){
             let video = document.getElementById('config-camera'+id);
             if(video){
-                let player = new WebRtcPlayer(video,'camera'+id);
+                let server = this.mdata.rtcServer+":"+this.mdata.rtcServerPort
+                console.log("server:"+server)
+                let player = new WebRtcPlayer(server,video,'camera'+id);
                 console.log("okkkkkk")
                 //player.load('camera'+id);
                 this.player = player
@@ -358,9 +368,7 @@ export default {
             this.$api.httpApi.getVideoServer({
                 data: {}
             }).then(res => {
-                if(res.code == 200) {
-                    WebRtcPlayer.setServer(res.data.toString());
-                }
+                
                 
             }).catch(err => {
                 console.log(err)

src/views/realTimeMonitoring/index.vue

@@ -114,7 +114,8 @@ export default {
                     let video = document.getElementById('camera'+b.id);
                     if(video){
                         console.log("play:"+b.id)
-                        let player = new WebRtcPlayer(video,'camera'+b.id);
+                        let server = b.rtcServer+":"+b.rtcServerPort;
+                        let player = new WebRtcPlayer(server,video,'camera'+b.id);
                         //player.play('camera'+b.id);
                         this.players.push(player)
                     }

src/views/roadwayManage/index.vue

@@ -215,7 +215,6 @@ export default {
                     cancelText: '取消',
                 });
             }
-            
         },
        
         openLight(){

src/views/videoWall/index.vue

@@ -113,8 +113,9 @@ export default {
                         }
                         let idName = rowIndex + "-" + columnIndex;
                         console.log("idName:"+idName);
+                        let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
                         let video = document.getElementById(idName);
-                        let player = new WebRtcPlayer(video,"camera"+cameras[i-1].id);
+                        let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
                         this.players.push(player);
                     }
                 }