独自のプラグインを作成する

このガイドでは、カスタムプラグインを作成し、Cloudflare RealtimeKit Core SDK を使ってミーティング内で実行する方法を説明します。

カスタムプラグインは、SDK に登録する DOM 要素です。参加者がプラグインを有効にすると、RealtimeKit はセッション内の全員に対してアクティブにし、ミーティングレイアウト内に描画します。

このページは SDK の初期化 と プラグイン のガイドを前提にしています。先にそちらを読んでください。

例では、必要なパッケージのインポートと SDK の初期化が済んでいる前提です。

プラグインは次の 2 つの部分で構成されます。

• コンポーネント: プラグインの UI とロジックを持つ DOM 要素（HTMLElement）です。
• 登録: SDK に渡す設定オブジェクトです。SDK はこの情報でコンポーネントを一覧表示、有効化、描画します。

RealtimeKit は、有効化の状態をセッション全体で同期します。参加者間でプラグインのデータを共有するには、collaborative stores を使います。

プラグインコンポーネントは HTMLElement である必要があります。カスタム要素として直接作成するか、コンテナ要素を作ってフレームワークのコンポーネントツリーをマウントします。

class MyCounterPlugin extends HTMLElement {
	connectedCallback() {
		this.innerHTML = `
			<div class="counter">
				<button id="increment">This is a counter plugin</button>
				<span id="value">0</span>
			</div>
		`;
	}
}

customElements.define("my-counter-plugin", MyCounterPlugin);

const pluginElement = document.createElement("my-counter-plugin");

import { createRoot } from "react-dom/client";

function CounterPlugin() {
	return <div className="counter">This is a counter plugin</div>;
}

const pluginElement = document.createElement("div");
createRoot(pluginElement).render(<CounterPlugin />);

import {
	createComponent,
	ApplicationRef,
	EnvironmentInjector,
} from "@angular/core";
import { CounterPluginComponent } from "./counter-plugin.component";

const pluginElement = document.createElement("div");

const componentRef = createComponent(CounterPluginComponent, {
	environmentInjector: this.injector,
	hostElement: pluginElement,
});

this.appRef.attachView(componentRef.hostView);

SDK を初期化するときに、セッションで利用できるプラグインを登録します。プラグイン設定の配列を defaults.plugins として渡し、手順 1 で作成した pluginElement を component に指定します。

RealtimeKitClient.init({
	authToken: "<auth_token>",
	defaults: {
		plugins: [
			{
				id: "counter",
				name: "Counter",
				icon: "https://example.com/counter.png",
				permissions: {
					canActivate: true,
					canDeactivate: true,
				},
				component: pluginElement,
			},
		],
	},
});

各設定フィールドの説明は、プラグインを登録する を参照してください。

登録後、プラグインは meeting.plugins.all に現れます。有効化すると、セッション内の全員に対してアクティブになります。

const plugin = meeting.plugins.all.get(pluginId);
await plugin.activate();

const plugins = useRealtimeKitSelector((m) => m.plugins);
const plugin = plugins.all.get(pluginId);
await plugin.activate();

Plugin オブジェクトは、状態が変わるときにイベントを発行します。有効化や無効化のタイミングで、コンポーネントのセットアップや破棄に使います。

const plugin = meeting.plugins.all.get(pluginId);

plugin.on("enabled", () => {
	// The plugin became active for the local participant
});

plugin.on("closed", () => {
	// The plugin was deactivated for the local participant
});

プラグインイベントの一覧は、プラグインイベントを購読する を参照してください。

各参加者はプラグインコンポーネントのコピーをそれぞれ実行します。状態を共有する仕組みが必要です。RealtimeKit には、リアルタイム通信向けの組み込みオプションが 2 つあります。

• collaborative stores — セッション全体で状態を同期する共有キーバリューストアです。
• メッセージブロードキャスト — ミーティング内の全参加者へカスタムイベントを送信します。

要件が単純なプラグインでは、これらの組み込み API で共同作業のロジックをまかなえます。

// Create or get a store for your plugin
const store = meeting.stores.create("counter");

// Update a value for all participants
await store.set("value", 1);

// React to updates from any participant
store.subscribe("value", ({ value }) => {
	document.querySelector("#value").textContent = value;
});

より高機能な共同作業が必要な場合は、専用のサードパーティフレームワークと組み合わせられます。

• Plugin と Plugins の完全なリファレンスは、プラグイン API を確認してください。
• collaborative stores を使って、より豊かな共有体験を構築できます。
• 動作する React の実装は、RealtimeKit plugins の例 ↗ から始められます。