----- 更新已添加到下方 -----
我的 MediaRecorder API ( https://www.w3.org/TR/mediastream-recording/#mediarecorder-api) 有问题。
我用它来录制网页中的语音(在这种情况下使用 Chrome)并将其保存为 block 。 我需要能够在录制时和录制后播放它，因此保留这些 block 很重要。
这是记录数据的代码:
navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) {
记录器 = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs="opus"' })
recorder.ondataavailable = function(e) {
//从 `e.data` 中读取 blob，解码 64 并发送到服务器；
}
记录器.start(1000)
})
问题是当我连接所有部分时得到的 WebM 文件已损坏(很少)!我可以将它作为 WebM 来播放，但是当我尝试将它 (ffmpeg) 转换为其他内容时，它会给我一个时间偏移的文件。
例如。我正在尝试将持续时间为 00:36:27.78 的文件转换为 wav，但我得到的文件持续时间为 00:36:26.04，即 1.74s更少。
在文件开头 - 音频是相同的，但在大约 10 分钟后，WebM 文件播放时有一点延迟。
经过一些研究，我发现它也无法与我用于播放 block 的浏览器的 MediaSource API 一起正确播放。我尝试了两种播放这些 block 的方法:
如果我只是将所有部分合并为一个 blob - 它工作正常。
如果我通过 sourceBuffer 对象添加它们，它会有一些间隙(我可以通过检查 buffered 属性看到它们)。
697.196 - 697.528(~330 毫秒)
996.198 - 996.754(~550 毫秒)
1597.16 - 1597.531(~370 毫秒)
1896.893 - 1897.183(~290 毫秒)
这些间隔总共为 1.55 秒，它们恰好位于 wav 和 webm 文件之间开始不同步的地方。不幸的是，无法共享可重现的文件，因为它是客户的私有(private)数据，我还无法在不同的媒体上重现此类问题。
出现这种问题的原因是什么？
-----更新----- 我能够在 https://jsfiddle.net/96uj34nf/4/ 上重现该问题
为了查看问题，单击“打印缓冲区”按钮，它将显示时间范围。可以看到有两个差距: 0 - 136.349, 141.388 - 195.439, 197.57 - 198.589
- 136.349 - 141.388
- 195.439 - 197.57
因此，如您所见，有 5 秒和 2 秒的间隔。如果有人能阐明发生这种情况的原因或如何避免此问题，我们将很高兴。
谢谢
最佳答案
7 个月后，我猜你已经解决了这个问题，但以防万一......
当我们开始使用 MediaRecorder 时，我们遇到了一些问题，包括记录消失(可能超过 RAM 配额，然后数组被释放或类似的问题)
解决我们所有问题的方法是立即将每个 block 放入一个 indexdb objectStore，以便将其保存到磁盘，并在记录结束时，将所有这些 block 构建成一个 blob 并下载。不再处理 block ，只处理完整的文件。
我知道这不能回答您的问题，但也许有帮助。
关于html - 更新(可重现)- 使用 MediaRecorder API(音频/webm opus)录制时的差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51455282/