技術CameraNode.jsReact

Thumbnail of post image 150

前回は img タグに表示してみました。今回は canvas タグに表示してみます。
img タグと比べると、少し工夫が必要になります。

準備

React Webcam のインストールなどはこちら。

カメラ映像 ...

技術CameraNode.jsReact

Thumbnail of post image 166
準備

React Webcam のインストールなどはこちら。

カメラ映像から画像を取得して表示する

写真を撮るようなイメージで、ボタンを押したときの映像を img タグ で表示してみます。
いつものように App.js ...

技術CameraNode.jsReact

Thumbnail of post image 087
準備

React Webcam を使っていきます。

React Webcam のインストールnpm install react-webcamカメラを表示する

PCが認識しているカメラを選択して表示できるようにしてみます。