Webアプリでカメラ操作したいときに見るメモ（javascript）

HTML

<video id="myvideo" width="160" height="160" muted autoplay playsinline></video>

・width：横幅
・height：縦幅
・muted：動画の音をでないように設定
・autoplay：動画を自動再生
・playsinline：インライン再生を可能にする

参考
【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

JS

async function main() {
    // デバイス（カメラ・マイク）からのデータ取得を試みる
    // 映像や音声が使えるデバイスが確定するまで時間がかかるためawaitを使う
    const stream = await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true,
    });
    // IDが"myvideo"であるDOMを取得
    const video = document.getElementById('myvideo');
    // myvideoなvideo要素のsrcObject（映像オブジェクトを入れるところ）にデータ（メディアストリーム）をセットする
    video.srcObject = stream;
}

// 実行する
main();

参考
javaScriptでWEBカメラの映像をブラウザで表示する(PC/iPhone)
video要素、audio要素をJavaScriptから操作する

フロントカメラとリアカメラを切り替える方法（スマホで使う）

フロントカメラ＝内側のカメラ（インカメ）
リアカメラ＝外側のカメラ

■フロントカメラ

navigator.mediaDevices.getUserMedia({
  audio: false,
  video: {
    width: 640, height: 480,
    facingMode: "user"
  }
})

■リアカメラ

navigator.mediaDevices.getUserMedia({
  audio: false,
  video: {
    width: 640, height: 480,
    facingMode: { exact: "environment" }
  }
})

参考
[HTML5] カメラのフロントとリアを切り替える