使用 MediaStream Recording API 进行最低延迟音频播放/监控的一组好的约束是什么？

Question

我目前正在使用 HTML5/JS 开发一个音乐应用程序，并尝试使用 MediaStream Recording API 实现最低延迟。该应用程序允许用户使用相机和麦克风录制音乐。当摄像头和麦克风打开时，代码将允许用户听到和看到自己。

目前我有：

  const stream = await navigator.mediaDevices.getUserMedia(
    {
      video: true,
      audio: {
        latency: {exact: 0.003},
      }
    }
  );

  // monitor video and audio (i.e. show it to the user)
  this.video.srcObject = stream;
  this.video.play();

如果我降低延迟要求，我会收到 OverConstrained 错误。延迟还可以（比默认值更好），但对于在录制时听到自己的声音来说仍然不是很好。当您弹奏吉他并在耳机中听到它时，会有轻微的、可察觉的延迟。

我可以在此处进行其他优化以获得更好的结果吗？我不太关心视频和音频的质量，所以降低分辨率、采样率等可能会有所帮助？

Answer 1

0.003 的延迟是非常非常低的延迟 (3ms)，人耳无法察觉。

也就是说，当我们谈论数字音频时，延迟不能为0。 尽管您设置了一个非常低的值，但由于各种原因不能保证延迟实际匹配，如果系统无法匹配延迟，promise 将被拒绝。

您可以在文档中阅读 here：

使用任何或所有最大值、最小值或精确值指定的约束 总是被视为强制性的。如果任何使用一个或 调用 applyConstraints() 时无法满足更多这些要求， 承诺将被拒绝。

注意：不同的浏览器和不同的操作系统表现不同。

铬

Chrome，在某些 canary build 中引入了一个低延迟功能，称为 实时网络音频输入：

// success callback when requesting audio input stream
function gotStream(stream) {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var audioContext = new AudioContext();

    // Create an AudioNode from the stream.
    var mediaStreamSource = audioContext.createMediaStreamSource( stream );

    // Connect it to the destination to hear yourself (or any other node for processing!)
    mediaStreamSource.connect( audioContext.destination );
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia( {audio:true}, gotStream );

您可以在这里看到一些利用该功能的演示：

• Live vocoder
• Live input visualizer
• Pitch detector