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

三 ：結果