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} iOSScreenshareEnabled={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.

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

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

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

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

          <View className="flex w-full overflow-visible">
            <RtkControlbar meeting={meeting} />
          </View>
        </View>
      )}
      {roomState === 'ended' && <RtkEndedScreen meeting={meeting} />}
    </View>
  );
}

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.