Dyte sample app which switches between front and back camera on mobile

CameraSwitchApp.tsx

import { useCallback, useEffect } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import {
	DyteCameraToggle,
	DyteControlbarButton,
	DyteDialogManager,
	DyteGrid,
	DyteLeaveButton,
	DyteMicToggle,
	DyteParticipantsAudio,
	defaultIconPack,
} from '@dytesdk/react-ui-kit';

function CameraSwitchApp() {
	const [meeting, initMeeting] = useDyteClient();
	const url = new URL(window.location.href);
	const queryToken = url.searchParams.get('authToken');

	if (!queryToken) {
		alert('Please add authToken to url query params');
	}

	useEffect(() => {
		const init = async () => {
			if (!queryToken) return;

			await initMeeting({
				authToken: queryToken,
				defaults: {
					video: false,
					audio: false,
				},
			}).then(async (meet) => {
				if (!meet) return;
				Object.assign(window, { meeting: meet });

				await meet.join();
			});
		};
		init();
	}, []);

	const switchCamera = useCallback(async () => {
		if (!meeting) return;

		const devices = await meeting.self.getVideoDevices();
		if (devices.length <= 1) return;

		const currentDevice = meeting.self.getCurrentDevices().video;
		const currentIndex =
			devices.findIndex((device) => device.deviceId === currentDevice?.deviceId) || 0;
		const nextDevice = devices[(currentIndex + 1) % devices.length];

		await meeting.self.setDevice(nextDevice);
	}, [meeting]);

	if (!meeting) {
		return <div>Loading...</div>;
	}

	return (
		<div>
			<DyteDialogManager meeting={meeting} />
			<DyteParticipantsAudio meeting={meeting} />
			<div style={{ width: '100vw', height: '300px' }}>
				<DyteGrid meeting={meeting} />
			</div>
			<div
				style={{
					display: 'flex',
					gap: '4px',
					margin: '4px',
					flexWrap: 'wrap',
					justifyContent: 'center',
				}}
			>
				<DyteControlbarButton
					icon={defaultIconPack.shuffle}
					label="Switch"
					onClick={switchCamera}
				/>
				<DyteCameraToggle meeting={meeting} />
				<DyteMicToggle meeting={meeting} />
				<DyteLeaveButton />
			</div>
		</div>
	);
}

export default CameraSwitchApp;