On Safari 14.0.2, MediaRecorder dataavailable handler captures empty blob

I was using MediaRecorder API to record a webcam session from Safari (v14.0.2). The handleDataAvailable will collect the streaming data every 500ms and push the blob into the recordedBlobs array.

this.recordedBlobs = []
this.mediaRecorder = new window.MediaRecorder(this.stream, {mimeType: "video/mp4;codecs=avc1"})
this.mediaRecorder.addEventListener('stop', this.handleStop)
this.mediaRecorder.addEventListener('error', this.handleError)
this.mediaRecorder.addEventListener(
  'dataavailable',
  this.handleDataAvailable
)
this.mediaRecorder.start(500) // Collect blob data every 500ms

handleDataAvailable = (event) => {
  this.recordedBlobs.push(event.data)
}

But what I observed from the console log is that some blobs will have a size 0 and type to "". The empty blob happens randomly; sometimes there is none, sometimes there are many inside the array.

It creates an even bigger problem when I concatenate all blobs to create a whole new blob, the new blob is corrupted. In the following case, the 2nd blob has size 0, each blob duration is 500ms, the video should have a duration of 5 seconds, but I can only play the first 500ms.

The issue only happens on Safari, Chrome works fine. Any pointers will be really appreciated!

Array (11)
0 Blob {size: 402074, type: "video/mp4", slice: function, text: function, arrayBuffer: function}
1 Blob {size: 0, type: "", slice: function, text: function, arrayBuffer: function}
2 Blob {size: 726104, type: "video/mp4", slice: function, text: function, arrayBuffer: function}
3 Blob {size: 355672, type: "video/mp4", slice: function, text: function, arrayBuffer: function}
4 Blob {size: 374119, type: "video/mp4", slice: function, text: function, arrayBuffer: function}
5 Blob {size: 369714, type: "video/mp4", slice: function, text: function, arrayBuffer: function}
6 Blob {size: 378604, type: "video/mp4", slice: function, text: function, arrayBuffer: function}
7 Blob {size: 381219, type: "video/mp4", slice: function, text: function, arrayBuffer: function}
8 Blob {size: 434928, type: "video/mp4", slice: function, text: function, arrayBuffer: function}
9 Blob {size: 359651, type: "video/mp4", slice: function, text: function, arrayBuffer: function}
10 Blob {size: 217731, type: "video/mp4", slice: function, text: function, arrayBuffer: function}