当前位置：个人在线分享 > H5实现webrtc流播放

H5实现webrtc流播放

作者 : admin 本文共6783个字，预计阅读时间需要17分钟 发布时间： 2024-06-10 共1人阅读

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));
}
本站无任何商业行为
个人在线分享 » H5实现webrtc流播放
admin

admin 钻石

分享到：

相关推荐

E-->