react(nativeでない)でカメラを使ってみる

reactでカメラが使える「react-webcam」の簡単な紹介です。
ここにサンプルを作ってみました。スマホで見るとカメラ機能が試せます。
(Qiita記事へのcodepen埋め込みはカメラにアクセスできないようなので埋め込み断念しました。)

• サンプルでは次を実装しています
  • 撮影機能
  • 撮影結果の表示
  • カメラ切り替え（画面側、背面側の切り替え）

使い方

class MyComponent extends React.Component {
...
  setRef = webcam => {
    this.webcam = webcam;
  }
  capture = () => {
    const img = this.webcam.getScreenshot()
    ...
  }
...
  render(){ 
  return (<Webcam
    audio={false}
    style={styles.camera}
    ref={this.setRef}
    screenshotFormat="image/jpeg"
    videoConstraints={{
     facingMode: this.state.isFacingModeUser ? "user" : "environment"
    }}
    onUserMediaError={() => window.alert('cant access your camera')}
  />)
}

• Webcamコンポーネントを配置すればカメラの画像を映し出してくれます。
• refでwebcamオブジェクトを受け取って保存しておきます。
  • 写真を撮るとき等は、webcamオブジェクトのgetScreenshotを呼び出せば画像を取得できます。上記コードだとcaptureメソッドをボタンのonClickに指定すれば撮影ボタンが作れます。
    • getScreenshotの戻り値を imgタグのsrcに指定すれば撮った画像を表示できます
• facingMode: "user"を指定するとスマホの画面側のカメラ、"environment"だとスマホの背面側のカメラを使用します
• その他細かい内容はマニュアルを見てください（逃げ）

うまくいかなかったところ

• カメラのキャプチャ画面上に撮影用の等のボタンを配置するのが大変でした。

  • Webcamコンポーネントがレンダリングされると、videoエレメントと外側のdivエレメントが作成されます
  • Webcamに被せるようにボタンを配置しても、外側のdivに重なる形になってしまい、実際に目に見えるキャプチャ画面とずれてました
    *
  • CSS力不足でうまい方法が思いつかず、結局divとvideoを同じサイズ指定して回避しています。指定サイズに合わない解像度のカメラだと表示がずれてると思います。

• カメラのfacingMode切り替えボタンが初回の1タップ時のみ動作しない

  • 初回のみ切り替えボタン動作せず、2回目から動作します
  • 原因分かりませんでした。私の書き方が悪いだけかもしれません
  • componentDidMountでわざと切り替えを1回発生させて、ユーザーがボタンを押す時が2回目になるようにして回避しました