JavaScript
iPhone
Safari
Webカメラ

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;
});

https://developer.mozilla.org/ja/docs/Web/API/MediaDevices