【Javascript】カメラ（インカメラ/アウトカメラ）を切り替える方法 【お家IT#11】
本件の実装の一部
motojapan.hateblo.jp
前回の続き
motojapan.hateblo.jp
目次
前回からWebカメラ周り(Video要素やwebRTC, UserMedia)の操作を進めていたが、カメラリソース周りを今回進める。
やりたいことはWebアプリでのスマホカメラ起動なのでフロントカメラ、バックカメラの切り替えを行いたい。
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タグのサイズ変化を検出する。
