H5实现webrtc流播放

本文详细介绍了如何使用WebRTC技术在HTML5环境中进行初始化连接,包括获取本地媒体流、设置ICE服务器配置、创建PeerConnection对象以及与服务器交互的过程。重点涵盖了创建offer、设置描述和接收应答的方法,以及保持与服务器的持续通信以实现视频推流和播放。
摘要由CSDN通过智能技术生成

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));
}
  • 12
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

打响第一枪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值