javascriptangulartypescriptwebrtcmediarecorder-api

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

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?

Solution

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

    Simply declare it like this:

    declare var MediaRecorder: any;