这篇翻译不完整。请帮忙从英语翻译这篇文章。
Note: 此API已更名为 MediaDevices.getUserMedia()
。 请使用那个版本进行替代! 这个已废弃的API版本仅为了向后兼容而存在。
已废弃
该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。
Navigator.getUserMedia()方法提醒用户需要使用音频(0或者1)和(0或者1)视频输入设备,比如相机,屏幕共享,或者麦克风。如果用户给予许可,successCallback回调就会被调用,MediaStream
对象作为回调函数的参数。如果用户拒绝许可或者没有媒体可用,errorCallback就会被调用,类似的,PermissionDeniedError
或者NotFoundError
对象作为它的参数。注意,有可能以上两个回调函数都不被调用,因为不要求用户一定作出选择(允许或者拒绝)。
语法
navigator.getUserMedia ( constraints, successCallback, errorCallback );
参数
constraints
MediaStreamConstaints
对象指定了请求使用媒体的类型,还有每个类型的所需要的参数。具体细节请参见MediaDevices.getUserMedia()
方法下面的constraints部分。
successCallback
当调用成功后,successCallback中指定的函数就被调用,包含了媒体流的MediaStream
对象作为它的参数,你可以把媒体流对象赋值给合适的元素,然后使用它,就像下面的例子一样:
function(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Do something with the video here. }; }
errorCallback
当调用失败,errorCallback中指定的函数就会被调用,MediaStreamError
对象作为它唯一的参数;此对象基于DOMException
对象构建。错误码描述见参见以下:
Error | Description |
---|---|
PermissionDeniedError |
使用媒体设备请求被用户或者系统拒绝 |
NotFoundError |
找不到constraints中指定媒体类型 |
示例
宽度和高度
使用getUserMedia()的示例,包括了可以适用于多种浏览器前缀的代码。注意这种使用方式已经被废除,现代的使用方法请参见MediaDevices.getUserMedia()
下面的示例部分。
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
function(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
console.log("The following error occurred: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
权限
在一个可以安装的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()"
}
}
参见 permission: audio-capture 和 permission: video-capture 以查看更多信息。
规格
Specification | Status | Comment |
---|---|---|
Media Capture and Streams navigator.getUserMedia |
Editor's Draft | Initial definition. |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 21webkit [1] | 17moz [3] | 未实现 | 12 [2] 18webkit |
未实现 |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic Support | ? | 40.0webkit [2] | 24moz [3] | 1.2moz [4] 1.4moz |
未实现 | 12 [2] | 未实现 | 未实现 |
[1] 新版的Chrome支持未带前缀的 MediaDevices.getUserMedia()
, 用以取代此已废弃版本.
[2] Chrome 和 Opera 仍然在使用已经过期的 constraint 语法, 但是此描述中的语法可以通过 adapter.js polyfill来使用.
[3] 在此描述的constraint 语法自 Firefox 38后可用. 更早的版本 (32-37) 使用了已经过期的语法, 但是此描述中的语法可以通过 adapter.js polyfill来使用.
[4] 在 Firefox OS 1.2中, 只有音频的到支持, 1.4 添加了视频支持.
更多参见
MediaDevices.getUserMedia()
替代了当前废弃的版本。- WebRTC - the introductory page to the API
- MediaStream API - the API for the media stream objects
- Taking webcam photos - a tutorial on using
getUserMedia() for taking photos rather than video.