クイックスタート

前提条件

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

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

RealtimeKit アプリを作成する

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

注: ステージング環境と本番環境では、別のアプリを作成することを推奨します。

ミーティングを作成する

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

参加者を追加する

Preset を作成する

Preset は、ユーザーが持つ権限を定義します。詳細は Concepts ガイドを参照してください。新しい Preset は Presets API または RealtimeKit ダッシュボード ↗ で作成できます。

注: ダッシュボードでアプリを作成した場合、この手順はスキップできます。デフォルトの Preset はすでに用意されています。

注: Preset は複数のミーティングで再利用できます。ロール（admin や viewer など）を一度定義し、任意の数のミーティングの参加者に適用します。

参加者を追加する

上で作成した Meeting ID と、利用可能な選択肢から選んだ Preset Name を使って、参加者をミーティングに追加します。

レスポンスには authToken が含まれます。Client 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 に auth token を付けます。

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

ブラウザーでアプリを開きます。ミーティングに参加するには、プレビュー URL に auth token を付けます。

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

アプリモジュール（通常は app.module.ts）に RTKComponentsModule を読み込みます。これで、コンポーネントの 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>

ミーティングを初期化する

	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

ブラウザーでアプリを開きます。ミーティングに参加するには、プレビュー URL に auth token を付けます。

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