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.

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

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

EventTarget MediaDevices

インスタンスプロパティ

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

インスタンスメソッド

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

enumerateDevices()

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

getSupportedConstraints()

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

getDisplayMedia()

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

getUserMedia()

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

selectAudioOutput()

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

イベント

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報