HTML5 getUserMedia
很多网友在CSDN论坛里问我关于getUserMedia的问题，今天抽出一部分时间来整理一些关于getUserMedia使用的教程。希望通过本文能帮助到更多有需要的人解决实际问题。
调用 Navigator.getUserMedia() 方法后，网页会提醒用户需要使用音频、视频等输入设备。比如相机，屏幕共享，或者麦克风等。如果用户给予许可同意后，successCallback 回调函数就会被调用，MediaStream 对象为回调函数的参数。如果用户拒绝许可或者没有媒体可用，errorCallback就会被调用，类似的，PermissionDeniedError 或者NotFoundError对象作为它的参数。
注意：有可能以上两个回调函数都不被调用，因为用户可以不进行选择。不允许也不拒绝。
getUserMedia 调用摄像头
getUserMedia 语法
navigator.getUserMedia ( constraints, successCallback, errorCallback );
getUserMedia 参数
- constraints：MediaStreamConstaints对象指定了请求使用媒体的类型，还有每个类型的所需要的参数。
- successCallback：当调用成功后，successCallback中指定的函数就被调用，包含了媒体流的MediaStream对象作为它的参数。
- errorCallback：当调用失败，errorCallback中指定的函数就会被调用，MediaStreamError对象作为它唯一的参数；此对象基于DOMException对象构建
errorCallback 错误码
| Error | Description |
|---|---|
PermissionDeniedError |
使用媒体设备请求被用户或者系统拒绝 |
NotFoundError |
找不到constraints中指定媒体类型 |
getUserMedia API
它的API是非常简单的，只需请求浏览器获得一个到用户的摄像头的连接。
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({
video:true,
audio:false
},
function(stream) { /* do something */ },
function(error) { /* do something */ });
}else {
alert('Sorry, the browser you are using doesn\'t support getUserMedia');
return;
}
上面的navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;代码是为了兼容各大浏览器内核的代码。
权限
在一个可以安装的app（比如，Firefox OS app）中使用getUserMedia()，你需要在你的manifest文件中指定一个或者多个以下条目：
"permissions": {
"audio-capture": {
"description": "Required to capture audio using getUserMedia()"
},
"video-capture": {
"description": "Required to capture video using getUserMedia()"
}
}
浏览器兼容性
目前有部分浏览器对 getUserMedia 还不兼容，建议大家使用谷歌浏览器和火狐浏览器。
参考资料：
扫描下方二维码，关注业余草微信公众号，回复“FFmpeg”关键词，获取 FFmpeg 视频教程！
