自定义品牌

RealtimeKit 的 UI Kit 提供了所有必要的 UI 组件，以便完全自定义其所有的 UI Kit 组件。你可以自定义会议图标，例如聊天、时钟、离开会议、麦克风开启和关闭等。

前提条件

若要开始为会议自定义图标，首先需要将 RealtimeKit 的 Web SDK 集成到你的 Web 应用程序中。

自定义默认图标包

RealtimeKit 的默认图标集可在 icons.realtime.cloudflare.com ↗ 获得。你可以在此处修改并生成自定义图标集。

若要将 RealtimeKit 的默认图标集替换为你自己的图标集，请在 UI 组件中传入你的图标集链接。

<body>
	<rtk-meeting id="my-meeting"></rtk-meeting>

	<script>
		const init = async () => {
			const meeting = await RealtimeKitClient.init({
				authToken: "<participant_auth_token>",
				defaults: {
					audio: true,
					video: true,
				},
			});

			const meetingEl = document.getElementById("my-meeting");
			meetingEl.meeting = meeting;

			// Pass custom icon pack URL
			meetingEl.iconPackUrl = "https://example.com/my-icon-pack.json";
		};

		init();
	</script>
</body>

import {
	RealtimeKitProvider,
	useRealtimeKitClient,
} from "@cloudflare/realtimekit-react";
import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";
import { useEffect } from "react";

function App() {
	const [meeting, initMeeting] = useRealtimeKitClient();

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

	return (
		<RealtimeKitProvider value={meeting}>
			<RtkMeeting
				meeting={meeting}
				iconPackUrl="https://example.com/my-icon-pack.json"
			/>
		</RealtimeKitProvider>
	);
}

class AppComponent {
	title = "MyProject";
	@ViewChild("myid") meetingComponent: RtkMeeting;
	rtkMeeting: RealtimeKitClient;

	async ngAfterViewInit() {
		const meeting = await RealtimeKitClient.init({
			authToken: "<auth-token>",
		});
		meeting.join();
		this.rtkMeeting = meeting;
		if (this.meetingComponent) {
			this.meetingComponent.meeting = meeting;
			this.meetingComponent.iconPackUrl =
				"https://example.com/my-icon-pack.json";
		}
	}
}

IconPack 参考

IconPack 是一个对象，其中：

对象键（Object key） - 表示图标的名称
对象值（Object value） - 存储 SVG 字符串

可用图标

默认图标包包含以下图标：

attach
call_end
chat
checkmark
chevron_down
chevron_left
chevron_right
chevron_up
clock
copy
disconnected
dismiss
download
emoji_multiple
full_screen_maximize
full_screen_minimize
image
image_off
join_stage
leave_stage
mic_off
mic_on
more_vertical
participants
people
pin
pin_off
poll
recording
rocket
search
send
settings
share
share_screen_person
share_screen_start
share_screen_stop
speaker
spinner
spotlight
stop_recording
subtract
vertical_scroll
vertical_scroll_disabled
video_off
video_on
wand
warning
wifi

自定义图标包 JSON 文件中的每个图标都应定义为一个键值对，其中键与上述图标名称之一匹配，值是该图标的 SVG 字符串。

后续步骤

探索其他自定义选项：

渲染默认会议 UI - 开箱即用的完整会议体验
构建自定义 UI - 创建自定义会议界面