Estoy tratando de crear una función que detenga la transmisión de la cámara y agregue esta función a mi código existente. Este es el componente que estoy tratando de convertir en una función:
class WebcamCapture extends React.Component { setRef = (webcam) => { this.webcam = webcam; } stop = () => { let stream = this.webcam.video.srcObject; const tracks = stream.getTracks(); tracks.forEach(track => track.stop()); this.webcam.video.srcObject = null; }; render() { return ( <div> <Webcam audio={false} ref={this.setRef} /> <br /> <button onClick={this.stop} >Stop</button> </div> ); } }A continuación se muestra cómo traté de incorporar la función de detención del componente WebcamCapture, pero aparece el siguiente error: No se pueden leer las propiedades de undefined (leyendo 'srcObject').
const Camera = () => { const webcamRef = React.useRef(null); const [imgSrc, setImgSrc] = React.useState(null); const stop = React.useCallback(() => { //This is how I tried using stop function let stream = webcamRef.video.srcObject; const tracks = stream.getTracks(); tracks.forEach(track => track.stop()); webcamRef.video.srcObject = null; },[webcamRef, setImgSrc]); const capture = React.useCallback(() => { const imageSrc = webcamRef.current.getScreenshot(); setImgSrc(imageSrc); stop() //I would like to call stop() here }, [webcamRef, setImgSrc]); return ( <> <Webcam audio={false} ref={webcamRef} screenshotFormat="image/jpeg" /> <button onClick={capture} >Capture photo</button> {imgSrc && ( <img src={imgSrc} /> )} </> ) } export default Camera¿Cómo podría obtener la función de parada del componente WebcamCapture? ¡Cualquier ayuda sería apreciada!
Primero, no es necesario agregar Ref en la matriz de dependencia.
En segundo lugar, si está usando ref y usando "actual" para la función getScreenshot, entonces también debe usar actual para el objeto de video.
const Camera = () => { const webcamRef = React.useRef(null); const [imgSrc, setImgSrc] = React.useState(null); const stop = React.useCallback(() => { let stream = webcamRef.current.video.srcObject; const tracks = stream.getTracks(); tracks.forEach(track => track.stop()); webcamRef.current.video.srcObject = null; },[setImgSrc]); const capture = React.useCallback(() => { const imageSrc = webcamRef.current.getScreenshot(); setImgSrc(imageSrc); stop() }, [webcamRef, setImgSrc]); return ( <> <Webcam audio={false} ref={webcamRef} screenshotFormat="image/jpeg" /> <button onClick={capture} >Capture photo</button> {imgSrc && ( <img src={imgSrc} /> )} </> ) } export default Camera