【備忘録】ブラウザでカメラを使用する

ブラウザからデバイスのカメラを使用する場合。とりあえず記載しているのはカメラ1つの場合で、スマホやタブレットで前面／背面カメラがある場合は未調査。
撮影した画像はAPIに渡す想定で、base64エンコードするまで記載しています。

検証環境

• Google Chrome バージョン: 81.0.4044.138

ソースコード

html

<video id="video">Video stream not available.</video>
<canvas id="canvas"></canvas>
<input type="button" onclick="onClickCaptureButton()" value="capture"></input>

javascript

const video  = document.getElementById('video');
const canvas = document.getElementById('canvas');

video.addEventListener('canplay', (event) => {
  canvas.setAttribute('width' , video.videoWidth);
  canvas.setAttribute('height', video.videoHeight);
}, false);

navigator.mediaDevices.getUserMedia({video:true, audio:false})
.then((stream) => {
  video.srcObject = stream;
  video.play();
})
.catch((err) => {
  console.log(err);
});

function onClickCaptureButton(event) {
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

  const base64Image = canvas.toDataURL('image/jpeg', 0.95)
  // <!-- ここに画像の処理を書く。APIをコールするなり、imgタグを埋め込むなり。。。 -->
}

チラシの裏（読まなくてもいい余談）

顔認識のAPIを試したくて、過去に作ったカメラを使う処理を引っ張り出してきました。昨今はいろんなAPIが出てきて便利な世の中になりましたね。