← Cloudflare Realtime / realtime / realtimekit / core

Подходы к получению медиа

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, где заранее нужно включить системы прокторинга или отслеживания, не управляя при этом WebSocket-соединениями и не обрабатывая отключения медиа, характерные для полной инициализации SDK.

Преимущества:

SDK управляет получением медиаданных и совместимостью с браузером.
У участников не запрашивают разрешения дважды.
Медиатреки автоматически синхронизируются между вашей службой валидации и 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 управляет получением медиаданных и совместимостью с браузером.
У участников не запрашивают разрешения дважды.
Медиатреки автоматически синхронизируются между вашей службой валидации и 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 управляет получением медиаданных и совместимостью с браузером.
У участников не запрашивают разрешения дважды.
Медиатреки автоматически синхронизируются между вашей службой валидации и 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);
	}
}