I'm currently using MediaRecorder to get chunks of a video stream from the user's webcam / mic like so:
navigator.mediaDevices
.getUserMedia({audio: true, video: true})
.then((stream) => {
var mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start(5000);
mediaRecorder.ondataavailable = (blobEvent) => {
console.log('got 5 seconds of stream', blobEvent);
}
})
this emits a chunk of the stream of every 5 seconds of video, however, I want chunks at a particular size, rather than length. There doesn't seem to be a clear way to do this, since I can't check the size of the current chunk without starting a new one, and I can't combine them after the fact. This is the work around I've come up with, using 2 media recorders:
const MIN_BLOB_SIZE = 5000000;
var partSize = 0;
navigator.mediaDevices
.getUserMedia({audio: true, video: true})
.then((stream) => {
var mediaRecorder = new MediaRecorder(stream);
var mediaRecorder2 = new MediaRecorder(stream)
mediaRecorder.start();
mediaRecorder2.start(5000)
mediaRecorder2.ondataavailable = (blobEvent) => {
console.log('got 5 seconds of data', blobEvent)
const blob = blobEvent.data
partSize += blob.size;
if (partSize >= MIN_BLOB_SIZE) {
partSize = 0;
mediaRecorder.requestData();
}
}
mediaRecorder.ondataavailable = (blobEvent) => {
console.log('got a chunk at least 5mb', blobEvent);
};
});
but this feels hacky, gives imprecise chunks, requires me to make sure these two recorders are perfectly synced, complicates error handling / edge cases, and I'm concerned about performance implications of using 2 media recorders. Would accept an answer that gets this done with one media recorder, or, if that’s just not possible, if someone can convince me that 2 media recorders is fine performance wise, I would also accept that and handle the complications it creates.
You can combine chunks after the fact with new Blob(blobArray). If you absolutely need to process blobs of a certain size, you can use Blob.slice. It could look something like this:
const MIN_BLOB_SIZE = 5000000;
var partSize = 0, parts = [];
navigator.mediaDevices
.getUserMedia({audio: true, video: true})
.then((stream) => {
var mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start(5000);
mediaRecorder.ondataavailable = (blobEvent) => {
console.log('got 5 seconds of data', blobEvent);
const blob = blobEvent.data;
partSize += blob.size;
parts.push(blob);
if (partSize >= MIN_BLOB_SIZE) {
let bigBlob = new Blob(parts, { type: blob.type });
// if the blob size doesn't need to be precise:
partSize = 0;
parts = [];
// do something with bigBlob
// or if the blob size needs to be precise:
// let sizedBlob = bigBlob.slice(0, MIN_BLOB_SIZE, blob.type);
// parts = [ bigBlob.slice(MIN_BLOB_SIZE, bigBlob.size, blob.type) ];
// partSize = parts[0].size;
// do something with sizedBlob
}
};
mediaRecorder.onstop = (blobEvent) => {
console.log('Recording Stopped');
const blob = blobEvent.data;
partSize += blob.size;
parts.push(blob);
let bigBlob = new Blob(parts, { type: blob.type });
// do something with bigBlob, which may be smaller than MIN_BLOB_SIZE
};
});
You also might be interested in the bitsPerSecond (and also the audioBitsPerSecond and videoBitsPerSecond) option in the MediaRecorder API, which might give you more predictable blob sizes for a given recorded amount of time. This may affect video and audio quality though.