Estoy creando una aplicación que necesita acceder a la cámara del dispositivo del usuario y mostrar el video en la pantalla. Lo estoy haciendo usando un objeto HTML de video y asignando el flujo de medios como su srcObject , y funciona como esperaba. Sin embargo, TypeScript todavía me da un error porque estoy asignando la propiedad srcObject a un videoRef.current posiblemente nulo.
Primero, obtengo los medios y los asigno a videoRef dentro de un useEffect , así:
const Page: React.FC = () => { const videoRef = useRef<HTMLVideoElement | null>(null) const [mediaStream, setMediaStream] = useState<MediaStream | null>(null) useEffect(() => { const getDeviceMedia = async () => { const stream = await navigator.mediaDevices.getUserMedia({ video: true }) setMediaStream(stream) videoRef.current!.srcObject = stream } getDeviceMedia() }, [])Finalmente, devuelvo el video HTML asignando su referencia a la referencia del video:
return( <video ref={videoRef} autoPlay muted /> )Los medios se muestran en la pantalla correctamente (puedo ver el video de mi cámara), pero TypeScript me da este error:
TypeError no detectado: no se pueden establecer propiedades de nulo (estableciendo 'srcObject')
¿Estoy haciendo algo mal aquí o hay una forma de evitar este error?
Es un error de JavaScript que está recibiendo en tiempo de ejecución. Porque cuando se llama la devolución de llamada de useEffect por primera vez, es posible que el JSX aún no se haya procesado. Por lo tanto videoRef.current sigue siendo null . Intenta hacerlo:
useEffect(() => { const getDeviceMedia = async () => { const stream = await navigator.mediaDevices.getUserMedia({ video: true }) setMediaStream(stream) if(videoRef.current){ videoRef.current.srcObject = stream } } getDeviceMedia(); },[])