HTML5 之摄像头调用（User Media API）

提起移动端调用设备摄像头，我们很容易就想到借助 PhoneGap 或 Cordova 。如果只是想在 Web 页面简单的用一下，那不妨试试 HTML5 的 User Media API 。

一、先来看看支持情况

二、说明文档

MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。

• 如果用户给予许可，就返回一个Promise 对象，MediaStream 对象作为此 Promise 对象的 Resolved［成功］状态的回调函数参数；
• 相应的，如果用户拒绝了许可，或者没有媒体可用的情况下，PermissionDeniedError 或者 NotFoundError 作为此 Promise 的 Rejected［失败］状态的回调函数参数。

1 2 3

navigator.mediaDevices.getUserMedia(constraints) .then(function(mediaStream) { ... }) .catch(function(error) { ... })

注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的 Promise 对象可能既不会触发 resolve 也不会触发 reject。

使用文档请移步：
MediaDevices.getUserMedia
MDN Web Docs

三、使用说明

1.使用 Promise ：

1 2 3 4 5 6 7 8 9 10 11