javascript - MediaSource 从不在 React 中发出 sourceopen 事件

Question

我正在尝试在 React 自定义 Hook 中使用 Javascript 的 MediaSource API 流式传输视频文件。

这是我的代码片段:

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 />;
    </>
  );
};

看起来 mediaSource 从未发出 'sourceopen' 事件。

此外，当我尝试在不同的项目中使用简单的 html 和 javascript 时，它工作正常。

我试图使用 document.getElementByTagName 而不是 useRef 或直接在我的组件中使用它，但结果相同。

有人能告诉我这是什么问题吗？ React 什么的有什么问题吗？

Answer 1

在整个组件范围内实例化和维护 MediaSource 的状态:

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])
};