INTEGRITY Документация

← Cloudflare Realtime / realtime / realtimekit / ui-kit

Настройка брендинга

UI Kit RealtimeKit предоставляет все необходимые UI-компоненты для полной настройки всех компонентов UI Kit. Вы можете настроить значки встречи, такие как чат, часы, выход из встречи, включение и выключение микрофона и другие.

Предварительные требования

Чтобы начать настройку значков для своих встреч, сначала интегрируйте Web SDK RealtimeKit в своё веб-приложение.

Настройка пакета значков по умолчанию

Набор значков 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 представляет собой объект, в котором:

Доступные значки

Пакет значков по умолчанию включает следующие значки:

Каждая иконка в вашем JSON-файле пользовательского набора иконок должна быть определена как пара «ключ-значение», где ключ соответствует одному из названий иконок выше, а значение представляет собой строку SVG для этой иконки.

Следующие шаги

Ознакомьтесь с дополнительными вариантами настройки: