原文地址：Capturing Audio & Video in HTML5
前言长期以来音视频捕获一直是web开发的珍宝。多年来，我们不得不依赖浏览器插件（ flash 或者 silverlight ）来完成这个工作.
HTML5完成了救赎。可能并不明显，但是HTML5的兴起带来了大量对这杯硬件的访问。Geolocation(GPS)、Orientation API(加速度计)、WebGL（GPU）和Web Audio (音频硬件)都是完美的例子。这些功能非常强大，暴露了位于系统底层硬件功能之上的高级JS api。
本篇教程介绍 navigator.mediaDevices.getUserMedia() ,这使得web应用能够访问用户的摄像头和麦克风.
探寻getUserMedia() 之路如果你不清楚这段历史，那我们这段探寻之旅将是一个非常有趣的故事。
在过去的几年中， "Media Capture APIs" 的几个变种都得到了发展。许多人意识到在web上需要访问本设备，而这出事了每一个人共同制定一套新规范。事情变得很混乱（每个浏览器都有自己的规范），W3C最终决定成立一个工作组。他们唯一的目的就是去掉混乱。Device APIs Policy (DAP) 工作组已经把整合化和标准化大量提案作为他们的任务。
我将会尝试总结下2011年发生的事情。。。
第一轮 HTML Media CaptureHTML Media Capture 是DAP首次在web上标准化如何访问多媒体。它通过重载 <input type="file"> 标签并新增accept参数的值来实现.
如果你想让用户使用网络摄像头来获取一个快照，可以使用 capture=camera
<input type="file" accept="image/*;capture=camera">录制视频和视频也是类似的：
<input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone">看起来不错吧？我特别喜欢它重用文件输入。从语义上来说很好理解。这个api的不足之处是实时效果（比如：渲染实时网络摄像头数据到 <canvas> 并应用到 WebGL过滤器）.HTML Media Capture仅允许你录制和获取快照（无法进行实时渲染）.
第二轮 device 元素标签许多人认为 HTML Media Capture api过于局限，因此出现了支持任何类型（未来）设备的新规范。该设计不意外的使用了新标签 ，该标签是 getUserMedia() 的前身。
Opera是最早一批基于 <device> 标签实现视频捕获的浏览器厂商之一。不久之后（准确来说是同一天）,WhatWG (网页超文本技术工作小组)决定取消 device 标签转向另一个方案：navigator.getUserMedia() 。一个星期后，Opera发布了支持getUserMedia()提案的新版本（这迭代速度刚刚的。。。）从那年以后，微软也加入了新提案的大家庭：IE9 实验室版支持新特性.
<device>就长这样：
<device type="media" onchange="update(this.data)"></device> <video autoplay></video> <script> function update(stream) { document.querySelector(\'video\').src = stream.url; } </script> 支持不幸的是，浏览器正式版中一直没有支持过 <device>。 <device>有两个好处：1. 语义化良好 2. 更容易去扩展而不仅仅支持音频和视频设备。
第三轮 WebRTC<device>标签最终被放弃了。。。
由于WebRTC（web实时通信）的努力使得找到合适api的速度加快了。这个规范由 W3C WebRTC小组监督。谷歌，Opera，火狐和一些公司已经实现。
getUserMedia()自从Chrome 21，Opera 18和Firefox 17开始支持。最初由Navigator.getUserMedia()提供支持的方法现在已经被废除。你现在应该使用navigator.MediaDevices.getUserMedia()，这个方法普遍都支持。
navigator.MediaDevices.getUserMedia()入门有了getUserMedia，我们无需使用任何插件就可使用网络摄像头和麦克风输入。访问摄像头只需要一个调用，而不是安装插件。它直接被内置在浏览器中。有没有点小激动！
功能检测对 navigator.mediaDevices.getUserMedia 是否支持进行简单检查：
function hasGetUserMedia() { return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia); } if (hasGetUserMedia()) { // Good to go! } else { alert(\'getUserMedia() is not supported by your browser\'); } 获取一个输入设备的访问权限为了使用摄像头和麦克风，我们需要申请权限。getUserMedia()的参数是一个对象：对每一种你想访问的每一种多媒体说明了具体和要求。比如，如果你想访问摄像头，参数应该为 {video: true}。同时使用摄像头和麦克风，传入 {video: true, audio: true}:
<video autoplay></video> <script> const constraints = { video: true }; const video = document.querySelector(\'video\'); navigator.mediaDevices.getUserMedia(constraints). then((stream) =http://www.likecs.com/> {video.srcObject = stream}); </script>ok.现在感觉怎么样。。。媒体捕获是HTML5协同工作的完美示例。它可以和其他HTML5小伙伴一起工作： 和 。注意：我们并不是在标签上设置src属性，也不是包含一个标签。不是向vedio提供多媒体文件的URL，我们是提供一个从摄像头获取到的 MediaStream。
我们告诉为autoplay，不让它会在第一帧的时候卡住。你也可向vedit添加控件。
设置媒体限制（解析度，宽，高）