zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript 使用可能なカメラを列挙して撮影するカメラを指定する

JavaScript デバイスのカメラから動画を撮影するで、カメラから動画を撮影する方法を紹介しました。

スマホでも同じようにカメラで撮影ができますが、スマホの場合は内側と外側の2箇所にカメラがあることが多いです。

どちらのカメラを使用するか、ユーザに選択させ、撮影するカメラを指定する方法を紹介します。

使用可能なカメラを取得

まずは使用可能なカメラの一覧を取得します。

enumerateDevicesで、使用可能な入出力メディアデバイス(カメラやマイク)の一覧を取得できます。

結果はPromiseで返却されます。

const devices = (await navigator.mediaDevices.enumerateDevices());

// または
navigator.mediaDevices.enumerateDevices().then((devices) => {

})

取得した情報のうち、以下を使用します。

kind
videoinputまたはaudioinputが設定されます。
deviceId
デバイスを識別するIDです。使用するカメラを指定する際に使用します。
label
デバイスの名前です。ユーザにデバイスを選択させる際の選択肢として表示します。

今回はカメラのみ取得したいため、kindvideoinputのデータのみを取得するします。

const devices = (await navigator.mediaDevices.enumerateDevices())
    .filter((device) => device.kind === 'videoinput');

例えばコンボボックスに一覧表示してユーザに使用するカメラを選択させる場合は以下のようにします。

const devices = (await navigator.mediaDevices.enumerateDevices())
    .filter((device) => device.kind === 'videoinput')
    .map((device) => {
      return {
        text: device.label,
        value: device.deviceId,
      };
    });

カメラを指定して撮影

deviceIdを指定してカメラを起動します。

カメラの起動方法はJavaScript デバイスのカメラから動画を撮影するで詳しく紹介しています。

const media = await navigator.mediaDevices.getUserMedia({
  video: true,
  video: {
    deviceId: 選択したdeviceId,
  },
  audio: false,
});


関連記事