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

HTML

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

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

参考
[【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ]
(https://webliker.info/52510/)

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)]
(https://qiita.com/shiba_mitue/items/6b6b6c1482c8815226de)
[video要素、audio要素をJavaScriptから操作する]
(http://www.htmq.com/video/)

#フロントカメラとリアカメラを切り替える方法（スマホで使う）
フロントカメラ＝内側のカメラ（インカメ）
リアカメラ＝外側のカメラ

■フロントカメラ

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] カメラのフロントとリアを切り替える]
(https://blog.katsubemakito.net/html5/camera-toggle)