属性 'captureStream' 在类型 'HTMLVideoElement' 上不存在

Question

我正在制作一个简单的项目，它在 React 中使用 WebRTC 和打字稿。

我正在关注 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

我调查了。

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

Answer 1

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

Answer 2

属性看起来 experimental and might not be added in TS 了。您可以使用 any 或事件创建您自己的类型：

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

属性 'captureStream' 在类型 'HTMLVideoElement' 上不存在

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

html

webrtc

typescript

reactjs

编辑

编辑 2