Navigator: getUserMedia() メソッド

構文

getUserMedia(constraints, successCallback, errorCallback)

引数

constraints

要求するメディアの種類と、それぞれの種類に対する要求事項を指定するオブジェクトです。詳細は、最新の MediaDevices.getUserMedia() メソッドの定数の節と、能力と制約と設定の記事を参照してください。

successCallback

メディアアクセスの要求が承認されたときに呼び出される関数です。この関数は、メディアストリームを含む MediaStream オブジェクトの単一の引数で呼び出されます。コールバックは、次の例のようにストリームを任意のオブジェクト (<audio> や <video> 要素など) に割り当てることができます。

js

function successCallback(stream) {
  const video = document.querySelector("video");
  video.srcObject = stream;
  video.onloadedmetadata = (e) => {
    // Do something with the video here.
  };
}

errorCallback

呼び出しが失敗した場合、 errorCallback で指定された関数が、オブジェクトを単一の引数として呼び出されます。このオブジェクトは、DOMException をひな形としています。

返値

なし (undefined)。

例

幅と高さ

これは、様々のブラウザーの接頭辞に対処したコードを含む、 getUserMedia() の使用例です。ただし、これは非推奨の使用方法なので注意してください。現在の API の使用例は、MediaDevices.getUserMedia() 下の例の節を参照してください。

navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia(
    { audio: true, video: { width: 1280, height: 720 } },
    (stream) => {
      const video = document.querySelector("video");
      video.srcObject = stream;
      video.onloadedmetadata = (e) => {
        video.play();
      };
    },
    (err) => {
      console.error(`The following error occurred: ${err.name}`);
    },
  );
} else {
  console.log("getUserMedia not supported");
}

ブラウザーの互換性

関連情報

• この非推奨のメソッドに代わる MediaDevices.getUserMedia()。
• WebRTC - この API の入門ページ
• MediaStream API - メディアストリームオブジェクト向けの API
• ウェブカメラでの写真撮影 - getUserMedia() を使って、動画ではなく写真を撮るためのチュートリアル