HTMLCanvasElement 上未解决的方法 captureStream答案

【问题标题】：unresolved method captureStream on HTMLCanvasElementHTMLCanvasElement 上未解决的方法 captureStream
【发布时间】：2018-11-12 01:09:32
【问题描述】：

我对画布元素和方法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。

【问题讨论】：

标签： javascript html typescript html5-canvas

【解决方案1】：

您可以在 TypeScript 中扩展现有界面并将您的元素转换为自定义界面。

例子：

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

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

【讨论】：

更好：interface CanvasElement extends HTMLCanvasElement { captureStream(int): MediaStream; }then getTracks 从返回的对象中
更好的是，将您所有的 TS 文件转换为 JS 文件，然后回到只使用 ESLint 的快乐无忧无虑的日子，而不会出现“由于 TypeScript 编译问题而浪费工时”。

【解决方案2】：

根据MDN，看起来captureStream 方法仍然是一个工作草案（截至2021 年6 月），尽管并非所有主要浏览器都实现了它。这可能就是为什么它还不是HTMLCanvasElement 类型定义的一部分。

【讨论】：

MaciejWójcik 这就是您的问题的原因。请接受它作为答案，以便@5th 获得适当的信用

【解决方案3】：

无需创建新界面即可在您的整个项目中使用：

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

【讨论】：