Navigator.getUserMedia()

在此页

句法
范例
Permissions
浏览器兼容性
另请参阅
相关话题

弃用
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the 兼容性表格 at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The deprecated Navigator.getUserMedia() method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a MediaStream .

If permission is granted, a MediaStream whose video and/or audio tracks come from those devices is delivered to the specified success callback. If permission is denied, no compatible input devices exist, or any other error condition occurs, the error callback is executed with a MediaStreamError object describing what went wrong. If the user instead doesn't make a choice at all, neither callback is executed.

This is a legacy method. Please use the newer navigator.mediaDevices.getUserMedia() instead. While technically not deprecated, this old callback version is marked as such, since the specification strongly encourages using the newer promise returning version.

句法

navigator.getUserMedia(constraints, successCallback, errorCallback);

参数

constraints


									MediaStreamConstraints

object specifying the types of media to request, along with any requirements for each type. For details, see the constraints section under the modern


									MediaDevices.getUserMedia()

method, as well as the article Capabilities, constraints, and settings .

successCallback

A function which is invoked when the request for media access is approved. The function is called with one parameter: the


									MediaStream

object that contains the media stream. Your callback can then assign the stream to the desired object (such as an


									<audio>


									<video>

element), as shown in the following example:

function(stream) {
   var video = document.querySelector('video');
   video.srcObject = stream;
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
}

errorCallback

When the call fails, the function specified in the


								errorCallback

is invokedwith a


									MediaStreamError

object as its sole argument; this object is is modeled on


									DOMException

. See {anch("Errors")}} below for a list of the errors which can occur.

返回值

undefined .

错误

范例

Width and height

此处范例，使用 getUserMedia() , including code to cope with various browsers' prefixes. Note that this is the deprecated way of doing it: See the 范例 section under the MediaDevices.getUserMedia() for modern examples.

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.srcObject = stream;
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

权限

要使用 getUserMedia() in an installable app (for example, a Firefox OS app ), you need to specify one or both of the following fields inside your manifest file:

"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
  }
}

见 permission: audio-capture and permission: video-capture 了解更多信息。

浏览器兼容性

新代码应该使用 Navigator.mediaDevices.getUserMedia() 代替。

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`getUserMedia` 弃用非标	Chrome 53 53 21 Prefixed Prefixed Implemented with the vendor prefix: webkit An outdated constraint syntax is still in use, but the syntax described here is available through the adapter.js polyfill.	Edge 12	Firefox 17 Prefixed 17 Prefixed Prefixed Implemented with the vendor prefix: moz The constraint syntax described here is available as of Firefox 38. Earlier versions (32-37) used an outdated constraint syntax, but the syntax described here is available there through the adapter.js polyfill.	IE No	Opera 18 Prefixed 18 Prefixed Prefixed Implemented with the vendor prefix: webkit 不支持 12 — 15 An outdated constraint syntax is still in use, but the syntax described here is available through the adapter.js polyfill.	Safari No	WebView Android 53 53 40 Prefixed Prefixed Implemented with the vendor prefix: webkit An outdated constraint syntax is still in use, but the syntax described here is available through the adapter.js polyfill.	Chrome Android 53 53 25 Prefixed Prefixed Implemented with the vendor prefix: webkit An outdated constraint syntax is still in use, but the syntax described here is available through the adapter.js polyfill.	Firefox Android 24 Prefixed 24 Prefixed Prefixed Implemented with the vendor prefix: moz The constraint syntax described here is available as of Firefox 38. Earlier versions (32-37) used an outdated constraint syntax, but the syntax described here is available there through the adapter.js polyfill.	Opera Android 12 — 14 不支持 12 — 14 An outdated constraint syntax is still in use, but the syntax described here is available through the adapter.js polyfill.	Safari iOS No	Samsung Internet Android 6.0 6.0 1.5 Prefixed Prefixed Implemented with the vendor prefix: webkit An outdated constraint syntax is still in use, but the syntax described here is available through the adapter.js polyfill.

图例

完整支持
不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。

要求使用供应商前缀或不同名称。

另请参阅

MediaDevices.getUserMedia() that replaces this deprecated method.
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.

元数据

最后修改： Dec 26, 2019

Media Streams API
Navigator
特性
1. activeVRDisplays
2. appCodeName
3. appName
4. appVersion
5. ~~battery~~
6. buildID
7. clipboard
8. connection
9. cookieEnabled
10. credentials
11. deviceMemory
12. doNotTrack
13. geolocation
14. keyboard
15. 语言
16. languages
17. locks
18. maxTouchPoints
19. mediaDevices
20. mediaSession
21. onLine
22. oscpu
23. permissions
24. platform
25. product
26. productSub
27. serviceWorker
28. userAgent
29. vendor
30. vendorSub
31. webdriver
32. xr
方法
1. canShare()
2. getBattery()
3. getGamepads()
4. getUserMedia()
5. getVRDisplays()
6. ~~mozIsLocallyAvailable()~~
7. msLaunchUri()
8. ~~registerContentHandler()~~
9. registerProtocolHandler()
10. requestMediaKeySystemAccess()
11. sendBeacon()
12. share()
13. taintEnabled()
14. vibrate()
Related pages for Media Capture and Streams

在此页

句法

参数

返回值

错误

范例

Width and height

权限

浏览器兼容性

图例

另请参阅

相关话题