MediaStream未连接到MediaElement

Question

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

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

函数startVideo()只是：

export async function startVideo(localVideo: HTMLMediaElement) {
  const mediaStream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });
  console.log("localVideo", localVideo);
  console.log("mediaStream", mediaStream);
  localVideo.srcObject = mediaStream;
}

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

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

这跟我想的一模一样。事实上，我唯一没想到的是视频流不会出现在屏幕上。

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

Answer 1

这不是故意的“哈哈，这是一个微妙的问题，我应该在StackOverflow上发布一个问题，然后自己回答它来炫耀一下。”我在真正的困惑中发布了这个问题，30秒后，答案出现在我脑海中。

我最初是从一个粗糙的JavaScript演示中工作的--它是有效的--并且有这样一句话：

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

当我翻译成Typescript和React时，VSCode不接受autoplay。在我将大小写更正为playsInline之前，它也不接受playsinline。我把autoplay掉了，不管它是什么，然后就忘了它。

无论如何，React/Typescript中的正确行当然是：

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

(现在唯一的问题是，当摄像头打开时，MediaElement会显示一个笨蛋的视频……)