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

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(type: K, listener: (this: MediaStream, ev: MediaRecorderEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;

    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

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