使用 MediaSource 在 React 组件中流式传输视频文件

Question

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

这是我的组件：

const RawPlayer: React.FC= () => {
    const videoRef = useRef<HTMLVideoElement>(null);


    useEffect(() => {
        const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

        if (videoRef.current && MediaSource.isTypeSupported(mimeCodec)) {
            const myMediaSource = new MediaSource();
            const url = URL.createObjectURL(myMediaSource);

            videoRef.current.src = url;

            myMediaSource.addEventListener('sourceopen', () => {
                const videoSourceBuffer = myMediaSource.addSourceBuffer(mimeCodec);

                videoSourceBuffer.addEventListener('error', console.log);

                // this is just an express route that return an mp4 file using `res.sendFile`
                fetch('http://localhost:3001/video/bC4Zud78/raw').then((response) => {
                    return response.arrayBuffer();
                }).then((videoData) => {
                    videoSourceBuffer.appendBuffer(videoData);
                });
            });
        }
    });

    return (
        <video ref={videoRef} controls />
    );
};

奇怪的是它不起作用。当我进入页面时，视频上有一个微调器，微调器消失然后什么也没有发生。

这个错误侦听器：

videoSourceBuffer.addEventListener('error', console.log);

记录这个：

这不是真正的错误。

这是一个复制品：https://github.com/AnatoleLucet/react-MediaSource

代码在src/App.tsx

Answer 1

问题是我从 api 收到的文件格式。如果我在我的 fetch 中尝试使用 this file，它会完美地工作！

Answer 2

关于文件格式的说明：我也曾为此苦恼过。 mp4 必须分段才能与 MediaSource 一起使用（在我的测试中，请提供任何更正）。您可以使用此实用程序从未分段的 mp4 创建分段的 mp4：

https://www.bento4.com/documentation/mp4fragment/

有关有效 MIME 编解码器的完整列表，请参阅：

https://cconcolato.github.io/media-mime-support/

使用 MediaSource 在 React 组件中流式传输视频文件

Using MediaSource to stream a video file in a React component

javascript

typescript

reactjs

media-source