はじめに
Reactを使ったWebアプリケーションでカメラ撮影する機能について調べてみました。
ただ撮影するだけではなく、サーバーに撮った画像を送信するところまでやってみました。
Reactでカメラを使う
Reactでカメラを使用する場合、現状(2023/10月現在)だと以下のライブラリが候補になります。
- react-webcam
- react-html5-camera-photo
- 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"