このガイドでは、Cloudflare RealtimeKit のウェビナー(WebRTC)向けに、ステージ管理 API の使い方を説明します。
Web Mobile
React Web Components Angular
従来の publish-subscribe モデルでは、ユーザーがメディアを公開し、ほかのユーザーが購読するかを選べます。RealtimeKit では、任意で管理された構成も使えます。この構成では、権限の低いユーザーはデフォルトでメディアを公開しません。そのユーザーは公開の許可をリクエストでき、権限のあるユーザーが許可または拒否を選べます。
RealtimeKit のステージ管理 API では、次のような操作ができます。
ステージからの退出と参加
ステージリクエストと権限の管理
参加者の退出
ステージモジュールは meeting.stage 名前空間から使えます。
console. log ( "Stage object:" , meeting.stage);
console. log ( "Stage object:" , meeting.stage);
console. log ( "Stage object:" , meeting.stage);
Log. d ( "Stage" , "Stage object: ${meeting.stage}" )
print ( "Stage object: \(meeting. stage ) " )
console. log ( "Stage object:" , meeting.stage);
meeting.stage.status プロパティは、ローカルユーザーの現在のステージステータスを返します。
console. log ( "Stage status:" , meeting.stage.status);
console. log ( "Stage status:" , meeting.stage.status);
console. log ( "Stage status:" , meeting.stage.status);
Log. d ( "Stage" , "Stage status: ${meeting.stage.stageStatus}" )
print ( "Stage status: \(meeting. stage . stageStatus ) " )
console. log ( "Stage status:" , meeting.stage.status);
取りうるステータス:
ON_STAGE — ユーザーは現在ステージ上にあり、音声と映像を共有しています。
OFF_STAGE — ユーザーはセッションを視聴していますが、ステージ上にはおらず、音声も映像も共有していません。
REQUESTED_TO_JOIN_STAGE — ユーザーはステージ参加と音声・映像共有のリクエストを待機中です。このステータスは、ホストがリクエストを承認または拒否するまで続きます。
ACCEPTED_TO_JOIN_STAGE — ホストが、ユーザーのステージ参加リクエストを承認しました。
Note
ステージに直接参加する権限があるユーザーが取りうるステータスは、ON_STAGE と ACCEPTED_TO_JOIN_STAGE のみです。
RealtimeKit のステージ管理 API では、ホストがステージリクエストを受け取り、管理できます。ステージへの参加と退出もできます。
このメソッドは、ユーザーをメディアルームへ接続し、ミーティング内のほかのピアとやり取りできるようにします。
await meeting.stage. join ();
await meeting.stage. join ();
await meeting.stage. join ();
await meeting.stage. join ();
このメソッドを使うと、ユーザーはメディアルームから切断され、ピアと通信できなくなります。音声と映像も、ルーム内のほかの参加者には見えなくなります。
await meeting.stage. leave ();
await meeting.stage. leave ();
await meeting.stage. leave ();
await meeting.stage. leave ();
権限のあるユーザーは、grantAccess メソッドで一連のユーザーにステージアクセスを許可できます。
await meeting.stage. grantAccess (userIds);
await meeting.stage. grantAccess (userIds);
await meeting.stage. grantAccess (userIds);
meeting.stage. grantAccess (userIds)
meeting.stage. grantAccess ( userIds : userIds)
await meeting.stage. grantAccess (userIds);
パラメーター:
userIds (string[]) - ステージアクセスを許可するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
userIds (string[]) - ステージアクセスを許可するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
userIds (string[]) - ステージアクセスを許可するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
userIds (List<String>) - ステージアクセスを許可するユーザー ID のリストです。ユーザー ID は meeting.participants.map { it.userId } で取得できます。
userIds ([String]) - ステージアクセスを許可するユーザー ID の配列です。ユーザー ID は meeting.participants.map { $0.userId } で取得できます。
userIds (string[]) - ステージアクセスを許可するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
権限のあるユーザーは、denyAccess メソッドで一連のユーザーのステージアクセスを拒否できます。
await meeting.stage. denyAccess (userIds);
await meeting.stage. denyAccess (userIds);
await meeting.stage. denyAccess (userIds);
meeting.stage. denyAccess (userIds)
meeting.stage. denyAccess ( userIds : userIds)
await meeting.stage. denyAccess (userIds);
パラメーター:
userIds (string[]) - ステージアクセスを拒否するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
userIds (string[]) - ステージアクセスを拒否するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
userIds (string[]) - ステージアクセスを拒否するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
userIds (List<String>) - ステージアクセスを拒否するユーザー ID のリストです。ユーザー ID は meeting.participants.map { it.userId } で取得できます。
userIds ([String]) - ステージアクセスを拒否するユーザー ID の配列です。ユーザー ID は meeting.participants.map { $0.userId } で取得できます。
userIds (string[]) - ステージアクセスを拒否するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
権限のあるユーザーは、kick メソッドで一連のユーザーをステージから削除できます。
await meeting.stage. kick (userIds);
await meeting.stage. kick (userIds);
await meeting.stage. kick (userIds);
meeting.stage. kick (userIds)
meeting.stage. kick ( userIds : userIds)
await meeting.stage. kick (userIds);
パラメーター:
userIds (string[]) - ステージから削除するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
userIds (string[]) - ステージから削除するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
userIds (string[]) - ステージから削除するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
userIds (List<String>) - ステージから削除するユーザー ID のリストです。ユーザー ID は meeting.participants.map { it.userId } で取得できます。
userIds ([String]) - ステージから削除するユーザー ID の配列です。ユーザー ID は meeting.participants.map { $0.userId } で取得できます。
userIds (string[]) - ステージから削除するユーザー ID の配列です。ユーザー ID は meeting.participants.toArray().map(p => p.userId) で取得できます。
RealtimeKit のステージ管理 API では、参加者がステージアクセスをリクエストし、管理できます。
このメソッドは、ホストが承認できる新しいステージリクエストを作ります。ステージに参加するには、各ユーザー(視聴者またはホスト)がこのメソッドを呼び出す必要があります。
ホストがこのメソッドを呼び出すと、ステータスは ACCEPTED_TO_JOIN_STAGE に更新されます。
await meeting.stage. requestAccess ();
await meeting.stage. requestAccess ();
await meeting.stage. requestAccess ();
meeting.stage. requestAccess ()
meeting.stage. requestAccess ()
await meeting.stage. requestAccess ();
ステージリクエストを取り消すときは、このメソッドを呼び出します。
await meeting.stage. cancelRequestAccess ();
await meeting.stage. cancelRequestAccess ();
await meeting.stage. cancelRequestAccess ();
meeting.stage. cancelRequestAccess ()
meeting.stage. cancelRequestAccess ()
await meeting.stage. cancelRequestAccess ();
meeting.stage モジュールは、次のイベントを発行します。
ステージアクセスリクエストに更新があったときに発行されます。
meeting.stage. on ( "stageAccessRequestUpdate" , ( data ) => {
console. log ( "Stage access request updated:" , data);
}); 代わりに、React フックでステージの更新を受け取れます。
import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react" ;
// useRealtimeKitSelector hook only works when `RealtimeKitProvider` is used.
const stageStatus = useRealtimeKitSelector (( m ) => m.stage.status);
meeting.stage. on ( "stageAccessRequestUpdate" , ( data ) => {
console. log ( "Stage access request updated:" , data);
});
meeting.stage. on ( "stageAccessRequestUpdate" , ( data ) => {
console. log ( "Stage access request updated:" , data);
});
meeting. addStageEventListener ( object : RtkStageEventListener {
override fun onStageAccessRequestsUpdated (accessRequests: List < RtkRemoteParticipant >) {
// Stage access requests list updated
Log. d ( "Stage" , "Access requests updated: ${accessRequests.size}" )
}
})
extension WebinarViewModel : RtkStageEventListener {
func onStageAccessRequestsUpdated ( accessRequests : [RtkRemoteParticipant]) {
// Stage access requests list updated
print ( "Access requests updated: \(accessRequests. count ) " )
}
}
meeting.stage. on ( "stageAccessRequestUpdate" , ( data ) => {
console. log ( "Stage access request updated:" , data);
}); 代わりに、React フックでステージの更新を受け取れます。
import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native" ;
// useRealtimeKitSelector hook only works when `RealtimeKitProvider` is used.
const stageStatus = useRealtimeKitSelector (( m ) => m.stage.status);
ホストがステージ参加リクエストを承認したとき、またはユーザーをステージへ直接招待したときに発行されます。
meeting.stage. on ( "acceptPresentRequests" , ( data ) => {
console. log ( "Present requests accepted:" , data);
});
meeting.stage. on ( "acceptPresentRequests" , ( data ) => {
console. log ( "Present requests accepted:" , data);
});
meeting.stage. on ( "acceptPresentRequests" , ( data ) => {
console. log ( "Present requests accepted:" , data);
});
meeting. addStageEventListener ( object : RtkStageEventListener {
override fun onStageAccessRequestAccepted () {
// Host accepted the join stage request or invited user directly to stage
Log. d ( "Stage" , "Access request accepted" )
}
})
extension WebinarViewModel : RtkStageEventListener {
func onStageAccessRequestAccepted () {
// Host accepted the join stage request or invited user directly to stage
print ( "Access request accepted" )
}
}
meeting.stage. on ( "acceptPresentRequests" , ( data ) => {
console. log ( "Present requests accepted:" , data);
});
ローカルユーザーのステージステータスが変わったときに発行されます。
meeting.stage. on ( "stageStatusUpdate" , ( status ) => {
console. log ( "Stage status updated:" , status);
});
meeting.stage. on ( "stageStatusUpdate" , ( status ) => {
console. log ( "Stage status updated:" , status);
});
meeting.stage. on ( "stageStatusUpdate" , ( status ) => {
console. log ( "Stage status updated:" , status);
});
meeting. addStageEventListener ( object : RtkStageEventListener {
override fun onStageStatusUpdated (oldStatus: StageStatus , newStatus: StageStatus ) {
// Local user's stage status changed
Log. d ( "Stage" , "Status updated from $oldStatus to $newStatus " )
}
})
extension WebinarViewModel : RtkStageEventListener {
func onStageStatusUpdated ( oldStatus : StageStatus, newStatus : StageStatus) {
// Local user's stage status changed
print ( "Status updated from \(oldStatus) to \(newStatus) " )
}
}
meeting.stage. on ( "stageStatusUpdate" , ( status ) => {
console. log ( "Stage status updated:" , status);
});
新しい参加者がステージ参加をリクエストしたときに発行されます。
meeting.stage. on ( "newStageRequest" , ( request ) => {
console. log ( "New stage request:" , request);
});
meeting.stage. on ( "newStageRequest" , ( request ) => {
console. log ( "New stage request:" , request);
});
meeting.stage. on ( "newStageRequest" , ( request ) => {
console. log ( "New stage request:" , request);
});
meeting. addStageEventListener ( object : RtkStageEventListener {
override fun onNewStageAccessRequest (participant: RtkRemoteParticipant ) {
// New participant requested to join the stage
Log. d ( "Stage" , "New stage request from: ${participant.name}" )
}
})
extension WebinarViewModel : RtkStageEventListener {
func onNewStageAccessRequest ( participant : RtkRemoteParticipant) {
// New participant requested to join the stage
print ( "New stage request from: \(participant. name ) " )
}
}
meeting.stage. on ( "newStageRequest" , ( request ) => {
console. log ( "New stage request:" , request);
});
ホストがステージリクエストを承認したときに発行されます。
meeting.stage. on ( "stageRequestApproved" , ( data ) => {
console. log ( "Stage request approved:" , data);
});
meeting.stage. on ( "stageRequestApproved" , ( data ) => {
console. log ( "Stage request approved:" , data);
});
meeting.stage. on ( "stageRequestApproved" , ( data ) => {
console. log ( "Stage request approved:" , data);
});
meeting. addStageEventListener ( object : RtkStageEventListener {
override fun onStageAccessRequestAccepted () {
// Host accepted the join stage request or invited user directly to stage
Log. d ( "Stage" , "Stage request approved" )
}
})
extension WebinarViewModel : RtkStageEventListener {
func onStageAccessRequestAccepted () {
// Host accepted the join stage request or invited user directly to stage
print ( "Stage request approved" )
}
}
meeting.stage. on ( "stageRequestApproved" , ( data ) => {
console. log ( "Stage request approved:" , data);
});
ホストがステージリクエストを拒否したときに発行されます。
meeting.stage. on ( "stageRequestRejected" , ( data ) => {
console. log ( "Stage request rejected:" , data);
});
meeting.stage. on ( "stageRequestRejected" , ( data ) => {
console. log ( "Stage request rejected:" , data);
});
meeting.stage. on ( "stageRequestRejected" , ( data ) => {
console. log ( "Stage request rejected:" , data);
});
meeting. addStageEventListener ( object : RtkStageEventListener {
override fun onStageAccessRequestRejected () {
// Host rejected the join stage request
Log. d ( "Stage" , "Stage request rejected" )
}
})
extension WebinarViewModel : RtkStageEventListener {
func onStageAccessRequestRejected () {
// Host rejected the join stage request
print ( "Stage request rejected" )
}
}
meeting.stage. on ( "stageRequestRejected" , ( data ) => {
console. log ( "Stage request rejected:" , data);
});