传给getUserMedia()的参数可以用来对返回的媒体流做更多要求（或者限制）。比如，不仅仅指明你想访问vedio（比如{vedio： true）,你还可以添加额外的配置要求返回HD的流:
const hdConstraints = { video: {width: {min: 1280}, height: {min: 720}} }; navigator.mediaDevices.getUserMedia(hdConstraints). then((stream) =http://www.likecs.com/> {video.srcObject = stream}); ... const vgaConstraints = { video: {width: {exact: 640}, height: {exact: 480}} }; navigator.mediaDevices.getUserMedia(vgaConstraints). then((stream) =http://www.likecs.com/> {video.srcObject = stream});如果当前被选择的摄像头不满足解析度的要求，getUserMedia()将会被rejected一个OverconstrainedError,并且不会向用户申请访问摄像头的提示。
选择媒体源navigator.mediaDevices.enumerateDevices() 方法提供了可用的输入、输出设备的信息，并可以选择相机和麦克风（注：MediaStreamTrack.getSources() api已经被弃用）
这个例子允许用户选择音视频源：
const videoElement = document.querySelector(\'video\'); const audioSelect = document.querySelector(\'select#audioSource\'); const videoSelect = document.querySelector(\'select#videoSource\'); navigator.mediaDevices.enumerateDevices() .then(gotDevices).then(getStream).catch(handleError); audioSelect.onchange = getStream; videoSelect.onchange = getStream; function gotDevices(deviceInfos) { for (let i = 0; i !== deviceInfos.length; ++i) { const deviceInfo = deviceInfos[i]; const option = document.createElement(\'option\'); option.value = deviceInfo.deviceId; if (deviceInfo.kind === \'audioinput\') { option.text = deviceInfo.label || \'microphone \' + (audioSelect.length + 1); audioSelect.appendChild(option); } else if (deviceInfo.kind === \'videoinput\') { option.text = deviceInfo.label || \'camera \' + (videoSelect.length + 1); videoSelect.appendChild(option); } else { console.log(\'Found another kind of device: \', deviceInfo); } } } function getStream() { if (window.stream) { window.stream.getTracks().forEach(function(track) { track.stop(); }); } const constraints = { audio: { deviceId: {exact: audioSelect.value} }, video: { deviceId: {exact: videoSelect.value} } }; navigator.mediaDevices.getUserMedia(constraints). then(gotStream).catch(handleError); } function gotStream(stream) { window.stream = stream; // make stream available to console videoElement.srcObject = stream; } function handleError(error) { console.error(\'Error: \', error);访问Sam Dutton\'s great demo，这个例子显示了如何让用户选择媒体源。
安全getUserMedia() 只能在HTTPS URL，localhost 或者 file://URL下使用，其他情况会被rejected掉。getUserMedia()也不能在跨域的iframe中使用。
所有的浏览器在调用getUserMedia()是都会弹出一个信息框，让用户可以选择授权或者拒绝其摄像头或者麦克风的使用权限。下图是chrome的权限弹框：
这个授权是永久的。也就是说，用户不用每次去授权（决绝/允许）。如果用户后来改变了主意，他们可以浏览器设置中心针对每一个域进行设置。
贴士：摄像头在使用的情况下，MediaStreamTrack处于激活， 这会占用资源，并且打开摄像头（保持摄像头灯打开），当你不再使用track的时候，确保调用 track.stop() 来使摄像头关闭。
截屏api可以调用ctx.drawImage(video, 0, 0) 方法来绘制的帧到上。当然，我们通过getUserMedia()获得视频输入，使用实时视频创建图片phone booth引用很简单。
<video autoplay></video> <img src=""> <canvas></canvas> <script> const captureVideoButton = document.querySelector(\'#screenshot .capture-button\'); const screenshotButton = document.querySelector(\'#screenshot-button\'); const img = document.querySelector(\'#screenshot img\'); const video = document.querySelector(\'#screenshot video\'); const canvas = document.createElement(\'canvas\'); captureVideoButton.onclick = function() { navigator.mediaDevices.getUserMedia(constraints). then(handleSuccess).catch(handleError); }; screenshotButton.onclick = video.onclick = function() { canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext(\'2d\').drawImage(video, 0, 0); // Other browsers will fall back to image/png img.src = canvas.toDataURL(\'image/webp\'); }; function handleSuccess(stream) { screenshotButton.disabled = false; video.srcObject = stream; } </script> 应用效果 css滤镜