Echo Cancellation with Web Audio Api and Chromium
11.17.2020 | Frontend | Katy G
Recently, I ran into a doozy of a bug in Chromium. My pair and I were working on an application that was taking advantage of audio processing using the WebAudio Api. Part of the processing in question was the ability to spatially interact with noise based on the user's position in the application. We were building this application on top of a conferencing api stream that already had it's own processing built in. This added more complexity to the problem, as we had to yank the media stream coming through that api to apply the spatial processing, and then feed it back to the user all tidied up and ready to blow their minds.
However, then came Chromium… The spatial awesomeness was working, and pretty neat, but the minute you took your headphones off- BAM, a sound only fit to be heard at experimental electronic basement shows came wallowing through our speakers. An extensive google search revealed an open bug lurking in the issues log.
It seems Chromium does not apply echo cancellation to any remote streams- including WebAudio Api streams. To save others the trouble in working with the WebAudio Api in Chromium, we wanted to collect and share our findings from the community, and ultimately what worked for us.
Create your audio processing and apply it to your stream
const audioContext = new AudioContext() const destinationNode = audioContext.createMediaStreamDestination(); audioContext.createMediaStreamSource(new MediaStream([audioStream.getAudioTracks()])) .connect(createDistortion(audioContext)) .connect(destinationNode);
Note: audioStream is our current media stream that we want to apply audio processing to.
Be careful, as there are two destination nodes as part of Web Audio API. One is the audioContext.destination, and the other is audioContext.createMediaStreamDestination(); ---> use this one.
Create your audio loopback stream
const loopbackStream = await createLoopbackConnection(destinationNode);
The function createLoopbackConnection is setting up a local webRTC loopback connection. Chromium then picks this up and applies echo cancellation. Voila! Here's a helpful gist in the Chromium issue log we found to see how to do this.
Note: One important hiccup that tripped us up in the creation of a local loopback connection, was trying to use addStream which is deprecated- use addTrack to circumvent this.
Feed the loopback stream into your audio element.
In our case we had an existing audio element that was backed by the conferencing api we were using. We did not have to create one, but rather feed the processed stream into the existing audio element.
const audioElement = document.getElementById(`audio-element`); audioElement.srcObject = loopbackStream;
Rejoice in the fact that your ears no longer hear feedback! You no longer need to use headphones after applying audio processing in Chromium!
- Debugging audio feedback with a pair is really hard.
- Debugging audio feedback without a pair is even harder.
- Always check issues logs.
- Take care of your ears!
06.30.2021 | Culture | Katy Scott
At Focused Labs, collaboration is key to how we work together; it helps our teams learn from each other, brings us closer and helps us become more efficient...
06.23.2021 | Culture | Austyn
Late-night feedings and diaper changes, the 3-4 month sleep regression, teething, and a growth spurt all mean I'm getting less sleep than...
05.12.2021 | Culture Backend Frontend | Ryan Taylor
Temporarily disrupts "normal" business operations and allow self-organized teams to rapid prototype around their interest areas
04.27.2021 | Culture | Erin Hochstatter
Several years ago, I'd been trying to find an approach to software consulting that made sense for me [...]
01.28.2021 | Backend | Parker Drake
Recently I found myself needing to validate fields in a Spring Boot controller written in Kotlin...
01.22.2021 | Tutorial | Luke Mueller
⌘+⇧+g is the way to go
01.21.2021 | Devops | Katy G
Kube jobs running wild? To delete successful jobs...