永久免费H5直播点播播放器SkeyeWebPlayer.js实现webrtc流播放
1、H5播放webrtc，现在各大浏览器已经逐渐加大对WebRTC技术的支持，成都视开信息科技视频团队开发webrtc视频播放方案，我们已经实现了webrtc的视频推流，播放webrtc流。
this.pc = new RTCPeerConnection(null); this.pc.ontrack = (event) => { this._mediaElement['srcObject'] = event.streams[0]; }; this.pc.addTransceiver('audio', {direction: 'recvonly'}); this.pc.addTransceiver('video', {direction: 'recvonly'}); this.sendChannel = this.pc.createDataChannel('keepalive'); this.sendChannel.onclose = this.onChannelClose.bind(this); this.sendChannel.onopen = this.onChannelOpen.bind(this); this.sendChannel.onmessage = this.onChannelMessage.bind(this); this.pc.createOffer({ offerToReceiveVideo: !0, offerToReceiveAudio: !0 }).then((offer) => { return this.pc.setLocalDescription(offer).then(() => { return offer; }); }).then((offer) => { return new Promise((resolve, reject) => { this.HttpPost(url, window.btoa(offer.sdp)).then((res) => { resolve(res); }, function (rej) { reject(rej); }); }); }).then((answerSdp) => { return this.pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: window.atob(answerSdp) })); }).then(() => { this._isLoad = true; }).catch((reason) => { throw reason; }); 讯享网
2、拉流端
（1）、ontrack回调中将媒体播放地址，绑定到video上。
（2）、createOffer方法,这个方法返回本地会话描述。
（3）、setLocalDescription方法。
（4）、需要先与推流段建立一个连接。HttpPost()，发送：offer.sdp 到推流端，推流端服务器收到offer.sdp，再返回回来。
讯享网HttpPost(url, data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) { var respone = xhr.responseText; xhr.onreadystatechange = new Function; xhr = null; resolve(respone); } }; xhr.open('POST', url.replace('webrtc', 'http'), true); xhr.send(data); }); }
（5）、收到应答返回的offer.sdp， 设置为你的远端连接。
this.pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: window.atob(answerSdp) })); （6）、监听 sendChannel.onopen 连接是否建立成功。
（7）、拉流的过程中需要徐亚与服务器保持连接，可以 sendChannel.send(msg)来保持持续拉流 。
（8）、服务器推流，前端开始播放。
的过程中需要徐亚与服务器保持连接，可以 sendChannel.send(msg)来保持持续拉流 。
（8）、服务器推流，前端开始播放。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eU5m6sZL-1661916059662)(./1.gif)]](https://img-blog.csdnimg.cn/img_convert/632deacb0f038aa833b523d5bdbce81e.gif#pic_center)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/125888.html