replaceable-media-recorder

replaceable-media-recorder is a MediaRecorder API Library written in JavaScript for add, remove and replace tracks during recording.

With replaceable-media-recorder

1. Audio tracks can be added, removed and replaced during recording.
2. Video tracks can be replaced during recording.

Demo

Demo Link

1.Description

1.1 Problems

We have some problems for recording with MediaRecorder API.

1. MediaRecorder cannot record multiple MediaStreams. (video and audio track can only be recorded one by one)
2. MediaRecorder stops recording when tracks are added, removed or replaced during recording.

Let's talk about how to solve this problems separately by audio and video.

1.2 Audio Recording

We have two constraints recording audio.

1. MediaRecorder can record only one audio track.
2. MediaRecorder cannot add, remove and replace audio tracks during recording.

We can use the Web Audio API to solve this problem.

Using the Web Audio API

1. We can mix multiple audio tracks and make them into one audio track.
2. We can change the audio source without replacing the audio track inserted in the media recorder.

The reason for adding a null source node is to allow recording of silent data even if the Destination Node and other Source Nodes are disconnected.

1.3 Video Recording

We have two constraints recording audio.

1. MediaRecorder can record only one video track. (Video mixing is not a current consideration)
2. MediaRecorder cannot replace audio tracks during recording.

There are two ways to change the video source without replacing the video track inserted in the MediaRecorder.

1. Replace video track indirectly using Canvas Element.
2. Replace video track indirectly using RTCRtpSender.

Both are available, but for RTCRtpSender, it seemed inefficient to have Local PeerConnection and go through encoding and decoding media data internally to replace video tracks.

So we can use Canvas Element to solve this problem.

We call a Timer function in a background thread using the Web Worker API to update Canvas.
(Because of background tab issues in Chrome : https://developers.google.com/web/updates/2017/03/background_tabs)

API

WebRecorder

const webRecorder = new WebRecorder();

Methods

WebRecorder.start(stream? : MediaStream) : Promise<void>

• Start recording

try {
  await webRecorder.start();
} catch (error) {
  console.log(error);
}

or

try {
  await webRecorder.start(stream);
} catch (error) {
  console.log(error);
}

or

webRecorder.start()
.then(function () {
  // do something
})
.catch(function (error) {
  console.log(error);
});

or

webRecorder.start(stream)
.then(function () {
  // do something
})
.catch(function (error) {
  console.log(error);
});

WebRecorder.getRecordedStream() : MediaStream

• Get recorded MediaStream while recording

try {
  await webRecorder.start();
  video.srcObject = webRecorder.getRecordedStream();
} catch (error) {
  console.log(error);
}

or

webRecorder.start()
.then(function () {
  video.srcObject = webRecorder.getRecordedStream();
})
.catch(function (error) {
  console.log(error);
});

WebRecorder.addAudioTrack(audioTrack : MediaStreamTrack) : void

• Add audio track while recording

webRecorder.addAudioTrack(stream.getAudioTracks()[0]);

or 

webRecorder.addAudioTrack(audioTrack);

WebRecorder.deleteAudioTrack(audioTrack : MediaStreamTrack) : void

• Delete audio track while recording

webRecorder.deleteAudioTrack(stream.getAudioTracks()[0]);

or

webRecorder.deleteAudioTrack(audioTrack);

WebRecorder.replaceVideoTrack(videoTrack : MediaStreamTrack) : void

• Replace video track while recording

webRecorder.replaceVideoTrack(stream.getVideoTracks()[0]);

or

webRecorder.replaceVideoTrack(videoTrack);

WebRecorder.replaceStream(stream : MediaStream) : void

• Replace MediaStream while recording

webRecorder.replaceStream(stream);

WebRecorder.stop() : void

• Stop recording

webRecorder.stop();

WebRecorder.getRecordedBlob() : Blob

• Get recorded BLOB

const blob = webRecorder.getRecordedBlob();

WebRecorder.download(fileName? : string) : void

• Download recorded File

webRecorder.download('example.webm');

or

webRecorder.download();

Usage

It can be tested in a local environment through npm install and npm start

$ git clone https://github.com/heesu0/replaceable-media-recorder.git

$ npm install
$ npm start

open http://localhost:3000 in broswer

Resources

https://www2.cs.uic.edu/~i101/SoundFiles/
https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4