CODEWITHSUNDEEP
javascripthtmltypescripthtml5-canvas
Maciej Wojcik
Maciej Wojcik

Reputation: 2171

unresolved method captureStream on HTMLCanvasElement

I have weird situation with canvas element and method captureStream. According to documentation HTMLCanvasElement has a method captureStream. However my Angular6 app claims that there isn't such method.

So this code won't work:

let canvas: HTMLCanvasElement;
canvas = document.createElement('canvas');
let stream = canvas.captureStream(20);

It fails on third line.

This code runs without any error:

   let canvas: any;
   canvas = document.createElement('canvas');
   let stream = canvas.captureStream(20);

How this is possible? I'm 100% sure that HTMLCanvasElement has this method and the document.createElement('canvas') returns HTMLCanvasElement.

Upvotes: 10

Views: 4775

Answers (3)

hthetiot
hthetiot

Reputation: 357

You can extend an exiting interface in TypeScript and cast your Element to the custom interface.

Example:

interface CanvasElement extends HTMLCanvasElement {
  captureStream(frameRate?: number): MediaStream;
}

const myCanvas = <CanvasElement> document.createElement('canvas');
const myStream = myCanvas.captureStream();

Upvotes: 8

5th
5th

Reputation: 210

According to MDN, it looks like the captureStream method is still a working draft (as of June 2021), eventhough it is not implemented by all major browsers. That is probably why it is not yet part of the type definition for HTMLCanvasElement.

Upvotes: 7

Dachstein
Dachstein

Reputation: 4282

Available in your entire project without creating a new interface:

declare global {
   interface HTMLCanvasElement {
     captureStream(frameRate?: number): MediaStream;
  }
}

Upvotes: 7

Related Questions