javascript - 如何将 h264 编码的 MediaRecorder 流传递给 Chrome 中的 MediaSource？

Question

我们的屏幕录制 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"
  });

这很好用有两个原因：

1. 由于我们的录音应用是 chrome 扩展，我们不介意它只能在 Chrome 中录音

2. 由于视频数据被编码为 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 不支持？由于它们属于同一个 API 系列，它们不应该支持相同的 mime 类型吗？在使用 addSourceBuffer 将数据传递到 MediaSource 时，我们如何使用 h264 编解码器进行录制？

到目前为止，我们能想到的唯一解决方案是创建 2 个媒体记录器，一个在 vp9 中录制，以便我们使用buffered.endAPI 读取迄今为止录制的视频的准确持续时间，另一个在 h264 中录制，以便我们能够立即移动无需为 Safari 用户将编解码器从 vp9 转码为 h264 即可将视频数据传输到 mp4 容器。但是，这将是非常低效的，因为它将有效地在 RAM 中保存两倍的数据。

复制案例/codeandbox示例

1. vp9 示例（均有效）
2. h264 示例（媒体记录器有效，媒体源无效）

标签： javascriptmediarecordergetusermediamediaelementmedia-source

Answer 1

解码器和编码器完全是不同的野兽。例如，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
  };
}