我们的屏幕录制chrome扩展允许用户使用getDisplayMedia API录制他们的屏幕，该API返回馈送到MediaRecorder API的流。
通常，我们会使用带有较新的 vp9 编解码器的 webm 视频容器录制此流，如下所示：
const mediaRecorder = new MediaRecorder(mediaStream, {
mimeType: "video/webm; codecs=vp9"
});
但是，Safari 不支持 webm 容器，也不支持解码 vp9 编解码器。由于 Chrome 中的 MediaRecorder API 仅支持在 webm 容器中进行录制，但确实支持 h264 编码(Safari 可以解码)，因此我们改为在 webm 容器中使用 h264 编解码器进行录制：
const mediaRecorder = new MediaRecorder(mediaStream, {
mimeType: "video/webm; codecs=h264"
});
这很有效，原因有两个：
由于我们的录音应用程序是Chrome扩展程序，因此我们不介意它只能在Chrome中录制
由于视频数据被编码为 H264，我们现在几乎可以立即将视频数据移动到.mp4容器中，允许 Safari 观看者查看这些录制的视频，而无需等待昂贵的转码过程(请注意，您可以在常规网络应用程序中查看没有 Chrome 扩展名的视频)
但是，由于媒体录制器 API 无法获取到目前为止录制的视频流的持续时间，并且使用performance.now手动测量它被证明是不精确的(误差为 25 毫秒到 150 毫秒)，因此我们不得不更改为将录像机数据馈送到 MediaSource，以便我们可以使用mediaSourceBuffer.buffered.end(sourceBuffer.buffered.length - 1) * 1000API 来 100% 准确读取到目前为止记录的视频流持续时间(以毫秒为单位)。
问题是，由于某种原因，当我们使用"video/webm; codecs=h264"MIME 类型时，MediaSource 无法实例化。
这样做：
mediaSourceBuffer = mediaSource.addSourceBuffer("video/webm; codecs=h264");
结果：
Failed to execute 'addSourceBuffer' on 'MediaSource': The type provided ('video/webm; codecs=h264') is unsupported.
为什么 MediaRecorder 支持 MIME 类型，而 MediaSource 不支持 MIME 类型？由于它们属于同一个 API 系列，它们不应该支持相同的 MIME 类型吗？我们如何使用 h264 编解码器进行录制，同时使用 addSourceBuffer 将数据传递到媒体源？
到目前为止，我们能想到的唯一解决方案是创建 2 个媒体录像机，一个在 vp9 中录制，供我们使用buffered.endAPI 读取到目前为止录制的视频的准确持续时间，另一个在 h264 中录制，以便我们能够立即将视频数据移动到 mp4 容器，而无需将编解码器从 vp9 转码为 Safari 用户的 h264。但是，这将非常低效，因为它实际上可以在RAM中容纳两倍的数据。
复制案例/代码沙箱示例
- VP9示例(均有效)
- H264示例(媒体录像机工作，媒体源不工作)
解码器和编码器完全是不同的野兽。例如，Webkit(Safari)可以解码几种格式，但它不能编码任何东西。
此外，MediaSource API要求传递给它的媒体可以是分段的，因此无法读取浏览器可以解码的所有媒体，例如，如果某个浏览器有一天支持生成标准(非碎片)mp4 文件，那么他们仍然无法将其传递给 MediaSource API。
我不确定他们是否可以支持这个特定的编解码器(我想是的)，但你甚至可能根本不需要所有这些解决方法。
如果您的扩展能够生成 DOM 元素，那么您只需使用<video>元素来告诉您录制视频的持续时间，请使用此答案中描述的技巧：
将视频的currentTime设置为非常大的数字，等待seeked事件，您将获得正确的duration。
const canvas_stream = getCanvasStream();
const rec = new MediaRecorder( canvas_stream.stream );
const chunks = [];
rec.ondataavailable = (evt) => chunks.push( evt.data );
rec.onstop = async (evt) => {
canvas_stream.stop();
console.log( "duration:", await measureDuration( chunks ) );
};
rec.start();
setTimeout( () => rec.stop(), 5000 );
console.log( 'Recording 5s' );
function measureDuration( chunks ) {
const blob = new Blob( chunks, { type: "video/webm" } );
const vid = document.createElement( 'video' );
return new Promise( (res, rej) => {
vid.onerror = rej;
vid.onseeked = (evt) => res( vid.duration );
vid.onloadedmetadata = (evt) => {
URL.revokeObjectURL( vid.src );
// for demo only, to show it's Infinity in Chrome
console.log( 'before seek', vid.duration );
};
vid.src = URL.createObjectURL( blob );
vid.currentTime = 1e10;
} );
}
// just so we can have a MediaStream in StackSnippet
function getCanvasStream() {
const canvas = document.createElement( 'canvas' );
const ctx = canvas.getContext( '2d' );
let stopped = false;
function draw() {
ctx.fillRect( 0,0,1,1 );
if( !stopped ) {
requestAnimationFrame( draw );
}
}
draw();
return {
stream: canvas.captureStream(),
stop: () => stopped = true
};
}