HTML5 getUserMedia

分类: HTML5 发布时间: 2017-07-12 17:36

很多网友在CSDN论坛里问我关于getUserMedia的问题,今天抽出一部分时间来整理一些关于getUserMedia使用的教程。希望通过本文能帮助到更多有需要的人解决实际问题。

调用 Navigator.getUserMedia() 方法后,网页会提醒用户需要使用音频、视频等输入设备。比如相机,屏幕共享,或者麦克风等。如果用户给予许可同意后,successCallback 回调函数就会被调用,MediaStream 对象为回调函数的参数。如果用户拒绝许可或者没有媒体可用,errorCallback就会被调用,类似的,PermissionDeniedError 或者NotFoundError对象作为它的参数。

注意:有可能以上两个回调函数都不被调用,因为用户可以不进行选择。不允许也不拒绝。

getUserMedia 调用摄像头

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 还不兼容,建议大家使用谷歌浏览器和火狐浏览器。

参考资料:


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!