MediaRecorder 在 Firefox 中开始录制音频之前的延迟

Question

在一个简单的演示中，我发现 MediaRecorder 开始录制音频之前有 1.5 秒的延迟，仅在 Firefox 上。

请在下面找到与 Chrome、Opera 和 Edge 上的 MediaRecorder 配合良好的代码片段。显然，当代码片段在 Stack Overflow 上运行时，MediaRecorder 会被阻止，因此您无法在这里测试它。您可以在 GitHub 上找到相同的代码，并在此处提供演示。

在 Safari 上，也存在延迟，但出于不同且更易于管理的原因：最终解析为用户媒体流的承诺比其他浏览器需要更长的时间，但一旦流可用，录制就可以立即开始。因此可以向最终用户指示录制已开始。

在 Firefox 上，用户媒体流立即可用，并且菜单栏中会立即出现一个图标，指示麦克风正忙。数据流似乎开始流动，但麦克风有超过一秒没有数据。大约 1.5 秒后，当菜单栏中出现第二个（黄色）图标时，录音才会开始。录制的音频以 1.5 秒的静音开始。

这是由于我使用 MediaRecorder 的方式出现错误，还是我需要在 Firefox 上采取一些特定操作？

const startRecording = document.getElementById("startRecording")
const stopRecording = document.getElementById("stopRecording")
const playBack = document.getElementById("playBack")
const feedback = document.getElementById("feedback")

startRecording.addEventListener("click", startRecorder, false)
stopRecording.addEventListener("click", stopRecorder, false)
playBack.addEventListener("click", () => audio.play(), false)


const audio = new Audio()
const streams = []

let startTime
let mediaRecorder
let chunks


async function startRecorder() {
  navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then(onSuccess, onError)
}


function onSuccess(stream) {
  startTime = new Date()
  // The System "recording" icon appears now there is a stream
  streams.push(stream)

  const mimeType = "audio/webm"
  mediaRecorder = new MediaRecorder(stream) //, { mimeType })
  chunks = [];

  mediaRecorder.onstop = saveRecording
  mediaRecorder.ondataavailable = ({data}) => {
    chunks.push(data);
  };

  mediaRecorder.start()
  showStartTime()
};


function onError(error) {
  alert(`An error occured with getUserMedia():
  ${error}`);
};


function stopRecorder() {
  if (!mediaRecorder) {
    return
  }

  mediaRecorder.stop()
  stopAllTracks()
  showEndTime()
}


function stopAllTracks() {
  // Switch off the System "recording" icon
  streams.forEach( stream => {
    stream.getTracks() // get all tracks from the MediaStream
      .forEach( track => track.stop() ); // stop each of them
  })
  streams.length = 0
}


function saveRecording() {
  const type = mediaRecorder.mimeType
  const blob = new Blob(chunks, { type })
  const src = window.URL.createObjectURL(blob)
  // Play the recording
  audio.src = src
  audio.play()
}



function showStartTime() {
  const text = `Started: ${startTime.toLocaleTimeString("en-gb") + "." + startTime.getMilliseconds()}`
  console.log("text:", text);
  feedback.textContent = text
}


function showEndTime(){
  const endTime = new Date()
  const duration = (endTime - startTime) / 1000
  const text = `
Ended:   ${endTime.toLocaleTimeString("en-gb") + "." + endTime.getMilliseconds()}
Duration:       ${duration} seconds`

  feedback.textContent += text
}

  <button id="startRecording">Start Recording</button>
  <button id="stopRecording">Stop Recording</button>
  <button id="playBack">Play Back</button>
  <pre id="feedback"></pre>

Answer 1

我在 Firefox 上的 MediaRecorder 上也遇到了类似的问题，有时我发现浏览器甚至在最初调用麦克风权限时就崩溃了，特别是在已经授予权限之后，并且再次运行此代码。

navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then(onSuccess, onError)

一切似乎都很缓慢，一段时间后我的整个计算机开始变慢，直到浏览器完全关闭。

我想知道 Firefox 目前是否存在问题，或者浏览器扩展是否可能在某处干扰。如果您找到此问题的解决方案，请告诉我！