使用 UI Kit 构建

默认的 RealtimeKit 会议 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

使用 Swift Package Manager 安装 RealtimeKit UI Kit：

在 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 键用于 iOS 应用程序的 Info.plist 文件中，以声明应用程序支持的后台执行模式。此键是一个字符串数组，指定了应用程序支持的后台任务类型。通过声明后台模式，应用程序可以在后台继续运行并执行特定任务，即使它不在前台也是如此。

通过将依赖项添加到您的 pubspec.yaml 文件中来安装 RealtimeKit UI Kit：

flutter pub add realtimekit_ui

然后将包导入到您的项目中：

import 'package:realtimekit_ui/realtimekit_ui.dart';

在 <project root>/android/app/build.gradle 处的 build.gradle 文件中设置 compileSdkVersion 36 和 minSdkVersion 24：

defaultConfig {
  ...
  compileSdkVersion 36
  minSdkVersion 24
  ...
}

将 Kotlin 版本更改为 1.9.0：

ext.kotlin_version = '1.9.0'

在您的 Podfile 中将平台设置为 iOS 13.0 或更高版本：

platform :ios, '13.0'

将以下条目添加到 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>

可选： 如果您允许用户在聊天中下载附件，请将以下权限添加到您的 Info.plist：

<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>UIFileSharingEnabled</key>
<true/>

最低要求： 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

以下说明适用于 Release 构建。Debug 构建无需额外步骤即可工作。

编辑您的 android/gradle.properties 并添加以下行：

android.useFullClasspathForDexingTransform=true

在 strings.xml 文件中添加所需的 blob_provider_authority 字符串资源：

<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 中，编辑 release 配置并添加以下行以导入 ProGuard 配置：

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

后台音频和视频 (Android)

SDK 包含一个 Android 前台服务，当应用程序移至后台时，该服务会保持音频和视频继续运行。当参与者加入会议时，该服务会自动启动，并在他们离开时停止。

默认情况下，该服务已启用并带有通用通知文本。若要自定义通知或禁用服务，请在调用 initMeeting 之前将 keepAliveService 传递给 useRealtimeKitClient hook：

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)

iOS 屏幕共享需要 Broadcast Upload Extension 和额外的原生设置。请参阅 Screen Share Setup (iOS) 指南以获取完整说明。

原生设置完成后，将 iOSScreenshareEnabled={true} 传递给 RtkMeeting，以在 UI 中启用屏幕共享按钮：

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

初始化 SDK

将以下代码添加到你的 React 应用程序中：

App.tsxts

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

使用 Add participant API 来获取 authToken。

创建会议组件

使用 RtkMeeting 组件和 useRealtimeKitMeeting 挂钩。此挂钩提供了对包含所有会议状态和方法的 meeting 对象的访问权限。

MyMeetingUI.tsxts

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 导入用于加载 UI Kit 组件的辅助工具 -->
		<script type="module">
			import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js";
			defineCustomElements();
		</script>
		<!-- 通过 CDN 导入 RealtimeKit Core -->
		<script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>
	</head>
</html>

显示会议

使用 rtk-meeting 组件来渲染会议 UI：

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

初始化 SDK

传入 authToken 并将 meeting 对象连接到 UI 组件：

使用 Add participant 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 文件，允许你在组件的 HTML 文件中使用 UI 组件。

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，请在你的 tsconfig.json 中将 allowSyntheticDefaultImports 设置为 true。

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

显示会议

在你的模板文件（component.html）中加载 RtkMeeting 组件：

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

使用 Add participant API 来获取 authToken。

初始化并显示会议

使用你的授权令牌创建一个 RealtimeKitUI 实例，然后调用 startMeeting(completion:) 获取视图控制器。展示它以显示完整的会议 UI。

使用 Add participant API 获取 authToken。

import RealtimeKit
import RealtimeKitUI

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

let controller = rtkUI.startMeeting {
    // 会议结束或用户离开时调用
    self.dismiss(animated: true)
}
controller.modalPresentationStyle = .fullScreen
present(controller, animated: true)

初始化并显示会议

使用你的授权令牌创建一个 RtkMeetingInfo，将其包装在 RealtimeKitUIInfo 中，构建 UI Kit，然后调用 startMeeting()。

使用 Add participant 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()

初始化并显示会议

使用你的授权令牌创建一个 RtkMeetingInfo，将其包装在 RealtimeKitUIInfo 中，然后构建 UI Kit。返回的 RealtimeKitUI 对象是一个 Flutter 挂件（widget） — 请直接将其置于你的挂件树中。

使用 Add participant API 来获取 authToken。

import 'package:flutter/material.dart';
import 'package:realtimekit_ui/realtimekit_ui.dart';

final meetingInfo = RtkMeetingInfo(authToken: '<auth-token>');
final uiKitInfo = RealtimeKitUIInfo(meetingInfo);
final rtkUI = RealtimeKitUIBuilder.build(uiKitInfo: uiKitInfo);

// 将 rtkUI 放置在挂件树中
Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => rtkUI),
);

当你不再需要会议 UI 时，调用 RealtimeKitUIBuilder.dispose()。

初始化 SDK

使用核心 React Native 包中的 useRealtimeKitClient 挂钩来创建会议实例：使用 Add participant 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 集成。参与者现在可以在会话中互相看到和听到对方。

构建自定义会议体验

虽然默认 UI 提供了完整的会议体验，但你可能希望使用单个 UI Kit 组件构建自定义界面。这种方法使你能够完全控制布局、设计和用户体验。

若要构建你自己的自定义会议 UI，请按顺序遵循以下指南：

UI Kit 组件库 - 浏览可用组件及其视觉呈现
UI Kit 会议生命周期 - 会议的生命周期以及组件之间如何通信和同步
会话生命周期 - 了解不同的对等端状态和转换
会议对象详解 - 使用 Core SDK 访问会议数据和参与者信息
构建自定义 UI - 将所有内容结合起来以创建自定义的会议界面