Egret之视频流播放(初级)

一 : 前景

最近又时间学习了一下视频流这玩意。可能是想到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}`);
    };

三 ：结果

来源：51CTO

作者：Aonaufly

链接：https://blog.51cto.com/aonaufly/2450941