112 lines
3.0 KiB
Vue
Executable File
112 lines
3.0 KiB
Vue
Executable File
<template>
|
|
<div id="rtcPlayer">
|
|
<video id="webRtcPlayerBox" controls autoplay style="text-align:left;">
|
|
Your browser is too old which doesn't support HTML5 video.
|
|
</video>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
let webrtcPlayer = null
|
|
export default {
|
|
name: 'RtcPlayer',
|
|
props: ['videoUrl', 'error', 'hasaudio'],
|
|
data() {
|
|
return {
|
|
timer: null
|
|
}
|
|
},
|
|
watch: {
|
|
videoUrl(newData, oldData) {
|
|
this.pause()
|
|
this.play(newData)
|
|
},
|
|
immediate: true
|
|
},
|
|
mounted() {
|
|
const paramUrl = decodeURIComponent(this.$route.params.url)
|
|
this.$nextTick(() => {
|
|
if (typeof (this.videoUrl) === 'undefined') {
|
|
this.videoUrl = paramUrl
|
|
}
|
|
console.log('初始化时的地址为: ' + this.videoUrl)
|
|
this.play(this.videoUrl)
|
|
})
|
|
},
|
|
destroyed() {
|
|
clearTimeout(this.timer)
|
|
},
|
|
methods: {
|
|
play: function(url) {
|
|
webrtcPlayer = new ZLMRTCClient.Endpoint({
|
|
element: document.getElementById('webRtcPlayerBox'), // video 标签
|
|
debug: true, // 是否打印日志
|
|
zlmsdpUrl: url, // 流地址
|
|
simulecast: false,
|
|
useCamera: false,
|
|
audioEnable: true,
|
|
videoEnable: true,
|
|
recvOnly: true,
|
|
usedatachannel: false
|
|
})
|
|
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => { // ICE 协商出错
|
|
console.error('ICE 协商出错')
|
|
this.eventcallbacK('ICE ERROR', 'ICE 协商出错')
|
|
})
|
|
|
|
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => { // 获取到了远端流，可以播放
|
|
console.log('播放成功', e.streams)
|
|
this.eventcallbacK('playing', '播放成功')
|
|
})
|
|
|
|
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => { // offer anwser 交换失败
|
|
console.error('offer anwser 交换失败', e)
|
|
this.eventcallbacK('OFFER ANSWER ERROR ', 'offer anwser 交换失败')
|
|
if (e.code == -400 && e.msg == '流不存在') {
|
|
console.log('流不存在')
|
|
this.timer = setTimeout(() => {
|
|
this.webrtcPlayer.close()
|
|
this.play(url)
|
|
}, 100)
|
|
}
|
|
})
|
|
|
|
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => { // 获取到了本地流
|
|
// document.getElementById('selfVideo').srcObject=s;
|
|
this.eventcallbacK('LOCAL STREAM', '获取到了本地流')
|
|
})
|
|
},
|
|
pause: function() {
|
|
if (webrtcPlayer != null) {
|
|
webrtcPlayer.close()
|
|
webrtcPlayer = null
|
|
}
|
|
},
|
|
eventcallbacK: function(type, message) {
|
|
console.log('player 事件回调')
|
|
console.log(type)
|
|
console.log(message)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.LodingTitle {
|
|
min-width: 70px;
|
|
}
|
|
#rtcPlayer{
|
|
width: 100%;
|
|
}
|
|
#webRtcPlayerBox{
|
|
width: 100%;
|
|
max-height: 56vh;
|
|
background-color: #000;
|
|
}
|
|
/* 隐藏logo */
|
|
/* .iconqingxiLOGO {
|
|
display: none !important;
|
|
} */
|
|
|
|
</style>
|