时间戳

首页 > 解决方案 > MediaRecorder 有多个秒的延迟

html5-video - MediaRecorder 有多个秒的延迟

问题描述

我正在尝试使用 MediaRecorder 录制 MediaStream 并使用 MediaSource 在视频元素中显示它。所以设置看起来像：

  1. 从浏览器请求一个 MediaStream
  2. 将其添加到 MediaRecorder
  3. 将记录的 blob 添加到 MediaSource 缓冲区

结果看起来很不错，但有一个问题：播放有延迟。直接显示 MediaStream 时没有延迟，因此我将第一个要点作为问题进行了整理。然而，似乎 MediaRecorder 或 MediaSource 正在为流添加大约 3 秒的延迟。

this.screenRecording = await mediaDevices.getDisplayMedia({ video: { frameRate: 60, resizeMode: 'none' } });
const mediaRecorder = new MediaRecorder(this.screenRecording);
mediaRecorder.ondataavailable = async (event: any) => {
  if (this.screenReceiving.readyState === 'open') {
    if (this.screenReceivingBuffer == null) {
      this.screenReceivingBuffer = this.screenReceiving.addSourceBuffer('video/webm;codecs=vp8');
    }
    if (!this.screenReceivingBuffer.updating) {
      this.screenReceivingBuffer.appendBuffer(await new Response(event.data).arrayBuffer());
    }
  }
};
mediaRecorder.start(16);

上面的代码只是从实际项目中复制和粘贴，所以请不要指望它可以通过复制和粘贴来工作；）

有谁知道为什么会出现这种延迟？关于如何调整浏览器以不添加此延迟的任何想法？

标签： html5-videomedia-sourcemediastreamweb-mediarecorder

解决方案

推荐阅读