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