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

Question

I\'m building a small Angular2 app and I\'m trying to use a MediaRecorder object (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) like so:

va         


        

Answer 1

I landed on this page with the same problem and installed the dom-mediacapture-record module, but was still having problems. After much hair pulling, I found out why MediaRecorder was still not being found.

My app had an autogenerated "tsconfig.app.json" file with the following line:

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

I realized that "types" was blocking the inclusion of the dom-mediacapture-record module! It should be changed to:

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

Thought I'd pass that tidbit along to save others from hours of hair pulling.

Answer 2

Until MediaRecorer lands in Typescript dom.lib any suffices for lazy people. But it evicts the whole point of TypeScript.

So why not an almost full blown type declaration :

Place this in an ambient declaration file, ex: 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;

}

And yes type competition works:

TIP

Usually I configure in tsconfig.json a folder where I keep all jses or APIs that have no typedef

For example for a project layout like this

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

I write in tsconfig.json something like this :

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

Answer 3

Your compiler doesn't know anything about the MediaRecorder object.

Simply declare it like this:

declare var MediaRecorder: any;

Answer 4

Just npm install -D @types/dom-mediacapture-record is enough, don't modify tsconfig.json at all, no types no ///reference no typeRoots is neccesary (and those are rarely needed for anything in general....

Answer 5

I installed @types/dom-mediacapture-record in Angular 9 app but the only thing that resolved this issue for me was tweaking tsconfig.app.json types: "types": ["node", "dom-mediacapture-record"].

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

Answer 6

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

npm install -D @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.