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が空エラー。
だいぶ時間つぶしてしまったので、ソースコード読むか、なんかないかな〜って調べてたらあるじゃないか onUserMedia
。正確には引数をわたしとる!!!
なにそれ辛い。
こうしました。
const webcamRef = useRef(null) return ( // 省略 <Webcam audio={false} className="z-0" id="img" ref={webcamRef} onUserMedia={(stream) => { webcamRef.current = stream start() // streamがないと動かない関数 }} /> )
動きました。
完