Reactjs MediaStream未连接到MediaElement

创建元素的React代码如下所示：

export const VideoPage: React.FC<{}> = () => {
  const localVideoRef = useCallback((localVideo: HTMLMediaElement | null) => {
    if (localVideo) {
      startVideo(localVideo);
    }
  }, []);
  return (
    <>
      <video ref={localVideoRef} playsInline></video>
    </>
  );
};

当我加载页面时，相机上方的绿灯亮起；红色的“视频”点出现在浏览器的选项卡上；视频元素占据浏览器页面中心的一个正方形。控制台上记录了以下内容：

localVideo <video playsinline>​</video>​
mediaStream MediaStream {id: "jTQifTT0vSfcBw7v6E6E9M81mpv7qVhRrTe2", active: true, onaddtrack: null, onremovetrack: null, onactive: null, …}

localVideo​​
mediaStream mediaStream{id:“jTQifTT0vSfcBw7v6E6E9M81mpv7qVhRrTe2”，活动：true，onaddtrack:null，onremovetrack:null，onactive:null，}

完全如我所料。事实上，我唯一没有想到的是视频流没有出现在屏幕上

我不知道如何调试这个。一切看起来都正常，但就是不起作用。有什么建议吗？

这不是故意的“哈哈，这是一个微妙的问题，我应该向StackOverflow发布一个问题，然后自己回答来炫耀。”我发帖时真的很困惑，30秒后，我突然想到了答案

我最初是从一个简陋的JavaScript演示程序开始工作的，这个演示程序很有效，并且有这样一句话：

<video id="localVideo" autoplay playsinline></video>

（现在唯一的问题是，当摄像头打开时，MediaElement会显示一个傻瓜的视频…）

<video id="localVideo" autoplay playsinline></video>

<video ref={localVideoRef} playsInline autoPlay></video>