Tuesday, 7 September 2021

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

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.



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

No comments:

Post a Comment