Question

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

简而言之，我们通过MediaStream方法记录了HTMLCanvas中的captureStream。为了从我们的应用程序中分离出可能会影响此结果的所有内容，我开发了一个小型专用测试应用程序，该应用程序记录了<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访问的编码器多a lot of other params。

这些参数都可能影响输出文件的大小，并且取决于实现者来设置。

以下是我为您的updated fiddle [点击放大]生成的视频拍摄的快照：

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开发人员可以访问这些参数。不幸的是，this is not an easy thing to do from the specs point-of-view...

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

1 个答案: