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

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 で、アプリが対応するバックグラウンド実行モードを宣言するために使います。このキーは文字列の配列で、アプリがサポートするバックグラウンドタスクの種類を指定します。バックグラウンドモードを宣言すると、アプリはフォアグラウンドにないときもバックグラウンドで動作し、特定のタスクを実行できます。

最低要件: 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 の config plugins をインストールします。

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

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 のリリース設定を編集し、ProGuard 設定を取り込む次の行を追加します。

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

バックグラウンドの音声とビデオ（Android）

SDK には、アプリがバックグラウンドへ移っても音声とビデオを継続する Android のフォアグラウンドサービスが含まれます。サービスは参加者がミーティングに参加すると自動で開始し、退出すると停止します。

デフォルトでは、汎用の通知テキスト付きでサービスが有効です。通知をカスタマイズするかサービスを無効にするには、initMeeting を呼び出す前に useRealtimeKitClient フックへ keepAliveService を渡します。

const [meeting, initMeeting] = useRealtimeKitClient({
  keepAliveService: {
    enabled: true,                        // 完全に無効にする場合は false にします
    title: "Team call",                   // 通知のタイトル
    text: "Tap to return to your meeting", // 通知の本文
  },
});

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) を参照してください。

ネイティブ設定が完了したら、UI の画面共有ボタンを有効にするために、RtkMeeting に iOSScreenshareEnabled={true} を渡します。

<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>
		<!-- 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 コンポーネントでミーティング 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 を取得します。

SDK を初期化し、ミーティングを表示する

auth token で RealtimeKitUI のインスタンスを作成し、startMeeting(completion:) を呼び出して view controller を取得します。これを表示すると、ミーティング 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 {
    // Called when the meeting ends or the user leaves
    self.dismiss(animated: true)
}
controller.modalPresentationStyle = .fullScreen
present(controller, animated: true)

SDK を初期化し、ミーティングを表示する

auth token で 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()

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

次のステップ

デフォルトのミーティング UI で RealtimeKit を組み込みました。参加者はセッションで互いの映像と音声を使えます。

カスタムのミーティング体験を構築する

デフォルト UI でもミーティング体験は一通り揃いますが、個別の UI Kit コンポーネントで独自のインターフェイスを作ることもできます。レイアウト、デザイン、ユーザー体験を細かく制御できます。

独自のミーティング UI を作るには、次のガイドを順に参照してください。

UI Kit コンポーネントライブラリ - 利用できるコンポーネントと見た目を確認します
UI Kit のミーティングライフサイクル - ミーティングのライフサイクルと、コンポーネント間の通信・同期
セッションのライフサイクル - ピアの状態と遷移を理解します
Meeting オブジェクトの解説 - Core SDK でミーティングデータと参加者情報にアクセスします
独自 UI を構築する - これらを組み合わせて、カスタムのミーティングインターフェイスを作ります