我和我的团队最近一直在努力寻找解释为什么Firefox在我们的项目中使用MediaRecorder API时会产生比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倍差异。
我不是任何视频编解码器大师,但我相信浏览器在实现某种技术时应遵循相同的规范;因此,我猜这种巨大的差异不应该发生。考虑到我的知识是有限的,我不能断定这是一个错误还是完全预期的事情。这就是为什么,我在这里解决这个问题,因为到目前为止,我对这个主题的研究一无所获。如果有人可以指出它背后的逻辑解释,我会很高兴的。提前致谢!
因为他们不使用相同的设置......
webm编码器的a lot of other params比我们从MediaRecorder访问的那些。
这些参数可能都会对输出文件的大小产生影响,并且需要设置实现者。
以下是我从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-devs可以访问这些参数。不幸的是,this is not an easy thing to do from the specs point-of-view...