← Cloudflare Realtime / realtime / realtimekit / core

Отображение активных спикеров

RealtimeKit автоматически определяет участников, которые активно говорят во время встречи, и отслеживает их. В зависимости от требований дизайна в интерфейсе приложения можно показывать как одного активного спикера, так и нескольких.

Активным спикером в RealtimeKit считается удалённый участник с выраженной аудиоактивностью в любой момент времени. SDK хранит два типа данных, которые помогут вам создать пользовательский интерфейс:

Активный спикер, Один удалённый участник, который сейчас говорит наиболее заметно.
Активные участники, Набор удалённых участников с наиболее выраженной аудиоактивностью.

SDK автоматически обновляет эти свойства и подписывается на медиапоток участников по мере изменения активности речи. Приоритет отдаётся наиболее выраженной аудиоактивности, поэтому участник, не отображаемый в данный момент в интерфейсе, может заменить видимого участника, если его аудио становится активнее.

Максимальное количество участников в active map на единицу меньше, чем размер сетки, заданный в Preset. Это резервирует место для локального участника в вашем интерфейсе. Например, если размер сетки равен 6, active map содержит не более 5 удалённых участников.

Отображение одного активного спикера

Используйте lastActiveSpeaker чтобы отображать в интерфейсе участника, который был активен последним. Получите доступ к текущему активному спикеру с помощью useRealtimeKitSelector хук:

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

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

useRealtimeKitSelector хук автоматически обновляет ваш компонент при смене активного спикера.

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

SDK также генерирует activeSpeaker событие в meeting.participants когда активным становится другой участник. Для императивных обновлений или побочных эффектов подпишитесь на это событие:

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

Используйте lastActiveSpeaker чтобы отображать в интерфейсе участника, который был активен последним.

Откройте lastActiveSpeaker свойство, чтобы получить ID участника, а затем извлечь объект участника из карты присоединившихся участников:

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

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

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

SDK генерирует activeSpeaker событие в meeting.participants когда активным становится другой участник:

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

Используйте lastActiveSpeaker чтобы отображать в интерфейсе участника, который был активен последним.

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

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

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

SDK генерирует activeSpeaker событие в meeting.participants когда активным становится другой участник:

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

Используйте activeSpeaker чтобы отображать в интерфейсе участника, который был активен последним.

Откройте activeSpeaker свойство, чтобы получить текущего активного спикера:

val activeSpeaker = meeting.participants.activeSpeaker

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

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

SDK генерирует событие при смене активного спикера. Чтобы прослушать это событие, используйте RtkParticipantsEventListener:

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

Используйте activeSpeaker чтобы отображать в интерфейсе участника, который был активен последним.

Откройте activeSpeaker свойство, чтобы получить текущего активного спикера:

let activeSpeaker = meeting.participants.activeSpeaker

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

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

SDK генерирует событие при смене активного спикера. Чтобы прослушать это событие, реализуйте RtkParticipantsEventListener:

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

meeting.addParticipantsEventListener(self)

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

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

useRealtimeKitSelector хук автоматически обновляет ваш компонент при смене активного спикера.

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

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

Отображение нескольких активных спикеров

Используйте active map, чтобы отображать нескольких участников с заметной аудиоактивностью, как правило, в виде сетки. Текущих активных участников можно получить с помощью useRealtimeKitSelector хук:

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 хук автоматически обновляет ваш компонент при изменении набора активных спикеров.

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

SDK также генерирует participantsUpdate событие на active map при изменении набора активных спикеров. Для императивных обновлений или побочных эффектов при изменении active map изменяется, подпишитесь на это событие:

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

(Необязательно) Если приложению нужно реагировать на добавление или удаление конкретного участника в активной карте, прослушивайте participantJoined и participantLeft на meeting.participants.active map.

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

Используйте active map, чтобы отображать нескольких участников с заметной аудиоактивностью, как правило, в виде сетки.

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

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

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

SDK генерирует participantsUpdate событие на active map при изменении набора активных спикеров. Подпишитесь на это событие, получите обновлённый массив и перерисуйте сетку:

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

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

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

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

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

Используйте active список, чтобы отображать нескольких участников с заметной аудиоактивностью в виде сетки:

val activeParticipants = meeting.participants.active

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

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

SDK генерирует событие при изменении набора активных спикеров. Чтобы прослушать это событие, используйте RtkParticipantsEventListener:

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

Используйте active список, чтобы отображать нескольких участников с заметной аудиоактивностью, как правило, в виде сетки:

let activeParticipants = meeting.participants.active

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

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

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

См. Отображение видео участников чтобы узнать, как отрисовать видео участника в своем интерфейсе.

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

Визуализируйте аудиоактивность

Можно создавать собственные визуализации аудио, используя данные аудиотрека участника. Извлеките информацию о громкости из аудиотрека, чтобы рассчитать ряды амплитуды. Используйте эти данные для отрисовки волновых форм, индикаторов речи или измерителей уровня звука в интерфейсе.

Визуализация аудиоактивности не поддерживается на Android.

Визуализация аудиоактивности не поддерживается на iOS.

Визуализация аудиоактивности не поддерживается на React Native.

Разбор объекта встречи - Разберитесь в структуре объекта встречи и доступных свойствах.
Удалённый участник - Подробнее об удаленных участниках сессии и о том, как отображать их видео.

Отображение активных спикеров

Отображение одного активного спикера

Отображение нескольких активных спикеров

Визуализируйте аудиоактивность

Дополнительные материалы