Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Media capture

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

InputDeviceInfo は メディアキャプチャとストリーム API のインターフェイスで、これが表す入力機器の能力にアクセスするためのものです。 InputDeviceInfo オブジェクトは、返された機器が音声または動画入力機器である場合、MediaDevices.enumerateDevices() によって返されます。

MediaDeviceInfo InputDeviceInfo

埋め込み

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
InputDeviceInfo
47
79
11
47
11
getCapabilities

getCapabilities() は InputDeviceInfo インターフェイスのメソッドで、この機器の MediaStream の主音声トラックまたは主映像トラックを記述する MediaTrackCapabilities オブジェクトを返します。
67
79
17
67
17
MediaDeviceInfo

MediaDeviceInfo インターフェイスは、単一のメディア入力または出力機器を示す情報を持ちます。
47
12
39
11
47
11
deviceId

deviceId は MediaDeviceInfo インターフェイスの読み取り専用プロパティで、対応する機器の識別子を表す文字列を返します。この識別子はセッション間で不変です。
47
12
39
11
47
11
groupId

groupId は MediaDeviceInfo インターフェイスの読み取り専用プロパティで、グループの識別子の文字列を返します。
47
12
39
11
47
11
kind

MediaDeviceInfo インターフェイスの読み取り専用プロパティ kind は列挙値で、"videoinput"、"audioinput"、"audiooutput" のいずれかです。
47
12
39
11
47
11
label

MediaDeviceInfo インターフェイスの読み取り専用プロパティ label は、デバイスの説明の文字列 (例："External USB Webcam") を返します。
47
12
39
11
47
11
toJSON

MediaDeviceInfo インターフェイスの toJSON() メソッドは、Serializationです。このメソッドは、この MediaDeviceInfo オブジェクトの JSON 表現を返します。
47
18
42
11
47
11
MediaDevices

MediaDevices はMedia Capture and Streams API のインターフェイスで、カメラやマイク、さらに画面共有などの接続されたメディア入力機器へのアクセスを提供します。要するに、メディアデータのソースであるハードウェアにアクセスすることができるようになります。
47
12
33
11
47
11
devicechange_event

devicechange はイベントで、カメラ、マイク、スピーカーなどのメディア機器がシステムに接続・切断されるたびに MediaDevices へ送られます。
57
12
52
11
11
enumerateDevices

enumerateDevices() は MediaDevices インターフェイスのメソッドで、マイクやカメラ、ヘッドセットなど、現在利用可能なメディア入出力機器の一覧を要求します。 返されたプロミス (Promise) は、機器を記述した MediaDeviceInfo の配列で解決されます。
47
12
116
11
47
11
getSupportedConstraints

getSupportedConstraints() は MediaDevices インターフェイスのメソッドで、 MediaTrackSupportedConstraints 辞書に基づくオブジェクトを返却し、そのそれぞれのメンバーフィールドは、user agentが理解する制約可能なプロパティの 1 つを指定します。
53
12
44
11
52
11
getUserMedia

getUserMedia() は MediaDevices インターフェイスのメソッドで、要求された種類のメディアを含むトラックを持つ MediaStream を生成するメディア入力を使用する許可をユーザーに求めます。
53
12
36
11
53
11
getUserMedia (secure context required)

安全なコンテキストが必要
53
79
68
11
53
11
MediaStream

MediaStream はMedia Capture and Streams API のインターフェイスで、メディアコンテンツのストリームを表します。ストリームは動画や音声など複数のトラックから成ります。それぞれのトラックは MediaStreamTrack のインスタンスとして定義されます。
55
12
15
11
55
11
active

active は MediaStream インターフェイスの読み取り専用プロパティで、論理値を返します。ストリームが現在アクティブであれば true 、それ以外の場合は false となります。 MediaStreamTrack のうち MediaStreamTrack.readyState が ended に設定されているトラックが 1 本でもある場合は、ストリームがアクティブであるとみなされます。すべでのトラックが終了すると、このストリームの active プロパティは false になります。
42
12
52
11
42
11
addTrack

addTrack() は MediaStream インターフェイスのメソッドで、ストリームへ新しいトラックを追加します。このトラックは MediaStreamTrack 型の引数して指定します。
26
12
44
11
26
11
addtrack_event

addtrack イベントは、新しい MediaStreamTrack オブジェクトが MediaStream に追加されたときに発行されます。
26
12
50
11
26
11
clone

clone() は MediaStream インターフェイスのメソッドで、この MediaStream の複製を作成します。この新しい MediaStream オブジェクトは、新しい固有の MediaStream.id を持ち、 MediaStream に含まれる MediaStreamTrack もそれぞれ clone() を呼び出して得られたものになります。
35
12
48
11
35
11
getAudioTracks

getAudioTracks() は MediaStream インターフェイスのメソッドで、そのストリームの track set の中から、 MediaStreamTrack.kind が audio である MediaStreamTrack を表すオブジェクトの配列を返します。
26
12
22
11
26
11
getTrackById

getTrackById() は MediaStream インターフェイスのメソッドで、指定された ID 文字列を持つトラックを表現する MediaStreamTrack オブジェクトを返します。指定した ID を持つトラックが存在しない場合は、 null を返します。
26
12
49
11
26
11
getTracks

getTracks() は MediaStream インターフェイスのメソッドで、このストリームのトラックセットにあるすべての MediaStreamTrack オブジェクトを MediaStreamTrack.kind に関係なく表す配列を返します。
38
12
34
11
38
11
getVideoTracks

getVideoTracks() は MediaStream インターフェイスのメソッドで、このストリームに含まれる動画トラックを表す MediaStreamTrack オブジェクトの配列を返します。
26
12
22
11
26
11
id

id は MediaStream インターフェイスの読み取り専用プロパティで、このオブジェクトの固有識別子 (GUID) である 36 文字で表現される文字列を返します。
26
12
41
11
26
11
MediaStream

MediaStream() コンストラクターは、新しく生成された MediaStream を返し、これはそれぞれが MediaStreamTrack オブジェクトで表されるメディアトラックのコレクションとして機能します。
55
12
44
11
55
11
removeTrack

removeTrack() は MediaStream インターフェイスのメソッドで、ストリームから MediaStreamTrack を除去します。
26
12
44
11
26
11
removetrack_event

removetrack イベントは、新しい MediaStreamTrack オブジェクトが MediaStream から除去されたときに発行されます。
26
12
72
11
26
11
MediaStreamTrack

MediaStreamTrack はMedia Capture and Streams API のインターフェイスで、ストリームに含まれる一つのメディアトラックを表現します。一般的に、音声や動画のトラックですが、他の種類のトラックも存在することがあります。
26
12
22
11
26
11
applyConstraints

applyConstraints() は MediaStreamTrack インターフェイスのメソッドで、トラックに一連の制約を適用します。これらの制約により、ウェブサイトやアプリは、フレームレート、サイズ、エコーキャンセルなど、トラックの制約可能なプロパティに対して、理想的な値や受け入れられる範囲を設定することができます。
59
12
43
11
59
11
applyConstraints (aspectRatio constraint)

MediaTrackConstraints辞書のaspectRatioプロパティは、MediaTrackSettings.aspectRatio制約可能プロパティの値に配置される要求または必須の制約を記述するConstrainDoubleである。
59
≤15
11
59
11
applyConstraints (autoGainControl constraint)

MediaTrackConstraints辞書のautoGainControlプロパティは、MediaTrackSettings.autoGainControl制約可能プロパティの値に要求された、または必須の制約を記述するConstrainBooleanである。
67
79
55
67
applyConstraints (channelCount constraint)

MediaTrackConstraints辞書のchannelCountプロパティは、MediaTrackSettings.channelCount制約可能プロパティの値に要求された、または必須の制約を記述したConstrainULongである。
59
79
59
applyConstraints (deviceId constraint)

MediaTrackConstraints辞書のdeviceIdプロパティは、MediaTrackSettings.deviceId制約可能プロパティの値に要求された、または必須の制約を記述するConstrainDOMStringである。
59
12
43
11
59
11
applyConstraints (echoCancellation constraint)

MediaTrackConstraints辞書のechoCancellationプロパティは、MediaTrackSettings.echoCancellation制約可能プロパティの値に設定される、要求または必須の制約を記述するConstrainBooleanOrDOMStringです。
59
79
50
11
59
11
applyConstraints (facingMode constraint)

MediaTrackConstraints辞書のfacingModeプロパティは、MediaTrackSettings.facingMode制約可能プロパティの値に配置される要求または必須の制約を記述するConstrainDOMStringである。
59
12
50
11
59
11
applyConstraints (frameRate constraint)

MediaTrackConstraints辞書のframeRateプロパティは、MediaTrackSettings.frameRate制約可能プロパティの値に要求された、または必須の制約を記述したConstrainDoubleです。
59
12
50
11
59
11
applyConstraints (groupId constraint)

MediaTrackConstraints辞書のgroupIdプロパティは、MediaTrackSettings.groupId制約可能プロパティの値に対して要求された、または必須の制約を記述するConstrainDOMStringである。
59
12
70
11
59
11
applyConstraints (height constraint)

MediaTrackConstraints辞書のheightプロパティは、MediaTrackSettings.height制約可能プロパティの値に要求された、または必須の制約を記述したConstrainULongです。
59
12
50
11
59
11
applyConstraints (latency constraint)

MediaTrackConstraints辞書のlatencyプロパティは、MediaTrackSettings.latency constrainableプロパティの値に要求された、または必須の制約を記述したConstrainDoubleである。
59
79
50
59
applyConstraints (noiseSuppression constraint)

MediaTrackConstraints辞書のnoiseSuppressionプロパティは、MediaTrackSettings.noiseSuppression制約可能プロパティの値に要求された、または必須の制約を記述するConstrainBooleanである。
67
79
55
67
applyConstraints (resizeMode constraint)

resizeMode`制約
72
79
72
applyConstraints (sampleRate constraint)

MediaTrackConstraints辞書のsampleRateプロパティは、MediaTrackSettings.sampleRate制約可能プロパティの値に対して要求される、または必須の制約を記述したConstrainULongである。
59
12
11
59
11
applyConstraints (sampleSize constraint)

MediaTrackConstraints辞書のsampleSizeプロパティは、MediaTrackSettings.sampleSize制約可能プロパティの値に要求された、または必須の制約を記述したConstrainULongです。
59
12
11
59
11
applyConstraints (width constraint)

MediaTrackConstraints辞書のwidthプロパティは、MediaTrackSettings.width制約可能プロパティの値に要求された、または必須の制約を記述したConstrainULongである。
59
12
50
11
59
11
clone

clone() は MediaStreamTrack インターフェイスのメソッドで、MediaStreamTrack の複製を作成します。この新しい MediaStreamTrack オブジェクトは、固有の MediaStreamTrack.id 以外は同じです。
35
12
48
11
35
11
enabled

enabled は MediaStreamTrack インターフェイスのプロパティで、このトラックがソースストリームから出力が許可されている場合は true、そうでない場合は false となる論理値です。これは意図的にトラックをミュートするために使用することができます。
26
12
24
11
26
11
ended_event

ended は MediaStreamTrack インターフェイスのイベントで、メディアの終端に到達したため、あるいはそれ以上のデータが利用できないために再生やストリーミングが停止したときに発行さ れます。
26
12
50
11
26
11
getCapabilities

getCapabilities() は MediaStreamTrack インターフェイスのメソッドで、プラットフォームとuser agentに基づいて、各制約されるプロパティの値または値の範囲を指定する MediaTrackCapabilities オブジェクトを返します。
59
12
132
11
59
11
getConstraints

getConstraints() は MediaStreamTrack インターフェイスメソッドで、MediaStreamTrack.applyConstraints を以前に呼んでトラックに設定した一連の制約を保持する MediaTrackConstraints オブジェクトを返します。これらの制約は、ウェブサイトまたはアプリケーションが、含まれている制約可能なプロパティに対して必須または受け入れられると指定した値と値の範囲を示します。
53
12
50
11
52
11
getSettings

getSettings() はMediaStreamTrack インターフェイスのメソッドで、現在の MediaStreamTrack の制約可能なプロパティの現在の値を含む MediaTrackSettings オブジェクトを返します。
59
12
50
11
59
11
id

id は MediaStreamTrack インターフェイスの読み取り専用のプロパティで、このトラックのための固有識別子 (GUID) を含む文字列を返します。この値はuser agentによって生成されます。
26
12
22
11
26
11
kind

kind は MediaStreamTrack インターフェイスの読み取り専用のプロパティであり、トラックの種類を示す文字列を返します。トラックが音声トラックの場合は "audio" を返し、映像トラックの場合は "video" を返します。トラックがソースから切り離されている場合は、何も変更されません。
26
12
22
11
26
11
label

label は MediaStreamTrack インターフェイスの読み取り専用のプロパティであり、トラックのソースを識別するためにuser agentによって割り当てられたラベルを含む文字列を返します。例えば "internal microphone" などです。
26
12
22
11
26
11
mute_event

mute イベントは、トラックのソースが一時的にメディアデータを提供することができなくなったときに MediaStreamTrack へ送られます。
26
12
59
11
26
11
muted

muted は MediaStreamTrack インターフェイスの読み取り専用プロパティであり、トラックが現在メディア出力を提供できない状態であるかどうかを示します。
38
12
59
11
38
11
readyState

readyState は MediaStreamTrack インターフェイスの読み取り専用のプロパティであり、トラックの状態を表す列挙値を返します。
26
12
50
11
26
11
stop

stop() は MediaStreamTrack のメソッドで、トラックを停止します。
32
12
34
11
32
11
unmute_event

unmute イベントは、トラックのソースが休止時間の後、再びメディアデータを提供するようになると MediaStreamTrack に送られます。
26
12
59
11
26
11
MediaStreamTrackEvent

Media Capture and Streams APIのMediaStreamTrackEventインターフェイスは、Media Capture and Streams APIメソッドの呼び出しによってMediaStreamにトラックが追加されたり、ストリームから削除されたりしたことを示すイベントを表す。これらのイベントは、変更が発生したときにストリームに送信されます。
26
12
50
11
26
11
MediaStreamTrackEvent

MediaStreamTrackEvent()コンストラクタは、MediaStreamTrackがMediaStreamに追加されたこと、またはMediaStreamから削除されたことを示すイベントを表す、新しいMediaStreamTrackEventオブジェクトを返します。
55
12
50
11
55
11
track

MediaStreamTrackEventインタフェースのtrack読み取り専用プロパティは、このイベントに関連するMediaStreamTrackを返す。
26
12
50
11
26
11
mediaDevices

Navigator.mediaDevices 読み取り専用プロパティは、カメラやマイク、画面共有のような接続されたメディア入力装置へのアクセスを提供する MediaDevices オブジェクトを返します。
47
12
36
11
47
11
mediaDevices (secure context required)

安全なコンテキストが必要
74
79
69
11
74
11
OverconstrainedError

Media Capture and Streams APIのOverconstrainedErrorインタフェースは、現在のMediaStreamTrackに必要な機能のセットを現在満たすことができないことを示します。このイベントがMediaStreamTrackにスローされると、現在の制約が確立されるか、満足できる制約が適用されるまで、そのMediaStreamTrackはミュートされます。
63
79
11
63
11
constraint

OverconstrainedErrorインターフェイスのconstraint読み取り専用プロパティは、コンストラクタで供給された制約、つまり満たされなかった制約を返します。
63
79
11.1
63
11.3
OverconstrainedError

OverconstrainedError()コンストラクタは、新しいOverconstrainedErrorオブジェクトを作成し、現在のMediaStreamTrackに必要な能力のセットを現在満たすことができないことを示します。このイベントがMediaStreamTrackにスローされると、現在の制約を確立できるか、満足できる制約が適用されるまで、そのイベントはミュートされます。
63
79
11
63
11
permission_camera

カメラ`の許可
64
79
132
16
64
16
permission_microphone

マイクの許可
64
79
132
16
64
16
その他
html.elements.iframe.allow.camera
64
79
74
11.1
64
11.3
html.elements.iframe.allow.microphone
64
79
74
11.1
64
11.3
http.headers.Permissions-Policy.camera
実験的

HTTP の Permissions-Policy ヘッダーにおける camera ディレクティブは、現在の文書が動画入力機器を使用することを許可するかどうかを制御します。
88
88
88
http.headers.Permissions-Policy.microphone
実験的

HTTP の Permissions-Policy ヘッダーにおける microphone ディレクティブは、現在の文書がオーディオ入力機器を使用することを許可するかどうかを制御します。
88
88
88
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 67 より前のバージョンでは、関連するデバイスは実際には `groupId` によってグループ化されていません。
注釈 4件
実装メモ
  • enumerateDevices()`は入力デバイスと出力デバイスの両方を列挙する。以前は入力デバイスのみが返されていた。
  • enumerateDevices()`は入力デバイスだけを返す。
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (116)
注釈 1件
実装メモ
  • バージョン53より前にこの機能が必要な場合は、非推奨の`navigator.getUserMedia`APIの接頭辞付き形式である`navigator.webkitGetUserMedia`を参照してください。
注釈 4件
実装メモ
  • バージョン36より前にこの機能が必要な場合は、非推奨となった`navigator.getUserMedia`APIの接頭辞付き形式である`navigator.mozGetUserMedia`を参照してください。
  • Firefox 55 より前のバージョンでは、`getUserMedia()` は、指定された制約のリストが空であるか、すべての制約が `false` に設定されている場合に、誤って `NotSupportedError` を返していました。Firefox 55 から、この状況は `TypeError` で失敗ハンドラを正しく呼び出すようになりました。
  • Firefox 固有の `video` 制約である `mediaSource` を使用してディスプレイキャプチャを要求する場合、Firefox 66 以降では `screen` と `window` の両方の値を考慮して、スクリーンとウィンドウのリストが表示されます。
  • Firefox 66 から、ユーザがアドレスバーに入力した `<iframe>` や `data` URL のサンドボックス内で `getUserMedia()` を使用できなくなりました。
注釈 1件
実装メモ
  • バージョン53より前にこの機能が必要な場合は、非推奨の`navigator.getUserMedia`APIの接頭辞付き形式である`navigator.webkitGetUserMedia`を参照してください。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (21)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (25)
注釈 1件
実装メモ
  • Firefox 64 以前では、このメソッドは `AudioStreamTrack` オブジェクトの配列を返していました。しかし、現在では `MediaStreamTrack` がそのインターフェースの機能を引き継いでいます。
注釈 1件
実装メモ
  • Firefox 64 以前では、このメソッドは `VideoStreamTrack` オブジェクトの配列を返していました。しかし、現在では `MediaStreamTrack` がそのインターフェイスの機能を引き継いでいます。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (21)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (25)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (72)
実装メモ
  • Firefox 72以前では、イベントハンドラは公開されていましたが、何の効果もありませんでした。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: moz (46)
注釈 1件
実装メモ
  • Firefox 69 以前では、Firefox は `getUserMedia()` に渡す制約で `deviceId` しかサポートしていなかった。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: moz (46)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 現在のところ、オペレーティングシステムからマイクのミュート状態を追跡することはできません。

基本構文

JAVASCRIPT 
const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: 1280, height: 720 },
  audio: true
});
const video = document.querySelector('video');
video.srcObject = stream;

実務での使いどころ

  • Media capture の活用

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

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク