Browse Source

修复分享功能

pull/110/head
panlinlin 4 years ago
parent
commit
429817b8c4
  1. 23
      web_src/src/components/dialog/devicePlayer.vue
  2. 10
      web_src/src/components/dialog/easyPlayer.vue
  3. 18
      web_src/src/components/dialog/rtcPlayer.vue
  4. 8
      web_src/src/router/index.js

23
web_src/src/components/dialog/devicePlayer.vue

@ -14,15 +14,27 @@
</div> </div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址</span> <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>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe</span> <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>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址</span> <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> </div>
</el-tab-pane> </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/"}}--> <!--{"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: { computed: {
getPlayerShared: function () { getPlayerShared: function () {
return { return {
sharedUrl: window.location.host + '/' + this.videoUrl, sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>', sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>',
sharedRtmp: this.videoUrl sharedRtmp: this.videoUrl
}; };
} }

10
web_src/src/components/dialog/easyPlayer.vue

@ -14,10 +14,14 @@ export default {
}, },
props: ['videoUrl', 'error', 'hasaudio'], props: ['videoUrl', 'error', 'hasaudio'],
mounted () { mounted () {
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() =>{ this.$nextTick(() =>{
console.log("初始化时的地址为: " + this.videoUrl) if (typeof (this.videoUrl) == "undefined") {
this.easyPlayer = new WasmPlayer(null, 'easyplayer', this.eventcallbacK) this.videoUrl = paramUrl;
this.easyPlayer.play(this.videoUrl, 1) }
console.log("初始化时的地址为: " + this.videoUrl)
this.easyPlayer = new WasmPlayer(null, 'easyplayer', this.eventcallbacK)
this.easyPlayer.play(this.videoUrl, 1)
}) })
}, },
watch:{ watch:{

18
web_src/src/components/dialog/rtcPlayer.vue

@ -17,9 +17,13 @@ export default {
}, },
props: ['videoUrl', 'error', 'hasaudio'], props: ['videoUrl', 'error', 'hasaudio'],
mounted () { mounted () {
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() =>{ this.$nextTick(() =>{
console.log("初始化时的地址为: " + this.videoUrl) if (typeof (this.videoUrl) == "undefined") {
this.play(this.videoUrl) this.videoUrl = paramUrl;
}
console.log("初始化时的地址为: " + this.videoUrl)
this.play(this.videoUrl)
}) })
}, },
watch:{ watch:{
@ -60,7 +64,7 @@ export default {
this.webrtcPlayer.close(); this.webrtcPlayer.close();
this.play(url) this.play(url)
}, 100) }, 100)
} }
}); });
@ -69,14 +73,14 @@ export default {
// document.getElementById('selfVideo').srcObject=s; // document.getElementById('selfVideo').srcObject=s;
this.eventcallbacK("LOCAL STREAM", "获取到了本地流") this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
}); });
}, },
pause: function () { pause: function () {
if (this.webrtcPlayer != null) { if (this.webrtcPlayer != null) {
this.webrtcPlayer.close(); this.webrtcPlayer.close();
this.webrtcPlayer = null; this.webrtcPlayer = null;
} }
}, },
eventcallbacK: function(type, message) { eventcallbacK: function(type, message) {
console.log("player 事件回调") console.log("player 事件回调")
@ -106,5 +110,5 @@ export default {
/* .iconqingxiLOGO { /* .iconqingxiLOGO {
display: none !important; display: none !important;
} */ } */
</style> </style>

8
web_src/src/router/index.js

@ -14,6 +14,9 @@ import web from '../components/setting/Web.vue'
import sip from '../components/setting/Sip.vue' import sip from '../components/setting/Sip.vue'
import media from '../components/setting/Media.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 const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) { VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err) return originalPush.call(this, location).catch(err => err)
@ -81,5 +84,10 @@ export default new VueRouter({
name: 'test', name: 'test',
component: test, component: test,
}, },
{
path: '/play/rtc/:url',
name: 'rtcPlayer',
component: rtcPlayer,
},
] ]
}) })

Loading…
Cancel
Save