javascript getUserMedia() API 音频流发出回声和刺耳的声音答案

【问题标题】：javascript getUserMedia() API audio streams gives out echo and screechy soundjavascript getUserMedia() API 音频流发出回声和刺耳的声音
【发布时间】：2021-12-01 08:36:14
【问题描述】：

我一直在尝试开发视频会议应用程序，作为第一步，我尝试让用户输入视频在本地工作。只需使用简单的 HTML 标签和 javascript getUserMedia() API。

网络摄像头视频运行良好，但当我尝试获取音频流时，它以尖锐的声音开始，然后继续有回声和噪音。

我尝试了很多方法，有人可以用代码提出解决方案。如果可能的话，解释为什么会出现这个问题。谢谢。

这是 HTML 代码。

<html>
  <head>
    <title>Hi - Here</title>
    <link rel="stylesheet" href="styles.css"> 
  </head>
  <body>
    <div id="container">
      <div>
        <video autoplay="true" id="videoElement" ></video>
      </div>
    </div>
  </body>
  <script src="webcam.js"></script>
</html>

这是javascript。

var videoConstrains = { 
    audio: true ,
    video:
    { 
      width: {min: 650 , ideal: 1280 , max: 1920}, 
      height: {min: 480 , ideal: 720 , max: 1080},
    }
  };
  
let video = document.getElementById('videoElement')

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){

   navigator.mediaDevices.getUserMedia(videoConstrains)
      .then((stream)=>{
           
       video.srcObject = stream

   })
}

【问题讨论】：

标签： javascript video-streaming html5-video getusermedia

【解决方案1】：

关闭音频环回：停用您的麦克风或使用耳机，这不是 GUM 的问题，而是您的设置问题。

您的麦克风可以听到您的扬声器。有时在礼堂里也会发生同样的事情。麦克风拾起扬声器，扬声器发出响亮的令人不快的呜呜声。这是一个模拟问题。

把你的麦克风静音。或者，当您“让用户输入视频在本地工作”时，请使用耳机而不是笔记本电脑的扬声器和麦克风。

【讨论】：

您能否详细解释一下解决方案？这对我很有帮助。
en.wikipedia.org/wiki/Audio_feedback

【解决方案2】：

通过忽略音轨流提取视频轨道流。

const videoTracks = stream?.getVideoTracks() || [];
const selectedVideoTrack = videoTracks[0];
const newStream = new MediaStream();
newStream.addTrack(selectedVideoTrack);
video.srcObject = newStream

其他方式：在上面的代码中，您可以忽略创建新的 MediaStream，但是您必须从现有流中删除音轨或创建没有 {audio: true} 的流。 p>

【讨论】：