Estoy usando la cámara web de reacción para capturar imágenes y videos en mi aplicación de reacción. He implementado el ejemplo de Captura de pantalla (a través de Ref) :

 const videoConstraints = { width: 1280, height: 720, facingMode: "user" }; const WebcamCapture = () => { const webcamRef = React.useRef(null); const capture = React.useCallback( () => { const imageSrc = webcamRef.current.getScreenshot(); }, [webcamRef] ); return ( <> <Webcam audio={false} height={720} ref={webcamRef} screenshotFormat="image/jpeg" width={1280} videoConstraints={videoConstraints} /> <button onClick={capture}>Capture photo</button> </> ); };

Funciona bien, sin embargo, parece que la transmisión tarda unos segundos en comenzar y el video comienza a mostrarse. Quiero poder desactivar el botón mientras esto sucede. Descubrí que hay un indicador en webcamRef que indica si se está cargando:

 useEffect(() => { if (webcamRef.current) { const camStarted = webcamRef.current.state.hasUserMedia; debugger; } }, [webcamRef]);

En el useEffect anterior, mientras el video se está inicializando, hasUserMedia es falso, una vez que se ha cargado, cambia a verdadero. Esto suena exactamente como lo que necesito, sin embargo, como está en un useRef , no golpea el useEffect cuando cambia.

¿Hay algún tipo de truco ingenioso que pueda implementar para poder identificar cuándo se cambia este valor en useRef , o cualquier otra cosa que pueda ayudarme a obtener la funcionalidad que busco?