球机配置页面视频

src/views/cameraManage/model.vue

@@ -30,7 +30,13 @@
          </template>
          <template v-else-if="type=='test'">
              <div class="test-model">
-                 <object id="video-test" type='application/x-vlc-plugin' events='True' width="100%"
+                <video 
+                
+                width="80%"
+                         height="80%"
+                :id="`camera${id}`" 
+                autoplay controls muted ></video>
+                 <!-- <object id="video-test" type='application/x-vlc-plugin' events='True' width="100%"
                          height="100%" pluginspage="http://www.videolan.org"
                          codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
                      <param name='controls' value='false'/>
@@ -41,7 +47,7 @@
                  </object>
                  <div class="video-close" @click="handleCancel">
                      ╳
-                 </div>
+                 </div> -->
                  <div class="operation-list">
                      <div class="operation-item">
                          <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
@@ -91,16 +97,11 @@
                  :centered="true"
                  class="config-model"
              >
-                 <object id="video-config" type='application/x-vlc-plugin' events='True' width="800"
+                
-                         height="450" pluginspage="http://www.videolan.org"
+                 <video width="900"
-                         codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
+                         height="600"
-                     <param name='controls' value='false'/>
+                :id="`camera${id}`" 
-                     <param name='text' value='正在加载视频中...'/>
+                autoplay controls muted ></video>
-                     <param name='branding' value='false'/>
-                     <param name="windowless" value="true">
-                     <param name='fullscreen' value='false'/>
-                     <embed type="application/x-google-vlc-plugin"/>
-                 </object>
                  <div class="operation-list">
                      <div class="operation-item">
                          <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
@@ -230,6 +231,7 @@ const columns = [
         scopedSlots: { customRender: 'position' }
     }
 ];
+import WebRtcPlayer from ".././realTimeMonitoring/webrtcplayer"
 export default {
     props:[ 'visible', 'modelType', 'modelData'],
     watch: {
@@ -254,6 +256,7 @@ export default {
                         ip:newVal.ip,
                         rtsp:newVal.rtsp
                     })
+
                 })
             }else if (newVal.id && this.type=='config'){
                 this.id = newVal.id
@@ -261,7 +264,7 @@ export default {
                 console.log(newVal)
                 this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                     console.log(newVal.rtsp)
-                    this.getConfigVideo(newVal.rtsp)
+                    //this.getConfigVideo(newVal.rtsp)
                     this.getConfigIoList()
                 })
             }
@@ -301,19 +304,26 @@ export default {
     },
     mounted() {
         console.log('mounted执行了')
+        this.setVideoServer()
         if (this.$route.query.modelType == 'test') {
             this.isShow = true
             this.id = this.$route.query.modelData.id
             this.type = this.$route.query.modelType
             this.mdata = this.$route.query.modelData
-            this.getTestVideo(this.$route.query.modelData.rtsp)
+            //this.getTestVideo(this.$route.query.modelData.rtsp)
+            this.$nextTick(() => {
+                this.autoPlay(this.id)
+            })
         } else if (this.$route.query.modelType == 'config') {
             this.isShow = true
             this.id = this.$route.query.modelData.id
             this.type = this.$route.query.modelType
             this.mdata = this.$route.query.modelData
-            this.getConfigVideo(this.$route.query.modelData.rtsp)
+            //this.getConfigVideo(this.$route.query.modelData.rtsp)
             this.getConfigIoList()
+            this.$nextTick(() => {
+                this.autoPlay(this.id)
+            })
         }
     },
     methods: {
@@ -367,20 +377,21 @@ export default {
                 vlc.playlist.items.clear()
             }
         },
-        getTestVideo(rtsp){
+        autoPlay(id){
-            this.$nextTick(() => {
+            let video = document.getElementById('camera'+id);
-                var vlc = document.getElementById('video-test');
+            let player = new WebRtcPlayer(video,'camera'+id);
-                var options = new Array(":network-caching=100");//减少延迟
+            player.load('camera'+id); 
-                var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
-                vlc.playlist.playItem(vlcItem);
-            })
         },
-        getConfigVideo(rtsp){
+        setVideoServer(){
-            this.$nextTick(() => {
+            this.$api.httpApi.getVideoServer({
-                var vlc = document.getElementById('video-config');
+                data: {}
-                var options = new Array(":network-caching=100");//减少延迟
+            }).then(res => {
-                var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
+                if(res.code == 200) {
-                vlc.playlist.playItem(vlcItem);
+                    WebRtcPlayer.setServer(res.data.toString());
+                }
+                
+            }).catch(err => {
+                console.log(err)
             })
         },
         getConfigIoList(){