INTEGRITY Dokumentace

← Cloudflare Realtime / realtime / realtimekit

Rychlý start

Předpoklady

Abyste mohli RealtimeKit integrovat do své aplikace, potřebujete účet Cloudflare ↗.

  1. Postupujte podle Průvodce vytvořením API tokenu a vytvořit tak nový token prostřednictvím Cloudflare dashboard ↗.
  2. Při konfiguraci oprávnění se ujistěte, že Realtime / Realtime Admin oprávnění jsou vybrána.
  3. Nakonfigurujte veškeré další zásady přístupu a omezení podle potřeby pro váš případ použití.

Volitelné: Alternativně vytvářejte tokeny programově prostřednictvím API. Ujistěte se, že vaše přístupová politika obsahuje Realtime oprávnění.

Instalace

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:

  1. V Xcode přejděte na File > Add Package Dependencies.
  2. Zadejte adresu URL balíčku: https://github.com/dyte-in/RealtimeKitUI.
  3. 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 (iOS)

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

Vytvoření RealtimeKit App

Aplikaci můžete vytvořit z Cloudflare Dashboard ↗, kliknutím na Create App.

Volitelné: Můžete také použít naši Referenční dokumentace API pro vytvoření aplikace:

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/apps' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <api_token>' \
--data '{"name": "My First Cloudflare RealtimeKit app"}'

Poznámka: Doporučujeme vytvářet samostatné aplikace pro staging a produkční prostředí.

Vytvoření schůzky

Použijte naše Meetings API a vytvořit tak schůzku. Použijeme ID z odpovědi v následujících krocích.

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <api_token>' \
--data '{"title": "My First Cloudflare RealtimeKit meeting"}'

Add Participants

Vytvoření předvolby

Předvolby určují, jaká oprávnění by měl mít daný uživatel. Více se dozvíte v průvodci Concepts. Nové předvolby můžete vytvořit pomocí Presets API nebo prostřednictvím dashboard RealtimeKit ↗.

Poznámka: Tento krok přeskočte, pokud jste aplikaci vytvořili v dashboardu: výchozí přednastavení jsou již připravena.

Poznámka: Přednastavení lze znovu použít napříč více schůzkami. Roli (například admin nebo viewer) definujte jednou a poté ji přiřaďte účastníkům v libovolném počtu schůzek.

Přidejte účastníka

Účastník je do schůzky přidán pomocí Meeting ID vytvořeného výše a výběrem Preset Name z dostupných možností.

Odpověď obsahuje authToken kterou Client SDK jej používá k přidání tohoto účastníka do schůzky místnost.

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings/<meeting_id>/participants' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <api_token>' \
--data '{
  "name": "Mary Sue",
  "preset_name": "<preset_name>",
  "custom_participant_id": "<uuid_of_the_user_in_your_system>"
}'

Další informace o přidávání účastníků najdete v Referenční dokumentace API.

Frontendová integrace

Nyní můžete do své aplikace přidat RealtimeKit Client SDK.

Do své React aplikace přidejte následující kód:


import { useEffect } from "react";
import {
	useRealtimeKitClient,
	useRealtimeKitMeeting,
	RealtimeKitProvider,
} from "@cloudflare/realtimekit-react";
import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";

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

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

return (

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

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

}

Nahraďte <auth-token> s authToken získaným z předchozího kroku.

Spusťte aplikaci a přejděte na stránku schůzky, abyste viděli RealtimeKit Client SDK v akci.

npm run dev

Volitelné: Pokud používáte naši připravenou šablonu, spusťte aplikaci následujícím příkazem:

npm i -g vite && npm run dev

Otevřete aplikaci ve svém prohlížeči. Pro připojení ke schůzce přidejte k náhledové URL adrese svůj autentizační token:

http://localhost:5173?authToken=<auth_token>

Do své HTML aplikace přidejte následující kód:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Default Meeting UI | RealtimeKit</title>

    <!-- 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>
  <body>
    <rtk-meeting id="my-meeting" show-setup-screen="true" />

    <script>
      const searchParams = new URL(window.location.href).searchParams;

      const authToken = searchParams.get('authToken');

      if (!authToken) {
        alert(
          "An authToken wasn't passed, please pass an authToken in the URL query to join a meeting."
        );
      }

      // Initialize a meeting
      RealtimeKitClient.init({
        authToken,
      }).then((meeting) => {
        document.getElementById('my-meeting').meeting = meeting;
      });
    </script>

  </body>
</html>

Nahraďte <auth-token> s authToken získaným z předchozího kroku.

Spusťte aplikaci a přejděte na stránku schůzky, abyste viděli RealtimeKit Client SDK v akci.

npm run dev

Volitelné: Pokud používáte naši připravenou šablonu, spusťte aplikaci následujícím příkazem:

npm i -g vite && npm run dev

Otevřete aplikaci ve svém prohlížeči. Pro připojení ke schůzce přidejte k náhledové URL adrese svůj autentizační token:

http://localhost:5173?authToken=<auth_token>

Načtěte RTKComponentsModule do modulu vaší aplikace. Obvykle se jedná o soubor app.module.ts. Toto vám umožní používat UI komponenty v souborech HTML vašich 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 v souboru tsconfig.json allowSyntheticDefaultImports na true.

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

Načtěte komponentu RtkMeeting do souboru šablony (component.html).

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

Inicializace schůzky

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

Nahraďte <auth-token> s authToken získaným z předchozího kroku.

Spusťte aplikaci a přejděte na stránku schůzky, abyste viděli RealtimeKit Client SDK v akci.

npm run dev

Volitelné: Pokud používáte naši připravenou šablonu, spusťte aplikaci následujícím příkazem:

npm i -g vite && npm run dev

Otevřete aplikaci ve svém prohlížeči. Pro připojení ke schůzce přidejte k náhledové URL adrese svůj autentizační token:

http://localhost:5173?authToken=<auth_token>