はじめに

ふと、個人開発でスマホのセルフィーWEBアプリケーションを作成したくなりました。
react-webcam でそれが実現できそうだったので1時間〜2時間の工作の記録を残します。

react-webcamとは？

Reactアプリケーションでウェブカメラを簡単に扱うためのライブラリです。

特徴

ウェブカメラの操作をサポート
ユーザーのウェブカメラをアクセスし、映像を取得するための機能を提供します。これにより、リアルタイムでの映像表示や撮影が可能になります。

Reactコンポーネントとして使用可能
react-webcam はReactのコンポーネントとして提供されており、簡単に他のReactコンポーネントと統合して使用することができます。

カスタマイズ可能なオプション
カメラのオプション（例えば、解像度やオーディオの有無）を設定したり、撮影された画像の形式を指定するなどのカスタマイズが可能です。

クロスブラウザ対応
主要なウェブブラウザ（Chrome、Firefox、Safariなど）で動作します。ブラウザが提供するWebRTC（Web Real-Time Communication）APIを使用してカメラへのアクセスを行います。

react-webcam を使用することで、ウェブカメラを利用した機能を迅速にReactアプリケーションに組み込むことができます。

機能

ウェブカメラの表示
ウェブカメラからのリアルタイム映像を表示するための機能が提供されます。
これにより、ユーザーが自分の映像を確認できるUIを作成することができます。

静止画のキャプチャ
ウェブカメラからのリアルタイム映像を表示するための機能が提供されます。
ウェブカメラから静止画をキャプチャする機能があります。
これにより、撮影した画像を保存したり、別の処理に利用したりすることができます。

カスタマイズ可能なオプション
カメラの解像度、フレームレート、オーディオの有無などを設定するオプションがあります。
これにより、アプリケーションの要件に合わせてカメラの挙動を調整できます。

クロスブラウザ対応
主要なウェブブラウザ（Chrome、Firefox、Safariなど）で動作し、ブラウザが提供するWebRTC APIを利用してカメラにアクセスします。

イベントハンドリング
カメラの起動、停止、エラーハンドリングなどのイベントを処理するためのコールバック関数を設定できます。

類似ライブラリ

react-camera

ウェブカメラを扱うためのシンプルな React コンポーネントです。
カメラの起動、写真の撮影、録画などの機能を提供します。
比較的シンプルで使いやすいですが、更新は一部止まっているようです。

react-camera-pro

シンプルなインターフェース・写真の撮影・デバイスの選択・デフォルトのUI・カスタマイズ可能が特徴です。
react-webcamよりメジャーじゃないですが、画質や機能はこちらが良さそう‥

ライブラリを使わない場合の選択肢

getUserMedia API

navigator.mediaDevices.getUserMedia()メソッド を使用して、ユーザーのカメラやマイクにアクセスでき、これにより、ストリームから映像を取得し、それをCanvas要素に描画して表示することができます。

選択の理由

Reactでの簡単な統合や基本的なカメラ操作が必要と思ったので react-webcam にしました。
しかし、カスタムUIや高度な加工処理が必要な場合は、getUserMedia API を直接使用することで、より細かなカスタマイズや操作が可能です。

また、画質へのこだわりが開発で強ければ機能面も良さそうな react-camera-pro を選んでたかもしれません。

1. プロジェクトの作成

まずは、React TypeScript プロジェクトを作成します。

npx create-react-app react-webcam-app --template typescript
cd react-webcam-app

2. react-webcam ライブラリのインストール

次に、react-webcam ライブラリをインストールします。

npm install react-webcam

3. コンポーネントの作成

react-webcam を使用するためのコンポーネントを作成します。

src/App.tsx を以下のように編集します。

import React, { useRef } from 'react';
import Webcam from 'react-webcam';

const App: React.FC = () => {
  const webcamRef = useRef<Webcam>(null);

  const capture = () => {
    const imageSrc = webcamRef.current?.getScreenshot();
    console.log(imageSrc);
    // ここで imageSrc を使って何かしらの処理を行う
  };

  return (
    <div>
      <Webcam
        audio={false}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
      />
      <button onClick={capture}>Capture</button>
    </div>
  );
};

export default App;

4. TypeScript の設定

通常、create-react-app で生成されたプロジェクトには TypeScript の設定はすでに含まれていますが、必要に応じてカスタマイズすることができます。

5. アプリケーションの起動

最後に、作成したアプリケーションを起動して動作を確認します。

npm start

オプションの開発

上記で必要最低限の機能を開発しました。

現在下記の機能を開発し実機で確認できています

画像添付
ゴリゴリ img要素 貼ってます。
position でスクリーンショット向けのセルフィーです。

画像position変更
縦画面と横画面で画像の位置を変更できます

MUIのアイコン
アイコンを使いたくてMUIを使用してます。
これ便利ですよね!!

不要なUIの非表示
セルフィー時に不要なUIは退けたいので、特定のUIを非表示にする機能。

撮影画像のプレビュー
撮影後は撮った写真を画面に描画します。

撮影画像の保存
WEBとスマホともに撮影画像をダウンロードできるようにしました。

成功or失敗のTips
画像保存後に、成功しても失敗でも画面下にTipが表示するようにしてます。

ここまで

ブラウザで http://localhost:3000 を開くと、ウェブカメラが起動し、Capture ボタンで画像がキャプチャされることを確認できます。

これで、TypeScript を使用して react-webcam を利用する基本的な開発環境の設定が完了しました。

さいごに

セルフィー作ったけど使いにくいです。
WEBカメラなら全然問題ないですが、スマホで使いたかったので微妙でした。

ブラウザが提供するWebRTC APIの制約で、外部カメラや内蔵カメラ、さらにはスマートフォンのカメラを制御するための直接的な機能は提供していません。

以上から、使用を考えたセルフィーアプリはReact Native らを用いたアプリケーションじゃないと満足して作れないことがわかりました。

残念!!

リンク