码迷,mamicode.com
首页 > 其他好文 > 详细

Egret之视频流播放(初级)

时间:2019-11-16 21:31:32      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:media   any   ide   get   user   bin   ade   navigator   ons   

一 : 前景

最近又时间学习了一下视频流这玩意。可能是想到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之视频流播放(初级)

标签:media   any   ide   get   user   bin   ade   navigator   ons   

原文地址:https://blog.51cto.com/aonaufly/2450941

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!