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

£可爱£侵袭症+ 提交于 2021-01-07 05:43:12

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

 

 收集系统上可用的多媒体输入和输出设备信息

 enumerateDevices用于收集系统上可用的多媒体输入和输出设备的信息。该方法返回一个Promise对象,如果枚举成功,成功的then 回调函数带有一个MediaDeviceInfo的参数。

navigator
  .mediaDevices
  .enumerateDevices()
  .then(function(MediaDeviceInfo) {
    console.log(MediaDeviceInfo);
  })
// 输出MediaDeviceInfo为:
[
  {
    "deviceId": "default",
    "kind": "audioinput",
    "label": "Default",
    "groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
  },
  {
    "deviceId": "e38a9b92758f008e71510a95aa36957553e2a5ce7febc6e4bcd57798807c1519",
    "kind": "audioinput",
    "label": "Built-in Microphone",
    "groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
  },
  {
    "deviceId": "5013c01eb0a704c09d15aa668601f8dfb80f1a33d179b2adcbb64a8fbad5fc62",
    "kind": "videoinput",
    "label": "FaceTime HD Camera",
    "groupId": ""
  },
  {
    "deviceId": "default",
    "kind": "audiooutput",
    "label": "Default",
    "groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
  },
  {
    "deviceId": "ba0bb7502f314e3ad61511aa6468c6a48ec679e34e5ebd975852db1d8d3ab3e7",
    "kind": "audiooutput",
    "label": "Built-in Output",
    "groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
  }
]

  

获取用户支持的Constraints

 通过 MediaDevices.getSupportedConstraints() 方法可以返回一个基于 MediaTrackSupportedConstraints 的对象,它包含哪些Constraints属性是浏览器支持的, 例如帧率、窗口大小等。

var supportedConstraints = navigator.mediaDevices.getSupportedConstraints()
// 输出supportedConstraints
{
  "aspectRatio": true, //采集比例
  "channelCount": true,
  "deviceId": true,
  "echoCancellation": true,
  "facingMode": true,
  "frameRate": true,
  "groupId": true,
  "height": true,
  "latency": true, //延迟
  "sampleRate": true,
  "sampleSize": true,
  "volume": true,
  "width": true
}

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!