Realtime - Add noise cancellation to web apps built on RealtimeKit

You can now add noise cancellation to RealtimeKit web apps with the new @cloudflare/realtimekit-noise-cancellation package. RealtimeKit is a high-level SDK for adding real-time audio and video components, such as video meetings, to your web or mobile app.

Install the package:

npmyarnpnpmbun

npm i @cloudflare/realtimekit-noise-cancellation

yarn add @cloudflare/realtimekit-noise-cancellation

pnpm add @cloudflare/realtimekit-noise-cancellation

bun add @cloudflare/realtimekit-noise-cancellation

After you initialize the meeting, pass it to init():

import { RealtimeKitNoiseCancellation } from "@cloudflare/realtimekit-noise-cancellation";

// Enables automatically when the mic is available, without delaying join.
void RealtimeKitNoiseCancellation.init({ meeting }).catch(console.warn);

How it works

• Filters background noise in the participant's browser, before their audio is sent to the meeting.
• Turns on automatically after init(), as soon as the participant's microphone is on.
• Keeps running through mute, unmute, and reconnects, and cleans up when the participant leaves.
• Never unmutes the microphone.

Noise cancellation works in React, Angular, and JavaScript apps on Chrome, Edge, Firefox, and Safari, including mobile browsers. The RealtimeKit iOS and Android SDKs do not yet support it.

Learn more

• Noise Cancellation: setup for React, Angular, and JavaScript, plus the full API
• Noise cancellation example ↗︎: RealtimeKit's default meeting UI with noise cancellation turned on, also available in Angular and HTML in the same repository
• RealtimeKit release notes
• RealtimeKit quickstart