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

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
}

我已经看到网络上的各种配置,包括"target:es6"或"lib:es6"以及其他模块"commonjs",但我是新手,所以我不确定发生了什么.当我尝试更新这些值时,我会收到更多错误.

有谁知道我怎么能让这个工作？

Answer 1

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

npm install @types/dom-mediacapture-record

这将从DefinitelyTyped加载最新的类型定义.他们会自动工作,没有额外的步骤.如果您对打字有任何改进,请随意将它们贡献给DefinitelyTyped.

Answer 2

我以同样的问题登陆此页面并安装了 dom-mediacapture-record 模块，但仍有问题。拉了很多头发后，我发现了为什么仍然找不到 MediaRecorder。

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

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

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

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

以为我会通过这个花絮来拯救其他人免受数小时的头发拉扯。

Answer 3

直到MediaRecorerTypescript 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一个文件夹中,我保留所有jses或APIs没有typedef

例如,像这样的项目布局

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

我写的tsconfig.json是这样的:

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

Answer 4

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

简单地声明如下:

declare var MediaRecorder: any;

Answer 5

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

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

Answer 6

现在，您甚至可以更加轻松地添加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" />