Navigator.getUserMedia()

There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

This translation is incomplete. Please help translate this article from English.

هذه هي الطريقة القديمة. الرجاء استخدام أحدث {{domxref ( "MediaDevices.getUserMedia"، "navigator.mediaDevices.getUserMedia ()")}} بدلا من ذلك. بينما من الناحية الفنية لا مستنكر، ويتميز هذا الإصدار القديم رد على هذا النحو، منذ مواصفات تشجع بشدة باستخدام الوعد أحدث نسخة عودته.

{{APIRef ( "القبض على وسائل الإعلام وتيارات")}} {{}} deprecated_header

على Navigator.getUserMedia() طريقة يطالب المستخدم للحصول على إذن لاستخدام ما يصل إلى جهاز إدخال فيديو واحد (مثل الكاميرا أو الشاشة المشتركة) وحتى جهاز واحد إدخال الصوت (مثل ميكروفون). إذا تم منح الإذن، و{{domxref ( "لتدفق الوسائط")}} الذين الفيديو و / أو المسارات الصوتية تأتي من تلك الأجهزة يتم تسليمها إلى الاستدعاء نجاح المحدد. إذا تم رفض الإذن، لا أجهزة الإدخال متوافقة موجودة، أو حدوث أي حالة خطأ أخرى، يتم تنفيذ الاستدعاء الخطأ مع {{domxref ( "MediaStreamError")}} وجوه واصفا ما حدث من خطأ. إذا كان المستخدم بدلا من ذلك لا يجعل خيارا على الإطلاق، لا يتم تنفيذ الاستدعاء.

بناء الجملة

navigator.getUserMedia ( القيود ، successCallback ، errorCallback

Parameters

constraints
A {{domxref("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 {{domxref("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 {{domxref("MediaStream")}} object that contains the media stream. Your callback can then assign the stream to the desired object (such as an {{HTMLElement("audio")}} or {{HTMLElement("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 {{domxref("MediaStreamError")}} object as its sole argument; this object is is modeled on {{domxref("DOMException")}}. See {anch("Errors")}} below for a list of the errors which can occur.

Return value

{{domxref("undefined")}}.

Errors

{{page("/en-US/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}

Examples

Width and height

Here's an example of using getUserMedia(), including code to cope with various browsers' prefixes. Note that this is the deprecated way of doing it: See the Examples section under the {{domxref("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");
}

Permissions

To use 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()"
  }
}

See permission: audio-capture and permission: video-capture for more information.

Specifications

Specification Status Comment
{{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}} {{Spec2('Media Capture')}} Initial definition.

Browser compatibility

New code should use {{domxref("Navigator.mediaDevices.getUserMedia()")}} instead.

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Microsoft Edge Internet Explorer Opera Safari (WebKit)
Basic support 21{{property_prefix("webkit")}} [1] 17{{property_prefix("moz")}} [3] {{CompatVersionUnknown}} {{CompatNo}} 12 [2]
18{{property_prefix("webkit")}}
{{CompatNo}}
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic Support {{CompatUnknown}} {{CompatChrome(40.0)}}{{property_prefix("webkit")}} [2] {{CompatVersionUnknown}} 24{{property_prefix("moz")}} [3] 1.2{{property_prefix("moz")}} [4]
1.4{{property_prefix("moz")}}
{{CompatNo}} 12 [2] {{CompatNo}} {{CompatNo}}

[1] Later versions of Chrome support unprefixed {{domxref("MediaDevices.getUserMedia()")}}, that replaced this deprecated method.

[2] Chrome and Opera still use an outdated constraint syntax, but the syntax described here is available through the adapter.js polyfill.

[3] 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.

[4] In Firefox OS 1.2 only audio was supported, 1.4 added support for video.

See also

  • {{domxref("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.

Document Tags and Contributors

 Contributors to this page: abodi
 Last updated by: abodi,