如何在MediaRecorder应用程序中使用Angular2对象？

Question

我正在构建一个小型Angular2应用程序，我试图使用一个MediaRecorder对象(https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder)，如下所示：

var mediaRecorder = new MediaRecorder(stream);

然而，TypeScript告诉我它找不到名字“MediaRecorder”。我猜这是由于我的TypeScript配置直接从QuickStart指南(https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html)中提取出来的。配置如下所示：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "compileOnSave": true
}

我在网络上看到了各种各样的配置，包括“目标值: es6”或"lib: es6“，还有一些带有”公共“模块的配置，但我对此并不熟悉，所以我不太清楚到底是怎么回事。当我尝试更新这些值时，我会得到更多的错误。

有人知道我怎样才能让这件事起作用吗？

Answer 1

您的编译器对MediaRecorder对象一无所知。

只需按以下方式声明：

declare var MediaRecorder: any;

Answer 2

现在您可以更容易地为MediaRecorder添加类型，只需通过npm安装它们。

npm install -D @types/dom-mediacapture-record

这将从DefinitelyTyped加载最新的类型定义。它们将自动工作，不需要额外的步骤。如果您对类型有任何改进，请随意将它们贡献到DefinitelyTyped中。

Answer 3

我在这个页面上遇到了同样的问题，并安装了dom-mediacapture-record模块，但仍然存在问题。拔了很多头发之后，我发现了为什么MediaRecorder还没被找到。

我的应用程序有一个自动生成的"tsconfig.app.json“文件，其行如下：

"compilerOptions": {
  "types": ["node"]
  ... }

我意识到“类型”阻止了包含dom-mediacapture-record模块！应改为：

"types": ["node", "dom-mediacapture-record"]

我想我应该把这个小道消息传过去，以免别人被几个小时拉着头发。