unresolved method captureStream on HTMLCanvasElement

Question

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.

Answer 1

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.

Answer 2

Available in your entire project without creating a new interface:

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

Answer 3

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