前端：获取摄像头&麦克风

Posted 2020-10-26 沧海一粒

1 简介　　

依靠WebRTC(网络即时通信)的大力协助，寻找合适捕获API的步伐加快了很多。该规范由 W3C WebRTC 工作组负责监管。Google、Opera、Mozilla 和其他一些公司目前正致力于在自己的浏览器中实施该 API。

　　Media.getUserMedia()与WebRTC相关，因为它是通向这组API的门户。它提供了访问用户本地相机/麦克风媒体流的手段。

　　Media.getUserMedia()提示用户允许使用视频或者音频输入设备。例如相机或者屏幕共享和麦克风。如果用户给予许可，就返回一个Promise对象。由于用户没有被强行要求必须做出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve也不会触发reject。

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

capturing_audio_video.html:28 getUserMedia() no longer works on insecure origins. To use this feature, 
you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

2 使用（以video为例）

2.1 创建视频组件

<style type="text/css">
  #video{
    width: 320px;
    height: 180px;
    background-color: #000000;
  }
</style>
<video id="video" autoplay="autoplay" controls="controls"></video>

2.2 配置

// 指定请求的媒体类型和相对应的参数.可以指定视频源的一些信息，比如摄像头分辨率，最高、最低、理想的摄像头分辨率，强制使用后置摄像头，采样率。
你可以使用 getSupportedConstraints 方法获取，浏览器支持哪些配置。
var constraints = {
  audio: false, 
  video: { 
　　　　width: 160, 
　　　　height: 90, 
　　　　facingMode: { exact: "environment" }, frameRate: { ideal: 10, max: 15 }
};

// 获取视频资源

navigator
  .mediaDevices
  .getUserMedia(constraints)
  .then(function(mediaStream) {
    var video = document.querySelector(‘video‘);

    video.srcObject = mediaStream
    video.onloadedmetadata = function(e) {
      video.play();
    };
  })
  .catch(function(error) {
    console.log(error);
  });