extendable-media-recorder

extendable-media-recorder

An extendable drop-in replacement for the native MediaRecorder.

This package provides (a part of) the MediaRecorder API as defined by the MediaStream Recording specification. If possible it will use the native implementation which is available in Chrome and Firefox.

In addition this package also allows to define custom encoders. Those encoders can be used to render files which are not supported by any browser so far. This does currently only work for audio encoders.

Usage

extendable-media-recorder is available on npm and can be installed as usual.

npm install extendable-media-recorder

It exports the MediaRecorder constructor. It can be used like the native implementation. The following example will use the default encoder that is defined by the browser.

import { MediaRecorder } from 'extendable-media-recorder';

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);

extendable-media-recorder also exports a register() function which can be used to define custom encoders. One predefined encoder is available as the extendable-media-recorder-wav-encoder package. It can be used as shown here.

import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';

await register(await connect());

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });

Inner Workings

Internally two different techniques are used to enable custom encoders. In Chrome the native MediaRecorder is used to encode the stream as webm file with pcm encoded audio. Then a minimal version of ts-ebml is used to parse that pcm data to pass it on to the encoder. In other browsers the Web Audio API is used to get the pcm data of the recorded audio.