Noise Cancellation

Enabling your application to provide noise cancellation for the audio in the call can be very useful for your users. We understand though, that this can be a difficult feature to implement/support.

This is why, the StreamVideo SDK comes with support for AudioFilters. In addition we offer an easy to integrate package that provides a ready to use NoiseCancellation AudioFilter using krisp.ai technology. You can read more about integrating the StreamVideoNoiseCancellation SDK here.

With that in mind, we can build a simple UI element that will allow the user to toggle on/off the Noise Cancellation feature. The element will also take care of showing/hiding depending on the feature's availability.

struct NoiseCancellationButtonView: View {

    @Injected(\.streamVideo) var streamVideo

    @ObservedObject var viewModel: CallViewModel
    @State var isNoiseCancellationAvailable = false
    @State var isActive: Bool = false

    init(viewModel: CallViewModel) {
        self.viewModel = viewModel
        if let mode = viewModel.call?.state.settings?.audio.noiseCancellation?.mode {
            self.isNoiseCancellationAvailable = mode != .disabled
        } else {
            self.isNoiseCancellationAvailable = false
        }
        self.isActive = streamVideo.videoConfig.noiseCancellationFilter?.id == streamVideo.videoConfig.audioProcessingModule.activeAudioFilterId
    }

    var body: some View {
        if 
            let call = viewModel.call, // Ensure we have an active call.
            let noiseCancellationAudioFilter = streamVideo.videoConfig.noiseCancellationFilter, // Ensure that we have noiseCancellation audioFilter to activate.
            streamVideo.isHardwareAccelerationAvailable // Ensure that the device supports Apple's neuralEngine.
        {
            Group {
                if isNoiseCancellationAvailable {
                    Button {
                        if isActive {
                            call.setAudioFilter(nil)
                            isActive = false
                        } else {
                            call.setAudioFilter(noiseCancellationAudioFilter)
                            isActive = true
                        }
                    } label: {
                        Label {
                            Text(isActive ? "Disable Noise Cancellation" : "Noise Cancellation")
                        } icon: {
                            Image(
                                systemName: isActive
                                ? "waveform.path.ecg"
                                : "waveform.path"
                            )
                        }
                    }
                }
            }
            .onReceive(call.state.$settings.map(\.?.audio.noiseCancellation)) {
                if let mode = $0?.mode {
                    isNoiseCancellationAvailable = mode != .disabled
                } else {
                    isNoiseCancellationAvailable = false
                }
            }
        }
    }
}