捕获视频/音频
长久以来，音频/视频捕获都是网络开发中的“圣杯”。多年来，我们总是依赖于浏览器插件（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{
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: {
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}