MediaSource never emit sourceopen event in React
Solution 1:
Instantiate and maintain state of MediaSource throughout the scope of the component:
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])
};