一 : 前景

最近又时间学习了一下视频流这玩意。可能是想到5G来临,再加上WebRTC这玩意的出现,以后H5Game的IM系统将不限于单纯的文本了。故此,研究了一番,仅作抛砖引玉。

二 : 方案

① , 使用HTML5标签<video>来播放视频
如下:

<video autoplay playsinline id="videoPlayer"></video>

a,autoplay : 自动播放
b,playsinline : 使用本标签播放(不使用第三方)
② ,获取video标签

private _videoPlayer : any = null;
this._videoPlayer = document.querySelector("video#videoPlayer");

③,使用navigator.mediaDevices.getUserMedia获得媒体流

    private init2RTC : Function = () : void => {
        if( !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia ){
            console.log(`getUserMedia is not supported!`);
        }else{
            this._videoPlayer = document.querySelector("video#videoPlayer");
            const $constraints : Object = {
                video : true,
                audio : true
            };
            navigator.mediaDevices.getUserMedia($constraints)
                .then(this.gotMediaStream.bind(this))
                .catch( this.gotMediaError.bind(this) );
        }
    };

    private gotMediaStream : Function = ( stream : MediaStream ) : void => {
        this._videoPlayer.srcObject = stream;
    };
    private gotMediaError : Function = ( error : any ) : void => {
        console.log(`mediastream error : ${error}`);
    };

三 :结果

Egret之视频流播放(初级)