From 1281c8eaba1cc92d58d44e839df1ce5e893466d6 Mon Sep 17 00:00:00 2001 From: Swapnil Madavi Date: Fri, 12 Jun 2026 16:08:36 +0530 Subject: [PATCH 1/5] feat(plugins): add DocShare and Streamer plugins to plugins example closes: RTK-8229 --- react-examples/examples/plugins/src/App.tsx | 61 +++++++++++++++++++-- 1 file changed, 55 insertions(+), 6 deletions(-) diff --git a/react-examples/examples/plugins/src/App.tsx b/react-examples/examples/plugins/src/App.tsx index edd0f70..ed70b43 100644 --- a/react-examples/examples/plugins/src/App.tsx +++ b/react-examples/examples/plugins/src/App.tsx @@ -6,7 +6,10 @@ const WHITEBOARD_URL = 'https://whiteboard-collabkit.cf-realtime.workers.dev'; const WHITEBOARD_ICON = 'https://whiteboard-collabkit.cf-realtime.workers.dev/logo.png'; -function createWhiteboardIframe(): HTMLIFrameElement { +const DOCSHARE_URL = 'https://docshare-collabkit.cf-realtime.workers.dev'; +const STREAMER_URL = 'https://streamer-collabkit.cf-realtime.workers.dev'; + +function createPluginIframe(): HTMLIFrameElement { const iframe = document.createElement('iframe'); iframe.style.width = '100%'; iframe.style.height = '100%'; @@ -17,9 +20,19 @@ function createWhiteboardIframe(): HTMLIFrameElement { function App() { const [meeting, initMeeting] = useRealtimeKitClient(); - const iframeRef = useRef(null); - if (!iframeRef.current) { - iframeRef.current = createWhiteboardIframe(); + const whiteboardIframeRef = useRef(null); + if (!whiteboardIframeRef.current) { + whiteboardIframeRef.current = createPluginIframe(); + } + + const docshareIframeRef = useRef(null); + if (!docshareIframeRef.current) { + docshareIframeRef.current = createPluginIframe(); + } + + const streamerIframeRef = useRef(null); + if (!streamerIframeRef.current) { + streamerIframeRef.current = createPluginIframe(); } useEffect(() => { @@ -51,7 +64,27 @@ function App() { canActivate: true, canDeactivate: true, }, - component: iframeRef.current, + component: whiteboardIframeRef.current, + }, + { + id: 'docshare', + name: 'DocShare', + icon: `${DOCSHARE_URL}/document.png`, + permissions: { + canActivate: true, + canDeactivate: true, + }, + component: docshareIframeRef.current, + }, + { + id: 'streamer', + name: 'Streamer', + icon: `${STREAMER_URL}/logo.png`, + permissions: { + canActivate: true, + canDeactivate: true, + }, + component: streamerIframeRef.current, }, ], }, @@ -69,7 +102,23 @@ function App() { params.set('profilePicture', m.self.picture); } - iframeRef.current!.src = `${WHITEBOARD_URL}?${params.toString()}`; + whiteboardIframeRef.current!.src = `${WHITEBOARD_URL}?${params.toString()}`; + + const docshareParams = new URLSearchParams({ + roomId: m.meta.meetingId, + roomName: m.meta.meetingTitle || 'DocShare', + userId: m.self.id, + userName: m.self.name, + }); + docshareIframeRef.current!.src = `${DOCSHARE_URL}?${docshareParams.toString()}`; + + const streamerParams = new URLSearchParams({ + roomId: m.meta.meetingId, + roomName: m.meta.meetingTitle || 'Streamer', + userId: m.self.id, + userName: m.self.name, + }); + streamerIframeRef.current!.src = `${STREAMER_URL}?${streamerParams.toString()}`; }).catch(console.error); }, []); From 3d241fa7f7602febb7e3aaf585bb3c2369984579 Mon Sep 17 00:00:00 2001 From: Ravindra Singh Rathor Date: Thu, 18 Jun 2026 11:01:50 +0530 Subject: [PATCH 2/5] fix(build): fixed samples to not use deprecated packages --- react-examples/examples/async-video-survey/src/App.tsx | 2 +- react-examples/examples/audio-room/src/components/AudioRoom.tsx | 2 +- react-examples/examples/clubhouse/src/components/Meeting.tsx | 2 +- react-examples/examples/clubhouse/src/components/Requests.tsx | 2 +- react-examples/examples/facetime/src/App.tsx | 2 +- .../examples/live-auction/src/pages/setupScreen/SetupScreen.tsx | 2 +- react-examples/examples/multi-meeting/src/Meeting.tsx | 2 +- .../screenshare-focused-ui-with-custom-addons/src/App.tsx | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/react-examples/examples/async-video-survey/src/App.tsx b/react-examples/examples/async-video-survey/src/App.tsx index 0fcaa05..4e3b0c6 100644 --- a/react-examples/examples/async-video-survey/src/App.tsx +++ b/react-examples/examples/async-video-survey/src/App.tsx @@ -306,7 +306,7 @@ export default function App() { }).then((meeting) => { Object.assign(window, { meeting }); // automatically join room - // meeting?.joinRoom(); + // meeting?.join(); }); }, []); diff --git a/react-examples/examples/audio-room/src/components/AudioRoom.tsx b/react-examples/examples/audio-room/src/components/AudioRoom.tsx index 80fc856..225599b 100644 --- a/react-examples/examples/audio-room/src/components/AudioRoom.tsx +++ b/react-examples/examples/audio-room/src/components/AudioRoom.tsx @@ -29,7 +29,7 @@ export default function AudioRoom() {

By default you will join with your mic disabled.

meeting.joinRoom()} + onClick={() => meeting.join()} kind="wide" className="max-w-sm" > diff --git a/react-examples/examples/clubhouse/src/components/Meeting.tsx b/react-examples/examples/clubhouse/src/components/Meeting.tsx index 39c0751..283fdb6 100644 --- a/react-examples/examples/clubhouse/src/components/Meeting.tsx +++ b/react-examples/examples/clubhouse/src/components/Meeting.tsx @@ -104,7 +104,7 @@ export default function Meeting() {
- {meeting.self.permissions.acceptPresentRequests && ( + {meeting.self.permissions.acceptStageRequests && (