永久免费H5直播点播播放器SkeyeWebPlayer.js实现webrtc流播放
永久免费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)