Canvas.captureStream() 在 Angular 8 中不存在

Question

I'm trying to send the content of an HTML canvas as a stream using webrtc.

While in pure HTML + JS I can use Canvas.captureStream() to get an output stream, it seems like I can't find any way to do it using Angular 8. The code I'm using is:

  @ViewChild('canvas', {static: true})
  canvas: ElementRef<HTMLCanvasElement>;

  private canvasContext: CanvasRenderingContext2D;

  ngOnInit() {
    this.setupWebRtc();
    this.canvasContext = this.canvas.nativeElement.getContext('2d');
  }

  draw() {
    if (this.drawOnTop) {
      this.canvasContext.fillStyle = '#27bae7';
      this.canvasContext.fillRect(0, 100, this.canvas.nativeElement.width, 50);

      // Trying to get an output stream
      let  streamdata =  this.canvas.nativeElement.captureStream();
      console.log(streamdata);
   }

Using canvas.nativeElemet or canvasContext didn't seem to help as both have no captureStream() function.

I was thinking about using canvas.nativeElement.toDataURL(); but it seems like a bad approach.

I would love to get some suggestions.

Answer 1

Seems like the solution was a simple casting to <Any> . Meaning it was a typing issue. I used:

const  streamdata = (this.canvas.nativeElement as any).captureStream();

To get the stream.