标签：Egret mediaDevices 视频流 videoPlayer private video getUserMedia navigator 播放

一 : 前景

最近又时间学习了一下视频流这玩意。可能是想到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,mediaDevices,视频流,videoPlayer,private,video,getUserMedia,navigator,播放
来源： https://blog.51cto.com/aonaufly/2450941

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。