前端多媒体（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，对象为

参考资料

posted @ 2017-05-07 23:13  buzzjan  阅读(5308)  评论(0)  编辑  收藏  举报