From cc2808a1da3fb23df7f32075d8e737c5b8fc5f06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 10 Jul 2023 14:26:22 +0200 Subject: [PATCH 1/2] Fix audio being muted when joining a call MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/room/VideoPreview.tsx | 49 ++++++++++++++-------------------- src/settings/SettingsModal.tsx | 6 ++++- 2 files changed, 25 insertions(+), 30 deletions(-) diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx index 6299d16e..3cc773b3 100644 --- a/src/room/VideoPreview.tsx +++ b/src/room/VideoPreview.tsx @@ -28,7 +28,7 @@ import { useModalTriggerState } from "../Modal"; import { SettingsModal } from "../settings/SettingsModal"; import { useClient } from "../ClientContext"; import { useMediaDevicesSwitcher } from "../livekit/useMediaDevicesSwitcher"; -import { DeviceChoices, UserChoices } from "../livekit/useLiveKit"; +import { UserChoices } from "../livekit/useLiveKit"; import { useDefaultDevices } from "../settings/useSetting"; export type MatrixInfo = { @@ -96,7 +96,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) { // Only let the MediaDeviceSwitcher request permissions if a video track is already available. // Otherwise we would end up asking for permissions in usePreviewTracks and in useMediaDevicesSwitcher. - const requestPermissions = !!videoTrack; + const requestPermissions = !!audioTrack && !!videoTrack; const mediaSwitcher = useMediaDevicesSwitcher( undefined, { @@ -110,27 +110,22 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) { const videoEl = React.useRef(null); // pretend the video is available until the initialization is over - const videoAvailableAndEndabled = + const videoAvailableAndEnabled = videoEnabled && (!!videoTrack || initializingVideo); - const audioAvailableAndEndabled = + const audioAvailableAndEnabled = audioEnabled && (!!videoTrack || initializingAudio); useEffect(() => { // Effect to update the settings - const createChoices = ( - enabled: boolean, - deviceId?: string - ): DeviceChoices | undefined => { - return deviceId - ? { - selectedId: deviceId, - enabled, - } - : undefined; - }; onUserChoicesChanged({ - video: createChoices(videoAvailableAndEndabled, videoIn.selectedId), - audio: createChoices(audioAvailableAndEndabled, audioIn.selectedId), + video: { + selectedId: videoIn.selectedId, + enabled: videoAvailableAndEnabled, + }, + audio: { + selectedId: audioIn.selectedId, + enabled: audioAvailableAndEnabled, + }, }); }, [ onUserChoicesChanged, @@ -138,8 +133,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) { videoEnabled, audioIn.selectedId, audioEnabled, - videoAvailableAndEndabled, - audioAvailableAndEndabled, + videoAvailableAndEnabled, + audioAvailableAndEnabled, ]); useEffect(() => { @@ -149,9 +144,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) { setInitializingVideo(false); } videoTrack?.getDeviceId().then((videoId) => { - if (videoId) { - videoIn.setSelected(videoId); - } + videoIn.setSelected(videoId ?? "default"); }); } if (!audioIn.selectedId || audioIn.selectedId == "") { @@ -159,9 +152,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) { setInitializingAudio(false); } audioTrack?.getDeviceId().then((audioId) => { - if (audioId) { - audioIn.setSelected(audioId); - } + audioIn.setSelected(audioId ?? "default"); }); } }, [videoIn, audioIn, videoTrack, audioTrack]); @@ -201,13 +192,13 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) { )}
setAudioEnabled(!audioAvailableAndEndabled)} + muted={!audioAvailableAndEnabled} + onPress={() => setAudioEnabled(!audioAvailableAndEnabled)} disabled={!audioTrack} /> setVideoEnabled(!videoAvailableAndEndabled)} + muted={!videoAvailableAndEnabled} + onPress={() => setVideoEnabled(!videoAvailableAndEnabled)} disabled={!videoTrack} /> diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 2cc8c1f1..bdb9fae6 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -78,7 +78,11 @@ export const SettingsModal = (props: Props) => { return ( devices.setSelected(id.toString())} > {devices.available.map(({ deviceId, label }, index) => ( From b814efc21f354121035bc8a9528657b96a745b4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 10 Jul 2023 16:51:33 +0200 Subject: [PATCH 2/2] Add a comment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/room/VideoPreview.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx index 3cc773b3..beeea010 100644 --- a/src/room/VideoPreview.tsx +++ b/src/room/VideoPreview.tsx @@ -152,6 +152,11 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) { setInitializingAudio(false); } audioTrack?.getDeviceId().then((audioId) => { + // getDeviceId() can return undefined for audio devices. This happens if + // the devices list uses "default" as the device id for the current + // device and the device set on the track also uses the deviceId + // "default". Check `normalizeDeviceId` in `getDeviceId` for more + // details. audioIn.setSelected(audioId ?? "default"); }); }