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

我正在构建一个小型Angular2应用程序，并尝试使用MediaRecorder对象（），如下所示：

然而，TypeScript告诉我它找不到名称“MediaRecorder”。我猜这是由于我直接从《快速入门指南》中提取的TypeScript配置造成的（）。配置如下所示：

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

declare var MediaRecorder: any;

我在网上看到了各种各样的配置，包括“target:es6”或“lib:es6”，还有一些带有“commonjs”模块的配置，但我对这一点还不熟悉，所以我不确定到底发生了什么。当我尝试更新这些值时，会出现更多错误

---

有人知道我如何使它工作吗？

您的编译器对

MediaRecorder

对象一无所知

只需这样声明：

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

declare var MediaRecorder: any;

---

直到

mediarecorrer

进入Typescript dom.lib

any

对懒惰的人来说就足够了。但它排除了TypeScript的全部要点

那么，为什么不进行一个几乎完全成熟的类型声明呢

将其放入环境声明文件中，例如：

index.d.ts

declare interface MediaRecorderErrorEvent extends Event {
    name: string;
}

declare interface MediaRecorderDataAvailableEvent extends Event {
    data : any;
}

interface MediaRecorderEventMap {
    'dataavailable': MediaRecorderDataAvailableEvent;
    'error': MediaRecorderErrorEvent ;
    'pause': Event;
    'resume': Event;
    'start': Event;
    'stop': Event;
    'warning': MediaRecorderErrorEvent ;
}


declare class MediaRecorder extends EventTarget {

    readonly mimeType: string;
    readonly state: 'inactive' | 'recording' | 'paused';
    readonly stream: MediaStream;
    ignoreMutedMedia: boolean;
    videoBitsPerSecond: number;
    audioBitsPerSecond: number;

    ondataavailable: (event : MediaRecorderDataAvailableEvent) => void;
    onerror: (event: MediaRecorderErrorEvent) => void;
    onpause: () => void;
    onresume: () => void;
    onstart: () => void;
    onstop: () => void;

    constructor(stream: MediaStream);

    start();

    stop();

    resume();

    pause();

    isTypeSupported(type: string): boolean;

    requestData();


    addEventListener<K extends keyof MediaRecorderEventMap>(type: K, listener: (this: MediaStream, ev: MediaRecorderEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;

    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

    removeEventListener<K extends keyof MediaRecorderEventMap>(type: K, listener: (this: MediaStream, ev: MediaRecorderEventMap[K]) => any, options?: boolean | EventListenerOptions): void;

    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;

}

我在

tsconfig.json

中编写了如下内容：

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "node_modules/@types",
      "./@types"
    ],
    ...
}

---

您现在可以为

MediaRecorder

添加类型，甚至更简单，只需通过npm安装即可

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

这将从加载最新的类型定义。它们将自动工作，无需额外步骤。

---

如果您对打字有任何改进，请随时将其贡献给DefiniteTyped。

我登录此页面时遇到了相同的问题，并安装了dom mediacapture记录模块，但仍然存在问题。经过长时间的拉扯，我发现了为什么MediaRecorder仍然没有被找到

我的应用程序有一个自动生成的“tsconfig.app.json”文件，其中包含以下行：

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

我意识到“类型”阻止了dom mediacapture记录模块的加入！应改为：

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

我想我会把这些花絮传给别人，让别人免于几个小时的拉扯

您现在可以更轻松地为MediaRecorder添加类型，只需通过npm安装即可

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

npm安装@types/dom mediacapture记录

这将从加载最新的类型定义。它们将自动工作，无需额外步骤。如果您对打字有任何改进，请随时将其贡献给DefiniteTyped

Elias Meire提出的解决方案对我来说是最好的。但事实上，我需要一些额外的步骤来让它发挥作用。正如本期github中所述，您必须引用它才能将其用于此行：

/// <reference types="@types/dom-mediacapture-record" />

//

只要

npm安装-D@types/dom mediacapture record

就足够了，根本不需要修改tsconfig.json，不需要类型不///引用不需要类型根（一般来说，这些都是不需要的…

我在Angular 9应用程序中安装了@types/dom mediacapture record，但对我来说唯一解决这个问题的方法是调整

tsconfig.app.json

类型：“类型”：[“节点”，“dom mediacapture记录”]

---

此解决方案的问题在于，它不允许您使用

declare class MediaRecorder{}声明类型为
MediaRecorder
的变量

反过来不允许访问任何媒体录制器的属性。因此，解决方案实际上是按照Tiberiu的建议声明完整的打字。我完全按照您所描述的进行了设置-通过在tsconfig.json中添加@types目录和相应的typeroot条目-我仍然在src/app/modals/record中得到

错误/记录。组件。ts（179,25）：错误TS2304:找不到名称“MediaRecorder”。

是否缺少其他步骤？

*.d.ts

扩展名？是的，该文件有一个.d.ts扩展名。如果不仔细查看，很难判断。可能您有多个tsconfig.json文件，至少对于使用angular cli启动的项目来说是这样的：您能检查一下吗at？typeRoutes在这里描述：当然，如果配置不适合您，您可以在ts文件中使用三重斜杠指令

///

提示编译器环境声明的确切路径。我不清楚……我应该将该指令放置在何处

//

？您是否尝试过将其放置在您已经放置的位置要使用它？您应该将

//

作为页面的第一行。需要特别注意的是，这是需要配置的应用程序模块中的tsconfig.app.json文件，而不是基本文件夹中的tsconfig.json。请确保dom mediacapture记录位于类型数组中，并且“typeRoots”：[“./node\u modules/@types”]已设置。此答案表示“这将自动工作，无需额外步骤”但我的情况并非如此。请检查下面@jyl087的答案，对它的有关RootTypes的注释仅在开发过程中才有必要，因此您应该在命令中使用

-D

参数。您不想在服务器上安装类型。@vdegenne您是对的，在答案中添加了-D参数。谢谢！