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

}