RtkMeeting

RealtimeKit provides, RtkMeeting an all encompassing component that internally handles everything from showing a pre-call UI to in-call UI and post-call screen.

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

This component contains pre-call, in-call UI as well post-call UIs.

Following code shows a basic split of these UIs from the RtkMeeting component.

LIVE EDITOR

import { RtkSetupScreen, RtkEndedScreen, RtkHeader, RtkParticipantsAudio, RtkDialogManager, RtkStage, RtkGrid, RtkNotifications, RtkSidebar, RtkControlbar } from '@cloudflare/realtimekit-react-ui';
import { useRealtimeKitMeeting, useRealtimeKitSelector } from '@cloudflare/realtimekit-react';
import { useEffect } from 'react';

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

return (

<div className="flex h-full w-full">
{roomState === 'init' && <RtkSetupScreen meeting={meeting} />}
{roomState === 'joined' && (
    <div className="flex flex-col w-full h-full">
      <header>
        <RtkHeader meeting={meeting}/>
      </header>

      <main className='flex w-full flex-1 justify-center items-center' style={{
        backgroundColor: '#272727',
        color: '#ffffff',
      }}>
        <span>Custom in-call UI</span>
        <RtkDialogManager meeting={meeting}/>
      </main>

      <footer className='flex w-full overflow-visible'>
        <RtkControlbar meeting={meeting}/>
      </footer>
    </div>

)}
{roomState === 'ended' && (<RtkEndedScreen meeting={meeting}/>)}

</div>
); }

Since RtkMeeting is a complex component and provides a lot more than just the UI, let's go to the next page and start splitting it to uncover what it does.