HTMLCanvasElement 上未解析的方法 captureStream

Question

我对画布元素和方法有奇怪的情况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

您可以在 TypeScript 中扩展现有接口并将您的 Element 转换为自定义接口。

例子：

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

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

Answer 2

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

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

Answer 3

根据MDN 的说法，该captureStream方法似乎仍然是一个工作草案（截至 2021 年 6 月），尽管并非所有主要浏览器都实现了它。这可能就是为什么它还不是HTMLCanvasElement.