How to download a MediaRecorder file in Chunk-Wise Simultaneously while record

Question

I am trying to create a simple record sample using MediaRecorder api. Using this i am checking to download capturing video using timeSlice(mediaRecorder.start(10000)).

When data captured(each 10 seconds) ondataavailable event triggered and using this event i am converting current data as a blob and start the download process

`

 function handleDataAvailable(event) {
        if (event.data && event.data.size > 0) {
            const blobData = new Blob([event.data], { type: 'video/webm' });
            download(blobData);
            recordedBlobs.push(event.data);
        }
    }

    function download(blobData) {
        const url = window.URL.createObjectURL(blobData);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = 'test.webm';
            document.body.appendChild(a);
            a.click();
            setTimeout(() => {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            }, 100);
    }

`

Everything is working fine and downloaded as well in certain interval.. What's the problem is i can able to play only first downloaded file(10s). rest of the files it look like black screen i am unable to play as wll...

what's the cause of that issue as well as how to resolve that?

let mediaRecorder;
let recordedBlobs;
const recordButton = document.querySelector('button#record');
recordButton.addEventListener('click', () => {
  if (recordButton.textContent === 'Start Recording') {
    startRecording();
  } else {
    stopRecording();
    recordButton.textContent = 'Start Recording';
  }
});

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    const blobData = new Blob([event.data], {
      type: 'video/webm'
    });
    download(blobData);
    recordedBlobs.push(event.data);
  }
}

function download(blobData) {
  const url = window.URL.createObjectURL(blobData);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'test.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
}

function startRecording() {
  recordedBlobs = [];
  let options = {
    mimeType: 'video/webm;codecs=vp9,opus'
  };
  try {
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e) {
    console.error('Exception while creating MediaRecorder:', e);
    errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
    return;
  }
  recordButton.textContent = 'Stop Recording';
  mediaRecorder.onstop = (event) => {
    console.log('Recorder stopped: ', event);
    console.log('Recorded Blobs: ', recordedBlobs);
  };
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(10000);
}

function stopRecording() {
  mediaRecorder.stop();
  const blobData = new Blob(recordedBlobs, {
    type: 'video/webm'
  });
  download(blobData)
}

function handleSuccess(stream) {
  window.stream = stream;
  const gumVideo = document.querySelector('video#gum');
  gumVideo.srcObject = stream;
}

async function init(constraints) {
  try {
    const stream = await window.navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
  } catch (e) {
    alert(e);
  }
}
init({
  audio: {
    echoCancellation: {
      exact: false
    }
  },
  video: {
    width: 1280,
    height: 720
  }
});

<div id="container">
  <video style="width: 300px; height:300px" id="gum" playsinline autoplay muted></video>
  <div>
    <button id="record">Start Recording</button>
  </div>
</div>

Note: Due to security issue you can't able to run the sample here. try to create a sample from local using this code u can able to get

Answer 1

Because the metadata of the record is recorded only the first time at startup, and the remaining parts work with this part only. Try to combine all the parts and play record.