MediaStream 未连接到 MediaElement答案

【问题标题】：MediaStream not connecting to MediaElementMediaStream 未连接到 MediaElement
【发布时间】：2020-03-26 05:17:01
【问题描述】：

创建元素的 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;
}

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

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

一切都如我所料。其实唯一没想到的是视频流没有出现在屏幕上。

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

【问题讨论】：

标签： reactjs typescript html5-video react-hooks

【解决方案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 会显示傻瓜的视频......）

【讨论】：