Question

我对canvas元素和方法captureStream有一些奇怪的情况。根据文档，HTMLCanvasElement有一个方法captureStream。然而，我的Angular6应用程序声称没有这样的方法。

所以这段代码不起作用：

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

第三行失败。

此代码运行时没有任何错误：

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

这怎么可能？我100％确定HTMLCanvasElement有这个方法，而document.createElement（'canvas'）返回HTMLCanvasElement。

Answer 1

根据MDN，看起来captureStream方法仍然是一个工作草案（截至2018年5月），并且还没有被所有主流浏览器实现。这可能就是为什么它还不是HTMLCanvasElement的类型定义的一部分。

Answer 2

您可以在TypeScript中扩展现有接口，并将Element投射到自定义接口。

示例：

interface CanvasElement extends HTMLCanvasElement {
  captureStream(): void;
}

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

Answer 3

在整个项目中可用，而无需创建新界面：

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

HTMLCanvasElement上未解决的方法captureStream

3 个答案: