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

More than 1 year has passed since last update.

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