Navigator: getUserMedia() メソッド

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

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

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

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

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

構文

js
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() 下のの節を参照してください。

js
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");
}

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
getUserMedia
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

警告: 新しいコードでは代わりに MediaDevices.getUserMedia を使用してください。

関連情報