Firefox中MediaRecorder启动录音存在1.5秒延迟的问题排查

在基础演示中发现，仅Firefox浏览器里MediaRecorder启动录音前存在1.5秒延迟。Chrome、Opera和Edge中MediaRecorder运行正常。

Safari也有延迟，但原因不同且易处理：获取用户媒体流的Promise解析耗时更长，但流可用后能立即开始录音，可及时向用户提示录音已启动。

Firefox的情况是：用户媒体流可立即获取，菜单栏也会立刻显示麦克风占用图标，但1秒多时间内没有麦克风数据，约1.5秒后菜单栏出现第二个黄色图标时才真正开始录音，导致录制的音频开头有1.5秒静音。

请问这是使用MediaRecorder的方式有误，还是需要针对Firefox采取特殊操作？

代码示例 #

JavaScript代码 #

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()
  // 系统"正在录音"图标此时出现
  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(`getUserMedia()发生错误:
  ${error}`);
};


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

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


function stopAllTracks() {
  // 关闭系统"正在录音"图标
  streams.forEach( stream => {
    stream.getTracks() // 获取MediaStream的所有轨道
      .forEach( track => track.stop() ); // 停止每个轨道
  })
  streams.length = 0
}


function saveRecording() {
  const type = mediaRecorder.mimeType
  const blob = new Blob(chunks, { type })
  const src = window.URL.createObjectURL(blob)
  // 播放录制的音频
  audio.src = src
  audio.play()
}



function showStartTime() {
  const text = `开始时间: ${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 = `
结束时间:   ${endTime.toLocaleTimeString("en-gb") + "." + endTime.getMilliseconds()}
时长:       ${duration} 秒`

  feedback.textContent += text
}

HTML代码 #

<button id="startRecording">开始录音</button>
<button id="stopRecording">停止录音</button>
<button id="playBack">播放录音</button>
<pre id="feedback"></pre>

内容的提问来源于stack exchange，提问作者James Newton