使用 MediaStream 录制 API 的最低延迟音频 playback/monitoring 的一组好的约束是什么？

Question

我目前正在使用 HTML5/JS 开发一个音乐应用程序，并试图通过 MediaStream 录制 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。尽管您设置了一个非常低的值，但由于各种原因不能保证延迟实际匹配，如果系统无法匹配延迟，承诺将被拒绝.

您可以在文档中阅读 here：

Constraints which are specified using any or all of max, min, or exact are always treated as mandatory. If any constraint which uses one or more of those can't be met when calling applyConstraints(), the promise will be rejected.

注意：不同的浏览器和不同的 OS 行为不同。

Chrome

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

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

使用 MediaStream 录制 API 的最低延迟音频 playback/monitoring 的一组好的约束是什么？

What is a good set of constraints for lowest latency audio playback/monitoring with the MediaStream Recording API?

html

javascript

media

mediastream