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

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.

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.

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.

That solution proposed by Elias Meire is the best for me. But indeed I needed some extra steps to make it work. As stated in this issue on github https://github.com/Microsoft/TypeScript/issues/11420#issuecomment-341625253, you have to reference it to use it with this line:

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

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"
    ],
    ...
}