← Cloudflare Realtime / realtime / realtimekit / core

Přístupy k získávání médií

RealtimeKit nabízí flexibilní způsoby získávání a správy médií účastníků (zvukových a video tracků). Ve výchozím nastavení SDK získává média automaticky při inicializaci. Některé případy použití však vyžadují přístup k trackům ještě před inicializací SDK nebo nezávisle na ní.

Ruční zpracování stop není na této platformě k dispozici.

Kdy použít vlastní získávání médií

Vlastní získávání médií je užitečné, když potřebujete:

Ověřte účastníky před připojením: Předávejte zvuk a video ověřovacím službám (například systémům pro dohled nad zkouškami ve vzdělávacích technologiích).
Předzpracování mediových datových toků: Před zahájením relace aplikujte filtry, transformace nebo kontroly kvality.
Integrace s externími službami: Odesílejte média do rozhraní API třetích stran pro analýzu nebo kontrolu souladu s předpisy.
Znovu použijte existující tracky: Použijte media tracky získané jinde ve vaší aplikaci.

Přístup 1: nejprve SDK (doporučeno)

Nejprve inicializujte SDK a poté přistupte k mediálním trackům z objektu meeting. Jde o nejjednodušší přístup vhodný pro většinu případů použití.

Kdy použít: Potřebujete přistupovat k mediálním trackům po inicializaci SDK kvůli logování, analýze nebo integraci s dalšími službami.

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);
	}
}

Přístup 2: nejprve média

Nejprve inicializujte obslužnou rutinu média pomocí RealtimeKitClient.initMedia(), poté jej při inicializaci předejte SDK. SDK získané mediální stopy znovu použije, aniž by musel opětovně žádat o oprávnění.

Kdy použít: Potřebujete získat mediální tracky několik minut předem, ještě před vstupem do relace. To se hodí zejména u EdTech platforem pro testování, kde chcete spustit systémy proktoringu nebo sledování s předstihem, aniž byste museli spravovat WebSocket spojení nebo řešit výpadky médií spojené s plnou inicializací SDK.

Přínosy:

SDK spravuje získávání médií a kompatibilitu prohlížeče.
Účastníci nejsou o udělení oprávnění žádáni dvakrát.
Mediální tracky se automaticky synchronizují mezi vaší validační službou a SDK.
Získejte média předem, aniž byste museli řešit složitost správy stavu připojení 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>;
}

Přínosy:

SDK spravuje získávání médií a kompatibilitu prohlížeče.
Účastníci nejsou o udělení oprávnění žádáni dvakrát.
Mediální tracky se automaticky synchronizují mezi vaší validační službou a SDK.
Získejte média předem, aniž byste museli řešit složitost správy stavu připojení 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);

Přínosy:

SDK spravuje získávání médií a kompatibilitu prohlížeče.
Účastníci nejsou o udělení oprávnění žádáni dvakrát.
Mediální tracky se automaticky synchronizují mezi vaší validační službou a SDK.
Získejte média předem, aniž byste museli řešit složitost správy stavu připojení 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);
	}
}

Přístup 3: vlastní správa (pokročilé)

Získávejte a spravujte mediální tracky nezávisle pomocí rozhraní API prohlížeče a poté je při zapínání zvuku a videa předejte do SDK.

Kdy použít: Máte již existující infrastrukturu pro správu médií nebo potřebujete mít plnou kontrolu nad získáváním médií.

Co zvážit:

Za zajištění kompatibility s prohlížeči a řešení změn API odpovídáte vy.
Aktualizace SDK automaticky neopraví problémy se získáváním médií ve vašem kódu.
Vyžaduje hlubší znalost WebRTC a mediálních API prohlížeče.

Inicializujte SDK s vypnutým zvukem a videem a poté je zapněte pomocí vlastních tracků:

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);
	}
}