diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index 95b77e73c..e3178ef8f 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -140,6 +140,72 @@ export const GroupCallView: FC = ({ }; }, []); + // Add this useEffect in GroupCallView.tsx to monitor native navigator.mediaDevices + useEffect(() => { + logger.info( + "[Navigator.mediaDevices Debug] Setting up native device monitoring", + ); + + // Log initial devices + navigator.mediaDevices + .enumerateDevices() + .then((devices) => { + logger.info( + "[Navigator.mediaDevices Debug] Initial devices:", + devices.map((d) => ({ + kind: d.kind, + deviceId: d.deviceId, + label: d.label, + groupId: d.groupId, + })), + ); + }) + .catch((e) => + logger.error( + "[Navigator.mediaDevices Debug] Failed to enumerate initial devices:", + e, + ), + ); + + // Monitor devicechange events + const handleDeviceChange = (): void => { + logger.info("[Navigator.mediaDevices Debug] 'devicechange' event fired!"); + + navigator.mediaDevices + .enumerateDevices() + .then((devices) => { + logger.info( + "[Navigator.mediaDevices Debug] Devices after change:", + devices.map((d) => ({ + kind: d.kind, + deviceId: d.deviceId, + label: d.label, + groupId: d.groupId, + })), + ); + }) + .catch((e) => + logger.error( + "[Navigator.mediaDevices Debug] Failed to enumerate devices:", + e, + ), + ); + }; + + navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange); + + logger.info("[Navigator.mediaDevices Debug] Device monitoring active"); + + // Cleanup + return (): void => { + logger.info("[Navigator.mediaDevices Debug] Removing device monitoring"); + navigator.mediaDevices.removeEventListener( + "devicechange", + handleDeviceChange, + ); + }; + }, []); + // This CSS is the only way we could find to not make element call scroll for // viewport sizes smaller than 122px width. (It is actually this exact number: 122px // tested on different devices...) @@ -528,4 +594,4 @@ export const GroupCallView: FC = ({ {body} ); -}; +};;