javascript - 如何在javascript中正确拼接视频blob

Question

我正在通过recordRTC录制网络摄像头视频，它有一个ondataavailable每 2000 毫秒调用一次的回调。该ondataavailable方法提供了一个Blobas 参数，因此它将始终包含当前视频 blob。我想在录制过程中将视频分段上传到服务器，以避免最终将大文件作为一个文件上传。

为此，使用Blob.slice()对 blob 进行切片：

ondataavailable(blob) {
        // Create a new blob from last blob size to the end of the blob
        const sliceBlob = blob.slice(this._state.lastBlobSize, blob.size, blob.type)
        this.setState('lastBlobSize', blob.size)
        this.fileHandler.upload(sliceBlob)
}

当我将 blob 上传到服务器并将它们转换.webm为稍后使用FFMpeg再次连接的视频时，只有第一个 blob 是有效视频，但后面的每个 webm 文件都不会播放。

以下是记录的 blob 的样子：

我假设 blob 无效，因为字节长度不包含有效大小或类似的东西，所以第一次之后的所有视频都以非法偏移量开始，因此无法读取。但我不知道如何更改切片以获得正常工作的部件。

此外，在 recordRTC 配置videoBitsPerSecond中设置为每个视频切片的字节（每秒 16000 个），这可能有助于找到正确的偏移量。悬停，查看“切片 blob”大小，这似乎没有直接关联 - blob 大小更大。128000 * 432000

如果没有办法像这样轻松地执行切片，是否有另一种方法可以在录制过程中实现将较小的文件“流式传输”到服务器？

---

编辑：

至于 CBroe 的评论，我修改了控制器以在收到 blob 时执行以下操作：

            $filePath = "/var/www/html/public/assets/blob.webm";
            $fp       = fopen($filePath, file_exists($filePath) ? "a" : "w");
            fwrite($fp, file_get_contents($_FILES["blob"]["tmp_name"]));
            fclose($fp);

所以它总是将最新的 blob 附加到完整的文件中。但是，当视频正确停止并上传最后一个 blob 时，该文件仍然无效。有什么建议么？

标签： javascriptffmpegblobrecordrtc