Navigator: getUserMedia() メソッド
非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
非推奨の Navigator.getUserMedia()
メソッドは、最大 1 系統の動画入力機器(カメラや共有画面など)および最大 1 系統の音声入力機器(マイクなど)を MediaStream
のソースとして使用する許可をユーザーに求めます。
許可が与えられた場合、それらの機器から動画や音声のトラックを持つ MediaStream
が、指定された成功コールバックに配信されます。
許可が拒否された場合や、互換性のある入力機器が存在しない場合、その他のエラー条件が発生した場合は、何が問題となったかを説明するオブジェクトを伴ってエラーコールバックが実行されます。
ユーザーがまったく選択をしなかった場合は、どちらのコールバックも実行されません。
メモ: これは古いメソッドです。
代わりに新しい navigator.mediaDevices.getUserMedia()
を使用してください。
技術的には非推奨ではありませんが、この古いコールバックの版はそのようにマークされていますので、新しいプロミスを返す版を使用するよう強くお勧めします。
構文
getUserMedia(constraints, successCallback, errorCallback)
引数
constraints
-
要求するメディアの種類と、それぞれの種類に対する要求事項を指定するオブジェクトです。詳細は、最新の
MediaDevices.getUserMedia()
メソッドの定数の節と、能力と制約と設定の記事を参照してください。 successCallback
-
メディアアクセスの要求が承認されたときに呼び出される関数です。この関数は、メディアストリームを含む
MediaStream
オブジェクトの単一の引数で呼び出されます。コールバックは、次の例のようにストリームを任意のオブジェクト (<audio>
や<video>
要素など) に割り当てることができます。jsfunction 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");
}
ブラウザーの互換性
BCD tables only load in the browser
警告: 新しいコードでは代わりに MediaDevices.getUserMedia
を使用してください。
関連情報
- この非推奨のメソッドに代わる
MediaDevices.getUserMedia()
。 - WebRTC - この API の入門ページ
- MediaStream API - メディアストリームオブジェクト向けの API
- ウェブカメラでの写真撮影 -
getUserMedia()
を使って、動画ではなく写真を撮るためのチュートリアル