修复分享功能

panlinlin
1 parent d3d48d1d
Showing 4 changed files with 44 additions and 15 deletions
web_src/src/components/dialog/devicePlayer.vue
web_src/src/components/dialog/easyPlayer.vue
web_src/src/components/dialog/rtcPlayer.vue
web_src/src/router/index.js
@@ -14,15 +14,27 @@
                     </div>
                     <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
                         <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
-                        <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
+                        <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" >
+                          <template slot="append">
+                            <i class="cpoy-btn el-icon-document-copy"  title="点击拷贝" v-clipboard="getPlayerShared.sharedUrl" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i>
+                          </template>
+                        </el-input>
                     </div>
                     <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
                         <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
-                        <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
+                        <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" >
+                          <template slot="append">
+                            <i class="cpoy-btn el-icon-document-copy"  title="点击拷贝" v-clipboard="getPlayerShared.sharedIframe" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i>
+                          </template>
+                        </el-input>
                     </div>
                     <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
                         <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
-                        <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
+                        <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" >
+                          <template slot="append">
+                            <i class="cpoy-btn el-icon-document-copy"  title="点击拷贝" v-clipboard="getPlayerShared.sharedRtmp" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i>
+                          </template>
+                        </el-input>
                     </div>
                 </el-tab-pane>
                 <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
@@ -148,9 +160,10 @@ export default {
     },
     computed: {
         getPlayerShared: function () {
+
             return {
-                sharedUrl: window.location.host + '/' + this.videoUrl,
-                sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
+                sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
+                sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>',
                 sharedRtmp: this.videoUrl
             };
         }
@@ -14,10 +14,14 @@ export default {
     },
     props: ['videoUrl', 'error', 'hasaudio'],
     mounted () {
+      let paramUrl = decodeURIComponent(this.$route.params.url)
        this.$nextTick(() =>{
-           console.log("初始化时的地址为: " + this.videoUrl)
-            this.easyPlayer = new WasmPlayer(null, 'easyplayer', this.eventcallbacK)
-            this.easyPlayer.play(this.videoUrl, 1)
+          if (typeof (this.videoUrl) == "undefined") {
+            this.videoUrl = paramUrl;
+          }
+          console.log("初始化时的地址为: " + this.videoUrl)
+          this.easyPlayer = new WasmPlayer(null, 'easyplayer', this.eventcallbacK)
+          this.easyPlayer.play(this.videoUrl, 1)
         })
     },
     watch:{
@@ -17,9 +17,13 @@ export default {
     },
     props: ['videoUrl', 'error', 'hasaudio'],
     mounted () {
+      let paramUrl = decodeURIComponent(this.$route.params.url)
        this.$nextTick(() =>{
-           console.log("初始化时的地址为: " + this.videoUrl)
-            this.play(this.videoUrl)
+         if (typeof (this.videoUrl) == "undefined") {
+           this.videoUrl = paramUrl;
+         }
+         console.log("初始化时的地址为: " + this.videoUrl)
+         this.play(this.videoUrl)
         })
     },
     watch:{
@@ -60,7 +64,7 @@ export default {
                         this.webrtcPlayer.close();
                         this.play(url)
                     }, 100)
-                    
+
                 }
             });
@@ -69,14 +73,14 @@ export default {
                 // document.getElementById('selfVideo').srcObject=s;
                 this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
             });
-            
+
         },
         pause: function () {
             if (this.webrtcPlayer != null) {
                 this.webrtcPlayer.close();
                 this.webrtcPlayer = null;
             }
-            
+
         },
         eventcallbacK: function(type, message) {
             console.log("player 事件回调")
@@ -106,5 +110,5 @@ export default {
     /* .iconqingxiLOGO {
         display: none !important;
     } */
-    
-</style>
 \ No newline at end of file
+
+</style>
@@ -14,6 +14,9 @@ import web from &#39;../components/setting/Web.vue&#39;
 import sip from '../components/setting/Sip.vue'
 import media from '../components/setting/Media.vue'
+import wasmPlayer from '../components/dialog/easyPlayer.vue'
+import rtcPlayer from '../components/dialog/rtcPlayer.vue'
+
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
@@ -81,5 +84,10 @@ export default new VueRouter({
       name: 'test',
       component: test,
     },
+    {
+      path: '/play/rtc/:url',
+      name: 'rtcPlayer',
+      component: rtcPlayer,
+    },
   ]
 })