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

Question

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

简而言之，我们通过方法记录了MediaStream来自 a 的a 。为了尝试将可能影响此问题的所有内容与我们的应用程序隔离开来，我开发了一个小型专用测试应用程序，用于记录并生成 WebM 文件。我一直在使用相同的素材、视频持续时间、编解码器、A/V 比特率和帧速率进行测试。然而，与 Chrome 相比，Firefox 最终创建的文件仍然大 4 倍。我还尝试使用不同的来源（例如网络摄像头），但结果相似。HTMLCanvascaptureStream<canvas>MediaStream

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

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

Answer 1

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

除了我们可以从 MediaRecorder 访问的参数之外，webm 编码器还有很多其他参数。

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

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

铬1 火狐1
铬2 火狐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);
}

所以是的，事情就是这样......一种或另一种方式可能更适合您的情况，但最好的是我们，网络开发人员，可以访问这些参数。不幸的是，从规格的角度来看，这并不是一件容易的事......