← Cloudflare Realtime / realtime / realtimekit

Быстрый старт

Предварительные требования

Чтобы интегрировать RealtimeKit в своё приложение, у вас должен быть Аккаунт Cloudflare ↗.

Следуйте Руководство по созданию токена API чтобы создать новый токен через Панель управления Cloudflare ↗.
При настройке разрешений убедитесь, что Realtime / Realtime Admin разрешения выбраны.
Настройте любые дополнительные политики доступа и ограничения по мере необходимости для вашего сценария использования.

Необязательно: Как вариант, создавайте токены программно через API. Убедитесь, что ваша политика доступа включает Realtime разрешение.

Установка

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

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

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

Создание RealtimeKit App

Приложение можно создать из Cloudflare Dashboard ↗, нажав Create App.

Необязательно: Вы также можете использовать наш Справочник по API для создания приложения:

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"}'

Примечание: Рекомендуем создавать отдельные приложения для сред staging и production.

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

Используйте наш Meetings API чтобы создать встречу. Мы будем использовать ID из ответа на последующих шагах.

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

Создание пресета

Пресеты определяют, какие права доступа должны быть у пользователя. Подробнее см. в руководстве Concepts. Создать новые пресеты можно с помощью Presets API либо через RealtimeKit Dashboard ↗.

Примечание: Пропустите этот шаг, если вы создали приложение в панели управления: пресеты по умолчанию уже настроены для вас.

Примечание: Пресеты можно использовать повторно в нескольких встречах. Определите роль (например, admin или viewer) один раз и применяйте её к участникам в любом количестве встреч.

Добавьте участника

Участник добавляется во встречу с помощью Meeting ID созданный выше, и выбрав Preset Name из доступных вариантов.

Ответ включает authToken который который клиентский SDK использует, чтобы добавить этого участника во встречу комнату.

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>"
}'

Подробнее о добавлении участников читайте в Справочник по API.

Интеграция фронтенда

Теперь вы можете добавить RealtimeKit Client SDK в своё приложение.

В вашем React-приложении добавьте следующий код:


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

}

Замените <auth-token> с authToken, полученным на предыдущем шаге.

Запустите приложение и перейдите на страницу встречи, чтобы увидеть RealtimeKit Client SDK в действии.

npm run dev

Необязательно: Если вы используете наш готовый шаблон, выполните следующую команду для запуска приложения:

npm i -g vite && npm run dev

Откройте приложение в браузере. Чтобы присоединиться к встрече, добавьте свой токен аутентификации к URL-адресу предварительного просмотра:

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

В вашем HTML-приложении добавьте следующий код:

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

Замените <auth-token> с authToken, полученным на предыдущем шаге.

Запустите приложение и перейдите на страницу встречи, чтобы увидеть RealtimeKit Client SDK в действии.

npm run dev

Необязательно: Если вы используете наш готовый шаблон, выполните следующую команду для запуска приложения:

npm i -g vite && npm run dev

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

Загрузите RTKComponentsModule в модуль вашего приложения. Обычно это файл app.module.ts. Это позволяет использовать компоненты UI Kit в 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>

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

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

Замените <auth-token> с authToken, полученным на предыдущем шаге.

Запустите приложение и перейдите на страницу встречи, чтобы увидеть RealtimeKit Client SDK в действии.

npm run dev

Необязательно: Если вы используете наш готовый шаблон, выполните следующую команду для запуска приложения:

npm i -g vite && npm run dev

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

Быстрый старт

Предварительные требования

Установка

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

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

Создание RealtimeKit App

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

Add Participants

Создание пресета

Добавьте участника

Интеграция фронтенда