永久免费H5直播点播播放器SkeyeWebPlayer.js实现webrtc流播放
1、H5播放webrtc，现在各大浏览器已经逐渐加大对WebRTC技术的支持，成都视开信息科技视频团队开发webrtc视频播放方案，我们已经实现了webrtc的视频推流，播放webrtc流。
代码语言：txt
复制this.pc = new RTCPeerConnection(null);
代码语言：txt
复制this.pc.ontrack = (event) => {
代码语言：txt
复制 this._mediaElement['srcObject'] = event.streams[0];
代码语言：txt
复制};
代码语言：txt
复制this.pc.addTransceiver('audio', {direction: 'recvonly'});
代码语言：txt
复制this.pc.addTransceiver('video', {direction: 'recvonly'});
代码语言：txt
复制this.sendChannel = this.pc.createDataChannel('keepalive');
代码语言：txt
复制this.sendChannel.onclose = this.onChannelClose.bind(this);
代码语言：txt
复制this.sendChannel.onopen = this.onChannelOpen.bind(this);
代码语言：txt
复制this.sendChannel.onmessage = this.onChannelMessage.bind(this);
代码语言：txt
复制this.pc.createOffer({
代码语言：txt
复制 offerToReceiveVideo: !0,
代码语言：txt
复制 offerToReceiveAudio: !0
代码语言：txt
复制}).then((offer) => {
代码语言：txt
复制 return this.pc.setLocalDescription(offer).then(() => {
代码语言：txt
复制 return offer;
代码语言：txt
复制 });
代码语言：txt
复制}).then((offer) => {
代码语言：txt
复制 return new Promise((resolve, reject) => {
代码语言：txt
复制 this.HttpPost(url, window.btoa(offer.sdp)).then((res) => {
代码语言：txt
复制 resolve(res);
代码语言：txt
复制 }, function (rej) {
代码语言：txt
复制 reject(rej);
代码语言：txt
复制 });
代码语言：txt
复制 });
代码语言：txt
复制}).then((answerSdp) => {
代码语言：txt
复制 return this.pc.setRemoteDescription(new RTCSessionDescription({
代码语言：txt
复制 type: 'answer',
代码语言：txt
复制 sdp: window.atob(answerSdp)
代码语言：txt
复制 }));
代码语言：txt
复制}).then(() => {
代码语言：txt
复制 this._isLoad = true;
代码语言：txt
复制}).catch((reason) => {
代码语言：txt
复制 throw reason;
代码语言：txt
复制});
2、拉流端
（1）、ontrack回调中将媒体播放地址，绑定到video上。
（2）、createOffer方法,这个方法返回本地会话描述。
（3）、setLocalDescription方法。
（4）、需要先与推流段建立一个连接。HttpPost()，发送：offer.sdp 到推流端，推流端服务器收到offer.sdp，再返回回来。
代码语言：txt
复制HttpPost(url, data) {
代码语言：txt
复制 return new Promise((resolve, reject) => {
代码语言：txt
复制 var xhr = new XMLHttpRequest();
代码语言：txt
复制 xhr.onreadystatechange = () => {
代码语言：txt
复制 if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
代码语言：txt
复制 var respone = xhr.responseText;
代码语言：txt
复制 xhr.onreadystatechange = new Function;
代码语言：txt
复制 xhr = null;
代码语言：txt
复制 resolve(respone);
代码语言：txt
复制 }
代码语言：txt
复制 };
代码语言：txt
复制 xhr.open('POST', url.replace('webrtc', 'http'), true);
代码语言：txt
复制 xhr.send(data);
代码语言：txt
复制 });
代码语言：txt
复制}
（5）、收到应答返回的offer.sdp， 设置为你的远端连接。
代码语言：txt
复制this.pc.setRemoteDescription(new RTCSessionDescription({
代码语言：txt
复制 type: 'answer',
代码语言：txt
复制 sdp: window.atob(answerSdp)
代码语言：txt
复制}));
（6）、监听 sendChannel.onopen 连接是否建立成功。
（7）、拉流的过程中需要徐亚与服务器保持连接，可以 sendChannel.send(msg)来保持持续拉流 。
（8）、服务器推流，前端开始播放。
