Noise Cancellation UI

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

Transcriptions

Session Timers