MediaDevices

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

* Some parts of this feature may have varying levels of support.

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

MediaDevicesメディアキャプチャとストリーム API のインターフェイスで、カメラやマイク、さらに画面共有などの接続されたメディア入力機器へのアクセスを提供します。要するに、メディアデータのソースであるハードウェアにアクセスすることができるようになります。

EventTarget MediaDevices

インスタンスプロパティ

親インターフェイスである EventTarget のプロパティを継承しています。

インスタンスメソッド

親インターフェイスである EventTarget のメソッドを継承しています。

enumerateDevices()

システム上で使用できる入出力メディア機器についての情報を持つ配列を取得します。

getSupportedConstraints()

MediaTrackSupportedConstraints に適合するオブジェクトを返します。このオブジェクトは MediaStreamTrack インターフェイスで対応している制約可能なプロパティを表します。制約に関する詳細や使い方については、メディアストリーム API を参照してください。

getDisplayMedia()

共有または録画の目的で MediaStream としてキャプチャする、画面または画面の一部 (ウィンドウなど) をユーザーに選択させます。 MediaStream で解決する Promise を返します。

getUserMedia()

ユーザーの許可に基づいて、システム上のカメラや画面共有機能、マイクを起動して、入力と共に映像トラックや音声トラックを含む MediaStream を提供します。

selectAudioOutput() Experimental

ユーザーに対して、固有の音声出力機器を選択するよう尋ねます。

イベント

devicechange

メディアの入力または出力機器がユーザーのコンピューターに接続されたり取り外されたりしたときに発生します。

js
// Put variables in global scope to make them available to the browser console.
const video = document.querySelector("video");
const constraints = {
  audio: false,
  video: true,
};

navigator.mediaDevices
  .getUserMedia(constraints)
  .then((stream) => {
    const videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log(`Using video device: ${videoTracks[0].label}`);
    stream.onremovetrack = () => {
      console.log("Stream ended");
    };
    video.srcObject = stream;
  })
  .catch((error) => {
    if (error.name === "OverconstrainedError") {
      console.error(
        `The resolution ${constraints.video.width.exact}x${constraints.video.height.exact} px is not supported by your device.`,
      );
    } else if (error.name === "NotAllowedError") {
      console.error(
        "You need to grant this page permission to access your camera and microphone.",
      );
    } else {
      console.error(`getUserMedia error: ${error.name}`, error);
    }
  });

仕様書

Specification
Media Capture and Streams
# mediadevices

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaDevices
devicechange event
enumerateDevices
getDisplayMedia()
Audio capture support
controller option
Experimental
monitorTypeSurfaces option
Experimental
preferCurrentTab option
ExperimentalNon-standard
selfBrowserSurface option
Experimental
surfaceSwitching option
Experimental
systemAudio option
Experimental
getSupportedConstraints
getUserMedia
Secure context required
selectAudioOutput
Experimental
setCaptureHandleConfig
Experimental

Legend

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

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

関連情報