Blog

Echo Cancellation with Web Audio Api and Chromium

11.17.2020 | Frontend | Katy G

hero

Background

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.

The Problem

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.

Step 1:

Create your audio processing and apply it to your stream

const audioContext = new AudioContext()
const destinationNode = audioContext.createMediaStreamDestination();
audioContext.createMediaStreamSource(new MediaStream([audioStream.getAudioTracks()[0]]))
        .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.

Step 2:

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.

Step 3:

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;

Step 4:

Rejoice in the fact that your ears no longer hear feedback! You no longer need to use headphones after applying audio processing in Chromium!

Lessons learned:

  • 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!

Share

Read More

Related Posts

related_image

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

related_image

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

related_image

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

related_image

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 [...]

related_image

01.28.2021 | Backend | Parker Drake

Recently I found myself needing to validate fields in a Spring Boot controller written in Kotlin...

related_image

01.22.2021 | Tutorial | Luke Mueller

⌘+⇧+g is the way to go

related_image

01.21.2021 | Devops | Katy G

Kube jobs running wild? To delete successful jobs...

additional accent
accent
FocusedLabs

171 N Aberdeen St
Suite 400
Chicago, IL 60607

[email protected]

© 2021 FocusedLabs, All Rights Reserved.

  • facebook icon
  • twitter icon
  • linkedin icon
  • github icon