JS.7 Webカメラの映像で遊んでみる-1

やっぱり機械学習エンジニア、それも現在Neural Pocketで画像認識をしているとなると、やはりWebカメラの映像を使って遊んでみたくなります。

ここでは、以下の流れでやっていきます。

  1. Webカメラの映像をそのままブラウザに表示する。
  2. Webカメラの動画のフレームをCanvasに描画する。
  3. ローカルでPythonファイルを実行し、Webカメラの映像にモデルを適用する。
  4. ローカルホストで取得したWebカメラの映像を機械学習モデルのあるサーバーに送り、結果を受け取って表示する。
  5. どちらもサーバーにあげる。（セキュリティの問題ですぐには厳しそう。）

Webカメラの映像をそのままブラウザに表示する。

※ GitHub Pages は静的サイトなので、映像が僕の元に送信される心配はありません。


コード

html

<!--サイズの初期値は640×480(4:3)-->
<video id="video" width="640" height="480" autoplay style="border: 1px solid; margin: 0 auto"></video>

JavaScript

//動画流す準備
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;
});

css

.video-streaming {
  text-align: center;
  margin: 30px auto;
}
#video {
  border: 1px solid;
}
.btn-blue {
  background-color: rgb(68, 122, 178);
  color: #fff;
  padding: 10px;
  border-radius: 3px;
}
.btn-red {
  background-color: rgb(252, 92, 84);
  color: #fff;
  padding: 10px;
  border-radius: 3px;
}
@media only screen and (max-width: 640px) {
  #video {
    width: 100%;
    height: 100%;
  }
}
other contents
social