Как я могу использовать объект MediaRecorder в приложении Angular2?

Я создаю небольшое приложение 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", но я новичок в этом, поэтому я не совсем уверен, что происходит, Когда я пытался обновить эти значения, я получаю больше ошибок.

Кто-нибудь знает, как я могу заставить это работать?

Источник

3 ответа

Решение

Ваш компилятор ничего не знает о MediaRecorder объект.

Просто объявите это так:

declare var MediaRecorder: any;
Источник

Теперь вы можете добавлять типы для MediaRecorder еще проще, просто установите их через npm.

npm install @types/dom-mediacapture-record

Это загрузит последние определения типов из DefiniteTyped. Они будут работать автоматически, без лишних шагов. Если у вас есть какие-либо улучшения для набора текста, не стесняйтесь вносить их в DefinitiveTyped.

Источник

Я попал на эту страницу с той же проблемой и установил модуль dom-mediacapture-record, но проблемы все еще были. После долгих потягиваний я узнал, почему MediaRecorder все еще не найден.

У моего приложения был автоматически сгенерированный файл "tsconfig.app.json" со следующей строкой:

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

Я понял, что "types" блокирует включение модуля dom-mediacapture-record! Это должно быть изменено на:

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

Я думал, что передам этот кусочек, чтобы спасти других от долгих потягиваний.

Источник

До тех пор MediaRecorer земли в машинописи дом.либ 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;

}

И да, конкурс типа работает

InteliJ Тип Автозаполнение

СОВЕТ

Обычно я настраиваю в tsconfig.json папка, где я храню все jsили 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"
    ],
    ...
}
Источник

Теперь вы можете добавлять типы для MediaRecorder еще проще, просто установите их через npm.

npm install @types/dom-mediacapture-record

Это загрузит последние определения типов из DefiniteTyped. Они будут работать автоматически, без лишних шагов. Если у вас есть какие-либо улучшения для набора текста, не стесняйтесь вносить их в DefinitiveTyped.

Это решение, предложенное Элиасом Мейром, является лучшим для меня. Но на самом деле мне нужно было несколько дополнительных шагов, чтобы это работало. Как указано в этом выпуске на github https://github.com/Microsoft/TypeScript/issues/11420, вы должны сослаться на него, чтобы использовать его с этой строкой:

/// <reference types="@types/dom-mediacapture-record" />
Источник

Я установил @types/dom-mediacapture-record в приложении Angular 9, но единственное, что решило для меня эту проблему, - это настройка tsconfig.app.jsontypes: "типы": ["узел", "dom-mediacapture-record"].

  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node", "dom-mediacapture-record"]
  }
Источник

Просто npm install -D @types/dom-mediacapture-record достаточно, не изменяйте tsconfig.json вообще, никаких типов, /// ссылок нет, typeRoots не требуется (а они редко нужны для чего-либо вообще....

Источник
Другие вопросы по тегам