Navigator.getUserMedia

この記事は編集レビューを必要としています。ぜひご協力ください

プロンプトを表示し、ユーザにカメラやマイクといったメディアデバイスの使用を許すかどうかを尋ねます。ユーザが許可した場合、LocalMediaStream  オブジェクトを引数に successCallbackが呼ばれます。

構文

navigator.getUserMedia ( constraints, successCallback, errorCallback );

ブラウザ接頭辞付きで getUserMedia() を利用する例を以下に示します。

navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

if (navigator.getUserMedia) {
   navigator.getUserMedia (

      // constraints
      {
         video: true,
         audio: true
      },

      // successCallback
      function(localMediaStream) {
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(localMediaStream);
         // Do something with the video here, e.g. video.play()
      },

      // errorCallback
      function(err) {
         console.log("The following error occured: " + err);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

引数

引数 必須 / オプショナル 説明
constraints 必須 successCallback に渡されるLocalMediaStream オブジェクトがサポートするメディアタイプ。
successCallback  必須 LocalMediaStream オブジェクトが取得できた場合、呼び出されるコールバック関数。
errorCallback オプショナル (Firefox では必須) 呼び出しが失敗した際に実行されるコールバック関数。最近の Firefox では必須となっています。省略された場合、 NS_ERROR_XPC_NOT_ENOUGH_ARGS error がスローされます。

constraints

第 1 引数は、videoaudio の二つの属性を持つMediaStreamConstraints オブジェクトです。どちらの属性も真偽値で LocalMediaStream オブジェクトがサポートするメディアタイプを表します。どちらか一方、もしくは両方を指定する必要があります。指定した制約をブラウザがサポートしていない場合、 getUserMedia は NOT_SUPPORTED_ERROR を引数に指定して errorCallback を呼びます。

値の指定が省略された場合の、デフォルト値は false です。次の例は、音声と動画の両方を利用するための制約を表します:

{ video: true, audio: true }

successCallback

getUserMedia関数は、メディアストリームオブジェクトを含むLocalMediaStreamを伴うsuccessCallback関数を呼び出します。次の例が示すように、適切な要素にそのオブジェクトを割り当て、一緒に動作させることができます。

function(localMediaStream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(localMediaStream);
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
},

errorCallback

getUserMedia関数はcode 引数を持つerrorCallback関数を呼び出せます。エラーコードの説明は以下のとおりです。

エラー 説明
PERMISSION_DENIED  ユーザーが操作のために要求されたメディアデバイスの使用許可を拒否した。
NOT_SUPPORTED_ERROR  指定した制約をブラウザがサポートしていない。
MANDATORY_UNSATISFIED_ERROR  制約で指定したメディアトラックの種類が見つからない。

パーミッション

getUserMedia をインストール型のアプリ (Firefox OS アプリなど) で利用する場合には、マニフェストファイルへ以下のように記述する必要があります。

"permissions": {
  "audio-capture": {
    "description": "Required to capture audio via getUserMedia"
  }
}

詳細は permission: audio-capture をご覧ください。

ブラウザ互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Stream API  21webkit  17moz  未サポート  12 未サポート 
Feature Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
Stream API  未サポート  24moz  1.2 for audio moz
1.4 for video moz
未サポート  12 未サポート 

WebRTC のカメラアクセスは Chrome、Opera、Firefox 20 がサポートしています。

関連項目

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

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