How to get stream data from (web) MediaRecorder based on size instead of time?

user_4855306 0
Viewed 397

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.

web-mediarecorder navigator typescript javascript
1 Answers

Combining Chunks

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

Tuning Blob Size with Bitrate

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.

user_61849720
Related