React中，MediaSource从未触发sourceopen事件。

Question

我尝试使用JavaScript的MediaSource API在React自定义钩子中流式传输视频文件。

这是我的代码片段：

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或其他什么原因导致的吗？

- Jan Krupiński

---

在当前状态下，您的useEffect钩子中的代码应该在videoRef.current!.src行抛出错误。注意!。 - Emiel Zuurbier

@EmielZuurbier 这在我的问题中有任何影响吗？ - Jan Krupiński

它将阻止代码运行，并永远无法到达 mediaSource.addEventListener('sourceopen'...。 - Emiel Zuurbier

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

- anthumchris

---

该死，它运行了！！！谢谢。我爱你。 - Jan Krupiński