MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

注記: この API は、MediaDevices.getUserMedia() に名前が変更されました。代わりに MediaDevices.getUserMedia() を使用してください! 非推奨となったこの API の従来のバージョンは、後方互換性のためにのみ存在しています。

非推奨
この機能は Web 標準から削除されました。まだサポートしているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。新旧にかかわらず、プロジェクトでの使用をやめてください。この機能を使用するページ、Web アプリはいつ動かなくなってもおかしくありません。

Navigator.getUserMedia() メソッドは、カメラや共有画面、マイクなど、0 または 1 系統の動画入力デバイスおよび 0 または 1 系統の音声入力デバイスの使用許可をユーザーに求めます。ユーザーが許可を与えると、許可された MediaStream オブジェクトを引数に与える successCallback が呼び出されます。ユーザーが拒否するかメディアが使用できない場合、PermissionDeniedError または NotFoundError エラーを伴う errorCallback が呼び出されます。ただし、ユーザーが選択する必要がない場合など、コールバックの呼び出しが完了しない可能性があることに注意してください。

構文

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 をひな形としています。エラーコードは以下のとおり:
エラー 説明
PermissionDeniedError メディアデバイスの使用がユーザーまたはシステムにより拒否された。
NotFoundError 指定された制約を満たす、特定の形式のメディアトラックが見つからない。

幅と高さ

これは、様々のブラウザの接頭辞に対処したコードを含む、getUserMedia() の使用例です。ただし、これは非推奨の使用方法なので注意してください。現在の API の使用例は、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");
}

許可設定

インストール可能アプリ (例えば Firefox OS アプリ) で getUserMedia() を使用するには、次のどちらか、または両方の項目をマニフェストファイルに記述する必要があります:

"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 を参照してください。

仕様

仕様書 策定状況 備考
Media Capture and Streams
navigator.getUserMedia の定義
勧告改訂案 初期定義。

ブラウザーの実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 21webkit [1] 17moz [3] 未サポート 12 [2]
18webkit
未サポート
機能 Android Android Webview Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート ? 40.0webkit [2] 24moz [3] 1.2moz [4]
1.4moz
未サポート 12 [2] 未サポート 未サポート

[1] 新しいバージョンの Chrome は、この非推奨のメソッドに代わる、接頭辞なしの MediaDevices.getUserMedia() をサポートします。

[2] Chrome と Opera は、依然として古い制約構文を使用しますが、ここに書かれた構文は、adapter.js 互換コードを通して利用可能です。

[3] ここに書かれた制約構文は、Firefox 38 で利用可能です。以前のバージョン (32~37) は古い制約構文を使用しますが、ここに書かれた構文は、adapter.js 互換コードを通して利用可能です。

[4] Firefox OS 1.2 では、audio のみがサポートされていました。1.4 で video のサポートが追加されました。

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: Marsf, YuichiNukiyama, fscholz, nshimizu
 最終更新者: Marsf,