аудиопотоки API javascript getUserMedia () выдают эхо и визгливый звук

#javascript #video-streaming #html5-video #getusermedia

#javascript #потоковое видео #html5-видео #getusermedia

Вопрос:

Я пытался разработать приложение для видеоконференцсвязи, и в качестве первого шага я попытался заставить видео, вводимое пользователем, работать локально. просто используя простой 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 amp;amp; navigator.mediaDevices.getUserMedia){

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

   })
} 

Ответ №1:

закройте цикл воспроизведения звука: отключите микрофон или используйте гарнитуру, это проблема не с GUM, а с вашей настройкой.

Ваш микрофон может слышать ваши динамики. Это то же самое, что иногда происходит в аудиториях. Микрофон улавливает динамики, и динамики издают громкий неприятный вой. Это аналоговая проблема.

Приглушите микрофон. Или когда вы «заставляете видео, вводимое пользователем, работать локально», используйте гарнитуру, а не динамики и микрофон вашего ноутбука.

Комментарии:

1. не могли бы вы более подробно рассказать о решении? это действительно помогло бы мне.

2. 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
 

Другой способ:
В приведенном выше коде вы можете игнорировать создание нового медиапотока, но тогда вам нужно удалить звуковую дорожку из существующего потока или создать поток без {audio: true} .