“HTMLVideoElement”类型上不存在属性“captureStream”[重复]

Question

我正在做一个简单的项目，在 React 中使用 WebRTC 和 typescript。

我在关注MDN HTMLMediaElement.captureStream()。

const vid: HTMLVideoElement | null = document.querySelector("video");
if (vid) {
   vid.captureStream();
}

.
.
.

<video id="myVid"></video>

但是我收到了这个错误，

Property 'captureStream' does not exist on type 'HTMLVideoElement'.ts(2339)

我什至尝试过，

const vid: HTMLMediaElement | null = document.querySelector("video");

我做错了什么？？

编辑

我试过了

const videoCont = useRef<HTMLVideoElement>(null);

var URL = window.URL || window.webkitURL
const fileURL = URL.createObjectURL(e)
if (videoCont.current) {
         videoCont.current.src = fileURL;
         videoCont.current.play = async () => {
              const mediaStream = videoCont.current?.captureStream();
       }
   }

还是同样的错误，

Property 'captureStream' does not exist on type 'HTMLVideoElement'.

编辑 2

我查看了unresolved method captureStream on HTMLCanvasElement。

显然，这仍然是一项实验性功能，并非所有浏览器都支持。将不得不等待。

Answer 1

该属性看起来experimental，可能尚未添加到TS。您可以使用any 或事件制作您自己的类型：

interface HTMLMediaElementWithCaputreStream extends HTMLMediaElement{
  captureStream(): MediaStream;
}

Answer 2

captureStream() 方法存在于 HTMLCanvasElements 中，因此请将类型更改为 HTMLCanvasElement 或 any。