javascript - 在 Safari 14.0.2 上，MediaRecorder dataavailable 处理程序捕获空 blob

Question

我正在使用 MediaRecorder API 从 Safari (v14.0.2) 录制网络摄像头会话。将handleDataAvailable每 500 毫秒收集一次流数据并将 blob 推送到recordedBlobs数组中。

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

但是我从控制台日志中观察到的是，一些 blob 的大小为 0 并且类型为“”。空 blob 随机发生；有时没有，有时数组内部有很多。

当我连接所有 blob 以创建一个全新的 blob 时，它会产生更大的问题，新 blob 已损坏。在以下情况下，第二个 blob 的大小为 0，每个 blob 持续时间为 500 毫秒，视频应该有 5 秒的持续时间，但我只能播放前 500 毫秒。

该问题仅发生在 Safari 上，Chrome 工作正常。任何指针将不胜感激！

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}

标签： javascriptsafariweb-mediarecorder