与Chrome相比，为什么Firefox会生成更大的WebM视频文件？

Question

我和我的团队最近一直在努力寻找解释为什么Firefox在我们的项目中使用MediaRecorder API时会产生比Chrome更大的WebM / VP8视频文件。

简而言之，我们通过captureStream方法从HTMLCanvas录制MediaStream 。 为了从我们的应用程序中隔离可能影响这一点的所有内容，我开发了一个小型专用测试应用程序，它记录了<canvas>并生成WebM文件。 我一直在使用相同的镜头，视频持续时间，编解码器，A / V比特率和帧速率进行测试。 但是，与Chrome相比，Firefox最终创建的文件数量增加了4倍。 我也尝试使用不同的MediaStream源，如网络摄像头，但结果是相似的。

这是一个小提琴应该证明我在说什么： https ： //jsfiddle.net/nzwasv8k/1/ https://jsfiddle.net/f2upgs8j/3/ 。 您可以尝试在FF和Chrome上录制10秒或20秒长的视频，并注意文件大小之间的差异。 请注意，我在此演示中仅使用了4个相对简单的帧/图像。 在实际使用中，例如在我们录制桌面视频流的应用中，我们达到了惊人的9倍差异。

我不是任何视频编解码器大师，但我相信浏览器在实现某种技术时应遵循相同的规范; 因此，我猜这种巨大的差异不应该发生。 考虑到我的知识是有限的，我不能断定这是一个错误还是完全预期的事情。 这就是为什么，我在这里解决这个问题，因为到目前为止，我对这个主题的研究一无所获。 如果有人可以指出它背后的逻辑解释，我会很高兴的。 提前致谢！

Answer 1

因为他们不使用相同的设置......

webm编码器有许多其他参数，而不是我们从MediaRecorder访问的参数。

这些参数可能都会对输出文件的大小产生影响，并且需要设置实现者。

---

以下是我对您更新过的小提琴生成的视频的快照[点击放大]：

Chrome 1 Firefox 1
Chrome 2 Firefox 2

我希望你能理解质量的差异，它与webp的0.15和0.8质量参数之间大致相同，而且尺寸也反映了这些变化。

 const supportWebPExport = document.createElement('canvas').toDataURL('image/webp').indexOf('webp') > -1; const mime = supportWebPExport ? 'image/webp' : 'image/jpeg'; const img = new Image(); img.onload = doit; img.crossOrigin = 'anonymous'; img.src = "https://i.imgur.com/gwytj0N.jpg"; function doit() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = this.width, canvas.height = this.height; ctx.drawImage(this, 0,0); canvas.toBlob(b => appendToDoc(b, '0.15'), mime, 0.15); canvas.toBlob(b => appendToDoc(b, '0.8'),mime, 0.8); } function appendToDoc(blob, qual) { const p = document.createElement('p'); p.textContent = `quality: ${qual} size: ${blob.size/1000}kb`; p.appendChild(new Image).src = URL.createObjectURL(blob); document.body.appendChild(p); } 

所以，是的，它就是这样......对于你的案例，一种方式或另一种方式可能更好，但最好的是我们web-devs可以访问这些参数。 不幸的是， 从规格的角度来看这不是一件容易的事情......