このガイドでは、RealtimeKit のミーティング体験向けにカスタムコントロールバーを追加する方法を説明します。
RealtimeKit UI Kit は、デフォルトのコントロールバーとして RtkControlbar コンポーネントを提供します。
追加のコントロールが必要な場合は、RtkControlbar を個別の UI Kit コンポーネントとカスタム要素に置き換えます。
必要なコンポーネントと React のフックをインポートします。
import { useRef } from "react";
import {
RtkFullscreenToggle,
RtkSettingsToggle,
RtkScreenShareToggle,
RtkMicToggle,
RtkCameraToggle,
RtkStageToggle,
RtkLeaveButton,
RtkMoreToggle,
RtkPipToggle,
RtkMuteAllButton,
RtkBreakoutRoomsToggle,
RtkRecordingToggle,
RtkChatToggle,
RtkPollsToggle,
RtkParticipantsToggle,
RtkPluginsToggle,
} from "@cloudflare/realtimekit-ui";Build Your Own UI の RtkUIProvider で、次のコードを置き換えます。
<RtkControlbar />置き換え後は次のとおりです。
<div
style={{
display: "flex",
width: "100%",
padding: "8px 12px",
color: "white",
justifyContent: "space-between",
}}
>
<div
id="controlbar-left"
style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
>
<RtkFullscreenToggle targetElement={fullScreenRef.current} />
<RtkSettingsToggle />
<RtkScreenShareToggle />
</div>
<div
id="controlbar-center"
style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
>
<RtkMicToggle />
<RtkCameraToggle />
<RtkStageToggle />
<RtkLeaveButton />
<RtkMoreToggle>
<div slot="more-elements">
<RtkPipToggle variant="horizontal" />
<RtkMuteAllButton variant="horizontal" />
<RtkBreakoutRoomsToggle variant="horizontal" />
<RtkRecordingToggle variant="horizontal" />
</div>
</RtkMoreToggle>
</div>
<div
id="controlbar-right"
style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
>
<RtkChatToggle />
<RtkPollsToggle />
<RtkParticipantsToggle />
<RtkPluginsToggle />
</div>
</div>フルスクリーンの対象用 ref を定義し、コンテナ要素に付けます。
const fullScreenRef = useRef<HTMLDivElement>(null);
// In your RtkUIProvider, add the ref to the container
<RtkUIProvider
ref={fullScreenRef}
meeting={meeting}
showSetupScreen={false}
style={{
display: "flex",
flexDirection: "column",
height: "100vh",
margin: 0,
}}
>
{/* Your controlbar and other components */}
</RtkUIProvider>
// Pass the ref's current element to RtkFullscreenToggle
<RtkFullscreenToggle targetElement={fullScreenRef.current} />カスタムコントロールバー付きで独自 UI を組み立てる完全な例は こちら ↗ にあり、カスタムコントロールバーコンポーネントは こちら ↗ です。
RealtimeKit UI Kit は、デフォルトのコントロールバーとして rtk-controlbar コンポーネントを提供します。
追加のコントロールが必要な場合は、rtk-controlbar を個別の UI Kit コンポーネントとカスタム要素に置き換えます。Build Your Own UI の renderJoinedScreen 関数で、次のコードを置き換えます。
<rtk-controlbar
style="display: flex; justify-content: space-between;"
></rtk-controlbar>置き換え後は次のとおりです。
<div
style="display: flex; width: 100%; padding: 8px 12px; color: white; justify-content: space-between;"
>
<div
id="controlbar-left"
style="display: flex; align-items: center; justify-content: center;"
>
<rtk-fullscreen-toggle id="fullscreen-toggle"></rtk-fullscreen-toggle>
<rtk-settings-toggle></rtk-settings-toggle>
<rtk-screen-share-toggle></rtk-screen-share-toggle>
</div>
<div
id="controlbar-center"
style="display: flex; align-items: center; justify-content: center;"
>
<rtk-mic-toggle></rtk-mic-toggle>
<rtk-camera-toggle></rtk-camera-toggle>
<rtk-stage-toggle></rtk-stage-toggle>
<rtk-leave-button></rtk-leave-button>
<rtk-more-toggle>
<div slot="more-elements">
<rtk-pip-toggle variant="horizontal"></rtk-pip-toggle>
<rtk-mute-all-button variant="horizontal"></rtk-mute-all-button>
<rtk-breakout-rooms-toggle
variant="horizontal"
></rtk-breakout-rooms-toggle>
<rtk-recording-toggle variant="horizontal"></rtk-recording-toggle>
</div>
</rtk-more-toggle>
</div>
<div
id="controlbar-right"
style="display: flex; align-items: center; justify-content: center;"
>
<rtk-chat-toggle></rtk-chat-toggle>
<rtk-polls-toggle></rtk-polls-toggle>
<rtk-participants-toggle></rtk-participants-toggle>
<rtk-plugins-toggle></rtk-plugins-toggle>
</div>
</div>レンダリング後にフルスクリーンの対象を登録します。
const fullscreenToggle = document.querySelector("#fullscreen-toggle");
if (fullscreenToggle) {
const targetElement = document.querySelector("rtk-ui-provider");
if (targetElement) {
fullscreenToggle.targetElement = targetElement;
}
}カスタムコントロールバー付きで独自 UI を組み立てる完全な例は こちら ↗ にあり、カスタムコントロールバーコンポーネントは こちら ↗ です。
RealtimeKit UI Kit は、デフォルトのコントロールバーとして rtk-controlbar コンポーネントを提供します。
追加のコントロールが必要な場合は、rtk-controlbar を個別の UI Kit コンポーネントとカスタム要素に置き換えます。RealtimeKit の Angular コンポーネントを直接使うカスタムコントロールバーコンポーネントを作成します。
import { Component, AfterViewInit, ElementRef, ViewChild } from "@angular/core";
@Component({
selector: "app-custom-controlbar",
template: `
<div class="custom-controlbar">
<div class="controlbar-left">
<rtk-fullscreen-toggle #fullscreenToggle></rtk-fullscreen-toggle>
<rtk-settings-toggle></rtk-settings-toggle>
<rtk-screen-share-toggle></rtk-screen-share-toggle>
</div>
<div class="controlbar-center">
<rtk-mic-toggle></rtk-mic-toggle>
<rtk-camera-toggle></rtk-camera-toggle>
<rtk-stage-toggle></rtk-stage-toggle>
<rtk-leave-button></rtk-leave-button>
<rtk-more-toggle>
<div slot="more-elements">
<rtk-pip-toggle variant="horizontal"></rtk-pip-toggle>
<rtk-mute-all-button variant="horizontal"></rtk-mute-all-button>
<rtk-breakout-rooms-toggle
variant="horizontal"
></rtk-breakout-rooms-toggle>
<rtk-recording-toggle variant="horizontal"></rtk-recording-toggle>
</div>
</rtk-more-toggle>
</div>
<div class="controlbar-right">
<rtk-chat-toggle></rtk-chat-toggle>
<rtk-polls-toggle></rtk-polls-toggle>
<rtk-participants-toggle></rtk-participants-toggle>
<rtk-plugins-toggle></rtk-plugins-toggle>
</div>
</div>
`,
styles: [
`
.custom-controlbar {
display: flex;
width: 100%;
padding: 8px 12px;
color: white;
justify-content: space-between;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 8px;
}
.controlbar-left,
.controlbar-center,
.controlbar-right {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.controlbar-center {
flex: 1;
justify-content: center;
}
`,
],
})
export class CustomControlbarComponent implements AfterViewInit {
@ViewChild("fullscreenToggle", { static: true })
fullscreenToggle!: ElementRef;
ngAfterViewInit() {
// Register the fullscreen target after rendering
this.setupFullscreenToggle();
}
private setupFullscreenToggle() {
const fullscreenElement = this.fullscreenToggle?.nativeElement;
if (fullscreenElement) {
const targetElement = document.querySelector("rtk-ui-provider");
if (targetElement) {
fullscreenElement.targetElement = targetElement;
}
}
}
}メインのミーティングコンポーネントテンプレートで、次のコードを置き換えます。
<rtk-controlbar
style="display: flex; justify-content: space-between;"
></rtk-controlbar>置き換え後は次のとおりです。
<app-custom-controlbar></app-custom-controlbar>import {
Component,
ElementRef,
OnInit,
OnDestroy,
ViewChild,
} from "@angular/core";
@Component({
selector: "app-meeting",
template: `
<rtk-meeting #meetingComponent id="meeting-component">
<!-- Other meeting UI components -->
<rtk-grid></rtk-grid>
<rtk-sidebar></rtk-sidebar>
<!-- Custom controlbar replaces rtk-controlbar -->
<app-custom-controlbar></app-custom-controlbar>
</rtk-meeting>
`,
})
export class MeetingComponent implements OnInit, OnDestroy {
@ViewChild("meetingComponent", { static: true }) meetingElement!: ElementRef;
meeting: any;
private authToken = "<participant_auth_token>";
async ngOnInit() {
const RealtimeKitClient = await import(
"https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js"
);
this.meeting = await RealtimeKitClient.default.init({
authToken: this.authToken,
});
const meetingComponent = this.meetingElement.nativeElement;
meetingComponent.showSetupScreen = true;
meetingComponent.meeting = this.meeting;
}
ngOnDestroy() {
// Cleanup logic
}
}Angular モジュールで、カスタムコントロールバーコンポーネントを必ず宣言します。
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { MeetingComponent } from "./meeting.component";
import { CustomControlbarComponent } from "./custom-controlbar.component";
@NgModule({
declarations: [AppComponent, MeetingComponent, CustomControlbarComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA], // Required for RTK web components
})
export class AppModule {}独自のボタンを追加したり、レイアウトを変更したりして、コントロールバーをさらにカスタマイズできます。
import { Component, AfterViewInit, ElementRef, ViewChild } from "@angular/core";
@Component({
selector: "app-enhanced-controlbar",
template: `
<div class="custom-controlbar">
<div class="controlbar-left">
<rtk-fullscreen-toggle #fullscreenToggle></rtk-fullscreen-toggle>
<rtk-settings-toggle></rtk-settings-toggle>
<button class="custom-button" (click)="onCustomAction()">
Custom Action
</button>
</div>
<div class="controlbar-center">
<rtk-mic-toggle></rtk-mic-toggle>
<rtk-camera-toggle></rtk-camera-toggle>
<rtk-stage-toggle></rtk-stage-toggle>
<rtk-leave-button></rtk-leave-button>
</div>
<div class="controlbar-right">
<rtk-chat-toggle></rtk-chat-toggle>
<rtk-participants-toggle></rtk-participants-toggle>
</div>
</div>
`,
styles: [
`
.custom-controlbar {
display: flex;
width: 100%;
padding: 8px 12px;
color: white;
justify-content: space-between;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 8px;
}
.controlbar-left,
.controlbar-center,
.controlbar-right {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.custom-button {
background: #0051c3;
border: none;
color: white;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.custom-button:hover {
background: #003d99;
}
`,
],
})
export class EnhancedControlbarComponent implements AfterViewInit {
@ViewChild("fullscreenToggle", { static: true })
fullscreenToggle!: ElementRef;
ngAfterViewInit() {
this.setupFullscreenToggle();
}
private setupFullscreenToggle() {
const fullscreenElement = this.fullscreenToggle?.nativeElement;
if (fullscreenElement) {
const targetElement = document.querySelector("rtk-ui-provider");
if (targetElement) {
fullscreenElement.targetElement = targetElement;
}
}
}
onCustomAction() {
console.log("Custom action triggered");
// Add your custom logic here
}
}この方法なら、Angular のコンポーネント構成を保ちつつ、RealtimeKit の組み込み機能を活かしながら、コントロールバーのレイアウトを完全に制御できます。
iOS UI Kit は、グループ通話ミーティングのデフォルトコントロールバーとして RtkMeetingControlBar を提供します。カスタムコントロールバーを作るには、RtkTabBar 内に個別のボタンコンポーネントを組み合わせます。
| コンポーネント | 説明 |
|---|---|
RtkAudioButtonControlBar |
状態を自動管理するマイクの切り替え |
RtkVideoButtonControlBar |
状態を自動管理するカメラの切り替え |
RtkEndMeetingControlBarButton |
確認ダイアログ付きの退室 / 終了ボタン |
RtkMoreButtonControlBar |
ボトムシート付きの「その他」メニューボタン |
RtkSwitchCameraButtonControlBar |
前面 / 背面カメラの切り替え |
RtkStageActionButtonControlBar |
ウェビナーとライブ配信向けのステージ参加 / 退出 |
RtkControlBarButton |
カスタムボタン用のベースボタンクラス |
RtkControlBarSpacerButton |
レイアウト用の不可視スペーサー |
RtkTabBar を作成し、個別のボタンコンポーネントを追加します。
import RealtimeKitUI
import RealtimeKit
func buildCustomControlBar(
meeting: RealtimeKitClient,
viewController: UIViewController
) -> RtkTabBar {
let tabBar = RtkTabBar(delegate: nil)
let micButton = RtkAudioButtonControlBar(meeting: meeting)
let videoButton = RtkVideoButtonControlBar(rtkClient: meeting)
let switchCameraButton = RtkSwitchCameraButtonControlBar(meeting: meeting)
let endCallButton = RtkEndMeetingControlBarButton(
meeting: meeting,
alertViewController: viewController
)
tabBar.setButtons([micButton, videoButton, switchCameraButton, endCallButton])
return tabBar
}override func viewDidLoad() {
super.viewDidLoad()
let controlBar = buildCustomControlBar(
meeting: meeting,
viewController: self
)
controlBar.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(controlBar)
NSLayoutConstraint.activate([
controlBar.bottomAnchor.constraint(
equalTo: view.safeAreaLayoutGuide.bottomAnchor
),
controlBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
controlBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
controlBar.heightAnchor.constraint(equalToConstant: 80),
])
}RtkMeetingControlBarDataSource を実装すると、デフォルトのコントロールバーレイアウトを保ったまま、特定のボタンだけを差し替えられます。
class CustomControlBarDataSource: RtkMeetingControlBarDataSource {
func getMicControlBarButton(
for meeting: RealtimeKitClient
) -> RtkControlBarButton? {
// Return a custom mic button, or nil to use the default
let button = RtkAudioButtonControlBar(meeting: meeting)
return button
}
func getVideoControlBarButton(
for meeting: RealtimeKitClient
) -> RtkControlBarButton? {
// Return a custom video button, or nil to use the default
let button = RtkVideoButtonControlBar(rtkClient: meeting)
return button
}
}
// Assign the data source
let controlBar = RtkMeetingControlBar(
meeting: meeting,
delegate: nil,
presentingViewController: self
)
controlBar.dataSource = CustomControlBarDataSource()RtkControlBarButton でカスタムボタンを作成します。
let customButton = RtkControlBarButton(
image: RtkImage(image: UIImage(systemName: "hand.raised.fill")),
title: "Raise Hand"
)
customButton.addTarget(self, action: #selector(onRaiseHand), for: .touchUpInside)
// Add it alongside other buttons
tabBar.setButtons([micButton, videoButton, customButton, endCallButton])Android UI Kit は、デフォルトのコントロールバーとして RtkMeetingControlBarView を提供します。カスタムコントロールバーを作るには、XML レイアウトで個別のボタンコンポーネントを使い、ミーティングオブジェクトで有効化します。
| コンポーネント | 有効化に使うもの | 説明 |
|---|---|---|
RtkMicToggleButton |
RealtimeKitClient |
状態管理付きのマイク切り替え |
RtkCameraToggleButton |
RealtimeKitClient |
状態管理付きのカメラ切り替え |
RtkLeaveButton |
RealtimeKitClient |
確認ダイアログ付きの退室 / 終了ボタン |
RtkMoreToggleButton |
RealtimeKitClient |
「その他」メニューボタン |
RtkControlBarButton |
— | カスタムボタン用のベースボタンクラス |
<?xml version="1.0" encoding="utf-8"?>
<com.cloudflare.realtimekit.ui.view.controlbars.RtkControlBarView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/customControlBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp">
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMicToggleButton
android:id="@+id/micToggle"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="4dp" />
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkCameraToggleButton
android:id="@+id/cameraToggle"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="4dp" />
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMoreToggleButton
android:id="@+id/moreToggle"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="4dp" />
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkLeaveButton
android:id="@+id/leaveButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="4dp" />
</com.cloudflare.realtimekit.ui.view.controlbars.RtkControlBarView>import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.cloudflare.realtimekit.RealtimeKitClient
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMicToggleButton
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkCameraToggleButton
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMoreToggleButton
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkLeaveButton
class CustomMeetingActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_custom_meeting)
// Your meeting initialization code...
}
fun activateControlBar(meeting: RealtimeKitClient) {
findViewById<RtkMicToggleButton>(R.id.micToggle).activate(meeting)
findViewById<RtkCameraToggleButton>(R.id.cameraToggle).activate(meeting)
findViewById<RtkMoreToggleButton>(R.id.moreToggle).activate(meeting)
findViewById<RtkLeaveButton>(R.id.leaveButton).activate(meeting)
}
}XML でカスタムボタンを作成します。
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkControlBarButton
android:id="@+id/raiseHandButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="4dp"
android:text="Raise Hand"
app:rtk_cbb_icon="@drawable/ic_raise_hand"
app:rtk_cbb_variant="BUTTON"
app:rtk_cbb_showText="true" />Kotlin でクリックを処理します。
val raiseHandButton = findViewById<RtkControlBarButton>(R.id.raiseHandButton)
raiseHandButton.setOnClickListener {
// Custom raise hand logic
}React Native UI Kit は、カスタムコントロールバーに組み合わせられる個別のトグルコンポーネントを提供します。
| コンポーネント | 必須のプロパティ | 説明 |
|---|---|---|
RtkMicToggle |
meeting |
権限処理付きのマイク切り替え |
RtkCameraToggle |
meeting |
権限処理付きのカメラ切り替え |
RtkLeaveButton |
— | 確認ダイアログ付きの退室 / 終了ボタン |
RtkMoreToggle |
meeting |
通知バッジ付きの「その他」メニュー切り替え |
RtkScreenShareToggle |
meeting |
画面共有の切り替え |
RtkControlbarButton |
— | カスタム操作向けのベースボタン |
RtkControlbar を、View 内の個別コンポーネントに置き換えます。
import React from "react";
import { View, StyleSheet } from "react-native";
import {
RtkMicToggle,
RtkCameraToggle,
RtkLeaveButton,
RtkMoreToggle,
RtkScreenShareToggle,
} from "@cloudflare/realtimekit-react-native-ui";
function CustomControlbar({ meeting }) {
return (
<View style={styles.controlbar}>
<RtkMicToggle meeting={meeting} variant="horizontal" />
<RtkCameraToggle meeting={meeting} variant="horizontal" />
<RtkScreenShareToggle meeting={meeting} variant="horizontal" />
<RtkMoreToggle meeting={meeting} variant="horizontal" />
<RtkLeaveButton />
</View>
);
}
const styles = StyleSheet.create({
controlbar: {
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
backgroundColor: "#1A1A1A",
paddingVertical: 8,
paddingHorizontal: 16,
},
});Build Your Own UI の MeetingScreens コンポーネントで、次のコードを置き換えます。
<RtkControlbar meeting={meeting} />置き換え後は次のとおりです。
<CustomControlbar meeting={meeting} />RtkControlbarButton を使うと、RealtimeKit のデザインに合わせたボタンを作れます。
import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";
function CustomControlbar({ meeting }) {
return (
<View style={styles.controlbar}>
<RtkMicToggle meeting={meeting} variant="horizontal" />
<RtkCameraToggle meeting={meeting} variant="horizontal" />
<RtkControlbarButton
label="Raise Hand"
icon={raiseHandSvg}
onClick={() => {
// Custom raise hand logic
}}
variant="horizontal"
/>
<RtkLeaveButton />
</View>
);
}