📸

次世代のカメラパッケージreact-camera-proの紹介

2022/07/15に公開

JavaScript

経緯

今回、社内で開発中のWebアプリにカメラの機能を実装する必要があり、npmでもダウンロード数が最も多いreact-webcamを使うことを検討していたのですが、色々あって断念した話です。
（react-webcamの批判ではなく、自分たちに合わなかったという事だけ誤解しないでいただければ助かります）

断念した理由

当然ですが、この開発中のWebアプリでは画質が要求されていてreact-webcamでは、その画質を満たすことができませんでした。

react-webcamの問題点

もしかしたら自分の技量不足で対処する方法があったのかもしれませんが、
時間的制約などがあり2つ問題が浮上しました

react-webcamはカメラのスクリーンショットをbase64に変換する過程で画質が下がってしまう
（説明が難しいのですが、）スクリーンショットの出力サイズがカメラのアスペクト比に依存する

画質が下がってしまう

画質が下がってしまうことはIssueでも上がっており、
自分が手元のiPhoneのブラウザでWebアプリを開いて撮影した所、目に見えて劣化していました。

対して次に紹介するreact-camera-proでは、比較的きれいなスクリーンショットを取得することができました。

react-webcam	react-camera-pro

※GIF載せてますが、再現状況とサイズの都合で分かりにくいですね…すみません

スクリーンショットの出力サイズがカメラのアスペクト比に依存する

あまり、フロントエンドに精通しているわけではないので間違っていると思いますが、
react-webcamではvideoタグの縦×横に合わせてdrawImageすることができないため、
このようなことが起こっているのだと考えています

そこで登場 react-camera-pro

2.はともかく1.についてはライブラリ選定するに当たり無視できない要因だったため、
フロントエンドのテックリードにも相談して共有していただいたものがreact-camera-proになります。

このライブラリだと問題だった

画質
react-webcamと比べてきれいに取れる
スクリーンショットのアスペクト比
親要素のスタイルで調整した<video>タグにあったスクリーンショットが取得できる

と要件を満たすことができたのでreact-camera-proを採用しました

import React, { useState, useRef } from "react";
import {Camera} from "react-camera-pro";

const Component = () => {
  const camera = useRef(null);
  const [image, setImage] = useState(null);

  return (
    <div>
      <Camera ref={camera} />
      <button onClick={() => setImage(camera.current.takePhoto())}>Take photo</button>
      <img src={image} alt='Taken photo'/>
    </div>
  );
}

使い勝手もreact-webcamと遜色ないです

最後に

今回、react-webcamの問題を取り上げ、react-camera-proを紹介しましたが、
自分自身はフロントエンドをそこまで熟知している人間ではないので間違っている事も多分にあると思います。
ですが、react-camera-pro自体はダウンロード数が少なく、知名度も低いものの、非常に良くできたパッケージだと思うので、
Webでカメラ表示する要件のときに１つの選択肢として検討いただければと思います。