はじめに

Reactを使ったWebアプリケーションでカメラ撮影する機能について調べてみました。
ただ撮影するだけではなく、サーバーに撮った画像を送信するところまでやってみました。

Reactでカメラを使う

Reactでカメラを使用する場合、現状(2023/10月現在)だと以下のライブラリが候補になります。

react-webcam
- https://github.com/mozmorris/react-webcam
react-html5-camera-photo
- https://github.com/mabelanger/react-html5-camera-photo
react-camera-pro
- https://github.com/purple-technology/react-camera-pro

ダウンロード数、GitHubのスター数などreact-webcamが圧倒しているので、基本的にはreact-webcamから検討していくのがよさそうです。

react-webcam

単純にreact-webcamを使うだけなら難しいことは何もなく、usageにある通り、<WebCam />のみで使用できます。
撮影した画像を取得したい場合は、getScreenShotを呼び出せばよいだけでこちらも簡単に使用できます。
https://github.com/mozmorris/react-webcam#methods

イメージをサーバーに送信する

react-webcamで撮影した画像をそのまま表示するだけなら問題ないのですが、サーバーに送信する場合は、

base64をBlobに変換する
Fileオブジェクトを作成する

必要があります。
これについては、検索すればたくさんの情報があります。

デモ

react-webcamで撮った画像を送信するコードをCode Sandboxで動くようにしてみました。
https://codesandbox.io/s/react-webcam-example-tfq9cc

イメージを受け取るサーバー

上記で送信した画像を受け取るために、FastAPIを使いイメージを受け取って保存するサーバーを作成します。
FastAPIでファイルをアップロードするAPIを作るには、以下を参考にすれば簡単に作成できます。
https://fastapi.tiangolo.com/tutorial/request-files/

今回は、アップロードされたファイルをJPEGとして保存するため、PILを通して保存します。

import time
from PIL import Image
from fastapi import FastAPI, UploadFile

app = FastAPI()

@app.post("/image")
async def save_image(file: UploadFile):
    image = Image.open(BytesIO(await file.read()))
    image.save(f"{int(time.time() * 100000)}.jpg")
    return "ok"

参考資料