INTEGRITY Dokumentace

← Cloudflare Realtime / realtime / realtimekit / ui-kit

Add Custom Controlbar

V tomto průvodci se naučíme, jak do schůzky RealtimeKit přidat vlastní controlbar.

RealtimeKit UI Kit poskytuje RtkControlbar komponenta pro výchozí controlbar.

Pokud potřebujete další ovládací prvky, nahraďte RtkControlbar s jednotlivými komponentami UI Kit a vlastními prvky.

Importujte potřebné komponenty a React hook:

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";

Ve vašem RtkUIProvider z Vytváření vlastního UI, nahraďte:

<RtkControlbar />

za:

<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>

Definujte ref pro cíl celé obrazovky a přiřaďte ho ke svému kontejnerovému prvku:

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} />

Kompletní příklad, jak vytvořit vlastní uživatelské rozhraní s vlastním ovládacím panelem, najdete zde ↗ s vlastní komponentou controlbar zde ↗.

RealtimeKit UI Kit poskytuje rtk-controlbar komponenta pro výchozí controlbar.

Pokud potřebujete další ovládací prvky, nahraďte rtk-controlbar s jednotlivými komponentami UI Kit a vlastními prvky. V renderJoinedScreen funkce z Vytváření vlastního UI, nahraďte:

<rtk-controlbar
	style="display: flex; justify-content: space-between;"
></rtk-controlbar>

za:

<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>

Zaregistrujte cíl pro celou obrazovku po vykreslení:

const fullscreenToggle = document.querySelector("#fullscreen-toggle");
if (fullscreenToggle) {
	const targetElement = document.querySelector("rtk-ui-provider");
	if (targetElement) {
		fullscreenToggle.targetElement = targetElement;
	}
}

Kompletní příklad, jak vytvořit vlastní uživatelské rozhraní s vlastním ovládacím panelem, najdete zde ↗ s vlastní komponentou controlbar zde ↗.

RealtimeKit UI Kit poskytuje rtk-controlbar komponenta pro výchozí controlbar.

Pokud potřebujete další ovládací prvky, nahraďte rtk-controlbar s jednotlivými komponentami UI Kit a vlastními prvky. Vytvořte vlastní komponentu controlbar, která přímo využívá komponenty RealtimeKit pro Angular.

Vytvoření vlastní komponenty Controlbar

custom-controlbar.component.ts
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;
			}
		}
	}
}

Použití ve vaší komponentě schůzky

V šabloně hlavní komponenty schůzky nahraďte:

<rtk-controlbar
	style="display: flex; justify-content: space-between;"
></rtk-controlbar>

za:

<app-custom-controlbar></app-custom-controlbar>

Kompletní příklad komponenty schůzky

meeting.component.ts
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
	}
}

Konfigurace modulu

Nezapomeňte deklarovat svou vlastní komponentu controlbar ve svém modulu Angular:

app.module.ts
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 {}

Pokročilé přizpůsobení

Ovládací lištu (controlbar) můžete dále přizpůsobit přidáním vlastních tlačítek nebo úpravou rozvržení:

enhanced-controlbar.component.ts
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
	}
}

Tento přístup vám dává úplnou kontrolu nad rozvržením ovládací lišty, přičemž zachovává komponentovou architekturu Angularu a využívá vestavěné funkce RealtimeKit.

iOS UI Kit poskytuje RtkMeetingControlBar jako výchozí ovládací lištu pro skupinové hovory. Chcete-li vytvořit vlastní ovládací lištu, sestavte jednotlivé komponenty tlačítek uvnitř RtkTabBar.

Dostupné komponenty tlačítek controlbaru

Komponenta Popis
RtkAudioButtonControlBar Přepínač mikrofonu s automatickou správou stavu
RtkVideoButtonControlBar Přepínač kamery s automatickou správou stavu
RtkEndMeetingControlBarButton Tlačítko pro opuštění/ukončení schůzky s potvrzovacím dialogem
RtkMoreButtonControlBar Tlačítko nabídky "More" se spodním vysouvacím panelem
RtkSwitchCameraButtonControlBar Přepínání přední/zadní kamery
RtkStageActionButtonControlBar Vstup a odchod z pódia u webinářů a livestreamů
RtkControlBarButton Základní třída tlačítka pro vlastní tlačítka
RtkControlBarSpacerButton Neviditelná mezera pro rozvržení

Vytváření vlastní ovládací lišty pomocí RtkTabBar

Vytvořte RtkTabBar a přidejte jednotlivé komponenty tlačítek:

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
}

Přidání vlastního controlbaru do view controlleru

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),
    ])
}

Pro nahrazení tlačítka použijte vzor DataSource

Implementujte RtkMeetingControlBarDataSource a nahradit tak konkrétní tlačítka při zachování výchozího rozložení controlbaru:

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()

Přidání vlastních tlačítek

Vytvořte vlastní tlačítko pomocí 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 poskytuje RtkMeetingControlBarView jako výchozí ovládací lištu. Chcete-li vytvořit vlastní ovládací lištu, použijte jednotlivé komponenty tlačítek v XML layoutu a aktivujte je pomocí objektu meeting.

Dostupné komponenty tlačítek controlbaru

Komponenta Aktivujte pomocí Popis
RtkMicToggleButton RealtimeKitClient Přepínač mikrofonu se správou stavu
RtkCameraToggleButton RealtimeKitClient Přepínač kamery se správou stavu
RtkLeaveButton RealtimeKitClient Tlačítko pro opuštění/ukončení schůzky s potvrzovacím dialogem
RtkMoreToggleButton RealtimeKitClient Tlačítko nabídky "More"
RtkControlBarButton , Základní třída tlačítka pro vlastní tlačítka

Definice vlastního rozvržení ovládacího panelu v XML

layout_custom_controlbar.xml
<?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>

Aktivujte tlačítka panelu controlbar ve své Activity

CustomMeetingActivity.kt
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)
    }
}

Přidání vlastních tlačítek pomocí RtkControlBarButton

Vytvoření vlastního tlačítka v 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" />

Zpracování kliknutí v Kotlinu:

val raiseHandButton = findViewById<RtkControlBarButton>(R.id.raiseHandButton)
raiseHandButton.setOnClickListener {
    // Custom raise hand logic
}

React Native UI Kit poskytuje jednotlivé přepínací komponenty, ze kterých můžete sestavit vlastní ovládací lištu.

Dostupné komponenty controlbaru

Komponenta Povinný prop Popis
RtkMicToggle meeting Přepínač mikrofonu se zpracováním oprávnění
RtkCameraToggle meeting Přepínač kamery se zpracováním oprávnění
RtkLeaveButton , Tlačítko pro opuštění/ukončení schůzky s potvrzovacím dialogem
RtkMoreToggle meeting Přepínač nabídky "More" s odznakem oznámení
RtkScreenShareToggle meeting Přepínač sdílení obrazovky
RtkControlbarButton , Základní tlačítko pro vlastní akce

Vytváření vlastní ovládací lišty

Nahraďte RtkControlbar s jednotlivými komponentami v 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,
	},
});

Použijte vlastní controlbar na obrazovce schůzky

Ve vašem MeetingScreens komponenta z Vytváření vlastního UI, nahraďte:

<RtkControlbar meeting={meeting} />

za:

<CustomControlbar meeting={meeting} />

Přidání vlastních tlačítek pomocí RtkControlbarButton

Použijte RtkControlbarButton a vytvořit tak tlačítka odpovídající designu 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>
	);
}