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

Posted 2023-03-04

【中文标题】使用 MediaStream Recording API 进行最低延迟音频播放/监控的一组好的约束是啥？

【英文标题】：What is a good set of constraints for lowest latency audio playback/monitoring with the MediaStream Recording API?使用 MediaStream Recording API 进行最低延迟音频播放/监控的一组好的约束是什么？

【发布时间】：2019-12-26 00:47:35

【问题描述】：

我目前正在使用 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 错误。延迟还可以（比默认值更好），但对于在录制时听到自己的声音来说仍然不是很好。当您弹奏吉他并在耳机中听到它时，会有轻微的、可察觉的延迟。

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

【问题讨论】：

除了通过 javascript 处理延迟之外，考虑将来自麦克风的传入音频数字化并物理移动该数据所需的时间也很重要。永远不会有零延迟，特别是如果您使用 WASAPI 而不是 ASIO 之类的东西（这不是您可以通过浏览器控制的东西）。

【参考方案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

【讨论】：

是的，也许这是处理数据并将其呈现给用户所需的时间限制。在这个例子中，mdn.mozillademos.org/en-US/docs/Web/API/Media_Streams_API/…，虽然延迟非常低（人耳应该听不到），但你可以鼓掌并听到延迟不是 3ms

我想知道这里的方法是使用Media Stream Recording API仅用于视频，并使用Web Audio API的Live Web Audio Input将音频播放给用户以用于输入监控目的。