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

Question

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

var mediaRecorder = new MediaRecorder(stream);

但是，TypeScript 告诉我找不到名称 'MediaRecorder'。我猜这取决于我直接从快速入门指南 (https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html) 中提取的 TypeScript 配置。配置如下所示：

{
  "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 对象一无所知。

只需这样声明即可：

declare var MediaRecorder: any;

Answer 2

直到 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 中配置一个文件夹，我将所有 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 3

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

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

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

Answer 4

我进入此页面时遇到了同样的问题，并安装了 dom-mediacapture-record 模块，但问题仍然存在。费了九牛二虎之力，才发现为什么还是找不到MediaRecorder。

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

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

我意识到 "types" 阻止了包含 dom-mediacapture-record 模块！应该改为：

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

我想我会把这个花絮传给其他人，让他们免于数小时的头发拉扯。

Answer 5

You can now add types for MediaRecorder even easier, just install them through npm.

npm install @types/dom-mediacapture-record

This will load the latest type definitions from DefinitelyTyped. They will automatically work, no extra steps. If you have any improvements for the typings feel free to contribute them to DefinitelyTyped.

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

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

Answer 6

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

Answer 7

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

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

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

How can I use a MediaRecorder object in an Angular2 application?

javascript

angular

typescript

webrtc

mediarecorder-api

提示