(frontend) add hook to manage noise reduction processor toggling

Create concise hook that listens to audio track status and user noise
reduction preference to automatically handle processor state changes.

Note: Logging could be improved in future iterations.
This commit is contained in:
lebaudantoine
2025-06-09 18:29:48 +02:00
committed by aleb_the_flash
parent fb92e5b79f
commit 1fe1a557ad
2 changed files with 33 additions and 0 deletions

View File

@@ -0,0 +1,30 @@
import { useEffect } from 'react'
import { Track } from 'livekit-client'
import { useRoomContext } from '@livekit/components-react'
import { RnnNoiseProcessor } from '../processors/RnnNoiseProcessor'
import { usePersistentUserChoices } from './usePersistentUserChoices'
export const useNoiseReduction = () => {
const room = useRoomContext()
const {
userChoices: { noiseReductionEnabled },
} = usePersistentUserChoices()
const audioTrack = room.localParticipant.getTrackPublication(
Track.Source.Microphone
)?.audioTrack
useEffect(() => {
if (!audioTrack) return
const processor = audioTrack?.getProcessor()
if (noiseReductionEnabled && !processor) {
const rnnNoiseProcessor = new RnnNoiseProcessor()
audioTrack.setProcessor(rnnNoiseProcessor)
} else if (!noiseReductionEnabled && processor) {
audioTrack.stopProcessor()
}
}, [audioTrack, noiseReductionEnabled])
}

View File

@@ -31,6 +31,7 @@ import { useSidePanel } from '../hooks/useSidePanel'
import { RecordingStateToast } from '@/features/recording'
import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
import { useConnectionObserver } from '../hooks/useConnectionObserver'
import { useNoiseReduction } from '../hooks/useNoiseReduction'
const LayoutWrapper = styled(
'div',
@@ -87,6 +88,8 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
const layoutContext = useCreateLayoutContext()
useNoiseReduction()
const screenShareTracks = tracks
.filter(isTrackReference)
.filter((track) => track.publication.source === Track.Source.ScreenShare)