JS.8 Webカメラの映像で遊んでみる-2

それでは、Webカメラの映像をモデルに通して遊んでみたいと思います。GitHub Pages は静的サイトなので、基本的にはPythonファイルを動かすことができないのですが、TensorFlow.jsというライブラリを使うことで静的サイトでも機械学習のモデルを使うことができます。

それはまたの機会にやってみるとして、ここではサーバーにWebカメラの映像を送る、といったことをしたいと思います。

この時、動画はフレームの重ね合わせなので、一定時間ごとのフレームを送る、という方法をとります。

まずは、Canvasタグに動画のフレームを描画することをやってみます。

Webカメラの動画のフレームをCanvasに描画する

Streaming



Canvas


コード

html

<div class="video-streaming">
  <h3>Streaming</h3>
  <video id="video" width="640" height="480" playsinline muted autoplay ></video><br>
  <h3>Canvas</h3>
  <canvas id="canvas"></canvas><br>
</div>

JavaScript

var video = document.getElementById("video");
var media = navigator.mediaDevices.getUserMedia({
  video: { facingMode: "user" },
  audio: false,
});
media.then((stream) => {
  video.srcObject = stream;
  setInterval(function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var w = video.offsetWidth;  canvas.setAttribute('width',  w.toString());
    var h = video.offsetHeight; canvas.setAttribute('height', h.toString());
    context.drawImage(video, 0, 0, w, h);
  },1000); //1000ms(=1s)毎に描画しています。
});

css

.video-streaming {
  text-align: center;
  margin: 30px auto;
}
#video {
  border: 2px solid;
  border-color: rgb(68, 122, 178);
  width: 80%;
  height: auto;
}
#canvas {
  border: 2px solid;
  border-color: rgb(252, 92, 84);
  width: 80%;
  height: auto;
}
.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;
}
other contents
social