studio/element-call
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable audio output support on Firefox

Browse Source
This commit is contained in:
Robin
2024-11-21 12:51:22 -05:00
parent 720c400e5f
commit e5117b962c
2 changed files with 7 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/livekit/MediaDevicesContext.tsx
View File

@@ -26,7 +26,6 @@ import {
videoInput as videoInputSetting, videoInput as videoInputSetting,
Setting, Setting,
} from "../settings/settings"; } from "../settings/settings";
import { isFirefox } from "../Platform";
export interface MediaDevice { export interface MediaDevice {
available: MediaDeviceInfo[]; available: MediaDeviceInfo[];
@@ -61,7 +60,6 @@ function useMediaDevice(
kind: MediaDeviceKind, kind: MediaDeviceKind,
setting: Setting<string | undefined>, setting: Setting<string | undefined>,
usingNames: boolean, usingNames: boolean,
alwaysDefault: boolean = false,
): MediaDevice { ): MediaDevice {
// Make sure we don't needlessly reset to a device observer without names, // Make sure we don't needlessly reset to a device observer without names,
// once permissions are already given // once permissions are already given
@@ -89,7 +87,7 @@ function useMediaDevice(
return useMemo(() => { return useMemo(() => {
let selectedId: string | undefined = undefined; let selectedId: string | undefined = undefined;
if (!alwaysDefault && available) { if (available) {
// If the preferred device is available, use it. Or if every available // If the preferred device is available, use it. Or if every available
// device ID is falsy, the browser is probably just being paranoid about // device ID is falsy, the browser is probably just being paranoid about
// fingerprinting and we should still try using the preferred device. // fingerprinting and we should still try using the preferred device.
@@ -112,7 +110,7 @@ function useMediaDevice(
selectedId, selectedId,
select, select,
}; };
}, [available, preferredId, select, alwaysDefault]); }, [available, preferredId, select]);
} }
const deviceStub: MediaDevice = { const deviceStub: MediaDevice = {
@@ -139,15 +137,6 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
const [numCallersUsingNames, setNumCallersUsingNames] = useState(0); const [numCallersUsingNames, setNumCallersUsingNames] = useState(0);
const usingNames = numCallersUsingNames > 0; const usingNames = numCallersUsingNames > 0;
// Setting the audio device to something other than 'undefined' breaks echo-cancellation
// and even can introduce multiple different output devices for one call.
const alwaysUseDefaultAudio = isFirefox();
// On FF we dont need to query the names
// (call enumerateDevices + create meadia stream to trigger permissions)
// for ouput devices because the selector wont be shown on FF.
const useOutputNames = usingNames && !isFirefox();
const audioInput = useMediaDevice( const audioInput = useMediaDevice(
"audioinput", "audioinput",
audioInputSetting, audioInputSetting,
@@ -156,8 +145,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
const audioOutput = useMediaDevice( const audioOutput = useMediaDevice(
"audiooutput", "audiooutput",
audioOutputSetting, audioOutputSetting,
useOutputNames, usingNames,
alwaysUseDefaultAudio,
); );
const videoInput = useMediaDevice( const videoInput = useMediaDevice(
"videoinput", "videoinput",

11
src/settings/SettingsModal.tsx
View File

@@ -29,7 +29,6 @@ import {
useOptInAnalytics, useOptInAnalytics,
soundEffectVolumeSetting, soundEffectVolumeSetting,
} from "./settings"; } from "./settings";
import { isFirefox } from "../Platform";
import { PreferencesSettingsTab } from "./PreferencesSettingsTab"; import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
import { Slider } from "../Slider"; import { Slider } from "../Slider";
import { DeviceSelection } from "./DeviceSelection"; import { DeviceSelection } from "./DeviceSelection";
@@ -96,12 +95,10 @@ export const SettingsModal: FC<Props> = ({
devices={devices.audioInput} devices={devices.audioInput}
caption={t("common.microphone")} caption={t("common.microphone")}
/> />
{!isFirefox() && ( <DeviceSelection
<DeviceSelection devices={devices.audioOutput}
devices={devices.audioOutput} caption={t("settings.speaker_device_selection_label")}
caption={t("settings.speaker_device_selection_label")} />
/>
)}
<div className={styles.volumeSlider}> <div className={styles.volumeSlider}>
<label>{t("settings.audio_tab.effect_volume_label")}</label> <label>{t("settings.audio_tab.effect_volume_label")}</label>
<p>{t("settings.audio_tab.effect_volume_description")}</p> <p>{t("settings.audio_tab.effect_volume_description")}</p>