43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { useKrispNoiseFilter } from '@livekit/components-react/krisp';
|
|
import { TrackToggle } from '@livekit/components-react';
|
|
import { MediaDeviceMenu } from '@livekit/components-react';
|
|
import { Track } from 'livekit-client';
|
|
|
|
export function MicrophoneSettings() {
|
|
const { isNoiseFilterEnabled, setNoiseFilterEnabled, isNoiseFilterPending } =
|
|
useKrispNoiseFilter();
|
|
|
|
React.useEffect(() => {
|
|
// enable Krisp by default
|
|
setNoiseFilterEnabled(true);
|
|
}, []);
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
gap: '10px',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<section className="lk-button-group">
|
|
<TrackToggle source={Track.Source.Microphone}>Microphone</TrackToggle>
|
|
<div className="lk-button-group-menu">
|
|
<MediaDeviceMenu kind="audioinput" />
|
|
</div>
|
|
</section>
|
|
|
|
<button
|
|
className="lk-button"
|
|
onClick={() => setNoiseFilterEnabled(!isNoiseFilterEnabled)}
|
|
disabled={isNoiseFilterPending}
|
|
aria-pressed={isNoiseFilterEnabled}
|
|
>
|
|
{isNoiseFilterEnabled ? 'Disable' : 'Enable'} Enhanced Noise Cancellation
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|