メディア取得の方法

RealtimeKit では、参加者のメディア（音声トラックとビデオトラック）を柔軟に取得・管理できます。デフォルトでは、SDK を初期化するとメディア取得は自動で行われます。ただし、SDK の初期化より前、または初期化とは独立してメディアトラックにアクセスしたい場合もあります。

カスタムのメディア取得が向いている場合

カスタムのメディア取得は、次のようなときに役立ちます。

参加前に参加者を検証する: 音声とビデオを検証サービスへ渡します（例: EdTech の試験における監督システム）。
メディアストリームを事前処理する: セッション開始前にフィルター、変換、品質チェックを適用します。
外部サービスと連携する: 分析やコンプライアンス確認のため、メディアをサードパーティ API へ送ります。
既存のトラックを再利用する: アプリケーションの別の場所で取得したメディアトラックを使います。

方法 1: SDK 先行（推奨）

先に SDK を初期化し、ミーティングオブジェクトからメディアトラックにアクセスします。いちばん簡単な方法で、多くの用途に適しています。

使う場面: ログ、分析、ほかのサービスとの連携など、SDK 初期化のあとにメディアトラックへアクセスする場合。

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

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

    useEffect(() => {
    	initMeeting({ authToken: "<auth-token>" });
    }, []);

    useEffect(() => {
        if(meeting){
            console.log('audioTrack:: ', meeting.self.audioTrack);
            console.log('videoTrack:: ', meeting.self.videoTrack);
        }

    }, [meeting])

    return <div>Your meeting component comes here</div>;

}

const authToken = "<auth-token>";
const meeting = await RealtimeKitClient.init({
	authToken,
});

console.log("audioTrack:: ", meeting.self.audioTrack);
console.log("videoTrack:: ", meeting.self.videoTrack);

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

	async ngAfterViewInit() {
		const meeting = await RealtimeKitClient.init({
			authToken: "<auth-token>",
		});

		console.log("audioTrack:: ", meeting.self.audioTrack);
		console.log("videoTrack:: ", meeting.self.videoTrack);
	}
}

方法 2: メディア先行

先に RealtimeKitClient.initMedia() でメディアハンドラーを初期化し、SDK 初期化時に渡します。SDK は取得済みのメディアトラックを再利用し、権限の再確認はしません。

使う場面: セッション参加の数分前からメディアトラックを取得したい場合です。EdTech の試験プラットフォームなどで、SDK を完全初期化したときの WebSocket 接続の管理やメディア切断の処理をせずに、監督や追跡を早めに始めたいときに向いています。

利点:

SDK がメディア取得とブラウザー互換性を管理します。
参加者に権限確認が 2 回出ません。
検証サービスと SDK のあいだで、メディアトラックが自動で同期します。
SDK の接続状態を管理する複雑さなしに、メディアを早めに取得できます。

import { useEffect, useState } from 'react';
import RealtimeKitClient from '@cloudflare/realtimekit';
import type { RTKSelfMedia } from '@cloudflare/realtimekit';
import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';

export default function App() {
	const [meeting, initMeeting] = useRealtimeKitClient();
    const [media, setMedia] = useState<RTKSelfMedia>();
    const [readyToInitializeSDK, setReadyToInitializeSDK] = useState(false);

    useEffect(() => {
        async function initMediaWithoutSDKInitialization(){
            const mediaFromSDK = await RealtimeKitClient.initMedia({
              video : true,
              audio: true,
            });

            setMedia(mediaFromSDK);

            console.log('audioTrack', mediaFromSDK.audioTrack);
            console.log('videoTrack', mediaFromSDK.videoTrack);

            setTimeout(() => {
                // Once you are ready to initialize the SDK, set this to true
                // To mimic a real world scenario, we are setting it to true after 5 seconds
                setReadyToInitializeSDK(true);
            }, 5000);
        }
        if(!media){
            initMediaWithoutSDKInitialization();
        }
    }, [media]);

    useEffect(() => {
        if(meeting){
            return;
        }
        if(!readyToInitializeSDK){
            return;
        }
        if(!media){
            return;
        }
    	initMeeting({ authToken: "<auth-token>", defaults: { mediaHandler: media } });
    }, [meeting, readyToInitializeSDK, media]);

    return <div>Your meeting component comes here</div>;
}

利点:

SDK がメディア取得とブラウザー互換性を管理します。
参加者に権限確認が 2 回出ません。
検証サービスと SDK のあいだで、メディアトラックが自動で同期します。
SDK の接続状態を管理する複雑さなしに、メディアを早めに取得できます。

const mediaFromSDK = await RealtimeKitClient.initMedia({
	video: true,
	audio: true,
});

setTimeout(() => {
	const authToken = "<auth-token>";
	RealtimeKitClient.init({
		authToken,
		defaults: {
			mediaHandler: mediaFromSDK,
		},
	}).then((meeting) => {
		// next - meeting.join();
	});
}, 5000);

利点:

SDK がメディア取得とブラウザー互換性を管理します。
参加者に権限確認が 2 回出ません。
検証サービスと SDK のあいだで、メディアトラックが自動で同期します。
SDK の接続状態を管理する複雑さなしに、メディアを早めに取得できます。

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

	async ngAfterViewInit() {
		const mediaFromSDK = await RealtimeKitClient.initMedia({
			video: true,
			audio: true,
		});

		setTimeout(() => {
			const authToken = "<auth-token>";
			RealtimeKitClient.init({
				authToken,
				defaults: {
					mediaHandler: mediaFromSDK,
				},
			}).then((meeting) => {
				// next - meeting.join();
			});
		}, 5000);
	}
}

方法 3: 自己管理（上級）

ブラウザー API でメディアトラックを独自に取得・管理し、音声とビデオを有効にするときに SDK へ渡します。

使う場面: 既存のメディア管理基盤がある場合や、メディア取得を完全に制御したい場合。

注意点:

ブラウザー互換性と API 変更の対応は、自分で行う必要があります。
SDK の更新だけでは、自分のコードのメディア取得の問題は自動では直りません。
WebRTC とブラウザーのメディア API について、より深い知識が必要です。

音声とビデオを無効にした状態で SDK を初期化し、カスタムトラックで有効にします。

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

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

    useEffect(() => {
    	initMeeting({ authToken: "<auth-token>" });
    }, []);

    useEffect(() => {
        async function setupMediaTracks(){
            if (meeting) {
                let audioTrack; // Put the audioTrack that you acquired from browser here
                let videoTrack; // Put the videoTrack that you acquired from browser here
                await meeting.self.enableAudio(audioTrack);
                await meeting.self.enableVideo(videoTrack);
                // await meeting.self.join();
            }
        }
        setupMediaTracks();

    }, [meeting])

    return <div>Your meeting component comes here</div>;

}

const authToken = "<auth-token>";
const meeting = await RealtimeKitClient.init({
	authToken,
});

let audioTrack; // Put the audioTrack that you acquired from browser here
let videoTrack; // Put the videoTrack that you acquired from browser here
await meeting.self.enableAudio(audioTrack);
await meeting.self.enableVideo(videoTrack);

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

	async ngAfterViewInit() {
		const meeting = await RealtimeKitClient.init({
			authToken: "<auth-token>",
		});

		let audioTrack; // Put the audioTrack that you acquired from browser here
		let videoTrack; // Put the videoTrack that you acquired from browser here
		await meeting.self.enableAudio(audioTrack);
		await meeting.self.enableVideo(videoTrack);
	}
}