前端多媒体（1）——获取摄像头&麦克风

捕获视频/音频

PPT地址

长久以来，音频/视频捕获都是网络开发中的“圣杯”。多年来，我们总是依赖于浏览器插件（Flash 或 Silverlight）实现这一点。

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

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

MediaDevices.getUserMedia()

**MediaDevices.getUserMedia()**方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。如果用户给予许可，就返回一个Promise 对象

注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve 也不会触发 reject。

这里有一个 Demo【capturing_audio_video】。

【注意】新版本的视频获取接口要用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.

定义输出媒体

使用video组件输出产生的视频

<style type="text/css">

  #video{

    width: 320px;

    height: 180px;

    background-color: #000000;

  }

</style>

<video id="video" autoplay="autoplay" controls="controls"></video>

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

var constraints = {

  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(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 ，如果枚举成功that will be fulfilled with 一个包含MediaDeviceInfo 实例的数组, 它包含了可用的多媒体输入输出设备的信息.

navigator

  .mediaDevices

  .enumerateDevices()

  .then(function(MediaDeviceInfo) {

    console.log(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属性是浏览器支持的。

navigator

  .mediaDevices

  .getSupportedConstraints()

{

  "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

}

MediaTrackConstraints

aspectRatio
channelCount
deviceId
echoCancellation
facingMode
frameRate
groupId
height [ConstrainLong]
latency： [ConstrainDouble] 音频采样延迟
sampleRate
sampleSize
volume
width [ConstrainLong]: 可以是一个对象或者number，对象为{exact:number, ideal: number}

参考资料