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 引数は、video と audio の二つの属性を持つ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 がサポートしています。