Navigator: getUserMedia() メソッド

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

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

非推奨の Navigator.getUserMedia() メソッドは、最大 1 系統の動画入力機器（カメラや共有画面など）および最大 1 系統の音声入力機器（マイクなど）を MediaStream のソースとして使用する許可をユーザーに求めます。

許可が与えられた場合、それらの機器から動画や音声のトラックを持つ MediaStream が、指定された成功コールバックに配信されます。許可が拒否された場合や、互換性のある入力機器が存在しない場合、その他のエラー条件が発生した場合は、何が問題となったかを説明するオブジェクトを伴ってエラーコールバックが実行されます。ユーザーがまったく選択をしなかった場合は、どちらのコールバックも実行されません。

メモ: これは古いメソッドです。代わりに新しい navigator.mediaDevices.getUserMedia() を使用してください。技術的には非推奨ではありませんが、この古いコールバックの版はそのようにマークされていますので、新しいプロミスを返す版を使用するよう強くお勧めします。

構文

getUserMedia(constraints, successCallback, errorCallback)

引数

constraints

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

successCallback

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

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

errorCallback

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

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 を使用してください。

Navigator: getUserMedia() メソッド

構文

引数

返値

例

幅と高さ

ブラウザーの互換性

関連情報