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.

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);

Using a custom encoder

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' });

Setting the sample rate

The MediaRecoder has no way to modify the sample rate directly. It uses the sampleRate of the given MediaStream. You can read the value being used like this:

const { sampleRate } = stream.getAudioTracks()[0].getSettings();

To modifiy the sample rate of the recording you need to change the sampleRate of the MediaStream. But that's not possible either. Therefore the most reliable way is to use an AudioContext at the desired sampleRate to do the resampling.

const audioContext = new AudioContext({ sampleRate: 16000 });
const mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(audioContext, { mediaStream: stream });
const mediaStreamAudioDestinationNode = new MediaStreamAudioDestinationNode(audioContext);

mediaStreamAudioSourceNode.connect(mediaStreamAudioDestinationNode);

const mediaRecorder = new MediaRecorder(mediaStreamAudioDestinationNode.stream);

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.