永久免费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;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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);
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

（5）、收到应答返回的offer.sdp， 设置为你的远端连接。

this.pc.setRemoteDescription(new RTCSessionDescription({
    type: 'answer',
    sdp: window.atob(answerSdp)
}));
1
2
3
4

（6）、监听 sendChannel.onopen 连接是否建立成功。

（7）、拉流的过程中需要徐亚与服务器保持连接，可以 sendChannel.send(msg)来保持持续拉流 。

（8）、服务器推流，前端开始播放。

的过程中需要徐亚与服务器保持连接，可以 sendChannel.send(msg)来保持持续拉流 。

（8）、服务器推流，前端开始播放。