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

Question

I'm making a simple project that uses WebRTC in React with typescript.

I was following MDN HTMLMediaElement.captureStream().

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

.
.
.

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

But I'm getting this error,

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

I've even tried,

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

What am I doing wrong??

Edit

I tried

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();
       }
   }

Still the same error,

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

Edit 2

I looked into unresolved method captureStream on HTMLCanvasElement.

Apparently this is still an experimental feature not supported on all browsers. Will have to wait.

Answer 1

The property looks experimental and might not be added in TS yet. You can use any or event make your own type:

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

Answer 2

captureStream() method exists in HTMLCanvasElements so change your type to HTMLCanvasElement or any.