ITの隊長のブログ

ITの隊長のブログです。Pythonを使って仕事しています。最近はWebに戻ってきたお(^ω^ = ^ω^)

react-webcamでstreamに値が入るまで待つ

スポンサードリンク

github.com

const webcamRef = useRef(null)

return (
// 省略
        <Webcam
          audio={false}
          className="z-0"
          id="img"
          ref={webcamRef}
        />
)

こんな感じで起動していましたが、別処理でカメラで取得したデータを別途保存したいため、 webcamRef を使おうとしたら、streamにまだ値がないですよエラー。

どうやって待てばいいのかと色々探してみたり、過去実装してたpromiseをretryしてみたりとやってみたが、settimeoutと相性悪く(そんなことはないと思うけど、タイミングによっては2回実行されたりとカオスになる)困った困った

README 呼んでみたら、あるじゃないか素晴らしいのか! → onUserMedia

で、issue検索してみて参考にしてたけど、全然ワケワカメ。ちゃんと動かない。相変わらずstreamが空エラー。

github.com

だいぶ時間つぶしてしまったので、ソースコード読むか、なんかないかな〜って調べてたらあるじゃないか onUserMedia 。正確には引数をわたしとる!!!

github.com

なにそれ辛い。

こうしました。

const webcamRef = useRef(null)

return (
// 省略
        <Webcam
          audio={false}
          className="z-0"
          id="img"
          ref={webcamRef}
          onUserMedia={(stream) => {
              webcamRef.current = stream
              start()  // streamがないと動かない関数
          }}
        />
)

動きました。