构建自定义 UI

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { CustomRtkMeetingComponent } from "./components/custom-rtk-meeting.component";
import { SetupScreenComponent } from "./components/setup-screen.component";
import { InMeetingComponent } from "./components/in-meeting.component";
import { MeetingHeaderComponent } from "./components/meeting-header.component";
import { MeetingControlBarComponent } from "./components/meeting-control-bar.component";
import { MeetingSidebarComponent } from "./components/meeting-sidebar.component";
import { MediaPreviewModalComponent } from "./components/media-preview-modal.component";
import { AudioPreviewComponent } from "./components/audio-preview.component";
import { VideoPreviewComponent } from "./components/video-preview.component";

import { RealtimeKitComponentsModule } from "@cloudflare/realtimekit-angular-ui";

@NgModule({
	declarations: [
		AppComponent,
		CustomRtkMeetingComponent,
		SetupScreenComponent,
		InMeetingComponent,
		MeetingHeaderComponent,
		MeetingControlBarComponent,
		MeetingSidebarComponent,
		MediaPreviewModalComponent,
		AudioPreviewComponent,
		VideoPreviewComponent,
	],
	imports: [BrowserModule, FormsModule, RealtimeKitComponentsModule],
	providers: [],
	bootstrap: [AppComponent],
})
export class AppModule {}

import { Component, OnInit, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";
import { StatesService } from "./services/states.service";
import RealtimeKitClient from "@cloudflare/realtimekit";

@Component({
	selector: "app-root",
	templateUrl: "./app.component.html",
	styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
	meeting: any = null;

	constructor(
		private statesService: StatesService,
		@Inject(DOCUMENT) private document: Document,
	) {}

	async ngOnInit() {
		await this.initializeMeeting();
	}

	private async initializeMeeting() {
		const searchParams = new URLSearchParams(
			this.document.defaultView?.location.search,
		);
		const authToken = searchParams.get("authToken");

		if (!authToken) {
			alert(
				"An authToken wasn't passed, please pass an authToken in the URL query to join a meeting.",
			);
			return;
		}

		if (!this.meeting) {
			try {
				// Initialize RealtimeKit client
				const meeting = await RealtimeKitClient.init({
					authToken,
				});

				this.meeting = meeting;

				// Expose meeting object to window for debugging
				Object.assign(this.document.defaultView as any, {
					meeting: this.meeting,
				});
			} catch (error) {
				console.error("Failed to initialize meeting:", error);
			}
		}
	}

	onRtkStatesUpdate(event: any) {
		this.statesService.setStates(event.detail);
	}
}

<rtk-ui-provider
	[meeting]="meeting"
	(rtkStatesUpdate)="onRtkStatesUpdate($event)"
	[showSetupScreen]="true"
	style="height: 100%; width: 100%; display: block;"
>
	<app-custom-rtk-meeting></app-custom-rtk-meeting>
	<rtk-dialog-manager></rtk-dialog-manager>
</rtk-ui-provider>

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Subject, takeUntil } from "rxjs";
import { StatesService, CustomStatesService } from "../services/states.service";
import { States } from "@cloudflare/realtimekit-ui";
import { CustomStates } from "../types";

@Component({
	selector: "app-custom-rtk-meeting",
	template: `
		<rtk-idle-screen *ngIf="states.meeting === 'idle'"></rtk-idle-screen>
		<app-setup-screen *ngIf="states.meeting === 'setup'"></app-setup-screen>
		<rtk-waiting-screen
			*ngIf="states.meeting === 'waiting'"
		></rtk-waiting-screen>
		<rtk-ended-screen *ngIf="states.meeting === 'ended'"></rtk-ended-screen>
		<app-in-meeting
			*ngIf="states.meeting === 'joined' || !states.meeting"
		></app-in-meeting>
	`,
})
export class CustomRtkMeetingComponent implements OnInit, OnDestroy {
	states: States = { meeting: "idle" } as States;
	customStates: CustomStates = {};
	private destroy$ = new Subject<void>();

	constructor(
		private statesService: StatesService,
		private customStatesService: CustomStatesService,
	) {}

	ngOnInit() {
		this.statesService.states$
			.pipe(takeUntil(this.destroy$))
			.subscribe((states) => {
				this.states = states;
				console.log(states, this.customStates);
			});

		this.customStatesService.customStates$
			.pipe(takeUntil(this.destroy$))
			.subscribe((customStates) => {
				this.customStates = customStates;
				console.log(this.states, customStates);
			});
	}

	ngOnDestroy() {
		this.destroy$.next();
		this.destroy$.complete();
	}
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#000000">

    <com.cloudflare.realtimekit.ui.view.headers.RtkMeetingHeaderView
        android:id="@+id/headerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.cloudflare.realtimekit.ui.view.grid.RtkGridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.cloudflare.realtimekit.ui.view.controlbars.RtkMeetingControlBarView
        android:id="@+id/controlBarView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.cloudflare.realtimekit.RealtimeKitClient
import com.cloudflare.realtimekit.RtkMeetingRoomEventListener
import com.cloudflare.realtimekit.models.RtkMeetingInfo
import com.cloudflare.realtimekit.ui.RealtimeKitUIBuilder
import com.cloudflare.realtimekit.ui.RealtimeKitUIInfo
import com.cloudflare.realtimekit.ui.view.controlbars.RtkMeetingControlBarView
import com.cloudflare.realtimekit.ui.view.grid.RtkGridView
import com.cloudflare.realtimekit.ui.view.headers.RtkMeetingHeaderView

class CustomMeetingActivity : AppCompatActivity() {
    private lateinit var headerView: RtkMeetingHeaderView
    private lateinit var gridView: RtkGridView
    private lateinit var controlBarView: RtkMeetingControlBarView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_custom_meeting)

        headerView = findViewById(R.id.headerView)
        gridView = findViewById(R.id.gridView)
        controlBarView = findViewById(R.id.controlBarView)

        val meetingInfo = RtkMeetingInfo(authToken = "<auth-token>")
        val uiKitInfo = RealtimeKitUIInfo(
            activity = this,
            rtkMeetingInfo = meetingInfo,
        )
        val rtkUI = RealtimeKitUIBuilder.build(uiKitInfo)
        val meeting: RealtimeKitClient = rtkUI.meeting

        // 监听会议生命周期事件
        meeting.addMeetingRoomEventListener(object : RtkMeetingRoomEventListener {
            override fun onMeetingRoomJoinCompleted(meeting: RealtimeKitClient) {
                runOnUiThread {
                    // 加入会议后激活所有组件
                    headerView.activate(meeting)
                    gridView.activate(meeting)
                    controlBarView.activate(meeting)
                }
            }

            override fun onMeetingEnded() {
                finish()
            }

            override fun onMeetingRoomLeaveCompleted() {
                finish()
            }
        })
    }
}

import 'package:flutter/material.dart';
import 'package:realtimekit_ui/realtimekit_ui.dart';

class CustomMeetingPage extends StatefulWidget {
  final String authToken;
  const CustomMeetingPage({required this.authToken, super.key});

  @override
  State<CustomMeetingPage> createState() => _CustomMeetingPageState();
}

class _CustomMeetingPageState extends State<CustomMeetingPage>
    implements RtkMeetingRoomEventListener {
  late final RealtimekitClient meeting;
  late final RealtimeKitUIInfo uiKitInfo;
  String meetingState = 'idle';

  @override
  void initState() {
    super.initState();
    meeting = RealtimekitClient();
    uiKitInfo = RealtimeKitUIInfo(
      RtkMeetingInfo(authToken: widget.authToken),
    );
    meeting.addMeetingRoomEventListener(this);
    meeting.init(
      RtkMeetingInfo(authToken: widget.authToken),
      onSuccess: () => setState(() => meetingState = 'setup'),
      onError: (error) => setState(() => meetingState = 'error'),
    );
  }

  @override
  void onMeetingRoomJoinCompleted() {
    setState(() => meetingState = 'joined');
  }

  @override
  void onMeetingEnded() {
    setState(() => meetingState = 'ended');
  }

  @override
  void onMeetingRoomLeaveCompleted() {
    Navigator.of(context).pop();
  }

  // 要求的接口方法 — 本例中为空操作
  @override
  void onMeetingInitCompleted() {}
  @override
  void onMeetingInitFailed(Exception exception) {}
  @override
  void onMeetingInitStarted() {}
  @override
  void onMeetingRoomJoinStarted() {}
  @override
  void onMeetingRoomJoinFailed(Exception exception) {}
  @override
  void onMeetingRoomLeaveStarted() {}
  @override
  void onActiveTabUpdate(ActiveTab? activeTab) {}
  @override
  void onSocketConnectionUpdate(SocketConnectionState state) {}

  @override
  Widget build(BuildContext context) {
    return RtkProvider(
      meeting: meeting,
      uiKitInfo: uiKitInfo,
      child: Scaffold(
        backgroundColor: Colors.black,
        body: _buildForState(),
      ),
    );
  }

  Widget _buildForState() {
    switch (meetingState) {
      case 'setup':
        return Column(
          children: [
            Expanded(
              child: RtkParticipantTile(meeting.localUser, height: 300, width: 200),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RtkSelfAudioToggleButton(meeting: meeting),
                const SizedBox(width: 16),
                RtkSelfVideoToggleButton(meeting: meeting),
                const SizedBox(width: 16),
                RtkJoinButton(meeting: meeting, onMeetingJoined: () {}),
              ],
            ),
          ],
        );
      case 'joined':
        return Column(
          children: [
            RtkMeetingTitle(meeting: meeting),
            Expanded(
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 3 / 4,
                ),
                itemCount: meeting.participants.active.length + 1,
                itemBuilder: (context, index) {
                  final participant = index == 0
                      ? meeting.localUser
                      : meeting.participants.active[index - 1];
                  return RtkParticipantTile(participant);
                },
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RtkSelfAudioToggleButton(meeting: meeting),
                RtkSelfVideoToggleButton(meeting: meeting),
                RtkLeaveButton(meeting: meeting),
              ],
            ),
          ],
        );
      case 'ended':
        return const Center(child: Text('Meeting ended', style: TextStyle(color: Colors.white)));
      default:
        return const Center(child: CircularProgressIndicator());
    }
  }

  @override
  void dispose() {
    meeting.removeMeetingRoomEventListener(this);
    super.dispose();
  }
}

import React, { useContext, useEffect } from "react";
import { View, Text } from "react-native";
import {
	useRealtimeKitClient,
	RealtimeKitProvider,
} from "@cloudflare/realtimekit-react-native";
import {
	RtkUIProvider,
	RtkUIContext,
	RtkHeader,
	RtkGrid,
	RtkControlbar,
	RtkSidebar,
	RtkDialogManager,
	RtkSetupScreen,
	RtkWaitingScreen,
	RtkEndedScreen,
} from "@cloudflare/realtimekit-react-native-ui";

function MeetingScreens({ meeting }) {
	const { storeStates, setStates } = useContext(RtkUIContext);
	const currentState = storeStates.meeting;

	useEffect(() => {
		// 监听会议事件并驱动状态转换
		const onRoomJoined = () => {
			setStates({ ...storeStates, meeting: "joined" });
		};
		const onRoomLeft = ({ state }) => {
			if (state === "ended" || state === "left") {
				setStates({ ...storeStates, meeting: "ended" });
			}
		};
		meeting.self.addListener("roomJoined", onRoomJoined);
		meeting.self.addListener("roomLeft", onRoomLeft);
		return () => {
			meeting.self.removeListener("roomJoined", onRoomJoined);
			meeting.self.removeListener("roomLeft", onRoomLeft);
		};
	}, [meeting]);

	if (currentState === "setup") {
		return <RtkSetupScreen meeting={meeting} />;
	}

	if (currentState === "waiting") {
		return <RtkWaitingScreen />;
	}

	if (currentState === "joined") {
		return (
			<View style={{ flex: 1 }}>
				<RtkHeader meeting={meeting} />
				<View style={{ flex: 1 }}>
					<RtkGrid meeting={meeting} />
					{storeStates.activeSidebar && <RtkSidebar meeting={meeting} />}
				</View>
				<RtkControlbar meeting={meeting} />
				<RtkDialogManager meeting={meeting} />
			</View>
		);
	}

	if (currentState === "ended") {
		return <RtkEndedScreen meeting={meeting} />;
	}

	return <Text>Loading...</Text>;
}

function CustomMeeting({ authToken }) {
	const [meet, initMeeting] = useRealtimeKitClient();
	const { setStates, storeStates } = useContext(RtkUIContext);

	useEffect(() => {
		initMeeting({
			authToken,
			defaults: { audio: true, video: true },
		});
	}, [authToken]);

	useEffect(() => {
		if (meet) {
			setStates({ ...storeStates, meeting: "setup" });
		}
	}, [meet]);

	if (!meet) return <Text>Initializing...</Text>;

	return (
		<RealtimeKitProvider value={meet}>
			<MeetingScreens meeting={meet} />
		</RealtimeKitProvider>
	);
}

export default function App() {
	return (
		<RtkUIProvider>
			<CustomMeeting authToken="<auth-token>" />
		</RtkUIProvider>
	);
}