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

标签 javascript html media mediastream

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

我可以在这里进行其他优化以获得更好的结果吗?我不太在意视频和音频的质量,所以也许降低分辨率、采样率等对此有帮助?

最佳答案

0.003 的延迟是非常非常低的延迟(3 毫秒),人耳察觉不到。

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

如您所见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.

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

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

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

关于javascript - 使用 MediaStream Recording API 进行最低延迟音频播放/监控的一组好的约束是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57579774/

相关文章:

javascript - 在容器 div 中分别居中 2 个 div

javascript - 无法阻止表单页面刷新中的返回命中

css - @media 查询 : getting an error in W3C CSS Validation Service

javascript - 多个滑出菜单问题

javascript - 一些 openweathermap API 示例代码出现问题

html - Safari 中的一行中有 2 个 div [错误]

java - javafx media可以播放mp4格式的视频文件吗?

c# - C#控制电脑音量

javascript - 如何在包含很少单词的子字符串后插入字符串

javascript - 自定义表单提交按钮