RtkSetupScreen

RealtimeKit provides a default pre-call preview UI, also known as setup screen as part of our UI components.

Previously in the Quickstart example, we used the following component.

<RtkMeeting meeting={meeting} showSetupScreen={true} />

If you want to break down the above for a custom UI but still want to reuse the default setup screen, use the following component.

LIVE EDITOR

import { RtkSetupScreen } from '@cloudflare/realtimekit-react-ui';
import { useRealtimeKitMeeting, useRealtimeKitSelector } from '@cloudflare/realtimekit-react';

export default function MyMeeting() {
const { meeting } = useRealtimeKitMeeting();
const roomState = useRealtimeKitSelector((m) => m.self.roomState);

return (
<div className="flex w-full h-full">
  {roomState === 'init' && <RtkSetupScreen meeting={meeting} />}
  {roomState === 'joined' && <center>Custom in-meeting UI</center>}
  {roomState === 'ended' && <center>Custom post-meeting UI</center>}
</div>
);
}

If you want to build a custom pre-call UI, let's go to the next page to start building one.