原标题：通过摄像头获取图像的两种方法
目前，很多浏览器已经能够访问用户输入的音频与视频。 但是，这取决于浏览器是内部处理还是委托给用户设备中其他的应用去处理。
最简单的方法就是请用户提供一份提前拍好的照片。创建一个简单的 fileinput 标签，加上 accept 属性，用来表示只接受图像文件。理想情况下，就可以直接通过摄像头获取到相应的文件。
这种方法在所有平台中都可用。在桌面系统中，会弹窗提示用户从本地文件系统选择一个图片文件上传。在 iOS 的 Safari 浏览器里则会打开摄像头，允许用户拍摄照片然后将照片返回给 web 页；在 Android 中会先让用户选择用哪个应用拍摄照片，然后拍摄并返回。
的files 属性来获取。
一旦获取到图片文件，你就可以做任何你想做的。比如：
-
直接绑定到一个 canvas元素上面， 这样就可以使用它了
尽管使用 input 元素获取图片是很常见的做法，但是是最不推荐的做法，因为没有完全集成到网页中，同时在桌面浏览器里不能访问用户的网络摄像头。
现代浏览器可以直接与摄像头交互，用户无需离开浏览器，也可以获得完整的交互体验。
警告:直接与摄像头交互是一个强大的功能，需要获得用户的许可，并且你的网站需要开启 https。
我们可以使用 WebRTC 规范中的一个叫做 getUserMedia() 的 API 来访问摄像头与麦克风。它会向用户请求访问摄像头和麦克风。
如果得到用户授权，这个 API 会返回一个 MediaStream 对象，包含了有关摄像头的数据。接下来我们既可以将它添加到一个 <video>元素上面，并且播放视频以看到实时预览的效果，也可以将它添加到
单独看来这其实没什么用，你能做的仅仅是视频回放而已。
为了能访问摄像头获得的原始数据，我们需要处理 getUserMedia() 返回的流。不同于 Web Audio 的是，对于视频没有专用的处理流数据的 API。所以我们得做点 hack 工作才能得到快照。
-
创建一个 canvas 对象用来保持摄像头的画面。
-
绑定到一个 video 元素上
得到存到 canvas 中的数据后，你就可以做很多事情。比如：
不需要使用流的时候记得关闭当你不再需要使用摄像头时，记得及时关闭它。这是比较推荐的做法。不只是为了省电，也会使用户对你的应用增加信任(让人觉得你的应用质量可靠，不是恶意程序之类。译者注)
要停止访问摄像头。只需要在每一个通过 getUserMedia() 获得的流上面调用 stop() 即可。
如果用户之前没有给你的网站授权过访问摄像头的权限。那么当你调用 getUserMedia 时浏览器会立刻给用户一个弹窗确认。请求用户授权访问摄像头。
用户比较讨厌这种要求访问关键设备的请求，所以经常会拒绝请求，或者如果他们不清楚这个弹窗来自哪里时就会忽略掉它。 最佳实践就是，仅首次需要使用摄像头时才请求用户授权，一旦用户授权通过，浏览器就不会再询问。但是，如果用户在第一次拒绝了授权，那么你就再也无法获得权限，除非用户手动更改权限设置。
警告:在页面加载时，请求用户授权，大部分用户会选择拒绝。
——————————————————
领略前端技术 阅读奇舞周刊
长按二维码，关注奇舞周刊
