diff --git a/src/content/docs/realtime/realtimekit/concepts/session-lifecycle.mdx b/src/content/docs/realtime/realtimekit/concepts/session-lifecycle.mdx deleted file mode 100644 index e0a569af532240..00000000000000 --- a/src/content/docs/realtime/realtimekit/concepts/session-lifecycle.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -pcx_content_type: navigation -title: Session Lifecycle -slug: realtime/realtimekit/concepts/session-lifecycle -sidebar: - order: 4 ---- - -In [default meeting ui](/realtime/realtimekit/ui-kit/), we have seen how to initialize the SDK and join a session and render the default meeting ui component. - -This bags the question of what happens to a peer as they move through a session, when do they go to setup screen, waitlist screen, ended screen or any other screen, and how you can hook into these events to perform custom actions. - -Before diving into how the UI states work under the hood, let's first understand the lifecycle of a peer in a session to understand the events that are triggered. - -### Lifecycle of a Peer in a Session - -![Peer Lifecycle In a Session](~/assets/images/realtime/realtimekit/peer-lifecycle.svg) - -Here’s how the peer lifecycle works: - -1. **Initialization state**: When the SDK is initialized, the peer first sees a Setup Screen, where they can preview their audio and video before joining. -2. **Join intent**: When the peer decides to join, one of two things happens: - - If waitlisting is enabled, they are moved to a Waitlist and see a Waitlist screen. - - If not waitlisted, they join the session and see the main Meeting screen (Stage), where they can interact with others. -3. **During the session**: The peer can see and interact with others in the main Meeting screen (Stage). -4. **Session transitions**: - - If the peer is rejected from the waitlist, they see a dedicated Rejected screen. - - If the peer is kicked out, they see an Ended screen and the session ends for them. - - If the peer leaves voluntarily, or if the meeting ends, they see an Ended screen, and the session ends for them. - -Each of these screens is built with UI Kit components, which you can fully customize to match your app’s design and requirements. - -The UI Kit SDKs automatically handle which notifications or screens to show at each state, so you don’t have to manage these transitions manually. - -In upcoming pages, we will see how to hook into these events to perform custom actions and to build your own custom meeting experience. diff --git a/src/content/docs/realtime/realtimekit/core/local-participant.mdx b/src/content/docs/realtime/realtimekit/core/local-participant.mdx index 7d6b8dc79699ff..ac96a0627a2c41 100644 --- a/src/content/docs/realtime/realtimekit/core/local-participant.mdx +++ b/src/content/docs/realtime/realtimekit/core/local-participant.mdx @@ -3,7 +3,7 @@ pcx_content_type: navigation title: Local Participant slug: realtime/realtimekit/core/local-participant sidebar: - order: 4 + order: 5 --- import { Tabs, TabItem } from "~/components"; diff --git a/src/content/docs/realtime/realtimekit/core/meeting-metadata.mdx b/src/content/docs/realtime/realtimekit/core/meeting-metadata.mdx index 9f3df1d618bd2a..b9d3c7dec0b90d 100644 --- a/src/content/docs/realtime/realtimekit/core/meeting-metadata.mdx +++ b/src/content/docs/realtime/realtimekit/core/meeting-metadata.mdx @@ -3,7 +3,7 @@ pcx_content_type: navigation title: Meeting Metadata slug: realtime/realtimekit/core/meeting-metadata sidebar: - order: 3 + order: 4 --- import { Tabs, TabItem } from "~/components"; @@ -208,4 +208,4 @@ The `socketConnectionUpdate` event provides: Explore related topics: - [Meeting Object Explained](/realtime/realtimekit/core/meeting-object-explained/) - Comprehensive meeting object reference -- [Session Lifecycle](/realtime/realtimekit/concepts/session-lifecycle/) - Understanding meeting states and transitions +- [Peer Lifecycle](/realtime/realtimekit/core/peer-lifecycle/) - Understanding different peer states and transitions diff --git a/src/content/docs/realtime/realtimekit/core/meeting-object-explained.mdx b/src/content/docs/realtime/realtimekit/core/meeting-object-explained.mdx index 15890612c42f40..3eae80574d9790 100644 --- a/src/content/docs/realtime/realtimekit/core/meeting-object-explained.mdx +++ b/src/content/docs/realtime/realtimekit/core/meeting-object-explained.mdx @@ -3,7 +3,7 @@ pcx_content_type: navigation title: Meeting Object Explained slug: realtime/realtimekit/core/meeting-object-explained sidebar: - order: 2 + order: 3 --- import { Tabs, TabItem } from "~/components"; diff --git a/src/content/docs/realtime/realtimekit/core/peer-lifecycle.mdx b/src/content/docs/realtime/realtimekit/core/peer-lifecycle.mdx new file mode 100644 index 00000000000000..a2d2f103910999 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/core/peer-lifecycle.mdx @@ -0,0 +1,37 @@ +--- +pcx_content_type: navigation +title: Peer Lifecycle +slug: realtime/realtimekit/core/peer-lifecycle +sidebar: + order: 2 +--- + +When a user (participant) connects to a meeting, they become a **peer** in the meeting session. +A peer then moves through several states in the session based on the preset, connection state, and actions by the user or the host. + +## Lifecycle of a Peer in a Session + +![Peer Lifecycle In a Session](~/assets/images/realtime/realtimekit/peer-lifecycle.svg) + +Here’s how the peer lifecycle works: + +1. **Initialization state**: When the SDK is initialized, the participant connects to the meeting session as a peer. + This state can be used for pre-join experiences, such as previewing audio and video and editing the display name before joining. + +2. **Join intent**: When the peer decides to join, one of the following occurs: + - If waitlisting is enabled, the peer is placed in the waiting room. + - If the peer is allowed to enter directly, they join the session. + +3. **Waitlisted**: The peer remains in the waiting room until a host peer approves or denies their entry. + - If their entry is approved, they enter the meeting session. + - If their entry is denied, they move to the rejected state. To try joining again, they must start from initializing the SDK. + +4. **During the session**: The peer can see and interact with other peers in the meeting session. + +5. **Session termination**: The session terminates for the peer and they exit when: + - The peer voluntarily leaves the session or the meeting session ends. + - The peer is removed from the meeting session by a host. + - The peer experiences a network disconnection and SDK cannot reconnect them after multiple attempts. + +The [prebuilt](/realtime/realtimekit/ui-kit/) experience that the UIKit provides handles the peer lifecycle for you and shows the corresponding UI for each state. +If you want to build a fully custom experience that matches your application requirements and design, you can use the Core SDK and handle the peer lifecycle directly in your code. diff --git a/src/content/docs/realtime/realtimekit/core/remote-participant.mdx b/src/content/docs/realtime/realtimekit/core/remote-participant.mdx index 57816318959167..959eeaa1ed3410 100644 --- a/src/content/docs/realtime/realtimekit/core/remote-participant.mdx +++ b/src/content/docs/realtime/realtimekit/core/remote-participant.mdx @@ -3,7 +3,7 @@ pcx_content_type: navigation title: Remote Participant slug: realtime/realtimekit/core/remote-participant sidebar: - order: 5 + order: 6 --- import { Tabs, TabItem } from "~/components"; diff --git a/src/content/docs/realtime/realtimekit/core/waiting-room.mdx b/src/content/docs/realtime/realtimekit/core/waiting-room.mdx index c19854215f285c..6491c5d9318a4c 100644 --- a/src/content/docs/realtime/realtimekit/core/waiting-room.mdx +++ b/src/content/docs/realtime/realtimekit/core/waiting-room.mdx @@ -3,7 +3,7 @@ pcx_content_type: navigation title: Waiting Room slug: realtime/realtimekit/core/waiting-room sidebar: - order: 6 + order: 8 --- import { Tabs, TabItem } from "~/components"; diff --git a/src/content/docs/realtime/realtimekit/sdk-selection.mdx b/src/content/docs/realtime/realtimekit/sdk-selection.mdx index 55c4ea7b7b79a1..3fb1ad82b7df37 100644 --- a/src/content/docs/realtime/realtimekit/sdk-selection.mdx +++ b/src/content/docs/realtime/realtimekit/sdk-selection.mdx @@ -5,8 +5,9 @@ slug: realtime/realtimekit/sdk-selection sidebar: order: 4 --- -import RTKSDKSelector from '~/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro'; -import RTKPill from '~/components/realtimekit/RTKPill/RTKPill.astro'; + +import RTKSDKSelector from "~/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro"; +import RTKPill from "~/components/realtimekit/RTKPill/RTKPill.astro"; :::note If you haven't already, we recommend trying out our [demo app](https://demo.realtime.cloudflare.com/meeting?demo=Default) to get a feel for what RealtimeKit can do. @@ -14,7 +15,7 @@ If you haven't already, we recommend trying out our [demo app](https://demo.real ### Offerings -RealtimeKit provides two ways to build real-time media applications: +RealtimeKit provides two ways to build real-time media applications: **Core SDK**: Client SDK built on top of Realtime SFU that provides a full set of APIs for managing video calls, from joining and leaving sessions to muting, unmuting, and toggling audio and video. @@ -22,34 +23,34 @@ RealtimeKit provides two ways to build real-time media applications: > **Note:** When you use our UI Kit, you also get access to the core SDK with it, which can be used to build additional features based on your needs. - -### Select you framework +### Select your framework RealtimeKit support all the popular frameworks for web and mobile platforms. Please select the Platform and Framework that you are building on. - -| Framework/Library | Core SDK | UI Kit | -| -------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | -| Web-Components (HTML, Vue, Svelte) | [@cloudflare/realtimekit](https://www.npmjs.com/package/@cloudflare/realtimekit) | [@cloudflare/realtimekit-ui](https://www.npmjs.com/package/@cloudflare/realtimekit-ui) | -| React | [@cloudflare/realtimekit-react](https://www.npmjs.com/package/@cloudflare/realtimekit-react) | [@cloudflare/realtimekit-react-ui](https://www.npmjs.com/package/@cloudflare/realtimekit-react-ui) | -| Angular | [@cloudflare/realtimekit](https://www.npmjs.com/package/@cloudflare/realtimekit) | [@cloudflare/realtimekit-angular-ui](https://www.npmjs.com/package/@cloudflare/realtimekit-angular-ui) | + +| Framework/Library | Core SDK | UI Kit | +| ---------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | +| Web-Components (HTML, Vue, Svelte) | [@cloudflare/realtimekit](https://www.npmjs.com/package/@cloudflare/realtimekit) | [@cloudflare/realtimekit-ui](https://www.npmjs.com/package/@cloudflare/realtimekit-ui) | +| React | [@cloudflare/realtimekit-react](https://www.npmjs.com/package/@cloudflare/realtimekit-react) | [@cloudflare/realtimekit-react-ui](https://www.npmjs.com/package/@cloudflare/realtimekit-react-ui) | +| Angular | [@cloudflare/realtimekit](https://www.npmjs.com/package/@cloudflare/realtimekit) | [@cloudflare/realtimekit-angular-ui](https://www.npmjs.com/package/@cloudflare/realtimekit-angular-ui) | ### Technical comparison + Here is a comprehensive guide to help you choose the right option for your project. This comparison will help you understand the trade-offs between using the Core SDK alone versus combining it with the UI Kit. -| Feature | Core SDK only | UI Kit | -| ---------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------ | -| **What you get** | Core APIs for managing media, host controls, chat, recording and more. | prebuilt UI components along with Core APIs. | -| **Bundle size** | Minimal (media/network only) | Larger (includes Core SDK + UI components) | -| **Time to ship** | Longer (build UI from scratch). Typically 5-6 days. | Faster (UI Kit handles Core SDK calls). Can build an ship under 2 hours. | -| **Customization** | Complete control, manual implementation. Need to build you own UI | High level of customization with plug and play component library. | -| **State management** | Needs to be manually handled. | Automatic, UI Kit takes care of state management. | -| **UI flexibility** | Unlimited (build anything) | High (component library + add-ons) | -| **Learning curve** | Steeper (learn Core SDK APIs directly) | Gentler (declarative components wrap Core SDK) | -| **Maintenance** | More code to maintain. Larger project. | Less code, component updates included | -| **Design system** | Headless, integrates with any design system. | Allows you to provide your theme. | -| **Access to Core SDK** | Direct API access | Direct API access + UI components | +| Feature | Core SDK only | UI Kit | +| ---------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| **What you get** | Core APIs for managing media, host controls, chat, recording and more. | prebuilt UI components along with Core APIs. | +| **Bundle size** | Minimal (media/network only) | Larger (includes Core SDK + UI components) | +| **Time to ship** | Longer (build UI from scratch). Typically 5-6 days. | Faster (UI Kit handles Core SDK calls). Can build an ship under 2 hours. | +| **Customization** | Complete control, manual implementation. Need to build you own UI | High level of customization with plug and play component library. | +| **State management** | Needs to be manually handled. | Automatic, UI Kit takes care of state management. | +| **UI flexibility** | Unlimited (build anything) | High (component library + add-ons) | +| **Learning curve** | Steeper (learn Core SDK APIs directly) | Gentler (declarative components wrap Core SDK) | +| **Maintenance** | More code to maintain. Larger project. | Less code, component updates included | +| **Design system** | Headless, integrates with any design system. | Allows you to provide your theme. | +| **Access to Core SDK** | Direct API access | Direct API access + UI components | :::note If you are building with our Core SDK only, you can reference our [open source repos](https://github.com/orgs/cloudflare/repositories?q=realtimekit) for implementation examples to speed up your development. diff --git a/src/content/docs/realtime/realtimekit/ui-kit/index.mdx b/src/content/docs/realtime/realtimekit/ui-kit/index.mdx index 26aa5693fabb2f..d4b4909e73c331 100644 --- a/src/content/docs/realtime/realtimekit/ui-kit/index.mdx +++ b/src/content/docs/realtime/realtimekit/ui-kit/index.mdx @@ -182,6 +182,6 @@ To build your own custom meeting UI, follow these guides in order: 1. **[UI Kit Components Library](/realtime/realtimekit/ui-kit/component-library/)** - Browse available components and their visual representations 2. **[UI Kit Meeting Lifecycle](/realtime/realtimekit/ui-kit/meeting-lifecycle/)** - Lifecycle of a meeting and how components communicate and synchronize with each other -3. **[Session Lifecycle](/realtime/realtimekit/concepts/session-lifecycle/)** - Understand different peer states and transitions +3. **[Peer Lifecycle](/realtime/realtimekit/core/peer-lifecycle/)** - Understand different peer states and transitions 4. **[Meeting Object Explained](/realtime/realtimekit/core/meeting-object-explained/)** - Access meeting data and participant information using the Core SDK 5. **[Build Your Own UI](/realtime/realtimekit/ui-kit/build-your-own-ui/)** - Put everything together to create a custom meeting interface