I have been trying to develop a video conferencing application and as the first step, I tried to make user input video work locally. just using simple HTML tag and javascript getUserMedia() API.
The webcam video works perfectly fine but when I try to get the audio stream, it starts with a screech sound and then continues to have echos and noise.
I tried many ways can someone please suggest a solution with code. and if possible explain why this problem occurs. Thank you.
This is the HTML code.
<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>This is the 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
})
}close the audio loopback: deactivate your microphone or use a headset, this isn't a problem with GUM but with your setup.
Your microphone can hear your speakers. It's the same thing that happens in auditoriums sometimes. The mic picks up the speakers, and the speakers emit a loud unpleasant whine. This is an analog problem.
Muffle your mic. Or when you "make user input video work locally" use a headset rather than your laptop's speakers and mic.
Extract the video track stream by ignoring audio track stream.
const videoTracks = stream?.getVideoTracks() || [];
const selectedVideoTrack = videoTracks[0];
const newStream = new MediaStream();
newStream.addTrack(selectedVideoTrack);
video.srcObject = newStream
Other way: In the above code u can ignore creating new MediaStream, but then you have to remove the audio track from existing stream or create the stream without {audio: true}.