Question

我正在构建一个小的Angular2应用程序，我正在尝试使用MediaRecorder对象（https://stackoverflow.com/a/40051801/425238），如下所示：

var mediaRecorder = new MediaRecorder(stream);

然而，TypeScript告诉我它找不到名字'MediaRecorder'。我猜这是我的TypeScript配置，我直接从QuickStart指南（https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder）中提取。配置如下所示：

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

我已经看到网络上的各种配置包括“target：es6”或“lib：es6”以及其他模块的“commonjs”，但我是新手，所以我不确定是什么正在进行。当我尝试更新这些值时，我会收到更多错误。

有谁知道如何才能让它发挥作用？

Answer 1

直到MediaRecorer进入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中配置一个文件夹，在其中保留所有没有typedef的所有js或APIs

例如对于这样的项目布局

project/
  @types <- a folder where I define my types 
    index.d.ts
  src
    ...
  ...
  tsconfig.json

我用tsconfig.json这样写：

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

Answer 2

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

npm install @types/dom-mediacapture-record

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

Answer 3

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

简单地声明如下：

declare var MediaRecorder: any;

Answer 4

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

npm install @types/dom-mediacapture-record

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

Elias Meire提出的解决方案对我来说是最好的。但是确实我需要一些额外的步骤才能使其正常工作。如本期在github https://github.com/Microsoft/TypeScript/issues/11420#issuecomment-341625253上所述，您必须引用它才能在以下行中使用它：

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

Answer 5

我在Angular 9应用程序中安装了@ types / dom-mediacapture-record，但是对我来说唯一解决此问题的方法是调整tsconfig.app.json 类型：“类型”：[“节点”，“ dom-mediacapture-record”]。

  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node", "dom-mediacapture-record"]
  }

Answer 6

我也遇到了同样的问题，并安装了dom-mediacapture-record模块，但是仍然有问题。拉了很多头发后，我发现了为什么仍找不到MediaRecorder的原因。

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

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

我意识到“类型”正在阻止dom-mediacapture-record模块的包含！它应该更改为：

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

我想把那条小花传下来，以免别人被拉头发数小时。

Answer 7

npm install -D @types/dom-mediacapture-record就足够了，根本不要修改tsconfig.json，没有类型就没有////没有引用typeRoots是必需的（一般情况下很少需要这些。...

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

7 个答案:

提示