使用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 的延迟是非常非常低的延迟（3 毫秒），人耳无法察觉。

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

正如您可以在文档中阅读的那样：

使用 max、min 或精确值中的任何一个或全部指定的约束始终被视为强制约束。如果在调用 applyConstraints() 时无法满足使用其中一个或多个约束的任何约束，则承诺将被拒绝。

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

铬合金

Chrome 在某些Canary 版本中引入了一项称为“实时网络音频输入”的低延迟功能 ：

// 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 );

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

• 现场声码器
• 实时输入可视化工具
• 音高检测器