Core SDK で構築する

Core SDK を初期化する

Core SDK を組み込むには、参加者の auth token で初期化し、提供される SDK API でセッション内のピアを制御します。

初期化の手順は技術スタックによって少し異なります。次から使う技術スタックを選んでください。

クライアント SDK をインストールします。

npm i @cloudflare/realtimekit-react

useRealtimeKitClient フックで SDK を初期化します。

import { useEffect } from 'react';
import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';

export default function App() {
	const [meeting, initMeeting] = useRealtimeKitClient();

    useEffect(() => {
      const meetingDefaultOptions = {
        audio: true,
        video: true,
      };

    	initMeeting({
        authToken: "<auth-token>",
        defaults: meetingDefaultOptions, // optional
      });
    }, []);

    useEffect(() => {
    	// next - if (meeting) meeting.join();
    }, [meeting])

    return <div></div>;

}

Add participant API で authToken を取得します。

クライアント SDK をインストールします。

npm i @cloudflare/realtimekit

CDN も使えます。

<script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>

RealtimeKitClient.init で SDK を初期化できます。

	const authToken = <auth-token>;

  const meetingDefaultOptions = {
    audio: true,
    video: true,
  };

	RealtimeKitClient.init({
	  authToken,
	  defaults: meetingDefaultOptions, // optional
	}).then((meeting) => {
		// next - meeting.join();
	});

Add participant API で authToken を取得します。

クライアント SDK をインストールします。

npm i @cloudflare/realtimekit-angular

RealtimeKitClient.init で SDK を初期化できます。

class AppComponent {
	title = "MyProject";
	@ViewChild("myid") meetingComponent: RtkMeeting;
	rtkMeeting: RealtimeKitClient;

	async ngAfterViewInit() {
		const meetingDefaultOptions = {
			audio: true,
			video: true,
		};
		const meeting = await RealtimeKitClient.init({
			authToken: "<auth-token>",
			defaults: meetingDefaultOptions, // optional
		});
		// next - meeting.join();
	}
}

Add participant API で authToken を取得します。

RealtimeKitMeetingBuilder ヘルパーで RealtimeKitClient のインスタンスを取得し、RealtimeKit SDK を初期化します。

val meeting = RealtimeKitMeetingBuilder.build(activity)

Add participant API で取得した有効な参加者 authToken を、RtkMeetingInfo クラスのミーティングプロパティに設定します。

val meetingInfo =
  RtkMeetingInfo(
    authToken = authToken,
    enableAudio = true,
    enableVideo = true,
  )

init() メソッドを呼び出してミーティングを初期化します。RealtimeKit のミーティングサーバーとの接続が確立されます。

meeting.init(
  meetingInfo,
  onInitCompleted = { ... },
  onInitFailed = { ... },
)

RealtimeKitClient のインスタンスを作成して RealtimeKit SDK を初期化します。

let meeting = RealtimeKitiOSClientBuilder().build()

ミーティングイベントのコールバックを受け取るために、必要なリスナーを追加します。

meeting.addMeetingRoomEventListener(meetingRoomEventListener: self)
meeting.addParticipantsEventListener(participantsEventListener: self)
meeting.addSelfEventListener(selfEventListener: self)

Add participant API で取得した有効な参加者 authToken を、RtkMeetingInfo クラスのミーティングプロパティに設定します。

let meetingInfo = RtkMeetingInfo(authToken: authToken,
                                  enableAudio: true,
                                  enableVideo: true)

doInit() メソッドを呼び出してミーティングを初期化します。RealtimeKit のミーティングサーバーとの接続が確立されます。

meeting.doInit(meetingInfo: meetingInfo, onSuccess: {}, onFailure: {_ in})

useRealtimeKitClient フックで RealtimeKit SDK を初期化します。

import React from 'react';
import { View, Text } from 'react-native';
import { useRealtimeKitClient, RealtimeKitProvider } from '@cloudflare/realtimekit-react-native';

export default function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();
  React.useEffect(() => {
    const init = async () => {
      const meetingOptions = {
        audio: true,
        video: true,
      };
      await initMeeting({
        authToken: 'YourAuthToken',
        defaults: meetingOptions,
      });
    };
    init();
    // next - if (meeting) meeting.joinRoom();
  }, []);

  if (meeting) {
    return (
      <RealtimeKitProvider value={meeting}>
        {/* Render your components here */}
      </RealtimeKitProvider>
    );
  } else {
    return (
      <View>
        <Text>Loading...</Text>
      <View>
    )
  }
}

Add participant API で authToken を取得します。

詳細オプション

SDK の初期化時に、ミーティングの既定値、メディア品質、画面共有の設定、simulcast 設定、ICE 接続の動作、ログ、エラー処理を任意で構成できます。

init({
	authToken: "<auth_token>",
	defaults: {
		video: true,
		audio: true,
		mediaConfiguration: {
			// Configure custom video quality (e.g., 1080p). Disable simulcast using `simulcastConfig` override for single-layer streaming.
			video: {
				width: { ideal: 1920 },
				height: { ideal: 1080 },
				frameRate: { ideal: 15 },
			},
			screenshare: {
				frameRate: { ideal: 15, max: 30 }, // Default 5
				displaySurface: "monitor", // Given surface is suggested to the end user
			},
		},
	},
	overrides: {
		simulcastConfig: {
			// If you want to disable simulcast
			disable: false,
			// If you want to pass custom simulcast encodings
			encodings: [
				{
					rid: "f", // full / highest quality
					scaleResolutionDownBy: 1.0,
					maxBitrate: 2500000, // ~2.5 Mbps
				},
				{
					rid: "h", // half
					scaleResolutionDownBy: 2.0,
					maxBitrate: 900000, // ~0.9 Mbps
				},
				{
					rid: "q", // quarter
					scaleResolutionDownBy: 4.0,
					maxBitrate: 250000, // ~0.25 Mbps
				},
			],
		},
		forceRelay: false, // forceRelay, if true, TURN will be preferred over STUN
	},
	modules: {
		devTools: {
			logs: true, // Prints SDK logs to console, Useful in initial integration phase
		},
	},
	onError: (error) => {
		console.error(error); // SDK errors, Useful in detecting common issues
	},
});

次のオプションを defaults として渡すと、既定の動作を変更できます。

オプション	説明	型	必須
video	デフォルトでビデオを有効にするかどうか	`boolean`	false
audio	デフォルトで音声を有効にするかどうか	`boolean`	false
mediaConfiguration	カスタムのメディア品質制約を渡せます	`MediaConfiguration`	false
autoSwitchAudioDevice	新しく接続したマイクまたはスピーカーへ自動で切り替えます	`boolean`	false
isNonPreferredDevice	特定のデバイスを「優先しない」に設定できます	`(device: MediaDeviceInfo) => boolean`	false
recording	録画設定を構成できます	RecordingConfig	false

型のリファレンスです。

interface AudioQualityConstraints {
	echoCancellation?: boolean;
	noiseSuppression?: boolean;
	autoGainControl?: boolean;
	enableStereo?: boolean;
	enableHighBitrate?: boolean;
}

interface VideoQualityConstraints {
	width: { ideal: number };
	height: { ideal: number };
	frameRate?: { ideal: number };
}

interface ScreenshareQualityConstraints {
	width?: { max: number };
	height?: { max: number };
	frameRate?: {
		ideal: number;
		max: number;
	};
	displaySurface?: "window" | "monitor" | "browser";
	selfBrowserSurface?: "include" | "exclude";
}

interface MediaConfiguration {
	video?: VideoQualityConstraints;
	audio?: AudioQualityConstraints;
	screenshare?: ScreenshareQualityConstraints;
}

interface RecordingConfig {
	fileNamePrefix?: string;
	videoConfig?: {
		height?: number;
		width?: number;
		codec?: string;
	};
}

interface DefaultOptions {
	video?: boolean;
	audio?: boolean;
	mediaConfiguration?: MediaConfiguration;
	isNonPreferredDevice?: (device: MediaDeviceInfo) => boolean;
	autoSwitchAudioDevice?: boolean;
	recording?: RecordingConfig;
}

interface Overrides {
	simulcastConfig?: {
		disable?: boolean;
		encodings?: RTCRtpEncodingParameters[];
	};
	forceRelay?: boolean;
}