old mode 100644
new mode 100755
|  |  |  | 
|---|
|  |  |  | </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)=>{//获取到了远端流,可以播放 | 
|---|
|  |  |  | console.error('播放成功',e.streams) | 
|---|
|  |  |  | webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流,可以播放 | 
|---|
|  |  |  | console.log('播放成功',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") | 
|---|
|  |  |  | console.log("流不存在") | 
|---|
|  |  |  | 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 事件回调") | 
|---|
|  |  |  | 
|---|
|  |  |  | /* .iconqingxiLOGO { | 
|---|
|  |  |  | display: none !important; | 
|---|
|  |  |  | } */ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </style> | 
|---|