MotoJapan's Tech-Memo

技術めも

【Javascript】カメラ(インカメラ/アウトカメラ)を切り替える方法 【お家IT#11】

本件の実装の一部 
motojapan.hateblo.jp

前回の続き 
motojapan.hateblo.jp


目次

前回からWebカメラ周り(Video要素やwebRTC, UserMedia)の操作を進めていたが、カメラリソース周りを今回進める。
やりたいことはWebアプリでのスマホカメラ起動なのでフロントカメラ、バックカメラの切り替えを行いたい。

参考資料

この為にいろいろ調べたけど、パッとした記事はあまりなく結局下記の資料に行き着いた。
ここを読めば大体使い方のイメージはつく。

Demo
webrtc.github.io

Github
github.com

というこれ本家。

MediaDeviceInfoの解説とUserMediaの使い方手順

上を読めばカメラだけでなくマイク、スピーカーのUserMedia周りの実装が分かるし、私が纏めるまでもないが、
重要なのは、”navigator.mediaDevices.enumerateDevices()”

この関数の戻り値は、フロントエンド側でアクセス可能なI/Oメディアデバイスの情報(MediaDeviceInfoオブジェクトの配列)である。(Promise Object)
MediaDeviceInfoには下記の情報が含まれている。

label バイス名(Macなら”FaceTime HD Cam” とか)
deviceId 同一セッション内で一貫したデバイスID (セッションが切れるとrefresh)
groupId 物理デバイス単位でのグループID
kind videoinput / audioinput / audiooutput

手順としては次の3つ
1) navigator.mediaDevices.enumerateDevices()でdeviceIdを取得
2) 1をvideoのdeviceIdと指定し、navigator.mediaDevices.getUserMediaでstreamを取得
3) 2のstreamをwindow.stream / video elementのstreamに代入


以上。

次回は、カメラ起動前後のvideoタグのサイズ変化を検出する。