javaScriptでWEBカメラの映像をブラウザで表示する(PC/iPhone)

WEBカメラから映像をブラウザに表示するには、ノートPCだったら搭載のインカメラ、デスクトップだったらUSB型のWEBカメラ、スマホならインカメラ・背面カメラといろいろありるので取得してみます。

※2018年7月現在：実験段階の機能です。
※セキュリティの問題でlocalhostかHTTPSのみかな？

index.html

<video id="video" width="640" height="480" autoplay></video>

• ビデオ属性のサイズ初期値は640*480の4:3です。
• ビデオ属性はautoplayで取得したそばから再生させます。
• PCの場合はautoplayのみでOK。
• iphoneの場合、初期値がフル画面のため、枠内に収める場合はplaysinlineを入れる
• iphoneの場合、はじめに停止ボタン出るけど止める方法あるのだろうか。
• インカメラの場合は左右反転するので、反転したい場合はCSSで対応します。
• (CSSを指定してもiphoneの場合、フル画面の場合は反転しません。)

//動画流す準備
var video = document.getElementById("video");
// getUserMedia によるカメラ映像の取得
var media = navigator.mediaDevices.getUserMedia({
    video: true,//ビデオを取得する
    //使うカメラをインカメラか背面カメラかを指定する場合には
    //video: { facingMode: "environment" },//背面カメラ
    //video: { facingMode: "user" },//インカメラ
    audio: false,//音声が必要な場合はture
});
//リアルタイムに再生（ストリーミング）させるためにビデオタグに流し込む
media.then((stream) => {
    video.srcObject = stream;
});