RealtimeKit の UI Kit には、各 UI Kit コンポーネントを完全にカスタマイズできる UI コンポーネントが揃っています。チャット、時計、退室、マイクのオン / オフなど、ミーティングのアイコンをカスタマイズできます。
ミーティングのアイコンをカスタマイズするには、先に Web アプリケーションへ RealtimeKit の Web SDK を組み込みます。
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 は次の形のオブジェクトです。
- オブジェクトのキー - アイコン名を表します
- オブジェクトの値 - SVG 文字列を格納します
デフォルトのアイコンパックには、次のアイコンが含まれます。
attachcall_endchatcheckmarkchevron_downchevron_leftchevron_rightchevron_upclockcopydisconnecteddismissdownloademoji_multiplefull_screen_maximizefull_screen_minimizeimageimage_offjoin_stageleave_stagemic_offmic_onmore_verticalparticipantspeoplepinpin_offpollrecordingrocketsearchsendsettingsshareshare_screen_personshare_screen_startshare_screen_stopspeakerspinnerspotlightstop_recordingsubtractvertical_scrollvertical_scroll_disabledvideo_offvideo_onwandwarningwifi
カスタムアイコンパックの JSON ファイルでは、上記のいずれかのアイコン名をキー、そのアイコンの SVG 文字列を値とするキーと値のペアで定義します。
ほかのカスタマイズも確認できます。
