我正在尝试在 React 自定义挂钩中使用 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'
event.
更重要的是,当我尝试在不同的项目中使用简单的 html 和 javascript 来使用此代码时,它工作得很好。
我试图使用document.getElementByTagName
代替useRef
或者直接在我的组件中使用它,但结果相同。
有人可以告诉我有什么问题吗? React 有什么问题吗?
实例化并维护状态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])
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)