ブラウザだけでカメラのスナップショットを取る
ブラウザだけでカメラのスナップショットを取る

ブラウザだけでカメラのスナップショットを取る

タグ
WebRTCBrowserJavaScript
投稿日
July 15, 2018
著者
💩 うんち

バーコードリーダーを作る必要があったので、周辺技術を学ぶためにブラウザからカメラのスナップショットを撮るスクリプトを作りました。WebRTCのAPIを使っていますが、すべてクライアントサイドで完結します。今回のコードはGoogle Chromeでしか動きませんが、書き方が違うだけでメジャーなブラウザであれば実現できます。

処理の流れ

  1. カメラの映像をvideoに表示
  2. videoの1フレームを仮想のcanvasに描画
  3. canvasの描画情報をimgに落とし込む

もっと簡単にできるような気がしますが、WebRTCはこういうことは想定されていないのかもしれません。