← Cloudflare Realtime / realtime / realtimekit / core

Zobrazení aktivních řečníků

RealtimeKit automaticky rozpoznává účastníky, kteří ve schůzce aktivně mluví, a sleduje je. V uživatelském rozhraní aplikace pak podle potřeby zobrazíte buď jednoho, nebo více aktivních mluvčích.

Aktivní mluvčí v RealtimeKit je vzdálený účastník s výraznou zvukovou aktivitou v daném okamžiku. SDK udržuje dva typy dat, které vám pomohou při tvorbě uživatelského rozhraní:

Aktivní řečník, jeden vzdálený účastník, který aktuálně mluví nejvýrazněji.
Aktivní účastníci, sada vzdálených účastníků s nejvýraznější zvukovou aktivitou.

SDK automaticky aktualizuje tyto vlastnosti a odebírá média účastníků podle toho, jak se mění hovorová aktivita. Upřednostňuje výraznou zvukovou aktivitu, takže účastník, který momentálně není v rozhraní vidět, může nahradit viditelného účastníka, pokud se jeho zvuk stane aktivnějším.

Maximální počet účastníků v active mapa je o jedno menší, než je velikost mřížky nastavená u místního účastníka v Preset. Tím se v UI vyhradí místo pro místního účastníka. Pokud je například velikost mřížky 6, active mapa obsahuje maximálně 5 vzdálených účastníků.

Zobrazení jednoho aktivního řečníka

Použijte lastActiveSpeaker a zobrazit tak naposledy aktivního účastníka ve svém uživatelském rozhraní. Aktuálního aktivního mluvčího získáte pomocí useRealtimeKitSelector hook:

const activeSpeaker = useRealtimeKitSelector((meeting) => {
	const activeSpeakerId = meeting.participants.lastActiveSpeaker;
	return meeting.participants.joined.get(activeSpeakerId);
});

if (activeSpeaker) {
	// Render the active speaker video
}

useRealtimeKitSelector hook automaticky aktualizuje vaši komponentu při změně aktivního mluvčího.

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK také vysílá activeSpeaker událost na meeting.participants když se jiný účastník stane aktivním mluvčím. Pro imperativní aktualizace nebo vedlejší efekty naslouchejte této události:

meeting.participants.on("activeSpeaker", ({ peerId, volume }) => {
	const activeSpeaker = meeting.participants.joined.get(peerId);
	// Update your UI or trigger side effects
});

Použijte lastActiveSpeaker a zobrazit tak naposledy aktivního účastníka ve svém uživatelském rozhraní.

Přistupte k lastActiveSpeaker vlastnost pro získání ID účastníka a poté z mapy připojených účastníků načtěte objekt daného účastníka:

const activeSpeakerId = meeting.participants.lastActiveSpeaker;
const activeSpeaker = meeting.participants.joined.get(activeSpeakerId);

if (activeSpeaker) {
	// Render the active speaker video
}

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK vysílá activeSpeaker událost na meeting.participants když se jiný účastník stane aktivním mluvčím:

meeting.participants.on("activeSpeaker", ({ peerId, volume }) => {
	const activeSpeaker = meeting.participants.joined.get(peerId);
	// Update your UI to display the new active speaker
});

Použijte lastActiveSpeaker a zobrazit tak naposledy aktivního účastníka ve svém uživatelském rozhraní.

Přistupte k lastActiveSpeaker vlastnost pro získání ID účastníka a poté z mapy připojených účastníků načtěte objekt daného účastníka:

const activeSpeakerId = meeting.participants.lastActiveSpeaker;
const activeSpeaker = meeting.participants.joined.get(activeSpeakerId);

if (activeSpeaker) {
	// Render the active speaker video
}

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK vysílá activeSpeaker událost na meeting.participants když se jiný účastník stane aktivním mluvčím:

meeting.participants.on("activeSpeaker", ({ peerId, volume }) => {
	const activeSpeaker = meeting.participants.joined.get(peerId);
	// Update your UI to display the new active speaker
});

Použijte activeSpeaker a zobrazit tak naposledy aktivního účastníka ve svém uživatelském rozhraní.

Přistupte k activeSpeaker vlastnost pro získání aktuálně aktivního mluvčího:

val activeSpeaker = meeting.participants.activeSpeaker

if (activeSpeaker != null) {
	// Render the active speaker video
}

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK vysílá událost, když se aktivním mluvčím stane jiný účastník. Tuto událost zachytíte pomocí RtkParticipantsEventListener:

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {
	override fun onActiveSpeakerChanged(participant: RtkRemoteParticipant?) {
		// Update your UI to display the new active speaker
	}
})

Použijte activeSpeaker a zobrazit tak naposledy aktivního účastníka ve svém uživatelském rozhraní.

Přistupte k activeSpeaker vlastnost pro získání aktuálně aktivního mluvčího:

let activeSpeaker = meeting.participants.activeSpeaker

if let activeSpeaker = activeSpeaker {
	// Render the active speaker video
}

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK vysílá událost, když se aktivním mluvčím stane jiný účastník. Tuto událost zachytíte implementací RtkParticipantsEventListener:

extension MeetingViewModel: RtkParticipantsEventListener {
	func onActiveSpeakerChanged(participant: RtkRemoteParticipant?) {
		// Update your UI to display the new active speaker
	}
}

meeting.addParticipantsEventListener(self)

Použijte lastActiveSpeaker a zobrazit tak naposledy aktivního účastníka ve svém uživatelském rozhraní. Aktuálního aktivního mluvčího získáte pomocí useRealtimeKitSelector hook:

const activeSpeaker = useRealtimeKitSelector((meeting) => {
	const activeSpeakerId = meeting.participants.lastActiveSpeaker;
	return meeting.participants.joined.get(activeSpeakerId);
});

if (activeSpeaker) {
	// Render the active speaker video
}

useRealtimeKitSelector hook automaticky aktualizuje vaši komponentu při změně aktivního mluvčího.

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

meeting.participants.on("activeSpeaker", (participant) => {
	// Update your UI or trigger side effects
});

Zobrazení více aktivních řečníků

Použijte active mapu pro zobrazení více účastníků s výraznou zvukovou aktivitou, obvykle v mřížkovém rozložení. K aktuálním aktivním účastníkům přistupujte pomocí useRealtimeKitSelector hook:

const activeMap = useRealtimeKitSelector(
	(meeting) => meeting.participants.active,
);

const activeParticipants = activeMap.toArray();

// Render active participants in your grid
activeParticipants.forEach((participant) => {
	// Render participant video tile
});

useRealtimeKitSelector hook automaticky aktualizuje vaši komponentu při změně množiny aktivních mluvčích.

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK také vysílá participantsUpdate událost na active mapa při změně sady aktivních mluvčích. Pro imperativní aktualizace nebo vedlejší efekty při změně active mapa změní, naslouchejte této události:

meeting.participants.active.on("participantsUpdate", () => {
	const activeParticipants = meeting.participants.active.toArray();
	// Perform side effects
});

(Volitelné) Pokud vaše aplikace potřebuje reagovat na přidání nebo odebrání konkrétního účastníka do aktivní mapy nebo z ní, naslouchejte participantJoined a participantLeft na meeting.participants.active mapu.

meeting.participants.active.on("participantJoined", (participant) => {
	console.log("Participant added to active map:", participant.id);
});

meeting.participants.active.on("participantLeft", (participant) => {
	console.log("Participant removed from active map:", participant.id);
});

Použijte active mapu pro zobrazení více účastníků s výraznou zvukovou aktivitou, obvykle v mřížkovém rozložení.

const activeParticipants = meeting.participants.active.toArray();

// Render active participants in your grid
activeParticipants.forEach((participant) => {
	// Render participant video tile
});

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK vysílá participantsUpdate událost na active mapa při změně sady aktivních mluvčích. Naslouchejte této události, načtěte aktualizované pole a znovu vykreslete svou mřížku:

meeting.participants.active.on("participantsUpdate", () => {
	const activeParticipants = meeting.participants.active.toArray();
	// Update your grid UI with the new active participants
});

meeting.participants.active.on("participantJoined", (participant) => {
	console.log("Participant added to active map:", participant.id);
});

meeting.participants.active.on("participantLeft", (participant) => {
	console.log("Participant removed from active map:", participant.id);
});

Použijte active mapu pro zobrazení více účastníků s výraznou zvukovou aktivitou, obvykle v mřížkovém rozložení.

const activeParticipants = meeting.participants.active.toArray();

// Render active participants in your grid
activeParticipants.forEach((participant) => {
	// Render participant video tile
});

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK vysílá participantsUpdate událost na active mapa při změně sady aktivních mluvčích. Naslouchejte této události, načtěte aktualizované pole a znovu vykreslete svou mřížku:

meeting.participants.active.on("participantsUpdate", () => {
	const activeParticipants = meeting.participants.active.toArray();
	// Update your grid UI with the new active participants
});

meeting.participants.active.on("participantJoined", (participant) => {
	console.log("Participant added to active map:", participant.id);
});

meeting.participants.active.on("participantLeft", (participant) => {
	console.log("Participant removed from active map:", participant.id);
});

Použijte active seznam pro zobrazení více účastníků s výraznou zvukovou aktivitou v mřížkovém rozložení:

val activeParticipants = meeting.participants.active

// Render active participants in your grid
activeParticipants.forEach { participant ->
	// Render participant video tile
}

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK vysílá událost, když se změní sada aktivních mluvčích. Tuto událost zachytíte pomocí RtkParticipantsEventListener:

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {
	override fun onActiveParticipantsChanged(active: List<RtkRemoteParticipant>) {
		// Update your grid UI with the new active participants
	}
})

Použijte active seznam pro zobrazení více účastníků s výraznou zvukovou aktivitou, obvykle v mřížkovém rozložení:

let activeParticipants = meeting.participants.active

// Render active participants in your grid
for participant in activeParticipants {
	// Render participant video tile
}

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

SDK vysílá událost, když se změní sada aktivních mluvčích. Tuto událost zachytíte implementací RtkParticipantsEventListener:

extension MeetingViewModel: RtkParticipantsEventListener {
	func onActiveParticipantsChanged(active: [RtkRemoteParticipant]) {
		// Update your grid UI with the new active participants
	}
}

meeting.addParticipantsEventListener(self)

const activeMap = useRealtimeKitSelector(
	(meeting) => meeting.participants.active,
);

const activeParticipants = activeMap.toArray();

// Render active participants in your grid
activeParticipants.forEach((participant) => {
	// Render participant video tile
});

useRealtimeKitSelector hook automaticky aktualizuje vaši komponentu při změně množiny aktivních mluvčích.

Viz Zobrazení videí účastníků a zjistit tak, jak vykreslit video účastníka ve svém uživatelském rozhraní.

meeting.participants.active.on("participantsUpdate", () => {
	const activeParticipants = meeting.participants.active.toArray();
	// Perform side effects
});

meeting.participants.active.on("participantJoined", (participant) => {
	console.log("Participant added to active map:", participant.id);
});

meeting.participants.active.on("participantLeft", (participant) => {
	console.log("Participant removed from active map:", participant.id);
});

Vizualizace zvukové aktivity

Pomocí zvukových dat z audio tracku účastníka můžete vytvářet vlastní vizualizace zvuku. Z audio tracku extrahujte informace o hlasitosti a vypočítejte z nich řadu amplitud. Tato data pak použijte k vykreslení waveforem, indikátorů řeči nebo měřičů úrovně zvuku ve svém UI.

Vizualizace hlasové aktivity není na Androidu podporována.

Vizualizace hlasové aktivity není podporována na iOS.

Vizualizace hlasové aktivity není podporována na React Native.

Vysvětlení objektu Meeting - Pochopit strukturu objektu schůzky a dostupné vlastnosti.
Vzdálený účastník - Zjistěte více o vzdálených účastnících relace a o tom, jak zobrazit jejich video.

Zobrazení aktivních řečníků

Zobrazení jednoho aktivního řečníka

Zobrazení více aktivních řečníků

Vizualizace zvukové aktivity

Související zdroje