← Cloudflare Realtime / realtime / realtimekit

Создание с помощью UI Kit

Стандартный компонент RealtimeKit Meeting UI сразу даёт полноценный интерфейс встречи «из коробки» со всеми необходимыми функциями. Просто добавьте его в приложение, и можно сразу начинать работу.

Выберите фреймворк в зависимости от платформы, для которой вы разрабатываете приложение.

Установите в репозиторий своего проекта следующие зависимости:

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

Необязательно: Вы также можете использовать в качестве основы наш готовый шаблон:

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

Установите в репозиторий своего проекта следующие зависимости:

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

Необязательно: Вы также можете использовать в качестве основы наш готовый шаблон:

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

Установите в репозиторий своего проекта следующие зависимости:

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

Необязательно: Вы также можете использовать в качестве основы наш готовый шаблон:

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

Добавьте следующую зависимость в файл build.gradle файле:

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

Установите RealtimeKit UI Kit с помощью Swift Package Manager:

В Xcode перейдите в File > Add Package Dependencies.
Введите URL-адрес пакета: https://github.com/dyte-in/RealtimeKitUI.
Выберите версию и добавьте пакет в свой проект.

Добавьте следующие записи в Info.plist файл. Это даёт приложению разрешения на доступ к камере и микрофону, доступ к фото, а также установку необходимых шрифтов и значков.

<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 ключ используется в Info.plist файл iOS-приложения, чтобы объявить поддерживаемые режимы фонового выполнения. Этот ключ представляет собой массив строк, определяющий типы фоновых задач, которые поддерживает приложение. Объявление фоновых режимов позволяет приложению продолжать работу в фоне и выполнять определённые задачи, даже когда оно не находится на переднем плане.

Минимальные требования: React Native 0.84 или выше, React 19 или выше.

Установите зависимости:

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

Минимальная версия Expo: 56 и выше.

Установите зависимости:

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

Установите конфигурационные плагины Expo:

npx expo install @expo/config-plugins

Добавьте плагины в app.json:

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

Запустите prebuild чтобы настроить нативные модули:

npx expo prebuild

Следующие инструкции относятся к релизным сборкам. Отладочные сборки должны работать без дополнительных шагов.

Отредактируйте свой android/gradle.properties и добавьте следующие строки:

android.useFullClasspathForDexingTransform=true

Добавьте обязательный blob_provider_authority строковый ресурс в strings.xml файле:

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

Создайте файл или добавьте данные в файл android/app/proguard-rules.pro:

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

В вашем android/app/build.gradle, отредактируйте конфигурацию релиза и добавьте следующую строку импорта конфигурации ProGuard:

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

Аудио и видео в фоновом режиме (Android)

SDK включает Android-службу переднего плана, которая поддерживает работу аудио и видео, когда приложение переходит в фон. Служба запускается автоматически при присоединении участника ко встрече и останавливается, когда он её покидает.

По умолчанию служба включена с общим текстом уведомления. Чтобы настроить уведомление или отключить службу, передайте keepAliveService к useRealtimeKitClient хук перед вызовом 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
  },
});

На Android 13 и выше SDK автоматически запрашивает POST_NOTIFICATIONS разрешение, чтобы уведомление появлялось в шторке. Дополнительная настройка не требуется.

Минимальная поддерживаемая версия iOS: 15.1.

Откройте свой Podfile и укажите платформу iOS 15.1:

platform :ios, '15.1'

Добавьте следующие записи о разрешениях в Info.plist файле:

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

Демонстрация экрана на iOS требует Broadcast Upload Extension и дополнительной нативной настройки. См. Настройка демонстрации экрана (iOS) руководство, где приведены полные инструкции.

После завершения нативной настройки передайте iOSScreenshareEnabled={true} к RtkMeeting чтобы включить кнопку демонстрации экрана в интерфейсе:

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

Инициализируйте SDK

Добавьте следующий код в ваше приложение 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>;
}

Используйте API добавления участника чтобы получить authToken.

Создание компонента встречи

Используйте RtkMeeting компонент и useRealtimeKitMeeting хук. Этот хук предоставляет доступ к объекту встречи, который содержит всё состояние встречи и её методы.

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

Отображение встречи

Оберните компонент встречи в 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>
  );
}

Импортируйте SDK

Добавьте следующие импорты в ваш файл 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>

Отображение встречи

Используйте rtk-meeting компонент для отрисовки интерфейса встречи:

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

Инициализируйте SDK

Передайте authToken и подключите объект meeting к компоненту интерфейса:

Используйте API добавления участника чтобы получить authToken.

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

Загрузите модуль

Загрузите RTKComponentsModule в модуль приложения. Обычно это app.module.ts файл и позволяет использовать компоненты UI в HTML-файлах ваших компонентов.

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

Необязательно: Если вы используете TypeScript, установите allowSyntheticDefaultImports как true в вашем tsconfig.json.

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

Отображение встречи

Загрузите RtkMeeting компонент в вашем файле шаблона (component.html):

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

Инициализируйте 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;
	}
}

Используйте API добавления участника чтобы получить authToken.

Инициализируйте и отобразите встречу

Создайте RealtimeKitUI экземпляр с вашим токеном аутентификации, а затем вызовите startMeeting(completion:) чтобы получить view controller. Отобразите его, чтобы показать полный интерфейс встречи.

Используйте API добавления участника чтобы получить 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)

Инициализируйте и отобразите встречу

Создайте RtkMeetingInfo с вашим токеном аутентификации, оберните его в RealtimeKitUIInfo, соберите UI Kit и вызовите startMeeting().

Используйте API добавления участника чтобы получить 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()

Инициализируйте SDK

Используйте useRealtimeKitClient хук из базового пакета React Native, чтобы создать экземпляр встречи: Используйте API добавления участника чтобы получить 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";

Отображение встречи

Оберните свое приложение в RtkUIProvider, инициализируйте клиент и отрисуйте 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>
  );
}

Следующие шаги

Вы интегрировали RealtimeKit со стандартным пользовательским интерфейсом встречи. Теперь участники могут видеть и слышать друг друга в сессиях.

Создание индивидуального опыта встречи

Стандартный интерфейс обеспечивает полноценный опыт встречи, но иногда нужен собственный интерфейс на основе отдельных компонентов UI Kit. Такой подход дает полный контроль над версткой, дизайном и пользовательским опытом.

Чтобы создать собственный интерфейс встречи, следуйте этим руководствам по порядку:

Библиотека компонентов UI Kit - Просмотр доступных компонентов и их визуального представления
Жизненный цикл встречи в UI Kit - Жизненный цикл встречи и то, как компоненты взаимодействуют и синхронизируются друг с другом
Жизненный цикл сессии - Разберитесь в различных состояниях пиров и переходах между ними
Разбор объекта встречи - Доступ к данным встречи и информации об участниках через Core SDK
Создание собственного интерфейса - Соберите всё вместе, чтобы создать собственный интерфейс встречи

Создание с помощью UI Kit

Аудио и видео в фоновом режиме (Android)

Демонстрация экрана (iOS)

Инициализируйте SDK

Создание компонента встречи

Отображение встречи

Импортируйте SDK

Отображение встречи

Инициализируйте SDK

Загрузите модуль

Отображение встречи

Инициализируйте SDK

Инициализируйте и отобразите встречу

Инициализируйте и отобразите встречу

Инициализируйте SDK

Отображение встречи

Следующие шаги

Создание индивидуального опыта встречи