注記: この API は、MediaDevices.getUserMedia()
に名前が変更されました。代わりに MediaDevices.getUserMedia()
を使用してください! 非推奨となったこの API の従来のバージョンは、後方互換性のためにのみ存在しています。
非推奨
この機能は Web 標準から削除されました。まだサポートしているプラウザがあるかもしれませんが、ゆくゆくはなくなるものです。新旧にかかわらず、プロジェクトでの使用をやめてください。この機能を使用するページ、Web アプリはいつ動かなくなってもおかしくありません。
Navigator.getUserMedia()
メソッドは、カメラや共有画面、マイクなど、0 または 1 系統の動画入力デバイスおよび 0 または 1 系統の音声入力デバイスの使用許可をユーザーに求めます。ユーザーが許可を与えると、許可された MediaStream
オブジェクトを引数に与える successCallback
が呼び出されます。ユーザーが拒否するかメディアが使用できない場合、PermissionDeniedError
または NotFoundError
エラーを伴う errorCallback
が呼び出されます。ただし、ユーザーが選択する必要がない場合など、コールバックの呼び出しが完了しない可能性があることに注意してください。
構文
navigator.getUserMedia(constraints, successCallback, errorCallback);
引数
- constraints
- 要求するメディアの形式を指定する
MediaStreamConstaints
オブジェクト。詳細は、現在のMediaDevices.getUserMedia()
メソッド下の constraints セクションを参照してください。 - successCallback
- 呼び出しが完了した場合に、
successCallback
で指定され、メディアストリームを含むMediaStream
オブジェクトが引数に与えられた関数が呼び出されます。次の例で示すように、このオブジェクトには、適切な要素を割り当てて動作させてください:function(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Do something with the video here. }; }
- errorCallback
- 呼び出しが失敗した場合、
errorCallback
で指定され、MediaStreamError
が唯一の引数に与えられた関数が呼び出されますこのオブジェクトは、DOMException
をひな形としています。エラーコードは以下のとおり:エラー 説明 PermissionDeniedError
メディアデバイスの使用がユーザーまたはシステムにより拒否された。 NotFoundError
指定された制約を満たす、特定の形式のメディアトラックが見つからない。
例
幅と高さ
これは、様々のブラウザの接頭辞に対処したコードを含む、getUserMedia()
の使用例です。ただし、これは非推奨の使用方法なので注意してください。現在の API の使用例は、MediaDevices.getUserMedia()
下の 例 セクションを参照してください。
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } }, function(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { video.play(); }; }, function(err) { console.log("The following error occurred: " + err.name); } ); } else { console.log("getUserMedia not supported"); }
許可設定
インストール可能アプリ (例えば Firefox OS アプリ) で getUserMedia()
を使用するには、次のどちらか、または両方の項目をマニフェストファイルに記述する必要があります:
"permissions": { "audio-capture": { "description": "Required to capture audio using getUserMedia()" }, "video-capture": { "description": "Required to capture video using getUserMedia()" } }
詳しい情報は、permission: audio-capture および permission: video-capture を参照してください。
仕様
仕様書 | 策定状況 | 備考 |
---|---|---|
Media Capture and Streams navigator.getUserMedia の定義 |
勧告改訂案 | 初期定義。 |
ブラウザーの実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 21webkit [1] | 17moz [3] | 未サポート | 12 [2] 18webkit |
未サポート |
機能 | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
基本サポート | ? | 40.0webkit [2] | 24moz [3] | 1.2moz [4] 1.4moz |
未サポート | 12 [2] | 未サポート | 未サポート |
[1] 新しいバージョンの Chrome は、この非推奨のメソッドに代わる、接頭辞なしの MediaDevices.getUserMedia()
をサポートします。
[2] Chrome と Opera は、依然として古い制約構文を使用しますが、ここに書かれた構文は、adapter.js 互換コードを通して利用可能です。
[3] ここに書かれた制約構文は、Firefox 38 で利用可能です。以前のバージョン (32~37) は古い制約構文を使用しますが、ここに書かれた構文は、adapter.js 互換コードを通して利用可能です。
[4] Firefox OS 1.2 では、audio
のみがサポートされていました。1.4 で video
のサポートが追加されました。
関連項目
- この非推奨のメソッドに代わる
MediaDevices.getUserMedia()
。 - WebRTC - この API の前置きページ。
- MediaStream API - メディアストリームオブジェクト向けの API。
- Taking webcam photos -
getUserMedia()
を使って、動画ではなく写真を撮るためのチュートリアル。