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

The getUserMedia function will call the function specified in the successCallback with the LocalMediaStream object that contains the media stream. You may assign that object to the appropriate element and work with it, as shown in the following example:

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

errorCallback

The getUserMedia function will call the function specified in the errorCallback with a code argument. The error codes are described as follows:

Error	Description
PERMISSION_DENIED	The user denied permission to use a media device required for the operation.
NOT_SUPPORTED_ERROR	A constraint specified is not supported by the browser.
MANDATORY_UNSATISFIED_ERROR	No media tracks of the type specified in the constraints are found.

パーミッション

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 がサポートしています。