← Cloudflare Realtime / realtime / realtimekit

Vytváření pomocí UI Kit

Výchozí komponenta RealtimeKit Meeting UI vám hned po nasazení poskytne kompletní zážitek ze schůzky se všemi klíčovými funkcemi. Stačí ji vložit do své aplikace a máte hotovo.

Vyberte framework podle platformy, pro kterou vyvíjíte.

Do repozitáře svého projektu nainstalujte prosím následující závislosti:

npm i @cloudflare/realtimekit-react @cloudflare/realtimekit-react-ui

Volitelné: Můžete také stavět na naší připravené šabloně:

git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/react-examples/examples/default-meeting-ui

Do repozitáře svého projektu nainstalujte prosím následující závislosti:

npm i @cloudflare/realtimekit-web @cloudflare/realtimekit-ui

Volitelné: Můžete také stavět na naší připravené šabloně:

git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/html-examples/examples/default-meeting-ui

Do repozitáře svého projektu nainstalujte prosím následující závislosti:

npm i @cloudflare/realtimekit-angular @cloudflare/realtimekit-angular-ui

Volitelné: Můžete také stavět na naší připravené šabloně:

git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/angular-examples/examples/default-meeting-ui

Přidejte následující závislost do souboru build.gradle soubor:

dependencies {
  implementation 'com.cloudflare.realtimekit:ui-android:0.3.0'
}

Nainstalujte RealtimeKit UI Kit pomocí Swift Package Manager:

V Xcode přejděte na File > Add Package Dependencies.
Zadejte adresu URL balíčku: https://github.com/dyte-in/RealtimeKitUI.
Vyberte verzi a přidejte balíček do svého projektu.

Přidejte následující položky do Info.plist soubor. Tím aplikaci udělíte oprávnění k přístupu ke kameře a mikrofonu, k fotografiím a k instalaci potřebných písem a ikon.

<key>NSBluetoothPeripheralUsageDescription</key>
<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>
<key>NSBluetoothAlwaysUsageDescription</key>
<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>
<key>NSCameraUsageDescription</key>
<string>Access camera to enable video during meetings.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Access microphone to enable audio during meetings.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Access photos to share images during meetings.</string>
<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
  <string>voip</string>
  <string>fetch</string>
  <string>remote-notification</string>
</array>

UIBackgroundModes klíč se používá v Info.plist soubor aplikace pro iOS, ve kterém deklarujete podporované režimy běhu na pozadí. Tento klíč je pole řetězců určující typy úloh na pozadí, které aplikace podporuje. Díky deklarování těchto režimů může aplikace pokračovat v běhu na pozadí a provádět určité úlohy, i když není v popředí.

Minimální požadavky: React Native 0.84 nebo vyšší, React 19 nebo vyšší.

Nainstalujte závislosti:

npm install @cloudflare/realtimekit-react-native @cloudflare/react-native-webrtc @cloudflare/realtimekit-react-native-ui @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview react-native-svg@^15.13.0 react-native-safe-area-context@^5.0.0

Minimální verze Expo: 56 nebo vyšší.

Nainstalujte závislosti:

npx expo install @cloudflare/realtimekit-react-native-ui @cloudflare/realtimekit-react-native @cloudflare/react-native-webrtc @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview react-native-svg@^15.13.0 react-native-safe-area-context@^5.0.0

Nainstalujte konfigurační pluginy Expo:

npx expo install @expo/config-plugins

Přidejte pluginy do app.json:

{
	"expo": {
		"plugins": [
			"@cloudflare/realtimekit-react-native",
			"@cloudflare/react-native-webrtc"
		]
	}
}

Spustit prebuild a nastavit tak nativní moduly:

npx expo prebuild

Následující pokyny platí pro release sestavení. Debug sestavení by měla fungovat bez dalších kroků.

Upravte svůj android/gradle.properties a přidejte následující řádky:

android.useFullClasspathForDexingTransform=true

Přidejte požadovaný blob_provider_authority řetězcový prostředek v strings.xml soubor:

<resources>
  ...
  <string name="blob_provider_authority">YOUR_APP_RESOURCE_NAME</string>
  ...
</resources>

Vytvořte nebo doplňte soubor android/app/proguard-rules.pro:

-keep class realtimekit.org.webrtc.** { *; }
-dontwarn org.chromium.build.BuildHooksAndroid

Ve vašem android/app/build.gradle, upravte konfiguraci verze release a přidejte následující řádek, který importuje konfiguraci ProGuard:

buildTypes {
  release {
    ...
    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  }
}

Zvuk a video na pozadí (Android)

SDK obsahuje foreground service pro Android, která udržuje audio a video funkční i po přechodu aplikace na pozadí. Služba se spustí automaticky, jakmile se účastník připojí ke schůzce, a zastaví se, jakmile ji opustí.

Ve výchozím nastavení je služba povolena s obecným textem oznámení. Chcete-li oznámení přizpůsobit nebo službu vypnout, předejte keepAliveService do useRealtimeKitClient hook před voláním initMeeting:

const [meeting, initMeeting] = useRealtimeKitClient({
  keepAliveService: {
    enabled: true,                        // set to false to disable entirely
    title: "Team call",                   // notification title
    text: "Tap to return to your meeting", // notification body
  },
});

Na Androidu 13 a novějším SDK automaticky vyžádá POST_NOTIFICATIONS oprávnění, aby se oznámení zobrazilo v panelu oznámení. Není potřeba žádné další nastavení.

Minimální podporovaná verze iOS: 15.1.

Otevřete Podfile a nastavte platformu na iOS 15.1:

platform :ios, '15.1'

Přidejte následující položky oprávnění do Info.plist soubor:

<key>NSCameraUsageDescription</key>
<string>Access camera to enable video during meetings.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Access microphone to enable audio during meetings.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Access photos to share images during meetings.</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

Sdílení obrazovky na iOS vyžaduje Broadcast Upload Extension a dodatečné nativní nastavení. Přečtěte si Nastavení sdílení obrazovky (iOS) průvodce, kde najdete úplné pokyny.

Jakmile je nativní nastavení dokončeno, předejte iOSScreenshareEnabled={true} na RtkMeeting a povolit tak tlačítko sdílení obrazovky v uživatelském rozhraní:

<RtkMeeting meeting={meeting} iOSScreenshareEnabled={true} />

Inicializujte SDK

Přidejte následující kód do své aplikace React:

App.tsx

import { useEffect } from 'react';
import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';

export default function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();
  useEffect(() => {
    initMeeting({ authToken: '<auth-token>' });
  }, []);

  return <div></div>;
}

Použijte Přidání účastníka (API) a načíst tak authToken.

Vytvoření komponenty schůzky

Použijte RtkMeeting komponenta a useRealtimeKitMeeting hook. Tento hook poskytuje přístup k objektu schůzky, který obsahuje veškerý stav a metody schůzky.

MyMeetingUI.tsx

import { useRealtimeKitMeeting } from '@cloudflare/realtimekit-react';
import { RtkMeeting } from '@cloudflare/realtimekit-react-ui';

export default function MyMeetingUI() {
  const { meeting } = useRealtimeKitMeeting();
  return (
    <RtkMeeting mode="fill" meeting={meeting} showSetupScreen={true} />
  );
}

Zobrazení schůzky

Obalte komponentu schůzky do RealtimeKitProvider:

App.tsx

import { useEffect } from 'react';
import { useRealtimeKitClient, RealtimeKitProvider } from '@cloudflare/realtimekit-react';
import MyMeetingUI from './MyMeetingUI.tsx'

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

  useEffect(() => {
    initMeeting({ authToken: '<auth-token>' });
  }, []);

  return (
    <RealtimeKitProvider value={meeting}>
      <MyMeetingUI />
    </RealtimeKitProvider>
  );
}

Importujte SDK

Přidejte následující importy do souboru HTML:

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Import helper to load UI Kit components -->
		<script type="module">
			import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js";
			defineCustomElements();
		</script>
		<!-- Import RealtimeKit Core via CDN -->
		<script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>
	</head>
</html>

Zobrazení schůzky

Použijte rtk-meeting komponentu pro vykreslení uživatelského rozhraní schůzky:

<body>
	<rtk-meeting id="my-meeting" show-setup-screen="true" />
</body>

Inicializujte SDK

Předejte authToken a připojte objekt meeting ke komponentě UI:

Použijte Přidání účastníka (API) a načíst tak authToken.

<script>
	const authToken = "<auth-token>";
	// Initialize the SDK
	RealtimeKitClient.init({
		authToken,
	}).then((meeting) => {
		document.getElementById("my-meeting").meeting = meeting;
	});
</script>

Načtěte modul

Načtěte RTKComponentsModule do modulu vaší aplikace. Obvykle se jedná o app.module.ts soubor a umožňuje používat komponenty uživatelského rozhraní ve vašich souborech HTML komponent.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RTKComponentsModule } from "@cloudflare/realtimekit-angular";
import { AppComponent } from "./app.component";

@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, RTKComponentsModule],
	providers: [],
	bootstrap: [AppComponent],
})
export class AppModule {}

Volitelné: Pokud používáte TypeScript, nastavte allowSyntheticDefaultImports jako true ve vašem tsconfig.json.

{
	"compilerOptions": {
		"allowSyntheticDefaultImports": true
	}
}

Zobrazení schůzky

Načtěte RtkMeeting komponentu ve vašem souboru šablony (component.html):

<rtk-meeting #myid></rtk-meeting>

Inicializujte SDK

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

Použijte Přidání účastníka (API) a načíst tak authToken.

Inicializujte a zobrazte schůzku

Vytvořte RealtimeKitUI instanci pomocí svého ověřovacího tokenu a poté zavolejte startMeeting(completion:) a získat tak view controller. Zobrazte jej, aby se zobrazilo celé uživatelské rozhraní schůzky.

Použijte Přidání účastníka (API) a načíst tak authToken.

import RealtimeKit
import RealtimeKitUI

let rtkUI = RealtimeKitUI(
    meetingInfo: RtkMeetingInfo(
        authToken: "<auth-token>",
        enableAudio: true,
        enableVideo: true
    )
)

let controller = rtkUI.startMeeting {
    // Called when the meeting ends or the user leaves
    self.dismiss(animated: true)
}
controller.modalPresentationStyle = .fullScreen
present(controller, animated: true)

Inicializujte a zobrazte schůzku

Vytvořte RtkMeetingInfo s vaším autentizačním tokenem ho zabalte do RealtimeKitUIInfo, sestavte UI Kit a zavolejte startMeeting().

Použijte Přidání účastníka (API) a načíst tak authToken.

import com.cloudflare.realtimekit.models.RtkMeetingInfo
import com.cloudflare.realtimekit.ui.RealtimeKitUIBuilder
import com.cloudflare.realtimekit.ui.RealtimeKitUIInfo

val meetingInfo = RtkMeetingInfo(authToken = "<auth-token>")
val uiKitInfo = RealtimeKitUIInfo(
    activity = this,
    rtkMeetingInfo = meetingInfo,
)
val rtkUIKit = RealtimeKitUIBuilder.build(uiKitInfo)
rtkUIKit.startMeeting()

Inicializujte SDK

Použijte useRealtimeKitClient hook ze základního balíčku React Native a vytvořte instanci schůzky: Použijte Přidání účastníka (API) a načíst tak authToken.

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

Zobrazení schůzky

Obalte svou aplikaci do RtkUIProvider, inicializujte klienta a vykreslete RtkMeeting:

function App() {
  return (
    <RtkUIProvider>
      <Meeting authToken="<auth-token>" />
    </RtkUIProvider>
  );
}

function Meeting({ authToken }: { authToken: string }) {
  const [meet, initMeeting] = useRealtimeKitClient();

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

  if (!meet) return <Text>Loading...</Text>;

  return (
    <RealtimeKitProvider value={meet}>
      <RtkMeeting meeting={meet} showSetupScreen={true} />
    </RealtimeKitProvider>
  );
}

Další kroky

Integrovali jste RealtimeKit s výchozím uživatelským rozhraním schůzky. Účastníci se nyní v relacích vzájemně vidí a slyší.

Vytváření vlastního zážitku ze schůzky

Výchozí UI sice poskytuje kompletní zážitek ze schůzky, ale pokud chcete, můžete si pomocí jednotlivých komponent UI Kit vytvořit vlastní rozhraní. Tento přístup vám dává plnou kontrolu nad rozvržením, designem i uživatelským zážitkem.

Chcete-li vytvořit vlastní uživatelské rozhraní schůzky, postupujte podle těchto návodů v uvedeném pořadí:

Knihovna komponent UI Kit - Procházejte dostupné komponenty a jejich vizuální reprezentace
Životní cyklus schůzky v UI Kit - Životní cyklus schůzky a způsob, jakým spolu komponenty komunikují a synchronizují se
Životní cyklus relace - Pochopit jednotlivé stavy a přechody peerů
Vysvětlení objektu Meeting - Přístup k datům schůzky a informacím o účastnících pomocí Core SDK
Vytváření vlastního UI - Poskládat vše dohromady a vytvořit vlastní rozhraní schůzky

Vytváření pomocí UI Kit

Zvuk a video na pozadí (Android)

Sdílení obrazovky (iOS)

Inicializujte SDK

Vytvoření komponenty schůzky

Zobrazení schůzky

Importujte SDK

Zobrazení schůzky

Inicializujte SDK

Načtěte modul

Zobrazení schůzky

Inicializujte SDK

Inicializujte a zobrazte schůzku

Inicializujte a zobrazte schůzku

Inicializujte SDK

Zobrazení schůzky

Další kroky

Vytváření vlastního zážitku ze schůzky