Skip to content

Instantly share code, notes, and snippets.

@Tushkiz
Created March 5, 2024 13:46
Show Gist options
  • Save Tushkiz/71eedc7bf3072c422965624532a8ed71 to your computer and use it in GitHub Desktop.
Save Tushkiz/71eedc7bf3072c422965624532a8ed71 to your computer and use it in GitHub Desktop.
Dyte sample app which switches between front and back camera on mobile
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment