捕獲視頻/音頻
長久以來，音頻/視頻捕獲都是網絡開發中的“聖杯”。多年來，我們總是依賴於瀏覽器插件（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}