diff --git a/src/content/docs/realtime/realtimekit/ui-kit/index.mdx b/src/content/docs/realtime/realtimekit/ui-kit/index.mdx index 8bd78391133..f5c7f4997ee 100644 --- a/src/content/docs/realtime/realtimekit/ui-kit/index.mdx +++ b/src/content/docs/realtime/realtimekit/ui-kit/index.mdx @@ -1,5 +1,5 @@ --- -pcx_content_type: navigation +pcx_content_type: get-started title: Build using UI Kit sidebar: order: 5 @@ -9,29 +9,36 @@ sidebar: import { Tabs, TabItem, Render } from "~/components"; import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro"; -The default RealtimeKit Meeting UI component gives you a complete meeting experience out of the box, with all the essential features built in. Just drop it into your app and you are ready to go. +The default RealtimeKit Meeting UI component gives you a complete meeting experience out of the box, with all the essential features built in. Drop it into your app and you are ready to go. -To **Initialise your SDK**, add the following code to your React application: + +## Initialize the SDK + +Add the following code to your React application: + ```ts title="App.tsx" import { useEffect } from 'react'; import { useRealtimeKitClient } from '@cloudflare/realtimekit-react'; export default function App() { -const [meeting, initMeeting] = useRealtimeKitClient(); -useEffect(() => { - initMeeting({ authToken: '' }); -}, []); + const [meeting, initMeeting] = useRealtimeKitClient(); + useEffect(() => { + initMeeting({ authToken: '' }); + }, []); -return
+ return
; } +``` -```` Use the [Create Participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/) to fetch the `authToken`. -Now, **Create a meeting component** using the `RtkMeeting` component and the `useRealtimeKitMeeting` hook (this hook provides access to the meeting object that contains all the meeting state and methods). +## Create a meeting component + +Use the `RtkMeeting` component and the `useRealtimeKitMeeting` hook. This hook provides access to the meeting object that contains all the meeting state and methods. + ```ts title="MyMeetingUI.tsx" import { useRealtimeKitMeeting } from '@cloudflare/realtimekit-react'; import { RtkMeeting } from '@cloudflare/realtimekit-react-ui'; @@ -42,9 +49,11 @@ export default function MyMeetingUI() { ); } -```` +``` + +## Display the meeting -**Use the Meeting component** like so: +Wrap your meeting component in `RealtimeKitProvider`: ```ts title="App.tsx" import { useEffect } from 'react'; @@ -69,39 +78,50 @@ export default function App() { -**Add** the following **imports to your HTM** file: + +## Import the SDK + +Add the following imports to your HTML file: + ```html title="index.html" - - - - - - + + + + + + ``` -Use the `rtk-meeting` component to **display the meeting UI**. + +## Display the meeting + +Use the `rtk-meeting` component to render the meeting UI: + ```html - + ``` -**Initialise the SDK** using the `authToken` and pass the meeting prop to the UI component to connect to the meeting. + +## Initialize the SDK + +Pass the `authToken` and connect the meeting object to the UI component: Use the [Create Participant API](/api/resources/realtime_kit/#create-a-participant) to fetch the `authToken`. ```html ``` @@ -109,10 +129,10 @@ Use the [Create Participant API](/api/resources/realtime_kit/#create-a-participa -**Load the RTKComponentsModule** into your app module. -This is typically the app.module.ts file. -This allows you to use the UI components in your component HTML files. +## Load the module + +Load `RTKComponentsModule` into your app module. This is typically the `app.module.ts` file and allows you to use the UI components in your component HTML files. ```ts import { NgModule } from "@angular/core"; @@ -129,7 +149,7 @@ import { AppComponent } from "./app.component"; export class AppModule {} ``` -_Optional:_ If you are using TypeScript, set allowSyntheticDefaultImports as true in your tsconfig.json. +_Optional:_ If you are using TypeScript, set `allowSyntheticDefaultImports` as `true` in your `tsconfig.json`. ```ts { @@ -139,17 +159,18 @@ _Optional:_ If you are using TypeScript, set allowSyntheticDefaultImports as tru } ``` -**Load the RtkMeeting component** to your template file (component.html). +## Display the meeting + +Load the `RtkMeeting` component in your template file (`component.html`): ```html ``` -**Initialise the Meeting** +## Initialize the SDK ```ts class AppComponent { - å; title = "MyProject"; @ViewChild("myid") meetingComponent: RtkMeeting; rtkMeeting: RealtimeKitClient; @@ -169,11 +190,148 @@ Use the [Create Participant API](/api/resources/realtime_kit/#create-a-participa + + +## Initialize and display the meeting + +Create a `RealtimeKitUI` instance with your auth token, then call `startMeeting(completion:)` to get a view controller. Present it to display the full meeting UI. + +Use the [Create Participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/) to fetch the `authToken`. + +```swift +import RealtimeKit +import RealtimeKitUI + +let rtkUI = RealtimeKitUI( + meetingInfo: RtkMeetingInfo( + authToken: "", + enableAudio: true, + enableVideo: true + ) +) + +let controller = rtkUI.startMeeting { + // Called when the meeting ends or the user leaves + self.dismiss(animated: true) +} +controller.modalPresentationStyle = .fullScreen +present(controller, animated: true) +``` + + + + + +## Initialize and display the meeting + +Create an `RtkMeetingInfo` with your auth token, wrap it in `RealtimeKitUIInfo`, build the UI Kit, and call `startMeeting()`. + +Use the [Create Participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/) to fetch the `authToken`. + +```kotlin +import com.cloudflare.realtimekit.models.RtkMeetingInfo +import com.cloudflare.realtimekit.ui.RealtimeKitUIBuilder +import com.cloudflare.realtimekit.ui.RealtimeKitUIInfo + +val meetingInfo = RtkMeetingInfo(authToken = "") +val uiKitInfo = RealtimeKitUIInfo( + activity = this, + rtkMeetingInfo = meetingInfo, +) +val rtkUIKit = RealtimeKitUIBuilder.build(uiKitInfo) +rtkUIKit.startMeeting() +``` + + + + + +## Initialize and display the meeting + +Create an `RtkMeetingInfo` with your auth token, wrap it in `RealtimeKitUIInfo`, and build the UI Kit. The returned `RealtimeKitUI` object is a Flutter widget — place it directly in your widget tree. + +Use the [Create Participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/) to fetch the `authToken`. + +```dart +import 'package:flutter/material.dart'; +import 'package:realtimekit_ui/realtimekit_ui.dart'; + +final meetingInfo = RtkMeetingInfo(authToken: ''); +final uiKitInfo = RealtimeKitUIInfo(meetingInfo); +final rtkUI = RealtimeKitUIBuilder.build(uiKitInfo: uiKitInfo); + +// Place rtkUI in your widget tree +Navigator.push( + context, + MaterialPageRoute(builder: (_) => rtkUI), +); +``` + +Call `RealtimeKitUIBuilder.dispose()` when you no longer need the meeting UI. + + + + + +## Initialize the SDK + +Use the `useRealtimeKitClient` hook from the core React Native package to create a meeting instance: + +Use the [Create Participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/) to fetch the `authToken`. + +```typescript +import { + useRealtimeKitClient, + RealtimeKitProvider, +} from "@cloudflare/realtimekit-react-native"; +import { + RtkMeeting, + RtkUIProvider, +} from "@cloudflare/realtimekit-react-native-ui"; +import React, { useEffect } from "react"; +import { Text } from "react-native"; +``` + +## Display the meeting + +Wrap your app in `RtkUIProvider`, initialize the client, and render `RtkMeeting`: + +```typescript +function App() { + return ( + + + + ); +} + +function Meeting({ authToken }: { authToken: string }) { + const [meet, initMeeting] = useRealtimeKitClient(); + + useEffect(() => { + initMeeting({ + authToken, + defaults: { audio: true, video: true }, + }); + }, [authToken]); + + if (!meet) return Loading...; + + return ( + + + + ); +} +``` + + + ## Next steps -You have successfully integrated RealtimeKit with the default meeting UI. Participants can now see and hear each other in sessions. +You have integrated RealtimeKit with the default meeting UI. Participants can now see and hear each other in sessions. -#### Building Custom Meeting Experiences +### Build a custom meeting experience While the default UI provides a complete meeting experience, you may want to build a custom interface using individual UI Kit components. This approach gives you full control over the layout, design, and user experience. diff --git a/src/content/partials/realtime/realtimekit/common/installation.mdx b/src/content/partials/realtime/realtimekit/common/installation.mdx index 344d145fb75..52c6e529e77 100644 --- a/src/content/partials/realtime/realtimekit/common/installation.mdx +++ b/src/content/partials/realtime/realtimekit/common/installation.mdx @@ -16,8 +16,8 @@ npm i @cloudflare/realtimekit-react @cloudflare/realtimekit-react-ui _Optional:_ You can also build on top of our ready-made template: ```bash - git clone https://github.com/cloudflare/realtimekit-web-examples.git cd - realtimekit-web-examples/react-examples/examples/default-meeting-ui +git clone https://github.com/cloudflare/realtimekit-web-examples.git +cd realtimekit-web-examples/react-examples/examples/default-meeting-ui ``` @@ -55,12 +55,10 @@ cd realtimekit-web-examples/angular-examples/examples/default-meeting-ui - Add the following dependencies to your `build.gradle` file: + Add the following dependency to your `build.gradle` file: ```java dependencies { - implementation 'com.cloudflare.realtimekit:core:1.5.5' - // Optional: Add UI components for Android implementation 'com.cloudflare.realtimekit:ui-android:0.3.0' } ``` @@ -68,16 +66,12 @@ dependencies { - Install the RealtimeKit SDK using Swift Package Manager: + Install the RealtimeKit UI Kit using Swift Package Manager: 1. In Xcode, go to **File > Add Package Dependencies**. -2. Enter the package URL: `https://github.com/dyte-in/RealtimeKitCoreiOS.git`. +2. Enter the package URL: `https://github.com/dyte-in/RealtimeKitUI`. 3. Select the version and add the package to your project. -:::note[Optional] -You can also add the RealtimeKit UI components by adding the package URL: `https://github.com/dyte-in/RealtimeKitUI` -::: - Add the following entries to the `Info.plist` file. This gives your app permissions to access the camera and microphone, access photos, and install the required fonts and icons. ```xml @@ -111,27 +105,18 @@ Source: [Apple Developer Documentation: Declaring Your App's Supported Backgroun - Install the RealtimeKit Core Flutter SDK by adding the dependency to your `pubspec.yaml` file: + Install the RealtimeKit UI Kit by adding the dependency to your `pubspec.yaml` file: ```bash -flutter pub add realtimekit_core +flutter pub add realtimekit_ui ``` Then import the package into your project: ```dart -import 'package:realtimekit_core/realtimekit_core.dart'; -``` - -:::note[Optional] -You can also add the RealtimeKit UI components: - -```bash -flutter pub add realtimekit_ui +import 'package:realtimekit_ui/realtimekit_ui.dart'; ``` -::: - @@ -201,16 +186,10 @@ Add the following entries to the `Info.plist` file. This gives your app permissi -Install the core dependencies: - -```bash -npm install @cloudflare/realtimekit-react-native @cloudflare/react-native-webrtc -``` - -**Optional:** For UI components, install additional dependencies: +Install the dependencies: ```bash -npm install @cloudflare/realtimekit-react-native-ui @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview react-native-svg +npm install @cloudflare/realtimekit-react-native @cloudflare/react-native-webrtc @cloudflare/realtimekit-react-native-ui @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview react-native-svg ``` Install `react-native-safe-area-context` based on your React Native version: @@ -220,16 +199,10 @@ Install `react-native-safe-area-context` based on your React Native version: Refer to the [react-native-svg installation guide](https://github.com/software-mansion/react-native-svg) for setup. -**Optional:** For interactive livestream functionality: - -```bash -npm install amazon-ivs-react-native-player -``` - - + -Install the core and UI dependencies: +Install the dependencies: ```bash npx expo install @cloudflare/realtimekit-react-native-ui @cloudflare/realtimekit-react-native @cloudflare/react-native-webrtc @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview react-native-svg