H5实现webrtc流播放

h5播放WebRTC，WebRTC（Web Real-Time Communication）是一种基于网页浏览器的开源项目，提供了实时音视频传输、数据共享等功能，现在各大浏览器已经逐渐加大对WebRTC技术的支持，实现WebRTC的视频推流，播放WebRTC流。

一、初始化连接

1、初始化WebRTC连接。主要涉及到获取本地媒体流、设置ICE服务器配置、创建PeerConnection对象等

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、ontrack回调中将媒体播放地址，绑定到video上。
3、createOffer方法,这个方法返回本地会话描述。
4、setLocalDescription方法。
5、需要先与服务端建立一个连接。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);
    });
}

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

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

7、监听 sendChannel.onopen 连接是否建立成功。
8、前端播放的过程中需要与服务器通信保持连接，可以 sendChannel.send(msg)来保持持续拉流 。
9、服务器推流，前端开始播放。

二、完整代码

import PlayerEvents from '../FlvPlayer/flv.js/player/player-events';
import EventEmitter from 'events';
import * as common from '../common/common';

export default class WebRtcPlayer {
    constructor(url, options) {
        this.TAG = 'WebRtcPlayer';
        this._type = 'WebRtcPlayer';
        this._emitter = new EventEmitter();
        // this.options = options || {};
        this.pc = null;
        this._mediaElement = null;
        this.url = url;
        this.autoplay = !!options.autoplay || false;
        this.typeCallback = options.typeCallback;
        this.statusCallback = options.statusCallback;

        if (!url.match(/^webrtc?:\/\/||^webrtcs?:\/\//)) {
            throw ('JSWebrtc just work with webrtc');
        }
        this.timer = null;
        this.sendChannel = null;
        this._mediaInfo = null;
        this._statisticsInfo = null;
        this.isPlaying = false;
        this._isLoad = false;
        this._isDestroy = false;

        this.e = {
            onvLoadedMetadata: this._onvLoadedMetadata.bind(this),
            onvSeeking: this._onvSeeking.bind(this),
            onvCanPlay: this._onvCanPlay.bind(this),
            onvPlay: this._onvPlay.bind(this),
            onvStalled: this._onvStalled.bind(this),
            onvProgress: this._onvProgress.bind(this),
            onvWaiting: this._onvWaiting.bind(this),
            onvPlaying: this._onvPlaying.bind(this)
        };

        this.attachMediaElement(options.mediaElement, url);
    }

    on(event, listener) {
        if (event === PlayerEvents.MEDIA_INFO) {
            if (this._mediaInfo != null) {
                Promise.resolve().then(() => {
                    this._emitter.emit(PlayerEvents.MEDIA_INFO, this.mediaInfo);
                });
            }
        } else if (event === PlayerEvents.STATISTICS_INFO) {
            if (this._statisticsInfo != null) {
                Promise.resolve().then(() => {
                    this._emitter.emit(PlayerEvents.STATISTICS_INFO, this.statisticsInfo);
                });
            }
        }
        this._emitter.addListener(event, listener);
    }

    off(event, listener) {
        this._emitter.removeListener(event, listener);
    }

    attachMediaElement(mediaElement, url) {
        this._mediaElement = mediaElement;
        this._mediaElement = mediaElement;
        mediaElement.addEventListener('loadedmetadata', this.e.onvLoadedMetadata);
        mediaElement.addEventListener('seeking', this.e.onvSeeking);
        mediaElement.addEventListener('canplay', this.e.onvCanPlay);
        mediaElement.addEventListener('play', this.e.onvPlay);
        mediaElement.addEventListener('stalled', this.e.onvStalled);
        mediaElement.addEventListener('progress', this.e.onvProgress);
        mediaElement.addEventListener('waiting', this.e.onvWaiting);
        mediaElement.addEventListener('playing', this.e.onvPlaying);
        this.typeCallback(!false);
        this.load(url);

    }

    load(url) {
        this.statusCallback(0);
        if (this.pc) {
            this.pc.close();
        }

        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;
        });
    }

    onChannelClose() {
        clearInterval(this.timer);
        if (!this._isDestroy) {
            common.sleep(3000).then(() => {
                this.load(this.url);
            });
        }
    }

    onChannelOpen() {
        this.timer = setInterval((() => {
            if (this.sendChannel) {
                this.sendChannel.send('ping');
            }
        }), 3000);
    }

    onChannelMessage() {
        // console.log('onmessage');
    }

    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);
        });
    }

    _onvLoadedMetadata() {

    }

    _onvSeeking() {

    }

    _onvCanPlay() {
        if (this.autoplay) {
            this._mediaElement.play();
        }
    }

    _onvPlay() {
        this.isPlaying = true;
        this.statusCallback(100);
    }

    _onvStalled() {

    }

    _onvProgress() {

    }

    _onvWaiting() {

    }

    _onvPlaying() {

    }

    unload() {

    }

    play() {
        if (!this.isPlaying) {
            this._mediaElement.play();
            this.isPlaying = true;
        }
    }

    pause() {
        if (this.isPlaying) {
            this._mediaElement.pause();
            this.isPlaying = false;
        }
    }

    resume() {

    }

    openAudio() {

    }

    closeAudio() {
    }

    seek() {

    }

    stop() {
        this.destroy();
    }

    destroy() {
        this._isDestroy = true;
        if (this.pc) {
            this.pc.close();
            this.pc = null;
        }
        if (this._mediaElement) {
            this._mediaElement = null;
        }
        if (this.sendChannel) {
            this.sendChannel = null;
        }

        this.autoplay = null;
        this.typeCallback = null;
        this.statusCallback = null;

        this.isPlaying = false;
        this._isLoad = false;

        clearInterval(this.timer);
    }

    get isLoad() {
        return this._isLoad;
    }
}

player-events.js

const PlayerEvents = {
    ERROR: 'error',
    LOADING_COMPLETE: 'loading_complete',
    RECOVERED_EARLY_EOF: 'recovered_early_eof',
    MEDIA_INFO: 'media_info',
    METADATA_ARRIVED: 'metadata_arrived',
    SCRIPTDATA_ARRIVED: 'scriptdata_arrived',
    STATISTICS_INFO: 'statistics_info'
};

export default PlayerEvents;

common.js

export function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}