Navigator.getUserMedia

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

非推奨
この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

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 の定義		 勧告候補 初期定義。

ブラウザーの実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから！
機能 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 のサポートが追加されました。

関連項目