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:

var mediaRecorder = new MediaRecorder(stream);

However, TypeScript is telling me it cannot find name 'MediaRecorder'. I'm guessing this is down to my TypeScript configuration which I pulled directly from the QuickStart guide (https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html). The configuration looks like this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "compileOnSave": true
}

I've seen various configurations around the web that include "target: es6" or "lib: es6" and also ones with modules other that "commonjs" but I'm new to this so I'm not really sure what is going on. When I've tried updating these values I get more errors.

Does anyone know how I can get this to work?

Answer 1

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.

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

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 4

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" />