【发布时间】：2018-12-29 12:25:46
【问题描述】：
----- 下面已添加更新 -----
我对 MediaRecorder API (https://www.w3.org/TR/mediastream-recording/#mediarecorder-api) 有疑问。
我正在使用它来记录网页中的语音（在这种情况下使用 Chrome）并将其保存为块。 我需要能够在录制时和录制后播放它，因此保留这些块很重要。
这是记录数据的代码：
navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) {
recorder = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs="opus"' })
recorder.ondataavailable = function(e) {
// Read blob from `e.data`, decode64 and send to sever;
}
recorder.start(1000)
})
问题是当我连接所有部分时得到的 WebM 文件已损坏（很少）！。我可以将它作为 WebM 播放，但是当我尝试将它 (ffmpeg) 转换为其他东西时，它会给我一个时间不同的文件。
例如。我正在尝试将持续时间为 00:36:27.78 的文件转换为 wav，但我得到了持续时间为 00:36:26.04 的文件，它少了 1.74 秒。
在文件的开头 - 音频是相同的，但在大约 10 分钟后 WebM 文件播放了一个小的延迟。
经过一些研究，我发现它也不能与浏览器的 MediaSource API 正确播放，我用它来播放块。我尝试了两种播放这些块的方法：
如果我只是将所有部分合并到一个 blob 中 - 它工作正常。
如果我通过 sourceBuffer 对象添加它们，它会有一些差距（我可以通过检查 buffered 属性看到它们）。
697.196 - 697.528 (~330ms)
996.198 - 996.754 (~550ms)
1597.16 - 1597.531 (~370ms)
1896.893 - 1897.183 (~290ms)
这些间隔总共是 1.55 秒，它们正好在 wav 和 webm 文件之间开始不同步的地方。不幸的是，无法共享可重现的文件，因为它是客户的私人数据，我还无法在不同的媒体上重现此类问题。
造成这种问题的原因是什么？
----- 更新 ----- 我能够在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 秒的间隔。如果有人能解释为什么会发生这种情况或如何避免这个问题，我会很高兴。
谢谢
【问题讨论】：
标签： html ffmpeg audio-recording mediarecorder mediarecorder-api