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.

Does this answer your question? [unresolved method captureStream on HTMLCanvasElement](https://stackoverflow.com/questions/50651091/unresolved-method-capturestream-on-htmlcanvaselement) — Tal Ohana, Jun 19 '21 at 07:44
I guess, it just says that this is an experimental feature yet. — Nithin Sai, Jun 19 '21 at 08:25
`(videoCont.current? as any).captureStream();` this would silence the error, `captureStream` on mediaelement is experimental and not available in TS yet — Exlord, Aug 12 '21 at 06:42

score 3 · Accepted Answer · edited Jul 23 '22 at 10:01

3

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

edited Jul 23 '22 at 10:01

Warren Seine

2,311
2
25
38

answered Jun 19 '21 at 07:42

Tushar Shahi

16,452
1
18
39

I tried to create my own type, but the ```captureStream()``` just returned ```undefined```. Guess I will have to wait till TS supports this – Nithin Sai Jun 19 '21 at 08:24
The code above will only mitigate the checking TS does. If your browser is returning undefined, then it might not have support for this. – Tushar Shahi Jun 19 '21 at 08:25
but from [this](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/captureStream#browser_compatibility) link we can see that most modern browsers do support ```captureStream()``` and I'm testing on latest version of FF – Nithin Sai Jun 19 '21 at 08:35
Hm. Check if it should be play or onplay. – Tushar Shahi Jun 19 '21 at 10:31

score 1 · Answer 2 · answered Jun 19 '21 at 07:41

1

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

answered Jun 19 '21 at 07:41

Qiimiia

510
6
16

Then how would I use ```videoCont.current.play();``` or similar functions – Nithin Sai Jun 19 '21 at 07:56
using ```any```, I can't seem to update seek bar. using ```HTMLCanvasElement```, I can't use ANY video player functions – Nithin Sai Jun 19 '21 at 07:59

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

Edit

Edit 2

2 Answers2