このガイドでは、RealtimeKit のミーティングで参加者データを取得し、動画を表示し、イベントを処理し、参加者の権限を管理する方法を説明します。
参加者オブジェクトには、特定の参加者に関するすべての情報が含まれます。グリッド、各参加者のメディアストリーム、名前、状態変数などです。meeting.participants からアクセスできます。
id- 参加者のparticipantId（別名peerId）userId- 参加者のuserIdname- 参加者の名前picture- 参加者の画像（ある場合）customParticipantId- 参加者を識別するために設定できる任意の IDisPinned- 参加者がピン留めされている場合はtruepresetName- 参加者に関連付けられたプリセット名
id- 参加者がミーティングセッションに参加したときに生成されるセッション固有の識別子（peerIdとも呼ばれます）userId- 参加者をミーティングに追加したときに生成される永続的な識別子name- 参加者の表示名picture- 参加者の表示画像への URL 文字列（ある場合）customParticipantId- 顧客が参加者をミーティングに追加するときに設定できるカスタム識別子isHost- この参加者がホスト権限を持つかどうか（Boolean）isPinned- この参加者が現在ミーティングでピン留めされているかどうかpresetName- ミーティングへの追加時にこの参加者へ適用されたプリセット名stageStatus- 参加者の現在のステージ状態（ステージが有効なミーティングでのみ適用）
id- 参加者がミーティングセッションに参加したときに生成されるセッション固有の識別子（peerIdとも呼ばれます）userId- 参加者をミーティングに追加したときに生成される永続的な識別子name- 参加者の表示名picture- 参加者の表示画像への URL 文字列（ある場合）customParticipantId- 顧客が参加者をミーティングに追加するときに設定できるカスタム識別子isHost- この参加者がホスト権限を持つかどうか（Boolean）isPinned- この参加者が現在ミーティングでピン留めされているかどうかpresetName- ミーティングへの追加時にこの参加者へ適用されたプリセット名stageStatus- 参加者の現在のステージ状態（ステージが有効なミーティングでのみ適用）
videoEnabled- 参加者のカメラがオンの場合はtrueaudioEnabled- 参加者がミュート解除されている場合はtruescreenShareEnabled- 参加者が画面共有中の場合はtruevideoTrack- 参加者のビデオトラックaudioTrack- 参加者のオーディオトラックscreenShareTracks- 参加者の画面共有のビデオトラックとオーディオトラック
videoEnabled- 参加者のカメラが現在有効かどうかaudioEnabled- 参加者のマイクが現在ミュート解除されているかどうかscreenshareEnabled- 参加者が現在画面共有中かどうか
// 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);プロパティへアクセスするには、useRealtimeKitSelector フックを使います。
// 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プロパティへアクセスするには、useRealtimeKitSelector フックを使います。
// 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,
);参加者マップ から参加者を取得できます。
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;すべての参加者は meeting.participants に格納されます。ローカルユーザーは含まれません。
meeting.participants オブジェクトには、次のマップがあります。
joined- 現在ミーティングにいるすべての参加者（ローカルユーザーを除く）waitlisted- ミーティングへの参加を待っているすべての参加者active- メディアを購読しているすべての参加者（画面に表示する参加者）pinned- ミーティングでピン留めされているすべての参加者
ビデオ / オーディオのグリッドを作る場合は active マップを使います。全参加者の一覧を表示する場合は joined マップを使います。
これらのマップ内の各参加者の型は RTKParticipant です。
すべての参加者は meeting.participants に格納されます。ローカルユーザーは含まれません。
meeting.participants オブジェクトには、次のリストがあります。
joined- 現在ミーティングにいるすべての参加者（ローカルユーザーを除く）waitlisted- ミーティングへの参加を待っているすべての参加者active- メディアを購読しているすべての参加者（画面に表示する参加者）pinned- ミーティングでピン留めされているすべての参加者screenShares- 画面共有中のすべての参加者
ビデオ / オーディオのグリッドを作る場合は active リストを使います。全参加者の一覧を表示する場合は joined リストを使います。
// 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;参加者マップへアクセスするには、useRealtimeKitSelector フックを使います。
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参加者マップへアクセスするには、useRealtimeKitSelector フックを使います。
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,
);表示モードは、参加者が ACTIVE_GRID モードと PAGINATED モードのどちらで配置されるかを示します。
ACTIVE_GRIDモード - 発言中の人、またはビデオをオンにしている人に基づいて、meeting.participants.activeの参加者が自動で入れ替わりますPAGINATEDモード -meeting.participants.activeの参加者は固定です。アクティブな参加者を変えるにはsetPage()を使います
// Set the view mode to paginated
await meeting.participants.setViewMode("PAGINATED");
// Set the view mode to active grid
await meeting.participants.setViewMode("ACTIVE_GRID");ミーティングオブジェクトへアクセスするには、useRealtimeKitClient フックを使います。
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 は、ページ 0 ではデフォルトでアクティブグリッドモードです。次のページに切り替えると、自動でページネーションモードになります。
iOS SDK は、ページ 0 ではデフォルトでアクティブグリッドモードです。次のページに切り替えると、自動でページネーションモードになります。
// Set the view mode to paginated
await meeting.participants.setViewMode("PAGINATED");
// Set the view mode to active grid
await meeting.participants.setViewMode("ACTIVE_GRID");// 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);const viewMode = meeting.participants.viewMode;
const currentPage = meeting.participants.currentPage;const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);
const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);このプラットフォームでは、表示モードの監視は利用できません。
const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);
const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);参加者オブジェクトでは、ホストがいくつかの操作を行えます。ホストの プリセット を作成するときに選択できます。
適切な権限があれば、ホストはリモート参加者のメディアを無効にできます。
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();待機室では、ホストがどのユーザーがいつミーティングに参加できるかを制御できます。リクエストを承認するか拒否するかを選べます。
プリセット を使うと、ホストがミーティングに参加したときにユーザーが自動で参加するように、この流れを自動化できます。
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);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);ホストは、グリッド上の参加者をピン留めまたはピン留め解除できます。
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();ホストは、参加者の権限を変更できます。参加者の権限はプリセットで定義されます。
このプラットフォームでは、参加者の権限更新は利用できません。
まず、更新する参加者を探します。
const participantIds = meeting.participants.joined
.toArray()
.filter((e) => e.name.startsWith("John"))
.map((p) => p.id);参加者の権限を変更するには、updatePermissions メソッドを使います。
// Allow file upload permissions in public chat
const newPermissions = {
chat: {
public: {
files: true,
},
},
};
meeting.participants.updatePermissions(participantIds, newPermissions);次の権限を変更できます。
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;
};
};
}参加者のビデオトラックを <video> 要素で再生するには、次のようにします。
<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);ローカルユーザーのプレビュー（他のユーザーには動画を送信しない）の場合:
meeting.self.registerVideoElement(videoElement, true);ビデオ要素が不要になったらクリーンアップします。
participant.deregisterVideoElement(videoElement);参加者のビデオトラックを <video> 要素で再生するには、次のようにします。
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);ローカルユーザーのプレビュー（他のユーザーには動画を送信しない）の場合:
meeting.self.registerVideoElement(videoElement, true);participant.getVideoView() を呼び出すと、参加者のビデオストリームを描画する View が返ります。
// Get video view of a given participant
val videoView = participant.getVideoView()
// Get screen share video view
val screenShareView = participant.getScreenShareVideoView()participant.getVideoView() を呼び出すと、参加者のビデオストリームを描画する UIView が返ります。
// Get video view of a given participant
let videoView = participant.getVideoView()
// Get screen share video view
let screenShareView = participant.getScreenShareVideoView()useRealtimeKitSelector でビデオトラックを取得し、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}
/>
);
}