• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

413
Vistas
Obtención de TypeError no detectado: no se pueden establecer propiedades de nulo mientras se usa useRef

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?

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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(); },[])
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda