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