【React】ブラウザでカメラ撮影を実装できるライブラリ「react-html5-camera-photo」

タイトル通り、ブラウザでカメラを起動し写真を撮影する機能を実装できるライブラリ「react-html5-camera-photo」のご紹介です。
ブラウザでのカメラ機能は、今回初めて使ったのですが、思いのほかスムーズに実装できました。

今回使用したライブラリの GitHub はこちら。

MABelanger/react-html5-camera-photo: HTML5 camera photo
https://github.com/mabelanger/react-html5-camera-photo

デモページへのリンクもあるので、インストール前にお試しができます。

まず、下記コマンドでライブラリをインストールします。

npm install --save react-html5-camera-photo

次に、カメラ機能を組み込みたいページに実装してきます。
サンプルコードがこちらです。

import React, { useEffect, useState } from 'react';
import Camera, { FACING_MODES } from 'react-html5-camera-photo';
import 'react-html5-camera-photo/build/css/index.css';

export default function CameraComponent(props) {
  const [isCameraUsed, setCameraUsed] = useState(false);
  const [isCameraOpen, setCameraOpen] = useState(false);
  const [stream, setStream] = useState(null);

  useEffect(() => {
    if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
      setCameraUsed(true);
    }
  }, []);
  const takePicture = () => {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        setStream(stream)
        setCameraOpen(true);
      });
  }
  const onTakePhoto = (uri) => {
    onClose();
    console.log(uri);
  }
  const onClose = () => {
    setCameraOpen(false);
    if (stream) {
      // カメラを終了
      stream.getTracks().forEach(track => track.stop());
    }
  }

  return (
    <div>
      <Button onClick={takePicture} disabled={!isCameraUsed}>カメラで撮影</Button>
      <Button variant='outlined' onClick={onClose}>カメラを終了する</Button>
      { isCameraOpen &&
        <Camera
          onTakePhoto={onTakePhoto}
          onCameraError={onClose}
          isFullscreen={true}
          idealFacingMode={FACING_MODES.ENVIRONMENT} />
      }
    </div>
  )
}

まずページを起動したタイミングで、そもそもカメラ機能を使えるかどうかを確認します。
カメラ機能を使用できる端末だったら、「カメラで撮影する」ボタンを有効にします。
そして、このボタンがタップされたら navigator.mediaDevices.getUserMedia({ video: true }) を実行し、成功したら stream を取得し、今回は state に格納します。
なお、この stream はカメラ機能を終了する時に必要になりますので、必ずどこか変数にでも確保しておきましょう。

次に、カメラを撮影した時の処理です。
画面下に現れる白い丸がシャッターボタンです。
これをクリックすると、onTakePhoto に設定した関数が呼び出されます。
撮影した写真は base64 の形式で取得できますので、<img> タグで表示するなり、File オブジェクトに変換して送信するなり、お好きな処理を実行してください。
あとはカメラを終了して、一連の動作は完了です。

なお、カメラを終了する際は stream.getTracks().forEach(track => track.stop()); を必ず実行して下さい。
こちらを実行しないとカメラが起動しっぱなしになるようで、実際私がこの行を実行しなかった時には、カメラ横のライトがつきっぱなし、かつブラウザのタブにも録画を示す赤丸が表示しっぱなしになってしまいました…。

以上、React でブラウザでカメラ撮影を実装できるライブラリ「react-html5-camera-photo」のご紹介でした。
シンプルで使いやすいライブラリなので、とてもおすすめです。
ご参考になれば幸いです。