← Cloudflare Realtime / realtime / realtimekit / core

Vzdálení účastníci

Tento návod vysvětluje, jak ve schůzkách RealtimeKit přistupovat k datům účastníků, zobrazovat videa, zpracovávat události a spravovat oprávnění účastníků.

Objekt účastníka obsahuje veškeré informace týkající se konkrétního účastníka, včetně informací o mřížce a mediálních datových proudech, jménu a stavových proměnných jednotlivých účastníků. Je přístupný přes meeting.participants.

Vlastnosti

Vlastnosti metadat

id - participantId účastníka (také peerId)
userId - userId účastníka
name - Jméno účastníka
picture - Obrázek účastníka (pokud existuje)
customParticipantId - Libovolné ID, které lze nastavit k identifikaci účastníka
isPinned - Nastaveno na true pokud je účastník připnutý
presetName - Název předvolby přiřazené účastníkovi

Vlastnosti metadat

id - Identifikátor specifický pro relaci, vygenerovaný při připojení účastníka k relaci schůzky (známý také jako peerId)
userId - Trvalý identifikátor účastníka vygenerovaný při jeho přidání do schůzky
name - Zobrazované jméno účastníka
picture - Řetězec URL profilového obrázku účastníka (pokud existuje)
customParticipantId - Vlastní identifikátor, který může zákazník nastavit při přidávání účastníka do schůzky
isHost - Boolean hodnota udávající, zda má tento účastník oprávnění hostitele
isPinned - Zda je tento účastník aktuálně připnutý ve schůzce
presetName - Název předvolby použité u tohoto účastníka při jeho přidávání do schůzky
stageStatus - Udává aktuální stav účastníka na pódiu (platí pouze pro schůzky s povoleným pódiem)

Vlastnosti metadat

id - Identifikátor specifický pro relaci, vygenerovaný při připojení účastníka k relaci schůzky (známý také jako peerId)
userId - Trvalý identifikátor účastníka vygenerovaný při jeho přidání do schůzky
name - Zobrazované jméno účastníka
picture - Řetězec URL profilového obrázku účastníka (pokud existuje)
customParticipantId - Vlastní identifikátor, který může zákazník nastavit při přidávání účastníka do schůzky
isHost - Boolean hodnota udávající, zda má tento účastník oprávnění hostitele
isPinned - Zda je tento účastník aktuálně připnutý ve schůzce
presetName - Název předvolby použité u tohoto účastníka při jeho přidávání do schůzky
stageStatus - Udává aktuální stav účastníka na pódiu (platí pouze pro schůzky s povoleným pódiem)

Vlastnosti médií

videoEnabled - Nastaveno na true pokud má účastník zapnutou kameru
audioEnabled - Nastaveno na true pokud má účastník zapnutý zvuk
screenShareEnabled - Nastaveno na true pokud účastník sdílí svou obrazovku
videoTrack - Video stopa účastníka
audioTrack - Zvuková stopa účastníka
screenShareTracks - Video a zvukové stopy sdílené obrazovky účastníka

Vlastnosti médií

videoEnabled - Zda je aktuálně zapnutá kamera účastníka
audioEnabled - Zda je aktuálně zapnutý mikrofon účastníka
screenshareEnabled - Zda účastník aktuálně sdílí svou obrazovku

Přístup k vlastnostem účastníka

// Number of participants joined in the meeting
console.log(meeting.participants.count);

// Number of pages available in paginated mode
console.log(meeting.participants.pageCount);

// Maximum number of participants in active state
console.log(meeting.participants.maxActiveParticipantsCount);

// ParticipantId of the last participant who spoke
console.log(meeting.participants.lastActiveSpeaker);

Použijte useRealtimeKitSelector hook pro přístup k vlastnostem:

// Number of participants joined in the meeting
const participantCount = useRealtimeKitSelector((m) => m.participants.count);

// Number of pages available in paginated mode
const pageCount = useRealtimeKitSelector((m) => m.participants.pageCount);

// Maximum number of participants in active state
const maxActiveCount = useRealtimeKitSelector(
	(m) => m.participants.maxActiveParticipantsCount,
);

// ParticipantId of the last participant who spoke
const lastActiveSpeaker = useRealtimeKitSelector(
	(m) => m.participants.lastActiveSpeaker,
);

// Number of participants joined in the meeting
val participantCount = meeting.participants.joined.size

// Access pagination properties
val maxNumberOnScreen = meeting.participants.maxNumberOnScreen
val currentPageNumber = meeting.participants.currentPageNumber
val pageCount = meeting.participants.pageCount
val canGoNextPage = meeting.participants.canGoNextPage
val canGoPreviousPage = meeting.participants.canGoPreviousPage

// Number of participants joined in the meeting
let participantCount = meeting.participants.joined.count

// Access pagination properties
let maxNumberOnScreen = meeting.participants.maxNumberOnScreen
let currentPageNumber = meeting.participants.currentPageNumber
let pageCount = meeting.participants.pageCount
let canGoNextPage = meeting.participants.canGoNextPage
let canGoPreviousPage = meeting.participants.canGoPreviousPage

Použijte useRealtimeKitSelector hook pro přístup k vlastnostem:

// Number of participants joined in the meeting
const participantCount = useRealtimeKitSelector((m) => m.participants.count);

// Number of pages available in paginated mode
const pageCount = useRealtimeKitSelector((m) => m.participants.pageCount);

// Maximum number of participants in active state
const maxActiveCount = useRealtimeKitSelector(
	(m) => m.participants.maxActiveParticipantsCount,
);

// ParticipantId of the last participant who spoke
const lastActiveSpeaker = useRealtimeKitSelector(
	(m) => m.participants.lastActiveSpeaker,
);

Přístup k objektu účastníka

Účastníka můžete načíst z mapy účastníků.

const participant = meeting.participants.joined.get(participantId);

// Access participant properties
console.log(participant.name);
console.log(participant.videoEnabled);
console.log(participant.audioEnabled);

// Get a specific participant
const participant = useRealtimeKitSelector((m) =>
	m.participants.joined.get(participantId),
);

// Access participant properties
const participantName = participant?.name;
const isVideoEnabled = participant?.videoEnabled;
const isAudioEnabled = participant?.audioEnabled;

// Find a participant by peer ID
val participant = meeting.participants.joined.firstOrNull { it.id == participantId }

// Access participant properties
participant?.let {
	println("Participant: ${it.name}")
	println("Video: ${it.videoEnabled}")
	println("Audio: ${it.audioEnabled}")
}

// Find a participant by peer ID
if let participant = meeting.participants.joined.first(where: { $0.id == participantId }) {
	// Access participant properties
	print("Participant: \(participant.name)")
	print("Video: \(participant.videoEnabled)")
	print("Audio: \(participant.audioEnabled)")
}

// Get a specific participant
const participant = useRealtimeKitSelector((m) =>
	m.participants.joined.get(participantId),
);

// Access participant properties
const participantName = participant?.name;
const isVideoEnabled = participant?.videoEnabled;
const isAudioEnabled = participant?.audioEnabled;

Mapy účastníků

Všichni účastníci jsou uloženi pod meeting.participants. Ty nezahrnují místního uživatele.

meeting.participants obsahuje následující mapy:

joined - Všichni účastníci aktuálně přítomní na schůzce (kromě lokálního uživatele)
waitlisted - Všichni účastníci čekající na připojení ke schůzce
active - Všichni účastníci, jejichž médium je odebíráno (účastníci, kteří by se měli zobrazovat na obrazovce)
pinned - Všichni připnutí účastníci schůzky

Pokud vytváříte mřížku videa nebo zvuku, použijte active mapa. Chcete-li zobrazit seznam všech účastníků, použijte joined mapu.

Každý účastník v těchto mapách je typu RTKParticipant.

Všichni účastníci jsou uloženi pod meeting.participants. Ty nezahrnují místního uživatele.

meeting.participants obsahuje následující seznamy:

joined - Všichni účastníci aktuálně přítomní na schůzce (kromě lokálního uživatele)
waitlisted - Všichni účastníci čekající na připojení ke schůzce
active - Všichni účastníci, jejichž médium je odebíráno (účastníci, kteří by se měli zobrazovat na obrazovce)
pinned - Všichni připnutí účastníci schůzky
screenShares - Všichni účastníci, kteří sdílejí obrazovku

Pokud vytváříte mřížku videa nebo zvuku, použijte active seznam. Chcete-li zobrazit seznam všech účastníků, použijte joined seznamu.

// Get all joined participants
const joinedParticipants = meeting.participants.joined;

// Get active participants (those on screen)
const activeParticipants = meeting.participants.active;

// Get pinned participants
const pinnedParticipants = meeting.participants.pinned;

// Get waitlisted participants
const waitlistedParticipants = meeting.participants.waitlisted;

Použijte useRealtimeKitSelector hook pro přístup k mapám účastníků:

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";

// Get all joined participants
const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);

// Get active participants (those on screen)
const activeParticipants = useRealtimeKitSelector((m) => m.participants.active);

// Get pinned participants
const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);

// Get waitlisted participants
const waitlistedParticipants = useRealtimeKitSelector(
	(m) => m.participants.waitlisted,
);

// Get all joined participants
val joinedParticipants: List<RtkRemoteParticipant> = meeting.participants.joined

// Get active participants (those on screen)
val activeParticipants: List<RtkRemoteParticipant> = meeting.participants.active

// Get pinned participants
val pinnedParticipants: List<RtkRemoteParticipant> = meeting.participants.pinned

// Get waitlisted participants
val waitlistedParticipants: List<RtkRemoteParticipant> = meeting.participants.waitlisted

// Get screen sharing participants
val screenShareParticipants: List<RtkRemoteParticipant> = meeting.participants.screenShares

// Get all joined participants
let joinedParticipants: [RtkRemoteParticipant] = meeting.participants.joined

// Get active participants (those on screen)
let activeParticipants: [RtkRemoteParticipant] = meeting.participants.active

// Get pinned participants
let pinnedParticipants: [RtkRemoteParticipant] = meeting.participants.pinned

// Get waitlisted participants
let waitlistedParticipants: [RtkRemoteParticipant] = meeting.participants.waitlisted

// Get screen sharing participants
let screenShareParticipants: [RtkRemoteParticipant] = meeting.participants.screenShares

Použijte useRealtimeKitSelector hook pro přístup k mapám účastníků:

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";

// Get all joined participants
const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);

// Get active participants (those on screen)
const activeParticipants = useRealtimeKitSelector((m) => m.participants.active);

// Get pinned participants
const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);

// Get waitlisted participants
const waitlistedParticipants = useRealtimeKitSelector(
	(m) => m.participants.waitlisted,
);

Režimy zobrazení

Režim zobrazení určuje, zda jsou účastníci naplňováni do ACTIVE_GRID režim nebo PAGINATED režimu.

ACTIVE_GRID režim - Účastníci se automaticky nahrazují v meeting.participants.active podle toho, kdo mluví nebo kdo má zapnuté video
PAGINATED režim - Účastníci v meeting.participants.active jsou pevně dané. Použijte setPage() a změnit aktivní účastníky

Nastavit režim zobrazení

// Set the view mode to paginated
await meeting.participants.setViewMode("PAGINATED");

// Set the view mode to active grid
await meeting.participants.setViewMode("ACTIVE_GRID");

Použijte useRealtimeKitClient hook pro přístup k objektu schůzky:

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

const [meeting] = useRealtimeKitClient();

// Set the view mode to paginated
await meeting.participants.setViewMode("PAGINATED");

// Set the view mode to active grid
await meeting.participants.setViewMode("ACTIVE_GRID");

Android SDK ve výchozím nastavení používá aktivní režim mřížky na stránce 0. Pokud přepnete na další stránku, automaticky se přepne do stránkovaného režimu.

iOS SDK ve výchozím nastavení používá na stránce 0 aktivní režim mřížky. Po přepnutí na další stránku se automaticky přepne do stránkovaného režimu.

// Set the view mode to paginated
await meeting.participants.setViewMode("PAGINATED");

// Set the view mode to active grid
await meeting.participants.setViewMode("ACTIVE_GRID");

Nastavit stránku do režimu stránkování

// Switch to second page
await meeting.participants.setPage(2);

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

const [meeting] = useRealtimeKitClient();

// Switch to second page
await meeting.participants.setPage(2);

// Switch to first page
meeting.participants.setPage(1)

// Switch to first page
meeting.participants.setPage(1)

// Switch to second page
await meeting.participants.setPage(2);

Režim sledovacího zobrazení

const viewMode = meeting.participants.viewMode;
const currentPage = meeting.participants.currentPage;

const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);
const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);

Režim zobrazení sledování není na této platformě k dispozici.

const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);
const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);

Ovládací prvky hostitele

Objekt účastníka poskytuje hostiteli několik ovládacích prvků. Ty lze vybrat při vytváření hostitelského předvolba.

Ovládací prvky médií

Se správnými oprávněními může hostitel vzdáleným účastníkům vypnout média.

const participant = meeting.participants.joined.get(participantId);

// Disable a participant's video stream
participant.disableVideo();

// Disable a participant's audio stream
participant.disableAudio();

// Kick a participant from the meeting
participant.kick();

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

const [meeting] = useRealtimeKitClient();
const participant = meeting.participants.joined.get(participantId);

// Disable a participant's video stream
participant.disableVideo();

// Disable a participant's audio stream
participant.disableAudio();

// Kick a participant from the meeting
participant.kick();

val participant = meeting.participants.joined.firstOrNull { it.id == participantId }

participant?.let { pcpt ->
	// Disable a participant's video stream
	val videoError = pcpt.disableVideo()

	// Disable a participant's audio stream
	val audioError = pcpt.disableAudio()

	// Kick a participant from the meeting
	val kickError = pcpt.kick()
}

if let participant = meeting.participants.joined.first(where: { $0.id == participantId }) {
	// Disable a participant's video stream
	let videoError: HostError? = participant.disableVideo()

	// Disable a participant's audio stream
	let audioError: HostError? = participant.disableAudio()

	// Kick a participant from the meeting
	let kickError: HostError? = participant.kick()
}

const participant = meeting.participants.joined.get(participantId);

// Disable a participant's video stream
participant.disableVideo();

// Disable a participant's audio stream
participant.disableAudio();

// Kick a participant from the meeting
participant.kick();

Ovládací prvky čekárny

Čekárna umožňuje hostiteli řídit, kteří uživatelé se mohou připojit ke schůzce a kdy. Hostitel může požadavek buď přijmout, nebo odmítnout.

Tento postup můžete také automatizovat tak, aby se uživatelé připojili ke schůzce automaticky ve chvíli, kdy se připojí hostitel, a to pomocí předvolby.

Přijetí žádosti o vstup do čekárny

await meeting.participants.acceptWaitingRoomRequest(participantId);

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

const [meeting] = useRealtimeKitClient();

await meeting.participants.acceptWaitingRoomRequest(participantId);

meeting.participants.acceptWaitingRoomRequest(participantId)

meeting.participants.acceptWaitingRoomRequest(id: participantId)

await meeting.participants.acceptWaitingRoomRequest(participantId);

Odmítnutí žádosti o vstup z čekárny

await meeting.participants.rejectWaitingRoomRequest(participantId);

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

const [meeting] = useRealtimeKitClient();

await meeting.participants.rejectWaitingRoomRequest(participantId);

meeting.participants.rejectWaitingRoomRequest(participantId)

meeting.participants.rejectWaitingRoomRequest(participantId)

await meeting.participants.rejectWaitingRoomRequest(participantId);

Připnutí účastníků

Hostitel může připnout nebo odepnout účastníky v mřížce.

const participant = meeting.participants.joined.get(participantId);

// Pin a participant
await participant.pin();

// Unpin a participant
await participant.unpin();

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

const [meeting] = useRealtimeKitClient();
const participant = meeting.participants.joined.get(participantId);

// Pin a participant
await participant.pin();

// Unpin a participant
await participant.unpin();

val participant = meeting.participants.joined.firstOrNull { it.id == participantId }

participant?.let { pcpt ->
	// Pin a participant
	val pinError = pcpt.pin()

	// Unpin a participant
	val unpinError = pcpt.unpin()
}

if let participant = meeting.participants.joined.first(where: { $0.id == participantId }) {
	// Pin a participant
	let pinError: HostError? = participant.pin()

	// Unpin a participant
	let unpinError: HostError? = participant.unpin()
}

const participant = meeting.participants.joined.get(participantId);

// Pin a participant
await participant.pin();

// Unpin a participant
await participant.unpin();

Aktualizace oprávnění účastníka

Hostitel může upravit oprávnění účastníka. Oprávnění účastníka jsou definována jeho předvolbou.

Aktualizace oprávnění účastníka není na této platformě k dispozici.

Nejprve najděte účastníka nebo účastníky, které chcete upravit.

const participantIds = meeting.participants.joined
	.toArray()
	.filter((e) => e.name.startsWith("John"))
	.map((p) => p.id);

Použijte updatePermissions metodu pro úpravu oprávnění účastníka.

// Allow file upload permissions in public chat
const newPermissions = {
	chat: {
		public: {
			files: true,
		},
	},
};

meeting.participants.updatePermissions(participantIds, newPermissions);

Následující oprávnění lze upravit:

interface UpdatedPermissions {
	polls?: {
		canCreate?: boolean;
		canVote?: boolean;
	};
	plugins?: {
		canClose?: boolean;
		canStart?: boolean;
	};
	chat?: {
		public?: {
			canSend?: boolean;
			text?: boolean;
			files?: boolean;
		};
		private?: {
			canSend?: boolean;
			text?: boolean;
			files?: boolean;
		};
	};
}

Zobrazení videí účastníků

Chcete-li přehrát video track účastníka na <video> element:

<video class="participant-video" id="participant-video"></video>

// Get the video element
const videoElement = document.getElementById("participant-video");

// Get the participant
const participant = meeting.participants.joined.get(participantId);

// Register the video element
participant.registerVideoElement(videoElement);

Pro náhled místního uživatele (video se neodesílá ostatním uživatelům):

meeting.self.registerVideoElement(videoElement, true);

Proveďte úklid, jakmile video element již není potřeba:

participant.deregisterVideoElement(videoElement);

Chcete-li přehrát video track účastníka na <video> element:

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

const [meeting] = useRealtimeKitClient();

// Get the video element
const videoElement = document.getElementById("participant-video");

// Get the participant
const participant = meeting.participants.joined.get(participantId);

// Register the video element
participant.registerVideoElement(videoElement);

// Clean up when the video element is no longer needed
participant.deregisterVideoElement(videoElement);

Pro náhled místního uživatele (video se neodesílá ostatním uživatelům):

meeting.self.registerVideoElement(videoElement, true);

Zavolejte participant.getVideoView() která vrací View která vykresluje video stream účastníka:

// Get video view of a given participant
val videoView = participant.getVideoView()

// Get screen share video view
val screenShareView = participant.getScreenShareVideoView()

Zavolejte participant.getVideoView() která vrací UIView která vykresluje video stream účastníka:

// Get video view of a given participant
let videoView = participant.getVideoView()

// Get screen share video view
let screenShareView = participant.getScreenShareVideoView()

Použijte useRealtimeKitSelector a získat tak video track a vykreslit jej pomocí RTCView:

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";
import { MediaStream, RTCView } from "@cloudflare/react-native-webrtc";

function VideoView() {
	const { videoTrack } = useRealtimeKitSelector((m) =>
		m.participants.active.toArray(),
	)[0];

	const stream = new MediaStream(undefined);
	stream.addTrack(videoTrack);

	return (
		<RTCView
			objectFit="cover"
			style={{ flex: 1 }}
			streamURL={stream.toURL()}
			mirror={true}
			zOrder={1}
		/>
	);
}