前端多媒体-1.获取摄像头&麦克风

Posted 2020-12-21 chougoushi

获取视频/音频引言

因为最近在学习WebRTC,前端就需要学习一下媒体的相关知识.

MediaDevices.getUserMedia()

MediaDevice.getUserMedia()与WebRTC相关,欣慰他是通过这组API的门户.提供访问用户本地相机/麦克风媒体流手段
MediaDevice.getUserMedia()方法提示用户是否允许使用一个视频或音频输入设备,例如相机或屏幕共享或麦克风.如果用户给予许可,就返回一个Promise对象.
需要注意的是,由于用户不会被要求必须做出允许或者拒绝,所以返回的Promise对象可能既不处罚resolve也不触发reject

【注意】新版本的视频获取接口要用HTTPS协议，否则会抛出错误，当然现在在本地访问通过 localhost, 127.0.0.1 或者文件协议，都可以正常使用

定义输出媒体

使用video组件输出产生的视频(就是一个播放器)

<style type="text/css"> 
#video{ 
    width: 320px; 
    height: 180px; 
    background-color: #000000; 
} 
</style>  
<-- autoplay 自动播放 controls视频播放器的控件(暂停播放哪些~) -->
<video id="video" autoplay="autoplay" controls="controls"></video>

指定请求的媒体类型和相对应的参数

var constrains = {
    audio: true,
    video: true
};

当然可以指定视频源的一些信息,比如摄像头分辨率,最高,最低,理想的摄像头分辨率,强制使用后置摄像头,采样率.当让你可以使用getSupportedConstraints方法获取,浏览器支持哪些配置

var constraints = { 
    audio: false, 
    video: { 
        width: 160, 
        height: 90, 
        facingMode: { 
            exact: "environment" 
            }, 
        frameRate: { 
            ideal: 10, 
            max: 15 
            }
        } 
    };

获取视频源

navigator.mediaDevices.getUserMedia(contraints).then(function(mediaStream)){
    var video =     document.querySelector(‘video‘);
    video.srsObject = mediaStream
    video.onloadedmetadata = function(e) {
        video.play();
    };
    })
    .catch(function(error)) {
        console.log(error);
    });

}

来自为知笔记(Wiz)