Estoy tratando de transmitir un archivo de video usando la API MediaSource de Javascript en un enlace personalizado de React.
Aquí está el fragmento de mi código:
const useMyHook = (videoRef: React.MutableRefObject<HTMLVideoElement | null>) => { ... useEffect(() => { const mediaSource = new MediaSource(); videoRef.current!.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', () => { // this never happens }); }, []); ... } const MyComponent = () => { const videoRef = useRef<HTMLVideoElement | null>(null); const {} = useMyHook(videoRef); return ( <> <video ref={videoRef} controls />; </> ); }; Parece que mediaSource nunca emite el evento 'sourceopen' .
Qué más, cuando intento usar este código en diferentes proyectos con html simple y javascript, funciona bien.
Estaba tratando de usar document.getElementByTagName en lugar de useRef o usar esto directamente en mi componente, pero con el mismo resultado.
¿Alguien puede decirme cuál es el problema? ¿Hay algún problema con React o algo así?
Cree una instancia y mantenga el estado de MediaSource en todo el alcance del componente:
import React, { useState, useEffect, useRef } from 'react' const MyComponent = () => { const [mediaSource] = useState(new MediaSource()) const videoRef = useRef<HTMLVideoElement | null>(null) // component init useEffect(() => { mediaSource.addEventListener('sourceopen', ...) }, []) // videoRef changes useEffect(() => { videoRef?.current!.src = URL.createObjectURL(mediaSource) }, [videoRef]) };