diff --git a/src/frontend/src/features/rooms/livekit/components/controls/CameraSwitchButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/CameraSwitchButton.tsx new file mode 100644 index 00000000..8d9079a6 --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/controls/CameraSwitchButton.tsx @@ -0,0 +1,125 @@ +import { Button } from '@/primitives' +import { useMediaDeviceSelect } from '@livekit/components-react' +import { RiCameraSwitchLine } from '@remixicon/react' +import { useEffect, useState } from 'react' +import { ButtonProps } from 'react-aria-components' +import { useTranslation } from 'react-i18next' + +enum FacingMode { + USER = 'user', + ENVIRONMENT = 'environment', +} + +export const CameraSwitchButton = (props: Partial) => { + const { t } = useTranslation('rooms') + + const { devices, activeDeviceId, setActiveMediaDevice } = + useMediaDeviceSelect({ + kind: 'videoinput', + requestPermissions: true, + }) + + // getCapabilities type is not available. + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const getDeviceFacingMode = (device: any): string[] => { + if (!device.getCapabilities) { + return [] + } + const capabilities = device.getCapabilities() + if (!capabilities) { + return [] + } + if (typeof capabilities.facingMode !== 'object') { + return [] + } + return capabilities.facingMode + } + + const detectCurrentFacingMode = (): FacingMode | null => { + if (!activeDeviceId) { + return null + } + const activeDevice = devices.find( + (device) => device.deviceId === activeDeviceId + ) + if (!activeDevice) { + return null + } + const facingMode = getDeviceFacingMode(activeDevice) + if (facingMode.indexOf(FacingMode.USER) >= 0) { + return FacingMode.USER + } + if (facingMode.indexOf(FacingMode.ENVIRONMENT) >= 0) { + return FacingMode.ENVIRONMENT + } + return null + } + + const guessCurrentFacingMode = () => { + const facingMode = detectCurrentFacingMode() + if (facingMode) { + return facingMode + } + // We consider by default if we have no clue that the user camera is used. + return FacingMode.USER + } + + const [facingMode, setFacingMode] = useState() + + /** + * Before setting the initial value of facingMode we need to wait for devices to + * be loaded ( because in detectCurrentFacingMode we need to find the active device + * in the devices list ), which is not the case at first render. + */ + useEffect(() => { + if (devices.length == 0) { + return + } + if (facingMode) { + return + } + + devices.forEach((device) => console.log(device.label)) + + setFacingMode(guessCurrentFacingMode()) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [devices]) + + const getUserDevice = ( + facingMode: FacingMode + ): MediaDeviceInfo | undefined => { + return devices.find((device) => { + return getDeviceFacingMode(device).indexOf(facingMode) >= 0 + }) + } + + const toggle = () => { + let target: FacingMode + if (facingMode === FacingMode.USER) { + target = FacingMode.ENVIRONMENT + } else { + target = FacingMode.USER + } + const device = getUserDevice(target) + if (device) { + setActiveMediaDevice(device.deviceId) + setFacingMode(target) + } else { + console.error('Cannot get user device with facingMode ' + target) + } + } + return ( + + ) +} diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx index 0e6bbfd4..ba198391 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx @@ -23,6 +23,7 @@ import { LinkButton } from '@/primitives' import { useSettingsDialog } from '../../components/controls/SettingsDialogContext' import { ResponsiveMenu } from './ResponsiveMenu' import { TranscriptToggle } from '../../components/controls/TranscriptToggle' +import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton' export function MobileControlBar({ onDeviceError, @@ -176,6 +177,7 @@ export function MobileControlBar({ > + setIsMenuOpened(false)} /> diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 1f618510..5d8696a2 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -82,7 +82,8 @@ "feedbacks": "Give us feedbacks", "settings": "Settings", "username": "Update Your Name", - "effects": "Apply effects" + "effects": "Apply effects", + "switch_camera": "Switch camera" } }, "effects": { diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 872d4c7c..476409ad 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -82,7 +82,8 @@ "feedbacks": "Partager votre avis", "settings": "Paramètres", "username": "Choisir votre nom", - "effects": "Appliquer des effets" + "effects": "Appliquer des effets", + "switch_camera": "Changer de caméra" } }, "effects": {