| | |
| | | </template> |
| | | |
| | | <script> |
| | | let webrtcPlayer = null; |
| | | export default { |
| | | name: 'rtcPlayer', |
| | | data() { |
| | | return { |
| | | webrtcPlayer: null |
| | | timer: null |
| | | }; |
| | | }, |
| | | 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:{ |
| | |
| | | }, |
| | | methods: { |
| | | play: function (url) { |
| | | this.webrtcPlayer = new ZLMRTCClient.Endpoint({ |
| | | webrtcPlayer = new ZLMRTCClient.Endpoint({ |
| | | element: document.getElementById('webRtcPlayerBox'),// video 标签 |
| | | debug: true,// 是否打印日志 |
| | | zlmsdpUrl: url,//流地址 |
| | |
| | | videoEnable: false, |
| | | recvOnly: true, |
| | | }) |
| | | this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错 |
| | | webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错 |
| | | console.error('ICE 协商出错') |
| | | this.eventcallbacK("ICE ERROR", "ICE 协商出错") |
| | | }); |
| | | |
| | | this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流,可以播放 |
| | | webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流,可以播放 |
| | | console.error('播放成功',e.streams) |
| | | this.eventcallbacK("playing", "播放成功") |
| | | }); |
| | | |
| | | this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 交换失败 |
| | | 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("111111") |
| | | setTimeout(()=>{ |
| | | this.timer = setTimeout(()=>{ |
| | | this.webrtcPlayer.close(); |
| | | this.play(url) |
| | | }, 100) |
| | | |
| | | |
| | | } |
| | | }); |
| | | |
| | | this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流 |
| | | webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流 |
| | | |
| | | // document.getElementById('selfVideo').srcObject=s; |
| | | this.eventcallbacK("LOCAL STREAM", "获取到了本地流") |
| | | }); |
| | | |
| | | |
| | | }, |
| | | pause: function () { |
| | | if (this.webrtcPlayer != null) { |
| | | this.webrtcPlayer.close(); |
| | | this.webrtcPlayer = null; |
| | | if (webrtcPlayer != null) { |
| | | webrtcPlayer.close(); |
| | | webrtcPlayer = null; |
| | | } |
| | | |
| | | |
| | | }, |
| | | eventcallbacK: function(type, message) { |
| | | console.log("player 事件回调") |
| | | console.log(type) |
| | | console.log(message) |
| | | } |
| | | }, |
| | | destroyed() { |
| | | clearTimeout(this.timer); |
| | | }, |
| | | } |
| | | </script> |
| | |
| | | /* .iconqingxiLOGO { |
| | | display: none !important; |
| | | } */ |
| | | |
| | | </style> |
| | | |
| | | </style> |