mirror of
https://github.com/vector-im/element-call.git
synced 2026-08-29 21:15:19 +00:00
Add Noise Reduction settings
This commit is contained in:
@@ -177,6 +177,12 @@
|
|||||||
"background_blur_header": "Hintergrund",
|
"background_blur_header": "Hintergrund",
|
||||||
"background_blur_label": "Unschärfeeffekt für den Hintergrund aktivieren",
|
"background_blur_label": "Unschärfeeffekt für den Hintergrund aktivieren",
|
||||||
"blur_not_supported_by_browser": "(Hintergrundunschärfe wird von diesem Gerät nicht unterstützt.)",
|
"blur_not_supported_by_browser": "(Hintergrundunschärfe wird von diesem Gerät nicht unterstützt.)",
|
||||||
|
"noise_suppression_header": "Audioverarbeitung",
|
||||||
|
"noise_suppression_label": "Störgeräuschreduktion",
|
||||||
|
"noise_suppression_description": "Reduziert Hintergrundgeräusche von Ihrem Mikrofon",
|
||||||
|
"noise_suppression_level_label": "Niveau der Störgeräuschreduktion",
|
||||||
|
"noise_suppression_level_description": "Höhere Werte unterdrücken mehr Rauschen, können aber die Sprachklarheit beeinflussen",
|
||||||
|
"noise_suppression_level_value": "Niveau: {{level}}",
|
||||||
"developer_tab_title": "Entwickler",
|
"developer_tab_title": "Entwickler",
|
||||||
"devices": {
|
"devices": {
|
||||||
"camera": "Kamera",
|
"camera": "Kamera",
|
||||||
|
|||||||
@@ -201,6 +201,12 @@
|
|||||||
"background_blur_header": "Background",
|
"background_blur_header": "Background",
|
||||||
"background_blur_label": "Blur the background of the video",
|
"background_blur_label": "Blur the background of the video",
|
||||||
"blur_not_supported_by_browser": "(Background blur is not supported by this device.)",
|
"blur_not_supported_by_browser": "(Background blur is not supported by this device.)",
|
||||||
|
"noise_suppression_header": "Audio Processing",
|
||||||
|
"noise_suppression_label": "Noise suppression",
|
||||||
|
"noise_suppression_description": "Reduces background noise from your microphone",
|
||||||
|
"noise_suppression_level_label": "Noise suppression level",
|
||||||
|
"noise_suppression_level_description": "Higher levels suppress more noise but may affect speech clarity",
|
||||||
|
"noise_suppression_level_value": "Level: {{level}}",
|
||||||
"developer_tab_title": "Developer",
|
"developer_tab_title": "Developer",
|
||||||
"devices": {
|
"devices": {
|
||||||
"camera": "Camera",
|
"camera": "Camera",
|
||||||
|
|||||||
@@ -245,6 +245,19 @@ export interface UrlConfiguration {
|
|||||||
*/
|
*/
|
||||||
noiseSuppression?: boolean;
|
noiseSuppression?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether to enable the advanced noise suppression filter (DeepFilterNet3).
|
||||||
|
* This can be used to override the user's noise suppression setting via URL parameter.
|
||||||
|
*/
|
||||||
|
noiseSuppressionEnabled?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The noise suppression level (30-80) when using the advanced DeepFilterNet3 filter.
|
||||||
|
* This can be used to override the user's setting via URL parameter.
|
||||||
|
* Defaults to 75 if not specified.
|
||||||
|
*/
|
||||||
|
noiseSuppressionLevel?: number;
|
||||||
|
|
||||||
callIntent?: RTCCallIntent;
|
callIntent?: RTCCallIntent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -504,6 +517,11 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
|
|||||||
autoLeaveWhenOthersLeft: parser.getFlag("autoLeave"),
|
autoLeaveWhenOthersLeft: parser.getFlag("autoLeave"),
|
||||||
noiseSuppression: parser.getFlagParam("noiseSuppression", true),
|
noiseSuppression: parser.getFlagParam("noiseSuppression", true),
|
||||||
echoCancellation: parser.getFlagParam("echoCancellation", true),
|
echoCancellation: parser.getFlagParam("echoCancellation", true),
|
||||||
|
noiseSuppressionEnabled: parser.getFlagParam("noiseSuppressionEnabled"),
|
||||||
|
noiseSuppressionLevel: (() => {
|
||||||
|
const val = parseInt(parser.getParam("noiseSuppressionLevel") ?? "", 10);
|
||||||
|
return isNaN(val) ? undefined : val / 100;
|
||||||
|
})(),
|
||||||
};
|
};
|
||||||
|
|
||||||
// Log the final configuration for debugging purposes.
|
// Log the final configuration for debugging purposes.
|
||||||
|
|||||||
@@ -23,6 +23,8 @@ import {
|
|||||||
useSetting,
|
useSetting,
|
||||||
soundEffectVolume as soundEffectVolumeSetting,
|
soundEffectVolume as soundEffectVolumeSetting,
|
||||||
backgroundBlur as backgroundBlurSetting,
|
backgroundBlur as backgroundBlurSetting,
|
||||||
|
noiseSuppressionEnabled,
|
||||||
|
noiseSuppressionLevel,
|
||||||
developerMode,
|
developerMode,
|
||||||
} from "./settings";
|
} from "./settings";
|
||||||
import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
|
import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
|
||||||
@@ -98,6 +100,67 @@ export const SettingsModal: FC<Props> = ({
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Generate controls for noise suppression.
|
||||||
|
const NoiseSuppressionControls: React.FC = (): ReactNode => {
|
||||||
|
const [noiseEnabled, setNoiseEnabled] = useSetting(noiseSuppressionEnabled);
|
||||||
|
const [noiseLevel, setNoiseLevel] = useSetting(noiseSuppressionLevel);
|
||||||
|
const displayLevel = Math.round(noiseLevel * 100);
|
||||||
|
const [noiseLevelRaw, setNoiseLevelRaw] = useState(noiseLevel);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setNoiseLevelRaw(noiseLevel);
|
||||||
|
}, [noiseLevel]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (noiseLevel < 0 || noiseLevel > 1) {
|
||||||
|
setNoiseLevel(Math.max(0, Math.min(1, noiseLevel)));
|
||||||
|
}
|
||||||
|
}, [noiseLevel, setNoiseLevel]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h4>{t("settings.noise_suppression_header")}</h4>
|
||||||
|
|
||||||
|
<FieldRow>
|
||||||
|
<InputField
|
||||||
|
id="activateNoiseSuppression"
|
||||||
|
label={t("settings.noise_suppression_label")}
|
||||||
|
description={t("settings.noise_suppression_description")}
|
||||||
|
type="checkbox"
|
||||||
|
checked={!!noiseEnabled}
|
||||||
|
onChange={(b): void => setNoiseEnabled(b.target.checked)}
|
||||||
|
/>
|
||||||
|
</FieldRow>
|
||||||
|
|
||||||
|
{noiseEnabled && (
|
||||||
|
<div className={styles.volumeSlider}>
|
||||||
|
<label>{t("settings.noise_suppression_level_label")}</label>
|
||||||
|
<p>{t("settings.noise_suppression_level_description")}</p>
|
||||||
|
<Slider
|
||||||
|
label={t("settings.noise_suppression_level_value", {
|
||||||
|
level: displayLevel,
|
||||||
|
})}
|
||||||
|
value={noiseLevelRaw}
|
||||||
|
onValueChange={(value): void => {
|
||||||
|
if (!isNaN(value)) {
|
||||||
|
setNoiseLevelRaw(value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onValueCommit={(value): void => {
|
||||||
|
if (!isNaN(value)) {
|
||||||
|
setNoiseLevel(value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
min={0}
|
||||||
|
max={1}
|
||||||
|
step={0.05}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const devices = useMediaDevices();
|
const devices = useMediaDevices();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (open) devices.requestDeviceNames();
|
if (open) devices.requestDeviceNames();
|
||||||
@@ -164,6 +227,10 @@ export const SettingsModal: FC<Props> = ({
|
|||||||
step={0.01}
|
step={0.01}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<NoiseSuppressionControls />
|
||||||
</Form>
|
</Form>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -122,6 +122,16 @@ export const soundEffectVolume = new Setting<number>(
|
|||||||
|
|
||||||
export const muteAllAudio = new Setting<boolean>("mute-all-audio", false);
|
export const muteAllAudio = new Setting<boolean>("mute-all-audio", false);
|
||||||
|
|
||||||
|
export const noiseSuppressionEnabled = new Setting<boolean>(
|
||||||
|
"noise-suppression-enabled",
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
|
||||||
|
export const noiseSuppressionLevel = new Setting<number>(
|
||||||
|
"noise-suppression-level",
|
||||||
|
0.75,
|
||||||
|
);
|
||||||
|
|
||||||
export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);
|
export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);
|
||||||
|
|
||||||
export const alwaysShowIphoneEarpiece = new Setting<boolean>(
|
export const alwaysShowIphoneEarpiece = new Setting<boolean>(
|
||||||
|
|||||||
Reference in New Issue
Block a user