From 1c5f22e6539dcb1bc9dec6101efa2c312d78bc5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E9=91=AB?= <zhangxin@zhehekeji.com>
Date: Mon, 11 Jan 2021 21:07:42 +0800
Subject: [PATCH] =?UTF-8?q?vxg=E6=9B=B4=E6=8D=A2=E6=88=90vlc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/cameraManage/model.vue       |  90 ++++++------
 src/views/realTimeMonitoring/index.vue | 189 +++++++++++++------------
 src/views/realTimeMonitoring/model.vue |  71 ++++------
 3 files changed, 171 insertions(+), 179 deletions(-)

diff --git a/src/views/cameraManage/model.vue b/src/views/cameraManage/model.vue
index dbb57e0..b6f8abc 100644
--- a/src/views/cameraManage/model.vue
+++ b/src/views/cameraManage/model.vue
@@ -35,24 +35,25 @@
          </template>
          <template v-else-if="type=='test'">
              <div class="test-model">
-                 <!--       <canvas class="video-canvas"></canvas>-->
-                 <div class="vxgplayer" id="video-test"
-                      :url="mdata.rtsp"
-                      autostart
-                      avsync
-                      nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"
-                      nmf-path="media_player.nmf"
-                      latency="0"
-                 >
-                 </div>
+                 <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'/>
+                     <param name='text' value='正在加载视频中...'/>
+                     <param name='branding' value='false'/>
+                     <param name="windowless" value="true">
+                     <embed type="application/x-google-vlc-plugin"/>
+                 </object>
                  <div class="video-close" @click="handleCancel">
                      ╳
                  </div>
                  <div class="operation-list">
                      <div class="operation-item">
-                         <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart" @mouseup="zoomDecStop">
+                         <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
+                              @mouseup="zoomDecStop">
                          <span>变倍</span>
-                         <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop">
+                         <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
+                              @mouseup="zoomAddStop">
                      </div>
                      <div class="operation-item">
                          <img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
@@ -95,25 +96,30 @@
                  :centered="true"
                  class="config-model"
              >
-                 <div class="vxgplayer" id="video-config"
-                      :url="mdata.rtsp"
-                      autostart
-                      avsync
-                      nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"
-                      nmf-path="media_player.nmf"
-                      latency="0"
-                 >
-                 </div>
+                 <object id="video-config" type='application/x-vlc-plugin' events='True' width="800"
+                         height="450" 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'/>
+                     <param name='text' value='正在加载视频中...'/>
+                     <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" @mouseup="zoomDecStop">
+                         <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
+                              @mouseup="zoomDecStop">
                          <span>变倍</span>
-                         <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop">
+                         <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
+                              @mouseup="zoomAddStop">
                      </div>
                      <div class="operation-item">
-                         <img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
+                         <img :src="focusSubUrl" alt="" @mousedown="focusDecStart"
+                              @mouseup="focusDecStop">
                          <span>变焦</span>
-                         <img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop">
+                         <img :src="focusAddUrl" alt="" @mousedown="focusAddStart"
+                              @mouseup="focusAddStop">
                      </div>
                      <div class="operation-item">
                          <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
@@ -360,28 +366,29 @@ export default {
 
         handleCancel() {
             console.log('Clicked cancel button');
-            console.log(this.title);
-            if(this.type=='test'){
-                window.vxgplayer('video-test').dispose();
-            }else if(this.type=='config'){
-                window.vxgplayer('video-config').dispose();
+            this.$emit('close', false, {})
+            if(this.type=='test') {
+                var vlc = document.getElementById('video-test');
+                vlc.playlist.items.clear()
+            }else if(this.type=='config') {
+                var vlc = document.getElementById('video-config');
+                vlc.playlist.items.clear()
             }
-            this.$emit('close',false,{})
         },
         getTestVideo(rtsp){
             this.$nextTick(() => {
-                // window.vxgplayer('vxg_media_player1').stop();
-                window.vxgplayer('video-test').src(rtsp);
-                window.vxgplayer('video-test').play();
-                vxgplayer('video-test').size('100%', '100%');
+                var vlc = document.getElementById('video-test');
+                var options = new Array(":network-caching=100");//减少延迟
+                var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
+                vlc.playlist.playItem(vlcItem);
             })
         },
         getConfigVideo(rtsp){
             this.$nextTick(() => {
-                // window.vxgplayer('vxg_media_player1').stop();
-                window.vxgplayer('video-config').src(rtsp);
-                window.vxgplayer('video-config').play();
-                vxgplayer('video-config').size('800px', '450px');
+                var vlc = document.getElementById('video-config');
+                var options = new Array(":network-caching=100");//减少延迟
+                var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
+                vlc.playlist.playItem(vlcItem);
             })
         },
         getConfigIoList(){
@@ -779,8 +786,9 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        #video-test{
-
+        #video-test {
+            width: 100%;
+            height: 100%;
         }
         .video-close{
             position: absolute;
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index 191e8d5..7b9cd3e 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@@ -8,25 +8,33 @@
         </a-tabs>
         <div class="flex-layouts">
             <div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()" v-show="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
-                <div  class="video-item" v-for="i in item.cameras" :key="i.id">
-<!--                     <canvas :class="['video',i.id?'video'+i.id:'']">-->
+                <div class="video-item" v-for="i in item.cameras" :key="i.id">
+                    <object style="width:390px;height:219px" class="video-obj" :id="'video'+i.id"
+                            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'/>
+                        <param name='text' value='正在加载视频中...'/>
+                        <param name='branding' value='false'/>
+                        <param name="windowless" value="true">
+                        <param name='fullscreen' value='false'/>
+                        <param name='mrl' :value='i.rtsp'/>
+                        <param name='autoplay' value='true'/>
+                        <embed type="application/x-google-vlc-plugin"/>
+                    </object>
+                    <div class="video-name">
+                        <iframe class="vlcIframe"
+                                style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
+                        </iframe>
+                        {{item.streetName}} {{i.name}}
+                    </div>
+                    <div class="video-model">
+                        <iframe class="vlcIframe"
+                                style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
+                        </iframe>
+                        <div style="width: 100%;height: 100%" @click="showModel(i)">
 
-<!--                     </canvas>-->
-                        <div class="vxgplayer" :id="'video'+i.id"
-                             :url="i.rtsp"
-                             autostart
-                             avsync
-                             nmf-src="/video_play_plugins/pnacl/Release/media_player.nmf"
-                             nmf-path="media_player.nmf"
-                             width="390" height="219"
-                             latency="0"
-                        >
                         </div>
-                     <div class="video-name">
-                         {{item.streetName}} {{i.name}}
-                     </div>
-                    <div class="video-model" @click="showModel(i)">
-
                     </div>
                 </div>
             </div>
@@ -37,18 +45,6 @@
             :modelData.sync="modelData"
             @close="closeModel"
         />
-<!--        <div class="vxgplayer" id="video"-->
-<!--             url="rtsp://admin:admin123@192.168.66.108:554/cam/realmonitor?channel=1&subtype=0"-->
-<!--             autostart-->
-<!--             controls-->
-<!--             avsync-->
-<!--             nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"-->
-<!--             nmf-path="media_player.nmf"-->
-<!--             width="400" height="227"-->
-<!--             latency="0"-->
-<!--        >-->
-<!--        </div>-->
-
     </div>
 </template>
 
@@ -65,30 +61,31 @@ export default {
             player:"",
             visible:false,
             modelData:[],
+            vlcz: null
         };
     },
     inject: ['reload'],
     mounted() {
         console.log('index mounted执行了')
         this.getRealTimeList()
-        // this.getSdVideos()
     },
     destroyed(){
 
     },
-    beforeRouteLeave(to,form,next){
-        if(window.vxgplayer){
-            this.realTimeListData.forEach(function (item) {
-                console.log(item)
-                item.cameras.forEach(function (item) {
-                    window.vxgplayer('video'+item.id).dispose();
-                })
-                next(true)
-            })
-        }else {
-            next(true)
-        }
-
+    beforeRouteLeave(to,form,next) {
+        // if(this.vlcz){
+        //     var that = this
+        //     this.realTimeListData.forEach(function (item) {
+        //         console.log(item)
+        //         var $that = that
+        //         item.cameras.forEach(function (item) {
+        //             $that.vlcz.playlist.stop();
+        //         })
+        //         next(true)
+        //     })
+        // }else{
+        //     next(true)
+        // }
     },
     methods: {
         getRealTimeList(){
@@ -99,44 +96,50 @@ export default {
                 console.log(res.data)
                 if(res.code == 200) {
                     this.realTimeListData = res.data
-                    console.log('首页getRealTimeList方法执行了')
-                    res.data.forEach(function (item) {
-                        // console.log(item.cameras)
-                        var $that = that
-                        console.log('进来第一层循环了')
-                        item.cameras.forEach(function (item) {
-                            // console.log(item.rtsp)
-                            console.log('进来第二层循环了')
-                            $that.playVideo('video'+item.id,item.rtsp)
-                        })
-                    })
+                    // res.data.forEach(function (item) {
+                    //     // console.log(item.cameras)
+                    //     var $that = that
+                    //     item.cameras.forEach(function (item) {
+                    //         // console.log(item.rtsp)
+                    //         $that.playVideo('video'+item.id,item.rtsp)
+                    //     })
+                    // })
                 }
             }).catch(err => {
                 console.log(err)
             })
         },
-        playVideo(id,rtsp){
-            // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
-            this.$nextTick(() => {
-                // window.vxgplayer('vxg_media_player1').stop();
-                window.vxgplayer(id).src(rtsp);
-                window.vxgplayer(id).play();
-            })
-        },
-        tabsChange(key){
+        // playVideo(id,rtsp){
+        //     // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
+        //     this.$nextTick(() => {
+        //         var vlc = document.getElementById(`${id}`);
+        //         var options = new Array(":network-caching=100");//减少延迟
+        //         var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options);
+        //         // vlc.playlist.play()
+        //         vlc.playlist.playItem(vlcItem);
+        //         console.log('切换大屏前')
+        //     })
+        // },
+        tabsChange(key) {
             console.log(key)
         },
-        showModel(item){
+        showModel(item) {
             console.log(item)
             this.visible = true
-            this.modelData=item
-            console.log(vxgplayer('video'+item.id))
-            // vxgplayer('video'+item.id).fullscreen()
+            this.modelData = item
+            // this.vlcz.playlist.stop()
         },
-        closeModel(visible,data){
+        closeModel(visible, data) {
             this.visible = visible
-            this.modelData=data
-            // vxgplayer('video'+data.id).changedFullscreen()
+            this.modelData = data
+            this.reload()
+            this.tabsChange()
+            console.log(this.realTimeListData)
+            console.log('切换大屏后')
+            // console.log(this.vlcz.playlist.currentItem)
+            // console.log(this.vlcz.playlist.isPlaying)
+            // this.vlcz.playlist.play()
+            // console.log(this.vlcz.playlist.isPlaying)
         }
     },
     components:{
@@ -173,34 +176,42 @@ export default {
                     transform-origin: center;
                     transition: all 0.2s linear;
                 }
+
                 .anticon-rotate {
                     transform: rotate(180deg);
                 }
             }
         }
     }
-    #video-cav{
-        position: fixed;
-        z-index: 999;
-        border: solid 1px skyblue;
-        width: 390px;
-        height: 219px;
-    }
-    .flex-layouts{
+
+    /*#video-cav{*/
+    /*    position: fixed;*/
+    /*    z-index: 999;*/
+    /*    border: solid 1px skyblue;*/
+    /*    width: 390px;*/
+    /*    height: 219px;*/
+    /*}*/
+    .flex-layouts {
         display: flex;
         width: 1630px;
         flex-wrap: wrap;
     }
-    .video-list{
+
+    .video-list {
         display: flex;
-        .video-item{
+
+        .video-item {
             display: flex;
             width: 100%;
+            height: 219px;
             position: relative;
             margin: 3px;
             cursor: pointer;
             z-index: 10;
-            .video-name{
+            /*.video-obj{*/
+
+            /*}*/
+            .video-name {
                 position: absolute;
                 top: 15px;
                 left: 15px;
@@ -209,24 +220,14 @@ export default {
                 font-size: 16px;
                 z-index: 10;
             }
-            .video-model{
+
+            .video-model {
                 position: absolute;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
-                z-index: 10;
-            }
-
-            /*.video{*/
-            /*    border: solid 1px #000000;*/
-            /*    background: #001529;*/
-            /*    width: 400px;*/
-            /*    height: 225px;*/
-            /*}*/
-            .vxgplayer {
-                border: none;
-                margin: 0;
+                z-index: 20;
             }
         }
     }
diff --git a/src/views/realTimeMonitoring/model.vue b/src/views/realTimeMonitoring/model.vue
index 90a29d9..7c7a262 100644
--- a/src/views/realTimeMonitoring/model.vue
+++ b/src/views/realTimeMonitoring/model.vue
@@ -1,15 +1,15 @@
 <template>
    <div class="video-mask" v-if="isShow">
-<!--       <canvas class="video-canvas"></canvas>-->
-       <div class="vxgplayer" id="video"
-            :url="mdata.rtsp"
-            autostart
-            avsync
-            nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"
-            nmf-path="media_player.nmf"
-            latency="0"
-       >
-       </div>
+       <object class="video-obj" id="video" 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'/>
+           <param name='text' value='正在加载视频中...'/>
+           <param name='branding' value='false'/>
+           <param name="windowless" value="true">
+           <param name='fullscreen' value='true'/>
+           <embed type="application/x-google-vlc-plugin"/>
+       </object>
        <div class="video-close" @click="handleCancel">
            ╳
        </div>
@@ -82,16 +82,18 @@ export default {
     },
     data() {
         return {
-            isShow:false,
-            title:'',
-            closable:false,//取消model模态框右上角的X号
+            // w:document.documentElement.offsetWidth || document.body.offsetWidth,
+            // h:document.documentElement.offsetHeight || document.body.offsetHeight,
+            isShow: false,
+            title: '',
+            closable: false,//取消model模态框右上角的X号
             formItemAcrossLayout,
             formItemVerticalLayout,
             confirmLoading: false,
-            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
-            id:'',
-            mdata:[],
-            zoomSubUrl:require('@/assets/sub-icon.png'),
+            form: this.$form.createForm(this, {name: 'dynamic_rule'}),
+            id: '',
+            mdata: [],
+            zoomSubUrl: require('@/assets/sub-icon.png'),
             zoomAddUrl:require('@/assets/add-icon.png'),
             focusSubUrl:require('@/assets/sub-icon.png'),
             focusAddUrl:require('@/assets/add-icon.png'),
@@ -105,32 +107,12 @@ export default {
             leftDownUrl:require('@/assets/left-down-icon.png'),
             downUrl:require('@/assets/down-icon.png'),
             rightDownUrl:require('@/assets/right-down-icon.png'),
-            player:'',
         };
     },
-    // provide(){ //提供
-    //     return {
-    //         reload: this.reloadModel
-    //     }
-    // },
-    // inject: ['reload'],
-    // mounted() {
-    //     console.log('mounted执行了')
-    // },
     methods: {
-        // reloadModel(){
-        //     this.isRouter = false
-        //     this.$nextTick( function () {
-        //         this.isRouter = true
-        //         console.log(this.mdata)
-        //         this.player= this.player.destroy()
-        //         this.getHdVideos(this.mdata)
-        //     })
-        // },
         handleCancel() {
             console.log('Clicked cancel button');
-            console.log(this.title);
-            location.reload();
+            // location.reload();
             const that=this
             setTimeout(function () {
                 that.$emit('close',false,{})
@@ -138,10 +120,10 @@ export default {
         },
         getHdVideos(rtsp){
             this.$nextTick(() => {
-                // window.vxgplayer('vxg_media_player1').stop();
-                window.vxgplayer('video').src(rtsp);
-                window.vxgplayer('video').play();
-                vxgplayer('video').size('100%', '100%');
+                var vlc = document.getElementById('video');
+                var options = new Array(":network-caching=100");//减少延迟
+                var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
+                vlc.playlist.playItem(vlcItem);
             })
         },
         zoomDecStart(){
@@ -465,8 +447,9 @@ export default {
         right: 0;
         /*background-color: #001529;*/
         z-index:1000;
-        #video{
-
+        #video {
+            width: 100%;
+            height: 100%;
         }
         .video-close{
             position: absolute;