JavaScript 使用可能なカメラを列挙して撮影するカメラを指定する
JavaScript デバイスのカメラから動画を撮影するで、カメラから動画を撮影する方法を紹介しました。
スマホでも同じようにカメラで撮影ができますが、スマホの場合は内側と外側の２箇所にカメラがあることが多いです。
どちらのカメラを使用するか、ユーザに選択させ、撮影するカメラを指定する方法を紹介します。
使用可能なカメラを取得
まずは使用可能なカメラの一覧を取得します。
enumerateDevicesで、使用可能な入出力メディアデバイス（カメラやマイク）の一覧を取得できます。
結果はPromiseで返却されます。
const devices = (await navigator.mediaDevices.enumerateDevices());
// または
navigator.mediaDevices.enumerateDevices().then((devices) => {
})取得した情報のうち、以下を使用します。
- kind
videoinputまたはaudioinputが設定されます。- deviceId
- デバイスを識別するIDです。使用するカメラを指定する際に使用します。
- label
- デバイスの名前です。ユーザにデバイスを選択させる際の選択肢として表示します。
今回はカメラのみ取得したいため、kindがvideoinputのデータのみを取得するします。
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,
});