---
title: Cloudflare Realtime
description: RealtimeKit is a set of SDKs and APIs that lets you add customizable live video and voice to web or mobile applications. It is fully customisable and lets you set up in just a few lines of code.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Cloudflare Realtime

Cloudflare Realtime is a comprehensive suite of products designed to help you build powerful, scalable real-time applications.

### RealtimeKit

[RealtimeKit](https://developers.cloudflare.com/realtime/realtimekit/) is a set of SDKs and APIs that lets you add customizable live video and voice to web or mobile applications. It is fully customisable and lets you set up in just a few lines of code.

It sits on top of the Realtime SFU, abstracting away the heavy lifting of media routing, peer management, and other complex WebRTC operations.

### Realtime SFU

The [Realtime SFU (Selective Forwarding Unit)](https://developers.cloudflare.com/realtime/sfu/) is a powerful media server that efficiently routes video and audio. The Realtime SFU runs on [Cloudflare's global cloud network ↗](https://www.cloudflare.com/network/) in hundreds of cities worldwide.

For developers with WebRTC expertise, the SFU can be used independently to build highly custom applications that require full control over media streams. This is recommended only for those who want to leverage Cloudflare's network with their own WebRTC logic.

### TURN Service

The [TURN service](https://developers.cloudflare.com/realtime/turn/) is a managed service that acts as a relay for WebRTC traffic. It ensures connectivity for users behind restrictive firewalls or NATs by providing a public relay point for media streams.

## Choose the right Realtime product

Use this comparison table to quickly find the right Realtime product for your needs:

| **RealtimeKit**               | **Realtime SFU**                                                                                                                | **TURN Service**                                                                                                                                             |                                                                                                                         |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| **What is it**                | High-level SDKs and APIs with pre-built UI components for video/voice integration. Built on top of Realtime SFU.                | Low-level WebRTC media server (Selective Forwarding Unit) that routes audio/video/data streams between participants.                                         | Managed relay service for WebRTC traffic that ensures connectivity through restrictive firewalls and NATs.              |
| **Who is it for**             | Developers who want to quickly add video/voice features without handling WebRTC complexities.                                   | Developers with WebRTC expertise who need full control over media streams and want to build highly custom applications.                                      | Any WebRTC application needing reliable connectivity in restrictive network environments.                               |
| **Effort to get started**     | Low - Just a few lines of code with UI Kit and Core SDK.                                                                        | High - Requires deep WebRTC knowledge. No SDK provided (unopinionated). You manage sessions, tracks, and presence protocol. Works with every WebRTC library. | Low - Automatically used by WebRTC libraries (browser WebRTC, Pion, libwebrtc). No additional code needed.              |
| **WebRTC expertise required** | None - Abstracts away WebRTC complexities.                                                                                      | Expert - You handle all WebRTC logic yourself.                                                                                                               | None - Used transparently by WebRTC libraries.                                                                          |
| **Primitives**                | Meetings, Sessions, Participants, Presets (roles), Stage, Waiting Room                                                          | Sessions (PeerConnections), Tracks (MediaStreamTracks), pub/sub model - no rooms concept                                                                     | TURN allocations, relayed transport addresses, protocols (UDP/TCP/TLS)                                                  |
| **Key use cases**             | Team meetings, virtual classrooms, webinars, live streaming with interactive features, social video chat                        | Highly custom real-time apps, unique WebRTC architectures that don't fit standard patterns, leveraging Cloudflare's network with custom logic                | Ensuring connectivity for all users regardless of firewall/NAT configuration, used alongside SFU or peer-to-peer WebRTC |
| **Key features**              | Pre-built UI components, automatic track management, recording, chat, polls, breakout rooms, virtual backgrounds, transcription | Unopinionated architecture, no lock-in, globally scalable, full control over media routing, programmable "switchboard"                                       | Anycast routing to nearest location, multiple protocol options                                                          |
| **Pricing**                   | Pricing by minute [view details ↗](https://workers.cloudflare.com/pricing#media)                                                | $0.05/GB egress                                                                                                                                              | Free when used with Realtime SFU, otherwise $0.05/GB egress                                                             |
| **Free tier**                 | None                                                                                                                            | First 1,000 GB free each month                                                                                                                               | First 1,000 GB free each month                                                                                          |

## Related products

**[Workers AI](https://developers.cloudflare.com/workers-ai/)** 

Run machine learning models, powered by serverless GPUs, on Cloudflare’s global network.

**[Stream](https://developers.cloudflare.com/stream/)** 

Cloudflare Stream lets you or your end users upload, store, encode, and deliver live and on-demand video with one API, without configuring or maintaining infrastructure.

## More resources

[Developer Discord](https://discord.cloudflare.com) 

Connect with the Realtime community on Discord to ask questions, show what you are building, and discuss the platform with other developers.

[Use cases](https://developers.cloudflare.com/realtime/realtimekit/introduction#use-cases) 

Learn how you can build and deploy ambitious Realtime applications to Cloudflare's global network.

[@CloudflareDev](https://x.com/cloudflaredev) 

Follow @CloudflareDev on Twitter to learn about product announcements, and what is new in Cloudflare Realtime.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}}]}
```

---

---
title: RealtimeKit
description: With RealtimeKit, you can expect:
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RealtimeKit

Add live video and voice to your web or mobile apps in minutes — customizable SDKs, Integrate in just a few lines of code.

With RealtimeKit, you can expect:

* **Fast, simple integration:** Add live video and voice calling to any platform using our SDKs in minutes.
* **Customizable:**Tailor the experience to your needs.
* **Powered by WebRTC:**Built on top of modern, battle-tested WebRTC technology. RealtimeKit sits on top of [Realtime SFU](https://developers.cloudflare.com/realtime/sfu/) handling media track management, peer management, and other complicated tasks for you.

Experience the product:

[ Try A Demo Meeting ](https://demo.realtime.cloudflare.com) [ Build using Examples ](https://github.com/cloudflare/realtimekit-web-examples) [ RealtimeKit Dashboard ](https://dash.cloudflare.com/?to=/:account/realtime/kit) 

## Build with RealtimeKit

RealtimeKit powers a wide range of usecases — here are the most common ones

#### Group Calls

Experience team meetings, virtual classrooms with interactive plugins, and seamless private or group video chats — all within your platform.

#### Webinars

Host large, interactive one-to-many events with virtual stage management, and engagement tools like plugins, chat, and polls — ideal for product demos, company all-hands, and live workshops

#### Audio Only Calls

Host audio-only calls — perfect for team discussions, support lines, and community hangouts— low bandwidth usage and features like mute controls, hand-raise, and role management.

## Product Suite

* [**UI Kit**](https://developers.cloudflare.com/realtime/realtimekit/ui-kit)  Recommended  UI library of pre-built, customizable components for rapid development — sits on top of the Core SDK.
* [**Core SDK**](https://developers.cloudflare.com/realtime/realtimekit/core) 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.
* [**Realtime SFU**](https://developers.cloudflare.com/realtime/sfu) efficiently routes media with low latency—all running on Cloudflare’s global network for reliability and scale.

The **Backend Infrastructure** Powering the SDKs is a robust layer that includes REST APIs for managing meetings, participants, recordings and more, along with webhooks for server-side events. A dedicated signalling server coordinates real-time updates.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}}]}
```

---

---
title: AI
description: RealtimeKit provides AI-powered features using Cloudflare's AI infrastructure to enhance your meetings with transcription and summarization capabilities.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ai/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# AI

RealtimeKit provides AI-powered features using Cloudflare's AI infrastructure to enhance your meetings with transcription and summarization capabilities.

* [ Transcription ](https://developers.cloudflare.com/realtime/realtimekit/ai/transcription/)
* [ Summary ](https://developers.cloudflare.com/realtime/realtimekit/ai/summary/)

## Available features

| Feature                                                                                   | Description                               |
| ----------------------------------------------------------------------------------------- | ----------------------------------------- |
| [Transcription](https://developers.cloudflare.com/realtime/realtimekit/ai/transcription/) | Real-time and post-meeting speech-to-text |
| [Summary](https://developers.cloudflare.com/realtime/realtimekit/ai/summary/)             | AI-generated meeting summaries            |

## Quick start

Enable AI features when creating a meeting:

```

{

  "title": "Team Standup",

  "ai_config": {

    "transcription": {

      "language": "en-US"

    },

    "summarization": {

      "summary_type": "team_meeting"

    }

  },

  "summarize_on_end": true

}


```

Ensure participants have `transcription_enabled: true` in their [preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/).

## Storage and retention

* Transcripts and summaries are stored for **7 days** from meeting start
* Files are stored in R2 with presigned URLs for secure access
* Delivered via [webhooks](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/webhooks/) or REST API

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ai/","name":"AI"}}]}
```

---

---
title: Summary
description: RealtimeKit generates AI-powered meeting summaries from transcript data.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ai/summary.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Summary

RealtimeKit generates AI-powered meeting summaries from transcript data.

Note

[Transcription](https://developers.cloudflare.com/realtime/realtimekit/ai/transcription/) must be enabled to use summarization.

## Enable summarization

Set `summarize_on_end: true` when [creating a meeting](https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting/):

```

{

  "title": "Product Review",

  "ai_config": {

    "transcription": {

      "language": "en-US"

    },

    "summarization": {

      "word_limit": 500,

      "text_format": "markdown",

      "summary_type": "team_meeting"

    }

  },

  "summarize_on_end": true

}


```

## Configuration

| Option        | Type   | Default     | Description                            |
| ------------- | ------ | ----------- | -------------------------------------- |
| word\_limit   | number | 300         | Summary length (150-1000 words)        |
| text\_format  | string | plain\_text | Output format: plain\_text or markdown |
| summary\_type | string | general     | Meeting context for tailored summaries |

### Summary types

Choose a type that matches your meeting for better results:

| Type                  | Best for                     |
| --------------------- | ---------------------------- |
| general               | Any meeting (default)        |
| team\_meeting         | Regular team syncs           |
| daily\_standup        | Agile standups               |
| one\_on\_one\_meeting | 1:1 meetings                 |
| sales\_call           | Customer sales conversations |
| client\_check\_in     | Client status updates        |
| interview             | Job interviews               |
| lecture               | Educational content          |
| code\_review          | Technical code reviews       |

## Consume summaries

### Webhook

Configure `meeting.summary` event in [webhooks](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/webhooks/):

```

{

  "event": "meeting.summary",

  "meetingId": "meeting-123",

  "sessionId": "session-456",

  "summaryDownloadUrl": "https://...",

  "summaryDownloadUrlExpiry": "2024-08-14T10:15:30.000Z"

}


```

### REST API

#### Fetch summary

Refer to [Fetch summary of transcripts for a session](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/sessions/methods/get%5Fsession%5Fsummary/).

Terminal window

```

curl -X GET "https://api.cloudflare.com/client/v4/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}/summary" \

  -H "Authorization: Bearer {api_token}"


```

#### Trigger manually

Generate a summary after the meeting if `summarize_on_end` was not set. Refer to [Generate summary of transcripts for the session](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/sessions/methods/generate%5Fsummary%5Fof%5Ftranscripts/).

Terminal window

```

curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}/summary" \

  -H "Authorization: Bearer {api_token}"


```

## Example output

With `text_format: "markdown"` and `summary_type: "team_meeting"`:

```

## Meeting Summary


### Key Discussion Points

- Reviewed Q4 roadmap priorities

- Discussed deployment timeline for v2.0

- Identified blockers for the auth migration


### Action Items

- @alice: Update design specs by Friday

- @bob: Schedule security review

- @charlie: Create migration runbook


### Decisions Made

- Approved moving forward with Kubernetes migration

- Delayed analytics dashboard to next sprint


```

## Retention

Summaries are stored for **7 days** from meeting ends.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ai/","name":"AI"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ai/summary/","name":"Summary"}}]}
```

---

---
title: Transcription
description: RealtimeKit provides two transcription modes powered by Cloudflare Workers AI:
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ai/transcription.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Transcription

RealtimeKit provides two transcription modes powered by Cloudflare Workers AI:

| Mode             | Model                                                                                                 | Use Case                       |
| ---------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------ |
| **Real-time**    | [Deepgram Nova-3](https://developers.cloudflare.com/workers-ai/models/nova-3/)                        | Live captions during meeting   |
| **Post-meeting** | [Whisper Large v3 Turbo](https://developers.cloudflare.com/workers-ai/models/whisper-large-v3-turbo/) | Accurate offline transcription |

## Real-time transcription

Streams transcripts to participants as they speak using [Deepgram Nova-3](https://developers.cloudflare.com/workers-ai/models/nova-3/) via Cloudflare AI Gateway.

### Enable via preset

Set `transcription_enabled: true` in the participant's [preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/):

```

{

  "name": "webinar_host",

  "transcription_enabled": true

}


```

Only participants with this flag will have their audio transcribed.

### Configure

Pass `ai_config.transcription` when [creating a meeting](https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting/):

```

{

  "title": "Team Standup",

  "ai_config": {

    "transcription": {

      "language": "en-US",

      "keywords": ["RealtimeKit", "Cloudflare"],

      "profanity_filter": false

    }

  }

}


```

| Option            | Type       | Default | Description                                |
| ----------------- | ---------- | ------- | ------------------------------------------ |
| language          | string     | en-US   | Language code for transcription            |
| keywords          | string\[\] | \[\]    | Terms to boost recognition (names, jargon) |
| profanity\_filter | boolean    | false   | Filter offensive language                  |

### Supported languages

Real-time transcription is powered by [Deepgram Nova-3](https://developers.cloudflare.com/workers-ai/models/nova-3/) on Workers AI.

Nova-3 on Workers AI supports the following languages for transcription:

| Language   | Code(s)                               |
| ---------- | ------------------------------------- |
| English    | en, en-US, en-AU, en-GB, en-IN, en-NZ |
| Spanish    | es, es-419                            |
| French     | fr, fr-CA                             |
| German     | de, de-CH                             |
| Hindi      | hi                                    |
| Russian    | ru                                    |
| Portuguese | pt, pt-BR, pt-PT                      |
| Japanese   | ja                                    |
| Italian    | it                                    |
| Dutch      | nl                                    |

Use `multi` for automatic multilingual detection across all of the languages listed above.

If no language is specified, the model defaults to `en-US`. For best accuracy, explicitly set the language code matching your audio.

### Consume transcripts

#### Client SDK

JavaScript

```

// Get all transcripts

const transcripts = meeting.ai.transcripts;


// Listen for new transcripts

meeting.ai.on("transcript", (data) => {

  if (data.isPartialTranscript) {

    // Interim result - speaker still talking

    updateLiveCaption(data.peerId, data.transcript);

  } else {

    // Final result

    appendToHistory(data);

  }

});


```

#### Transcript payload

```

{

  "id": "1a2b3c4d-5678-90ab-cdef-1234567890ab",

  "name": "Alice",

  "peerId": "4f5g6h7i-8j9k-0lmn-opqr-1234567890st",

  "userId": "uvwxyz-1234-5678-90ab-cdefghijklmn",

  "customParticipantId": "abc123xyz",

  "transcript": "Hello everyone",

  "isPartialTranscript": false,

  "date": "2024-08-07T10:15:30.000Z"

}


```

| Field               | Description                                      |
| ------------------- | ------------------------------------------------ |
| isPartialTranscript | true \= interim (still speaking), false \= final |
| peerId              | Changes if participant rejoins                   |
| userId              | Persistent participant ID                        |
| customParticipantId | Your custom ID from Add Participant API          |

---

## Post-meeting transcription

Generates transcripts after the meeting ends using [Whisper Large v3 Turbo](https://developers.cloudflare.com/workers-ai/models/whisper-large-v3-turbo/). Transcripts from all participants are consolidated into a unified timeline and delivered via webhook or REST API.

Note

Post-meeting transcription is currently in closed beta. If you are interested in this feature, contact your account team.

### Supported languages

Supports all languages in [Whisper Large v3 Turbo](https://developers.cloudflare.com/workers-ai/models/whisper-large-v3-turbo/). Uses ISO 639-1 language codes.

### Output formats

| Format   | Use Case                             |
| -------- | ------------------------------------ |
| **CSV**  | Spreadsheets, data analysis          |
| **SRT**  | Video subtitle files                 |
| **VTT**  | Web video captions (<track> element) |
| **JSON** | Programmatic access                  |

#### CSV example

```

Timestamp,Participant ID,User ID,Custom Participant ID,Participant Name,Transcript

2024-08-07T10:15:30.000Z,peer-123,user-456,cust-789,Alice,Hello everyone

2024-08-07T10:15:35.000Z,peer-234,user-567,cust-890,Bob,Hi Alice


```

#### JSON example

```

[

  {

    "startTime": 0,

    "endTime": 2.5,

    "sentence": "Hello everyone",

    "peerData": {

      "id": "peer-123",

      "userId": "user-456",

      "displayName": "Alice",

      "cpi": "cust-789"

    }

  }

]


```

### Fetch transcripts

#### Webhook

Configure `meeting.transcript` event in [webhooks](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/webhooks/):

```

{

  "event": "meeting.transcript",

  "meetingId": "meeting-123",

  "sessionId": "session-456",

  "transcriptDownloadUrl": "https://...",

  "transcriptDownloadUrlExpiry": "2024-08-14T10:15:30.000Z"

}


```

#### REST API

Refer to [Fetch the complete transcript for a session](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/sessions/methods/get%5Fsession%5Ftranscripts/).

Terminal window

```

curl -X GET "https://api.cloudflare.com/client/v4/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}/transcript" \

  -H "Authorization: Bearer {api_token}"


```

Transcripts are available for **7 days** after meeting ends.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ai/","name":"AI"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ai/transcription/","name":"Transcription"}}]}
```

---

---
title: Audio Only Calls
description: RealtimeKit supports voice calls, allowing you to build audio-only experiences such as audio rooms, support lines, or community hangouts.
In these meetings, participants use their microphones and hear others, but cannot use their camera. Voice meetings reduce bandwidth requirements and focus on audio communication.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/audio-calls.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Audio Only Calls

RealtimeKit supports voice calls, allowing you to build audio-only experiences such as audio rooms, support lines, or community hangouts. In these meetings, participants use their microphones and hear others, but cannot use their camera. Voice meetings reduce bandwidth requirements and focus on audio communication.

## How Audio Calls Work

A participant’s meeting experience is determined by the **Preset** applied to that participant. To run a voice meeting, ensure all participants join with a Preset that has meeting type set to `Voice`.

For details on Presets and how to configure them, refer to [Preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/).

## Pricing

When a participant joins with a `Voice` meeting type Preset, they are considered an **Audio-Only Participant** for billing. This is different from the billing for Audio/Video Participants.

For detailed pricing information, refer to [Pricing](https://developers.cloudflare.com/realtime/realtimekit/pricing/).

## Building Audio Experiences

You can build voice meeting experiences using either the UI Kit or the Core SDK.

### UI Kit

UI Kit provides a pre-built meeting experience with customization options.

When participants join with a `Voice` meeting type Preset, UI Kit automatically renders a voice-only interface. You can use the default meeting UI or build your own UI using UI Kit components.

To get started, refer to [Build using UI Kit](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/).

### Core SDK

Core SDK provides full control to build custom audio-only interfaces. Video-related APIs are non-functional for participants with `Voice` type Presets.

To get started, refer to [Build using Core SDK](https://developers.cloudflare.com/realtime/realtimekit/core/).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/audio-calls/","name":"Audio Only Calls"}}]}
```

---

---
title: Message Broadcast APIs
description: The broadcast APIs allow a user to send custom messages to all other users in a meeting.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/collaborative-stores/broadcast.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Message Broadcast APIs

The broadcast APIs allow a user to send custom messages to all other users in a meeting.

WebMobile

ReactWeb ComponentsAngular

### Broadcasting a Message

The Participants module on the meeting object allows you to broadcast messages to all other users in a meeting (or to other meetings in case of connected meetings) over the signaling channel.

| Param   | Type                         | Description                                                                          | Required |
| ------- | ---------------------------- | ------------------------------------------------------------------------------------ | -------- |
| type    | Exclude<string, 'spotlight'> | Message type identifier used to distinguish different kinds of broadcasts.           | Yes      |
| payload | BroadcastMessagePayload      | Data sent with the message. Keys map to boolean, number, string, Date, or ActiveTab. | Yes      |
| target  | BroadcastMessageTarget       | Optional target filter for which participants or meetings receive the message.       | No       |

* If target is omitted, the message is broadcast to all participants in the current meeting, including the local participant.
* If `target.participantIds` is provided, the message is sent only to those participants in the current meeting.
* If `target.presetNames` is provided, the message is sent to all participants whose preset name is in the list.
* If `target.meetingIds` is provided, the message is broadcast to all specified meetings (multi‑meeting broadcast).

TypeScript

```

const participants = useRealtimeKitSelector((m) => m.participants);

participants.broadcastMessage(

  type: Exclude<string, 'spotlight'>,

  payload: BroadcastMessagePayload,

  target?: BroadcastMessageTarget,

): Promise<void>


```

TypeScript

```

type BroadcastMessagePayload = {

  [key: string]: boolean | number | string | Date | ActiveTab;

};


type BroadcastMessageTarget =

  | { participantIds: string[] }

  | { presetNames: string[] }

  | { meetingIds: string[] };


```

| Param   | Type                         | Description                                                                          | Required |
| ------- | ---------------------------- | ------------------------------------------------------------------------------------ | -------- |
| type    | Exclude<string, 'spotlight'> | Message type identifier used to distinguish different kinds of broadcasts.           | Yes      |
| payload | BroadcastMessagePayload      | Data sent with the message. Keys map to boolean, number, string, Date, or ActiveTab. | Yes      |
| target  | BroadcastMessageTarget       | Optional target filter for which participants or meetings receive the message.       | No       |

* If target is omitted, the message is broadcast to all participants in the current meeting, including the local participant.
* If `target.participantIds` is provided, the message is sent only to those participants in the current meeting.
* If `target.presetNames` is provided, the message is sent to all participants whose preset name is in the list.
* If `target.meetingIds` is provided, the message is broadcast to all specified meetings (multi‑meeting broadcast).

TypeScript

```

meeting.participants.broadcastMessage(

  type: Exclude<string, 'spotlight'>,

  payload: BroadcastMessagePayload,

  target?: BroadcastMessageTarget,

): Promise<void>


```

TypeScript

```

type BroadcastMessagePayload = {

  [key: string]: boolean | number | string | Date | ActiveTab;

};


type BroadcastMessageTarget =

  | { participantIds: string[] }

  | { presetNames: string[] }

  | { meetingIds: string[] };


```

| Param   | Type                         | Description                                                                          | Required |
| ------- | ---------------------------- | ------------------------------------------------------------------------------------ | -------- |
| type    | Exclude<string, 'spotlight'> | Message type identifier used to distinguish different kinds of broadcasts.           | Yes      |
| payload | BroadcastMessagePayload      | Data sent with the message. Keys map to boolean, number, string, Date, or ActiveTab. | Yes      |
| target  | BroadcastMessageTarget       | Optional target filter for which participants or meetings receive the message.       | No       |

* If target is omitted, the message is broadcast to all participants in the current meeting, including the local participant.
* If `target.participantIds` is provided, the message is sent only to those participants in the current meeting.
* If `target.presetNames` is provided, the message is sent to all participants whose preset name is in the list.
* If `target.meetingIds` is provided, the message is broadcast to all specified meetings (multi‑meeting broadcast).

TypeScript

```

meeting.participants.broadcastMessage(

  type: Exclude<string, 'spotlight'>,

  payload: BroadcastMessagePayload,

  target?: BroadcastMessageTarget,

): Promise<void>


```

TypeScript

```

type BroadcastMessagePayload = {

  [key: string]: boolean | number | string | Date | ActiveTab;

};


type BroadcastMessageTarget =

  | { participantIds: string[] }

  | { presetNames: string[] }

  | { meetingIds: string[] };


```

### Subscribe to Messages

Use the `broadcastedMessage` event to listen for messages sent via `broadcastMessage` and handle them in your application.

TypeScript

```

const participants = useRealtimeKitSelector((m) => m.participants);

participants.on("broadcastedMessage", ({ type, payload, timestamp }) => {

  // handle message

});


```

TypeScript

```

meeting.participants.on(

  "broadcastedMessage",

  ({ type, payload, timestamp }) => {

    // handle message

  },

);


```

TypeScript

```

meeting.participants.on(

  "broadcastedMessage",

  ({ type, payload, timestamp }) => {

    // handle message

  },

);


```

### Rate Limiting & Constraints

* The method is rate‑limited (server‑side + client‑side) to prevent abuse.
* Default client‑side config in the deprecated module: maxInvocations = 5 per period = 1s.
* The Participants module exposes a `rateLimitConfig` and `updateRateLimits(maxInvocations, period)` for tuning on the client, but server‑side limits may still apply.
* The event type cannot be `spotlight`. This is reserved for internal use by the SDK.

### Examples

#### Broadcast to everyone in the meeting

TypeScript

```

const participants = useRealtimeKitSelector((m) => m.participants);

await participants.broadcastMessage("HAND_RAISE", {

  raised: true,

  userId: meeting.self.userId,

  sentAt: new Date(),

});


participants.on(

"broadcastedMessage",

({ type, payload, timestamp }) => {

if (type === "HAND_RAISE") {

// payload.raised, payload.userId, payload.sentAt

}

},

);


```

TypeScript

```

await meeting.participants.broadcastMessage("HAND_RAISE", {

  raised: true,

  userId: meeting.self.userId,

  sentAt: new Date(),

});


meeting.participants.on(

"broadcastedMessage",

({ type, payload, timestamp }) => {

if (type === "HAND_RAISE") {

// payload.raised, payload.userId, payload.sentAt

}

},

);


```

TypeScript

```

await meeting.participants.broadcastMessage("HAND_RAISE", {

  raised: true,

  userId: meeting.self.userId,

  sentAt: new Date(),

});


meeting.participants.on(

"broadcastedMessage",

({ type, payload, timestamp }) => {

if (type === "HAND_RAISE") {

// payload.raised, payload.userId, payload.sentAt

}

},

);


```

#### Broadcast to a specific set of participants.

Only the participants with those participantIds receive the message.

TypeScript

```

const participants = useRealtimeKitSelector((m) => m.participants);

await participants.broadcastMessage(

  "PRIVATE_NOTE",

  { message: "You are on stage in 30 seconds" },

  {

    participantIds: ["peer-id-1", "peer-id-2"],

  },

);


```

TypeScript

```

await meeting.participants.broadcastMessage(

  "PRIVATE_NOTE",

  { message: "You are on stage in 30 seconds" },

  {

    participantIds: ["peer-id-1", "peer-id-2"],

  },

);


```

TypeScript

```

await meeting.participants.broadcastMessage(

  "PRIVATE_NOTE",

  { message: "You are on stage in 30 seconds" },

  {

    participantIds: ["peer-id-1", "peer-id-2"],

  },

);


```

#### Broadcast to a preset

All participants whose preset name is `speaker` receive the message.

TypeScript

```

const participants = useRealtimeKitSelector((m) => m.participants);

await participants.broadcastMessage(

  "STAGE_INSTRUCTION",

  { text: "Prepare for Q&A" },

  {

    presetNames: ["speaker"],

  },

);


```

TypeScript

```

await meeting.participants.broadcastMessage(

  "STAGE_INSTRUCTION",

  { text: "Prepare for Q&A" },

  {

    presetNames: ["speaker"],

  },

);


```

TypeScript

```

await meeting.participants.broadcastMessage(

  "STAGE_INSTRUCTION",

  { text: "Prepare for Q&A" },

  {

    presetNames: ["speaker"],

  },

);


```

#### Broadcast across multiple meetings

All participants in the specified meetings receive the message.

TypeScript

```

const participants = useRealtimeKitSelector((m) => m.participants);

await participants.broadcastMessage(

  "GLOBAL_ANNOUNCEMENT",

  { text: "The event will end in 5 minutes." },

  {

    meetingIds: ["meeting-1", "meeting-2"],

  },

);


```

TypeScript

```

await meeting.participants.broadcastMessage(

  "GLOBAL_ANNOUNCEMENT",

  { text: "The event will end in 5 minutes." },

  {

    meetingIds: ["meeting-1", "meeting-2"],

  },

);


```

TypeScript

```

await meeting.participants.broadcastMessage(

  "GLOBAL_ANNOUNCEMENT",

  { text: "The event will end in 5 minutes." },

  {

    meetingIds: ["meeting-1", "meeting-2"],

  },

);


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/broadcast-apis/","name":"Message Broadcast APIs"}}]}
```

---

---
title: Storage and Broadcast
description: The RealtimeKit Stores API allows you to create multiple key-value pair realtime stores. Users can subscribe to changes in a store and receive real-time updates. Data is stored until a session is active.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/collaborative-stores/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Storage and Broadcast

The RealtimeKit Stores API allows you to create multiple key-value pair realtime stores. Users can subscribe to changes in a store and receive real-time updates. Data is stored until a [session](https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting/#session) is active.

This page is not available for the **Flutter**platform.

WebMobile

ReactWeb ComponentsAngular

### Create a Store

You can create a realtime store (changes are synced with other users):

| Param | Type   | Description       | Required |
| ----- | ------ | ----------------- | -------- |
| name  | string | Name of the store | true     |

To create a store:

TypeScript

```

const stores = useRealtimeKitSelector((m) => m.stores);

const store = stores.create('myStore');


```

TypeScript

```

const store = meeting.stores.create('myStore');


```

TypeScript

```

const store = meeting.stores.create('myStore');


```

Kotlin

```

val meeting = RealtimeKitMeetingBuilder.build(activity)

val store = meeting.stores.create("myStore")


```

Swift

```

let meeting = RealtimeKitiOSClientBuilder().build()

let store = meeting.stores.create(name: "myStore")


```

This feature is not currently supported in the Flutter SDK

Note

This method must be executed for every user.

### Update a Store

You can add, update or delete entires in a store:

| Param | Type       | Description                                                 | Required |
| ----- | ---------- | ----------------------------------------------------------- | -------- |
| key   | string     | Unique identifier used to store/update a value in the store | Yes      |
| value | StoreValue | Value that can be stored agains a key                       | Yes      |

TypeScript

```

type StoreValue = string | number | object | array;


```

TypeScript

```

const stores = useRealtimeKitSelector((m) => m.stores.stores);

const store = stores.get("myStore");


await store.set("user", { name: "John Doe" });


await store.update("user", { age: 34 }); // { name: 'John Doe', age: 34 }


await store.delete("user");


```

TypeScript

```

type StoreValue = string | number | object | array;


```

TypeScript

```

const { stores } = meeting.stores;

const store = stores.get("myStore");


await store.set("user", { name: "John Doe" });


await store.update("user", { age: 34 }); // { name: 'John Doe', age: 34 }


await store.delete("user");


```

TypeScript

```

type StoreValue = string | number | object | array;


```

TypeScript

```

const { stores } = meeting.stores;

const store = stores.get("myStore");


await store.set("user", { name: "John Doe" });


await store.update("user", { age: 34 }); // { name: 'John Doe', age: 34 }


await store.delete("user");


```

Kotlin

```

val store = meeting.stores.get("myStore")


store.set("user", mapOf("name" to "John Doe"))


```

Swift

```

let store = meeting.stores.get(name: "myStore")

store.set("user", ["name": "John Doe"])


```

Note

The `set` method overwrites the existing value, while the `update` method updates the existing value.

For example, if the stored value is `['a', 'b']` and you call `update` with `['c']`, the final value will be `['a', 'b', 'c']`.

### Subscribe to a Store

You can attach event listeners on a store's key, which fire when the value changes.

TypeScript

```

const stores = useRealtimeKitSelector((m) => m.stores.stores);

const store = stores.get('myStore');

store.subscribe('key', (data) => {

    console.log(data);

});


// subscribe to all keys of a store

store.subscribe('\*', (data) => {

console.log(data);

});


store.unsubscribe('key');


```

TypeScript

```

const { stores } = meeting.stores;

const store = stores.get('myStore');

store.subscribe('key', (data) => {

    console.log(data);

});


// subscribe to all keys of a store

store.subscribe('\*', (data) => {

console.log(data);

});


store.unsubscribe('key');


```

TypeScript

```

const { stores } = meeting.stores;

const store = stores.get('myStore');

store.subscribe('key', (data) => {

    console.log(data);

});


// subscribe to all keys of a store

store.subscribe('\*', (data) => {

console.log(data);

});


store.unsubscribe('key');


```

Kotlin

```

val store = meeting.stores.create("myStore")

val keyChangeCallback = { key: String, value: Any? ->

  println(value)

}

store.subscribe("key", keyChangeCallback)


// Subscribe to all keys

store.subscribe(RtkStore.WILDCARD_KEY) { key, value ->

  println(value)

}


store.unsubscribe("key", keyChangeCallback)


```

Swift

```

let store = meeting.stores.create(name: "myStore")

let keyChangeCallback: ((String, (Any?)) -> Void) = { key, value in

    print(value ?? "null")

}

store.subscribe(key: "key", onChange: keyChangeCallback)


// Subscribe to all keys

store.subscribe(key: RtkStore.Companion().WILDCARD_KEY) { key, value in

    print(value ?? "null")

}


store.unsubscribe(key: "key", onChange: keyChangeCallback)


```

### Fetch Store Data

You can fetch the data stored in the store:

TypeScript

```

const stores = useRealtimeKitSelector((m) => m.stores.stores);

const store = stores.get('myStore');


// fetch value for a specific key

const data = store.get('key');


// fetch all the data in the store

const data = store.getAll();


```

TypeScript

```

const { stores } = meeting.stores;

const store = stores.get('myStore');


// fetch value for a specific key

const data = store.get('key');


// fetch all the data in the store

const data = store.getAll();


```

TypeScript

```

const { stores } = meeting.stores;

const store = stores.get('myStore');


// fetch value for a specific key

const data = store.get('key');


// fetch all the data in the store

const data = store.getAll();


```

Kotlin

```

val store = meeting.stores.create("myStore")


// fetch value for a specific key

val data = store.get("key")


// fetch all the data in the store

val data = store.getAll()


```

Swift

```

let store = meeting.stores.create(name: "myStore")


// fetch value for a specific key

store.get(key: "key")


// fetch all the data in the store

store.getAll()


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/collaborative-stores/","name":"Storage and Broadcast"}}]}
```

---

---
title: Concepts
description: This page outlines the core concepts and key terminology used throughout RealtimeKit.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/concepts/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Concepts

This page outlines the core concepts and key terminology used throughout RealtimeKit.

### App

An App represents a **workspace** within RealtimeKit. It groups together your meetings, participants, presets, recordings, and other configuration under an isolated namespace.

Treat each App like an environment-specific container—most teams create one App for staging and another for production to avoid mixing data.

### Meeting

A Meeting is a **re-usable virtual room** that you can join anytime. Every time participants join a meeting, a new [session](https://developers.cloudflare.com/realtime/realtimekit/concepts#session) is created.

A session is marked `ENDED` shortly after the last participant leaves. A meeting can have only **one active session** at any given time.

For more information about meetings, refer to [Meetings](https://developers.cloudflare.com/realtime/realtimekit/concepts#meeting).

### Session

A Session is the **live instance of a meeting**. It is created when the first participant joins a meeting and ends shortly after the last participant leaves.

Each session is independent, with its own participants, chat, and recordings. It also inherits the configurations set while creating the meeting - `record on start`, `persist_chat`, and more.

Example - A recurring “Weekly Standup” **meeting will generate a new session** every time participants join.

### Participant

A **Participant** is created when you add a user to a meeting via the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/). This API call returns a unique `authToken` that the client-side SDK uses to join the session and authenticate the user.

> **Note:** Please do not re-use auth tokens for participants.

For more information about participants, refer to [Participants](https://developers.cloudflare.com/realtime/realtimekit/concepts/participant/).

### Preset

A Preset is a reusable set of permissions that defines the experience and the UI’s look and feel for a participant.

Created at the App level, it can be applied to any participant across any meeting in that App.

It also defines the meeting type a user joins—video call, audio call, or webinar. Participants in the same meeting can use different presets to create flexible roles. Example: In a large ed-tech class:

* **Teacher** will join with a `webinar-host` preset, allowing them to share their media and providing host controls.
* **Students** will join with a `webinar-participant` preset, which restricts them from sharing media but allows them to use features like chat.
* **Teaching assistant** will join with a `group-call-host` preset, enabling them to share their media but not have full control.

It also lets you customize the UI’s look and feel, including colors and themes, so the experience matches your application's branding.

For more information about presets, refer to [Presets](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/concepts/","name":"Concepts"}}]}
```

---

---
title: Meeting
description: Meeting is a re-usable virtual room that you can join and interact in, in real-time.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/concepts/meeting.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Meeting

Meeting is a **re-usable virtual room** that you can join and interact in, in real-time.

You can assign a title and feature configuration to it, then add participants who are authorised to join. The Meeting itself doesn't "start" or "end"; it just exists.

Because Meetings do not have a specific date or time, you can create them well in advance or create them just-in-time, right when users need to join.

The following diagram shows the blueprint of a Meeting:

---
title: Meeting
---
flowchart TB
  accTitle: Meeting blueprint
  accDescr: Diagram showing blueprint of a Meeting

  subgraph details [ ]
      direction LR
      subgraph feat ["<b>Features</b>"]
          feat-content["Chat<br>...<br>Recording<br>...<br>Transcriptions"]
      end
      subgraph config ["<b>Configuration</b>"]
          config-content["record_on_start<br>...<br>persist_chat<br>...<br>ai_config"]
      end
  end

  subgraph participants ["<b>Participants</b>"]
      direction LR
      subgraph participats-row2 [ ]
          direction TB
          P3["<br>Participant 3
          <br>
          "]
          P4["<br>Participant 4
          <br>
          "]
      end
      subgraph participats-row1 [ ]
          direction TB
          P1["<br>Participant 1
          <br>
          "]
          P2["<br>Participant 2
          <br>
          "]
      end
  end

  style participats-row1 fill:none,stroke:none
  style participats-row2 fill:none,stroke:none
  style details fill:none,stroke:none

### Session

A **Session** is a live instance of a Meeting. It starts automatically when the first participant joins the meeting and ends shortly after the last participant leaves. A Session inherits all settings (like features and title) from its parent Meeting.

Because the Meeting is persistent, it can have many different Sessions over time.

Example - **Think of a Meeting as a recurring weekly standup event.**

The Meeting is the permanent “standup event” that exists in your system.

Each week, when participants join for that week’s standup, a **new Session** is created — this Session represents that week’s actual live standup.

> **Note**: This distinction is important for billing. You are charged on a per-participant basis only for the duration of an active Session, not for an idle Meeting.

You can get the details of your sessions from the [RealtimeKit Dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/kit) or using the [Sessions API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/sessions/) endpoints.

![Sessions in RealtimeKit Dashboard](https://developers.cloudflare.com/_astro/dashboard-sessions.dvN7oDwZ_13s9sr.webp) 

### Session Terminologies

#### Waiting Room

A **waiting room** lets participants join a meeting without immediately entering the live session. This gives hosts full control over **who gets in**, **when they enter**, and **how the meeting flow is managed**.

Hosts can also configure specific behaviours for how users move from the waiting room into the meeting.

* **Join when accepted by someone**Participants stay in the waiting room until a host or another authorized user explicitly admits them. Ideal for highly controlled or private meetings.
* **Join when a privileged user joins**Participants remain in the waiting room initially, but are automatically admitted once a host or other privileged user enters the meeting. Useful for scheduled events where attendees should only join after the moderator is present.
* **Accept users into waiting room**Hosts can see the list of waiting users, admit them individually or in bulk, or remove them. This mode provides maximum visibility and control over incoming participants.

These options allow you to tailor how access is managed—whether you need strict admission control, a smoother flow once a host arrives, or a combination of both.

#### Stage

Meetings can be configured with a **virtual stage**, which helps you manage who actively participates with audio and video during high-attendance sessions.

When a participant is **on the stage**, they are visible in the grid and they can publish their audio and video to everyone in the meeting. Participants who are **off the stage** cannot publish media, but they can still fully engage through features like **chat**, **polls**, **Q&A**, and **plugins**—making the experience interactive without overwhelming the live video layout.

Participants can also **request to join the stage**, allowing them to signal when they want to speak or present. Hosts retain full control at all times: they can **approve or deny requests**, or directly **invite or remove participants from the stage** as needed.

This setup is ideal for webinars, town halls, AMAs, and other structured events where only a subset of users should broadcast while everyone else participates from the audience.

#### Connected Meetings

Connected Meetings let you create linked meeting spaces, that participants can switch between during a session. This is useful for workshops, classrooms, parallel discussions, or any scenario where the main meeting splits into smaller groups before coming back together.

You can control how participants move between these connected spaces using the following permissions:

* **Full Access:** Allows participants to create, update, and delete connected meetings.
* **Switch Connected Meeting:** Lets participants move freely between the available connected (child) meetings.
* **Switch to Parent Meeting:** Allows participants to return to the main (parent) meeting at any time.

### Create a meeting

You create and manage RealtimeKit meetings, typically from your backend, using the [Meetings API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/). To create a meeting, send a `POST` request to the [Create Meeting](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/) endpoint.

API Prerequisites

Make sure you have the following values for this API request:

* Your Cloudflare `ACCOUNT_ID`
* RealtimeKit `APP_ID`
* Your `CLOUDFLARE_API_TOKEN` (with Realtime permissions)

If you do not have them yet, refer to the [Getting Started](https://developers.cloudflare.com/realtime/realtimekit/quickstart/) guide.

Terminal window

```

curl https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/realtime/kit/{APP_ID}/meetings \

  --request POST \

  --header "Authorization: Bearer <CLOUDFLARE_API_TOKEN>" \

  --header "Content-Type: application/json" \

  --data '{

    "title": "My First Cloudflare RealtimeKit meeting"

    }'


```

A successful response includes a unique `id` for the created meeting. Save this ID, as it is required for all future operations on this specific meeting, such as adding participants or disabling it.

For a complete list of all available configuration parameters, refer to the [Create Meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/).

### Where to Go Next

After learning about Meetings and Sessions, you can explore the following next steps:

* Configure [Presets](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/) for your App – Set up default permissions, media settings, and behavior for all Sessions created from a Meeting.
* Add [Participants](https://developers.cloudflare.com/realtime/realtimekit/concepts/participant/) to a Meeting – Manage who can join, their roles, and the access controls they inherit.
* Get started with [RealtimeKit SDKs](https://developers.cloudflare.com/realtime/realtimekit/quickstart/) – Integrate RealtimeKit into your web or mobile app with just a few lines of code.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/concepts/","name":"Concepts"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/concepts/meeting/","name":"Meeting"}}]}
```

---

---
title: Participant
description: Before a user can join a meeting through the RealtimeKit SDK, your backend must add that user as a participant to that meeting using the Add Participant API.
In RealtimeKit, a participant represents a user who is allowed to join a specific meeting.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/concepts/participant.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Participant

Before a user can join a meeting through the RealtimeKit SDK, your backend must add that user as a participant to that meeting using the [Add Participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/). In RealtimeKit, a **participant** represents a user who is allowed to join a specific meeting.

You can think of this as enrolling a student into a classroom. The meeting is the classroom, and adding a participant is how you register a user so that they are allowed to attend.

When you add a participant, you also choose which [preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/) to apply. The preset defines the role, permissions, and meeting experience of that participant.

### Participant tokens

When you add a participant to a meeting using the [Add Participant](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) API endpoint, it returns:

* A participant `id` that identifies this participant within the meeting.
* An authentication `token` for that participant.

Your backend should make it available to your frontend application. When the user chooses to join the meeting, the frontend passes the token to the RealtimeKit SDK.

RealtimeKit uses the token to authenticate the participant and determine which meeting and which participant is joining. Without a valid authentication token, the SDK cannot join the meeting on behalf of that participant. As long as a participant has a valid authentication token, that participant can join multiple live sessions of the same meeting over time.

### Token validity and refresh

Participant authentication tokens are time bound and eventually expire. When a token expires, you do not need to create a new participant for the same user in the meeting.

Instead, your backend can call the [Refresh Participant Token](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/refresh%5Fparticipant%5Ftoken/) API endpoint. This endpoint issues a new authentication token for the existing participant record, keeping details such as the participant `id` and preset the same.

### Custom participant identifier

When adding the participant, you can optionally provide a custom participant identifier, referred to as `custom_participant_id`. This value is purely for your use. RealtimeKit stores it and returns it in APIs, but does not use it to control access. It allows you to map your application's user to RealtimeKit participant and to correlate RealtimeKit session data, events or analytics with user information in your system.

Note

**Do not** use personal data such as email address, phone number, or any other personally identifiable information as `custom_participant_id`. Use a stable internal identifier from your own system, such as a numeric user id or UUID.

### Where to Go Next

After understanding participants, you can explore the following topics:

* Learn how [Presets](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset) define roles and permissions for participants
* [Get started with RealtimeKit SDKs](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/concepts/","name":"Concepts"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/concepts/participant/","name":"Participant"}}]}
```

---

---
title: Preset
description: A Preset is a re-usable configuration that defines a participant’s experience in a Meeting.
It determines:
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/concepts/preset.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Preset

A Preset is a **re-usable configuration** that defines a participant’s experience in a Meeting. It determines:

* The meeting type they join (Video, Audio, or Webinar)
* Actions they can perform (permissions and controls)
* The UI’s look and feel, including colors and themes, so the experience matches your application's branding.

Presets belong to an App, and they are applied to participants — not to meetings.

You can assign the same Preset to multiple participants when creating them through the Add Participant API. Participants in the same Meeting can have different Presets, allowing each user to have a distinct role and experience.

Example: Large Ed-Tech Classroom

* **Teacher** uses the `webinar-host` preset — they can share media and access host controls.
* **Students** use the `webinar-participant` preset — they cannot share media but can use features like chat.
* **Teaching** assistant uses the `group-call-host` preset — they can share media but don’t have full host privileges.

### Create a Preset

A set of default presets are created for you, when you create an app via the [Cloudflare dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/kit).

You can also create a preset using the [dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/kit) or the [Create Preset API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/presets/methods/create/).

Terminal window

```

curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/presets \

    -H 'Content-Type: application/json' \

    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \

    -d '{

          "config": {

            ...<preset-configuration-json>

        }'


```

### Preset Editor

We provide a UI-based editor to create and manage the presets in the [Cloudflare dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/kit).

![Preset Editor](https://developers.cloudflare.com/_astro/preset-editor.CoEtzs7E_2guRTO.webp) 

The permissions are divided into the following categories:

* **Host Controls:** These permissions allow the user to control the meeting, manage participants, and perform administrative actions like kicking users, muting video/audio for others and more.
* **Stage Management:** Large meetings can be configured with a virtual stage. Participants on the stage can share their audio and video, while participants off the stage can view this media and still use features like chat, polls, and plugins.  
Users can request to join the stage, host can add/remove users from the stage at any point. Read more about stage management in [Meetings](https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting#stage).
* **Chat:** RealtimeKit allows users to send and receive messages in real time. You can also send private messages (visible only to a specific user). You can configure who has access to send & messages and receive various kinds of messages.
* **Polls:** Allows user to configure who can create, view and interact with polls in the meeting.
* **Plugins:** Plugins are interactive real-time applications that run inside the meeting to make collaboration easier. RealtimeKit lets you build your own plugins and also offers built-in options like Whiteboard and Document Sharing.  
You can control which plugins a participant is allowed to view, open, or close.
* **Waiting Room:** A waiting room allows participants to join a meeting before they’re admitted, giving hosts control over who enters and when. It helps manage access, reduce interruptions, and ensure the meeting starts smoothly.  
Hosts can admit or remove participants at any time, and you can configure who should bypass the waiting room automatically. Read more about waiting rooms in [Meetings](https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting#waiting-room).
* **Connected Meetings:**  Beta  Connected Meetings let you meeting spaces linked to a main meeting, enabling smaller group discussions or parallel sessions. Participants can be given permission to move between meetings or return to the parent meeting. Hosts can create, update, or delete these connected spaces.  
Read more about connected meetings in [Meetings](https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting#connected-meetings).
* **Miscellaneous:** Miscellaneous permissions let you fine-tune additional aspects of the participant experience that don’t fall under specific categories.  
These options control capabilities like - editing names, viewing the participant list, syncing tab views, enabling transcriptions, and other supplementary features that enhance how users interact within the meeting.

### Where to Go Next

After learning about Meetings and Sessions, you can explore the following next steps:

* Add [Participants](https://developers.cloudflare.com/realtime/realtimekit/concepts/participant) to a Meeting – Manage who can join, their roles, and the access controls they inherit.
* Get started with [RealtimeKit SDKs](https://developers.cloudflare.com/realtime/realtimekit/quickstart/) – Integrate RealtimeKit into your web or mobile app with just a few lines of code.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/concepts/","name":"Concepts"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/concepts/preset/","name":"Preset"}}]}
```

---

---
title: Session Lifecycle
description: The Session Guide explains what a session is and how to initialize one.
In this guide we will talk about what happens to a peer as they move through a session, when do they go to the setup screen, waitlist screen, ended screen or any other screen, and how you can hook into these events to perform custom actions.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/concepts/session-lifecycle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Session Lifecycle

The [Session Guide](https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting/#session) explains what a session is and how to initialize one. In this guide we will talk about what happens to a peer as they move through a session, when do they go to the setup screen, waitlist screen, ended screen or any other screen, and how you can hook into these events to perform custom actions.

### Lifecycle of a Peer in a Session

![Peer Lifecycle In a Session](https://developers.cloudflare.com/_astro/peer-lifecycle.ChUtQdVP_ZyBseL.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.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/concepts/","name":"Concepts"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/concepts/session-lifecycle/","name":"Session Lifecycle"}}]}
```

---

---
title: Build using Core SDK
description: To integrate the Core SDK, you will need to initialize it with a participant's auth token, and then use the provided SDK APIs to control the peer in the session.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Build using Core SDK

### Initialize Core SDK

To integrate the Core SDK, you will need to initialize it with a [participant's auth token](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/), and then use the provided SDK APIs to control the peer in the session.

Initialization might differ slightly based on your tech stack. Please choose your preferred tech stack below.

WebMobile

ReactWeb ComponentsAngular

Install the client SDK

Terminal window

```

npm i @cloudflare/realtimekit-react


```

Use the `useRealtimeKitClient` hook to initialise the SDK.

App.tsx

```

import { useEffect } from 'react';

import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';


export default function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();


    useEffect(() => {

      const meetingDefaultOptions = {

        audio: true,

        video: true,

      };


      initMeeting({

        authToken: "<auth-token>",

        defaults: meetingDefaultOptions, // optional

      });

    }, []);


    useEffect(() => {

      // next - if (meeting) meeting.join();

    }, [meeting])


    return <div></div>;


}


```

Use the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to fetch the `authToken`.

Install the client SDK.

Terminal window

```

npm i @cloudflare/realtimekit


```

Alternatively, you can also use the CDN.

```

<script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>


```

You can initialise the SDK using `RealtimeKitClient.init`.

JavaScript

```

  const authToken = <auth-token>;


  const meetingDefaultOptions = {

    audio: true,

    video: true,

  };


  RealtimeKitClient.init({

    authToken,

    defaults: meetingDefaultOptions, // optional

  }).then((meeting) => {

    // next - meeting.join();

  });


```

Use the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to fetch the `authToken`.

Install the client SDK.

Terminal window

```

npm i @cloudflare/realtimekit-angular


```

You can initialise the SDK using `RealtimeKitClient.init`.

TypeScript

```

class AppComponent {

  title = "MyProject";

  @ViewChild("myid") meetingComponent: RtkMeeting;

  rtkMeeting: RealtimeKitClient;


  async ngAfterViewInit() {

    const meetingDefaultOptions = {

      audio: true,

      video: true,

    };

    const meeting = await RealtimeKitClient.init({

      authToken: "<auth-token>",

      defaults: meetingDefaultOptions, // optional

    });

    // next - meeting.join();

  }

}


```

Use the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to fetch the `authToken`.

Initialize the RealtimeKit SDK by obtaining an instance of `RealtimeKitClient` using the `RealtimeKitMeetingBuilder` helper.

Kotlin

```

val meeting = RealtimeKitMeetingBuilder.build(activity)


```

Configure the meeting properties in the `RtkMeetingInfo` class with a valid participant `authToken` from the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/).

Kotlin

```

val meetingInfo =

  RtkMeetingInfo(

    authToken = authToken,

    enableAudio = true,

    enableVideo = true,

  )


```

Initialize the meeting by calling the `init()` method. This establishes a connection with the RealtimeKit meeting server.

Kotlin

```

meeting.init(

  meetingInfo,

  onInitCompleted = { ... },

  onInitFailed = { ... },

)


```

Initialize the RealtimeKit SDK by creating an instance of `RealtimeKitClient`.

Swift

```

let meeting = RealtimeKitiOSClientBuilder().build()


```

Add the required listeners to receive callbacks for meeting events.

Swift

```

meeting.addMeetingRoomEventListener(meetingRoomEventListener: self)

meeting.addParticipantsEventListener(participantsEventListener: self)

meeting.addSelfEventListener(selfEventListener: self)


```

Configure the meeting properties in the `RtkMeetingInfo` class with a valid participant `authToken` from the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/).

Swift

```

let meetingInfo = RtkMeetingInfo(authToken: authToken,

                                  enableAudio: true,

                                  enableVideo: true)


```

Initialize the meeting by calling the `doInit()` method. This establishes a connection with the RealtimeKit meeting server.

Swift

```

meeting.doInit(meetingInfo: meetingInfo, onSuccess: {}, onFailure: {_ in})


```

Initialize the RealtimeKit SDK by creating an instance of `RealtimeKitClient`.

Dart

```

final meeting = RealtimeKitClient();


```

Configure the meeting properties in the `RtkMeetingInfo` class with a valid participant `authToken` from the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/).

Dart

```

final meetingInfo = RtkMeetingInfo(

                    authToken: authToken,

                    enableAudio: false,

                    enableVideo: false,

                  );


```

Initialize the connection by calling the `init()` method. This establishes a connection with the RealtimeKit meeting server.

Dart

```

meeting.init(meetingInfo);


```

Subscribe to the `RtkMeetingRoomEventListener` to receive callbacks for meeting events.

Dart

```

meeting.addMeetingRoomEventListener(RoomStateNotifier());


```

Initialize the RealtimeKit SDK using the `useRealtimeKitClient` hook.

JavaScript

```

import React from 'react';

import { View, Text } from 'react-native';

import { useRealtimeKitClient, RealtimeKitProvider } from '@cloudflare/realtimekit-react-native';


export default function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  React.useEffect(() => {

    const init = async () => {

      const meetingOptions = {

        audio: true,

        video: true,

      };

      await initMeeting({

        authToken: 'YourAuthToken',

        defaults: meetingOptions,

      });

    };

    init();

    // next - if (meeting) meeting.joinRoom();

  }, []);


  if (meeting) {

    return (

      <RealtimeKitProvider value={meeting}>

        {/* Render your components here */}

      </RealtimeKitProvider>

    );

  } else {

    return (

      <View>

        <Text>Loading...</Text>

      <View>

    )

  }

}


```

Use the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to fetch the `authToken`.

### Advanced Options

You can **optionally** configure meeting defaults, media quality, screen share preferences, simulcast settings, ice connection behavior, logging, and error handling while initializing the SDK.

TypeScript

```

init({

  authToken: "<auth_token>",

  defaults: {

    video: true,

    audio: true,

    mediaConfiguration: {

      // Configure custom video quality (e.g., 1080p). Disable simulcast using `simulcastConfig` override for single-layer streaming.

      video: {

        width: { ideal: 1920 },

        height: { ideal: 1080 },

        frameRate: { ideal: 15 },

      },

      screenshare: {

        frameRate: { ideal: 15, max: 30 }, // Default 5

        displaySurface: "monitor", // Given surface is suggested to the end user

      },

    },

  },

  overrides: {

    simulcastConfig: {

      // If you want to disable simulcast

      disable: false,

      // If you want to pass custom simulcast encodings

      encodings: [

        {

          rid: "f", // full / highest quality

          scaleResolutionDownBy: 1.0,

          maxBitrate: 2500000, // ~2.5 Mbps

        },

        {

          rid: "h", // half

          scaleResolutionDownBy: 2.0,

          maxBitrate: 900000, // ~0.9 Mbps

        },

        {

          rid: "q", // quarter

          scaleResolutionDownBy: 4.0,

          maxBitrate: 250000, // ~0.25 Mbps

        },

      ],

    },

    forceRelay: false, // forceRelay, if true, TURN will be preferred over STUN

  },

  modules: {

    devTools: {

      logs: true, // Prints SDK logs to console, Useful in initial integration phase

    },

  },

  onError: (error) => {

    console.error(error); // SDK errors, Useful in detecting common issues

  },

});


```

Tip

`onError` callback is used to handle SDK errors. These errors could be due to invalid auth token, network issues, media permissions, etc. Each error is thrown with a unique error code. Learn more about SDK [error codes](https://developers.cloudflare.com/realtime/realtimekit/core/error-codes/).

You can pass the following options as `defaults` to alter default behavior.

| Option                    | Description                                                   | Type                                 | Required |
| ------------------------- | ------------------------------------------------------------- | ------------------------------------ | -------- |
| **video**                 | Should video be enabled by default                            | boolean                              | false    |
| **audio**                 | Should audio be enabled by default                            | boolean                              | false    |
| **mediaConfiguration**    | Allows you to pass custom media quality constraints           | MediaConfiguration                   | false    |
| **autoSwitchAudioDevice** | Automatically switch to a newly plugged microphone or speaker | boolean                              | false    |
| **isNonPreferredDevice**  | Allows you to set specific devices as "not preferred"         | (device: MediaDeviceInfo) => boolean | false    |
| **recording**             | Allows you to configure recording settings                    | RecordingConfig                      | false    |

By default, audio and video are auto enabled, as per preset permissions. SDK uses 640x480 quality as default for group calls, which can be overridden with `mediaConfiguration`. By default, the SDK automatically switches to the best available device and marks virtual devices as not preferred.

Reference for the types:

TypeScript

```

interface AudioQualityConstraints {

  echoCancellation?: boolean;

  noiseSupression?: boolean;

  autoGainControl?: boolean;

  enableStereo?: boolean;

  enableHighBitrate?: boolean;

}


interface VideoQualityConstraints {

  width: { ideal: number };

  height: { ideal: number };

  frameRate?: { ideal: number };

}


interface ScreenshareQualityConstraints {

  width?: { max: number };

  height?: { max: number };

  frameRate?: {

    ideal: number;

    max: number;

  };

  displaySurface?: "window" | "monitor" | "browser";

  selfBrowserSurface?: "include" | "exclude";

}


interface MediaConfiguration {

  video?: VideoQualityConstraints;

  audio?: AudioQualityConstraints;

  screenshare?: ScreenshareQualityConstraints;

}


interface RecordingConfig {

  fileNamePrefix?: string;

  videoConfig?: {

    height?: number;

    width?: number;

    codec?: string;

  };

}


interface DefaultOptions {

  video?: boolean;

  audio?: boolean;

  mediaConfiguration?: MediaConfiguration;

  isNonPreferredDevice?: (device: MediaDeviceInfo) => boolean;

  autoSwitchAudioDevice?: boolean;

  recording?: RecordingConfig;

}


interface Overrides {

  simulcastConfig?: {

    disable?: boolean;

    encodings?: RTCRtpEncodingParameters[];

  };

  forceRelay?: boolean;

}


```

You can configure meeting defaults using `enableAudio` and `enableVideo` parameters.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}}]}
```

---

---
title: API Reference
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# API Reference

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}}]}
```

---

---
title: RealtimeKitClient
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RealtimeKitClient.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RealtimeKitClient

The RealtimeKitClient class is the main class of the web core library. An object of the RealtimeKitClient class can be created using`await RealtimeKitClient.init({ ... })`. Typically, an object of `RealtimeKitClient` is named `meeting`.

* [RealtimeKitClient](#module%5FRealtimeKitClient)  
   * [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports) ⏏  
         * [new module.exports(context, controller)](#new%5Fmodule%5FRealtimeKitClient--module.exports%5Fnew)  
         * _instance_  
                  * [.participants](#module%5FRealtimeKitClient--module.exports+participants)  
                  * [.self](#module%5FRealtimeKitClient--module.exports+self)  
                  * [.meta](#module%5FRealtimeKitClient--module.exports+meta)  
                  * [.ai](#module%5FRealtimeKitClient--module.exports+ai)  
                  * [.plugins](#module%5FRealtimeKitClient--module.exports+plugins)  
                  * [.chat](#module%5FRealtimeKitClient--module.exports+chat)  
                  * [.polls](#module%5FRealtimeKitClient--module.exports+polls)  
                  * [.connectedMeetings](#module%5FRealtimeKitClient--module.exports+connectedMeetings)  
                  * [.**internals**](#module%5FRealtimeKitClient--module.exports+%5F%5Finternals%5F%5F)  
                  * [.join()](#module%5FRealtimeKitClient--module.exports+join)  
                  * [.leave()](#module%5FRealtimeKitClient--module.exports+leave)  
                  * ~~[.joinRoom()](#module%5FRealtimeKitClient--module.exports+joinRoom)~~  
                  * ~~[.leaveRoom(\[state\])](#module%5FRealtimeKitClient--module.exports+leaveRoom)~~  
         * _static_  
                  * [.initMedia(\[options\], \[skipAwaits\], \[cachedUserDetails\])](#module%5FRealtimeKitClient--module.exports.initMedia)  
                  * [.init(options)](#module%5FRealtimeKitClient--module.exports.init)  
                  * [.setupContext(peerId, options, meetingId, args)](#module%5FRealtimeKitClient--module.exports.setupContext)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(context, controller)

| Param      | Type       |
| ---------- | ---------- |
| context    | IContext   |
| controller | Controller |

#### module.exports.participants

The `participants` object consists of 4 maps of participants,`waitlisted`, `joined`, `active`, `pinned`. The maps are indexed by`peerId`s, and the values are the corresponding participant objects.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.self

The `self` object can be used to manipulate audio and video settings, and other configurations for the local participant. This exposes methods to enable and disable media tracks, share the user's screen, etc.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.meta

The `room` object stores information about the current meeting, such as chat messages, polls, room name, etc.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.ai

The `ai` object is used to interface with AI features. You can obtain the live meeting transcript and use other meeting AI features such as summary, and agenda using this object.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.plugins

The `plugins` object stores information about the plugins available in the current meeting. It exposes methods to activate and deactivate them.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.chat

The chat object stores the chat messages that were sent in the meeting. This includes text messages, images, and files.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.polls

The polls object stores the polls that were initiated in the meeting. It exposes methods to create and vote on polls.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.connectedMeetings

The connectedMeetings object stores the connected meetings states. It exposes methods to create/read/update/delete methods for connected meetings.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.\_\_internals\_\_

The **internals** object exposes the internal tools & utilities such as features and logger so that client can utilise the same to build their own feature based UI. Logger (**internals**.logger) can be used to send logs to servers to inform of issues, if any, proactively.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.join()

The `join()` method can be used to join the meeting. A `roomJoined` event is emitted on `self` when the room is joined successfully.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### module.exports.leave()

The `leave()` method can be used to leave a meeting.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### ~~module.exports.joinRoom()~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)  

#### ~~module.exports.leaveRoom(\[state\])~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)

| Param     | Type           |
| --------- | -------------- |
| \[state\] | LeaveRoomState |

#### module.exports.initMedia(\[options\], \[skipAwaits\], \[cachedUserDetails\])

**Kind**: static method of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)

| Param                   | Type              | Default |
| ----------------------- | ----------------- | ------- |
| \[options\]             | Object            |         |
| \[options.video\]       | boolean           |         |
| \[options.audio\]       | boolean           |         |
| \[options.constraints\] | MediaConstraints  |         |
| \[skipAwaits\]          | boolean           | false   |
| \[cachedUserDetails\]   | CachedUserDetails |         |

#### module.exports.init(options)

The `init` method can be used to instantiate the RealtimeKitClient class. This returns an instance of RealtimeKitClient, which can be used to perform actions on the meeting.

**Kind**: static method of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)

| Param             | Description                                     |
| ----------------- | ----------------------------------------------- |
| options           | The options object.                             |
| options.authToken | The authorization token received using the API. |
| options.baseURI   | The base URL of the API.                        |
| options.defaults  | The default audio and video settings.           |

#### module.exports.setupContext(peerId, options, meetingId, args)

**Kind**: static method of [module.exports](#exp%5Fmodule%5FRealtimeKitClient--module.exports)

| Param     | Type                     |
| --------- | ------------------------ |
| peerId    | string                   |
| options   | RealtimeKitClientOptions |
| meetingId | string                   |
| args      | any                      |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/realtimekitclient/","name":"RealtimeKitClient"}}]}
```

---

---
title: RTKAi
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKAi.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKAi

This module consists of the `ai` object which is used to interface with product's AI features. You can obtain the live meeting transcript and use other meeting AI features such as summary, and agenda using this object.

* [RTKAi](#module%5FRTKAi)  
   * _instance_  
         * [.telemetry](#module%5FRTKAi+telemetry)  
         * [.onTranscript(transcript)](#module%5FRTKAi+onTranscript)  
   * _static_  
         * [.parseTranscript(transcriptData, \[isPartialTranscript\])](#module%5FRTKAi.parseTranscript)  
         * [.parseTranscripts(transcriptData)](#module%5FRTKAi.parseTranscripts)

### meeting.ai.telemetry

**Kind**: instance property of [RTKAi](#module%5FRTKAi)  

### meeting.ai.onTranscript(transcript)

**Kind**: instance method of [RTKAi](#module%5FRTKAi)

| Param      | Type              | Description                                 |
| ---------- | ----------------- | ------------------------------------------- |
| transcript | TranscriptionData | Transcript data received for a participant. |

### meeting.ai.parseTranscript(transcriptData, \[isPartialTranscript\])

Parse a single line transcript

**Kind**: static method of [RTKAi](#module%5FRTKAi)

| Param                   | Type    | Default                      | Description                       |
| ----------------------- | ------- | ---------------------------- | --------------------------------- |
| transcriptData          | string  | The transcript data to parse |                                   |
| \[isPartialTranscript\] | boolean | false                        | Whether the transcript is partial |

### meeting.ai.parseTranscripts(transcriptData)

Parse a multi-line transcript

**Kind**: static method of [RTKAi](#module%5FRTKAi)

| Param          | Type   | Description                  |
| -------------- | ------ | ---------------------------- |
| transcriptData | string | The transcript data to parse |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkai/","name":"RTKAi"}}]}
```

---

---
title: RTKChat
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKChat.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKChat

This is the chat module, which can be used to send and receive messages from the meeting.

* [RTKChat](#module%5FRTKChat)  
   * [module.exports](#exp%5Fmodule%5FRTKChat--module.exports) ⏏  
         * [new module.exports(context, chatSocketHandler, self, participants)](#new%5Fmodule%5FRTKChat--module.exports%5Fnew)  
         * ~~[.messages](#module%5FRTKChat--module.exports+messages)~~  
         * [.telemetry](#module%5FRTKChat--module.exports+telemetry)  
         * [.pinned](#module%5FRTKChat--module.exports+pinned)  
         * [.setMaxTextLimit(limit)](#module%5FRTKChat--module.exports+setMaxTextLimit)  
         * [.sendMessageInternal(message, \[participantIds\])](#module%5FRTKChat--module.exports+sendMessageInternal)  
         * [.sendTextMessageInternal(message, \[peerIds\])](#module%5FRTKChat--module.exports+sendTextMessageInternal)  
         * [.sendImageMessageInternal(image, \[peerIds\])](#module%5FRTKChat--module.exports+sendImageMessageInternal)  
         * [.sendFileMessageInternal(file, \[peerIds\])](#module%5FRTKChat--module.exports+sendFileMessageInternal)  
         * [.updateRateLimits(num, period)](#module%5FRTKChat--module.exports+updateRateLimits)  
         * [.sendTextMessage(message, \[peerIds\])](#module%5FRTKChat--module.exports+sendTextMessage)  
         * [.sendCustomMessage(message, \[peerIds\])](#module%5FRTKChat--module.exports+sendCustomMessage)  
         * [.sendImageMessage(image, \[peerIds\])](#module%5FRTKChat--module.exports+sendImageMessage)  
         * [.sendFileMessage(file, \[peerIds\])](#module%5FRTKChat--module.exports+sendFileMessage)  
         * [.sendMessage(message, \[participantIds\])](#module%5FRTKChat--module.exports+sendMessage)  
         * [.editTextMessage(messageId, message)](#module%5FRTKChat--module.exports+editTextMessage)  
         * [.editImageMessage(messageId, image)](#module%5FRTKChat--module.exports+editImageMessage)  
         * [.editFileMessage(messageId, file)](#module%5FRTKChat--module.exports+editFileMessage)  
         * [.editMessage(messageId, message)](#module%5FRTKChat--module.exports+editMessage)  
         * [.deleteMessage(messageId)](#module%5FRTKChat--module.exports+deleteMessage)  
         * ~~[.getMessagesByUser(userId)](#module%5FRTKChat--module.exports+getMessagesByUser)~~  
         * ~~[.getMessagesByType(type)](#module%5FRTKChat--module.exports+getMessagesByType)~~  
         * [.pin(id)](#module%5FRTKChat--module.exports+pin)  
         * [.unpin(id)](#module%5FRTKChat--module.exports+unpin)  
         * [.fetchPublicMessages(options)](#module%5FRTKChat--module.exports+fetchPublicMessages)  
         * [.fetchPrivateMessages(options)](#module%5FRTKChat--module.exports+fetchPrivateMessages)  
         * [.fetchPinnedMessages(options)](#module%5FRTKChat--module.exports+fetchPinnedMessages)  
         * ~~[.getMessages(timeStamp, size, reversed, \[offset\])](#module%5FRTKChat--module.exports+getMessages)~~  
         * ~~[.searchMessages(query, \[filters\])](#module%5FRTKChat--module.exports+searchMessages)~~

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(context, chatSocketHandler, self, participants)

| Param             | Type                 |
| ----------------- | -------------------- |
| context           | Context              |
| chatSocketHandler | RTKChatSocketHandler |
| self              | Self                 |
| participants      | Participants         |

#### ~~module.exports.messages~~

_**Deprecated**_

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)  

#### module.exports.telemetry

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)  

#### module.exports.pinned

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)  
**Deprecated.**: This property is deprectated. Please use `fetchPinnedMessages()` instead. Returns an array of pinned messages.  

#### module.exports.setMaxTextLimit(limit)

Set the max character limit of a text message

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param | Type   | Description                             |
| ----- | ------ | --------------------------------------- |
| limit | number | Max character limit for a text message. |

#### module.exports.sendMessageInternal(message, \[participantIds\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param              | Type           | Description                             |
| ------------------ | -------------- | --------------------------------------- |
| message            | MessagePayload | Message payload to send.                |
| \[participantIds\] | Array.<string> | Participant ids to send the message to. |

#### module.exports.sendTextMessageInternal(message, \[peerIds\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param       | Type           | Description                      |
| ----------- | -------------- | -------------------------------- |
| message     | string         | Text message to send.            |
| \[peerIds\] | Array.<string> | Peer ids to send the message to. |

#### module.exports.sendImageMessageInternal(image, \[peerIds\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param       | Type                    | Description                      |
| ----------- | ----------------------- | -------------------------------- |
| image       | File \| ReactNativeFile | Image file to send.              |
| \[peerIds\] | Array.<string>          | Peer ids to send the message to. |

#### module.exports.sendFileMessageInternal(file, \[peerIds\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param       | Type                    | Description                      |
| ----------- | ----------------------- | -------------------------------- |
| file        | File \| ReactNativeFile | File to send.                    |
| \[peerIds\] | Array.<string>          | Peer ids to send the message to. |

#### module.exports.updateRateLimits(num, period)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param  | Type   |
| ------ | ------ |
| num    | number |
| period | number |

#### module.exports.sendTextMessage(message, \[peerIds\])

Sends a chat text message to the room.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param       | Type           | Description                                |
| ----------- | -------------- | ------------------------------------------ |
| message     | string         | The message that must be sent to the room. |
| \[peerIds\] | Array.<string> | Peer ids to send the message to.           |

#### module.exports.sendCustomMessage(message, \[peerIds\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param       | Type                 | Description                      |
| ----------- | -------------------- | -------------------------------- |
| message     | CustomMessagePayload | Custom message payload.          |
| \[peerIds\] | Array.<string>       | Peer ids to send the message to. |

#### module.exports.sendImageMessage(image, \[peerIds\])

Sends an image message to the meeting.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param       | Type                    | Description                      |
| ----------- | ----------------------- | -------------------------------- |
| image       | File \| ReactNativeFile | The image that is to be sent.    |
| \[peerIds\] | Array.<string>          | Peer ids to send the message to. |

#### module.exports.sendFileMessage(file, \[peerIds\])

Sends a file to the meeting.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param       | Type                    | Description                      |
| ----------- | ----------------------- | -------------------------------- |
| file        | File \| ReactNativeFile | A File object.                   |
| \[peerIds\] | Array.<string>          | Peer ids to send the message to. |

#### module.exports.sendMessage(message, \[participantIds\])

Sends a message to the meeting. This method can be used to send text, image, or file messages. The message type is determined by the key 'type' in `message`object.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param              | Type           | Description                                              |
| ------------------ | -------------- | -------------------------------------------------------- |
| message            | MessagePayload | An object including the type and content of the message. |
| \[participantIds\] | Array.<string> | An array including the userIds of the participants.      |

#### module.exports.editTextMessage(messageId, message)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param     | Type   | Description                |
| --------- | ------ | -------------------------- |
| messageId | string | Id of the message to edit. |
| message   | string | Updated text message.      |

#### module.exports.editImageMessage(messageId, image)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param     | Type                    | Description                |
| --------- | ----------------------- | -------------------------- |
| messageId | string                  | Id of the message to edit. |
| image     | File \| ReactNativeFile | Updated image file.        |

#### module.exports.editFileMessage(messageId, file)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param     | Type                    | Description                |
| --------- | ----------------------- | -------------------------- |
| messageId | string                  | Id of the message to edit. |
| file      | File \| ReactNativeFile | Updated file.              |

#### module.exports.editMessage(messageId, message)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param     | Type           | Description                |
| --------- | -------------- | -------------------------- |
| messageId | string         | Id of the message to edit. |
| message   | MessagePayload | Updated message payload.   |

#### module.exports.deleteMessage(messageId)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param     | Type   | Description                  |
| --------- | ------ | ---------------------------- |
| messageId | string | Id of the message to delete. |

#### ~~module.exports.getMessagesByUser(userId)~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param  | Type   | Description                                    |
| ------ | ------ | ---------------------------------------------- |
| userId | string | The user id of the user that sent the message. |

#### ~~module.exports.getMessagesByType(type)~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param | Type              | Description |          |        |                                               |
| ----- | ----------------- | ----------- | -------- | ------ | --------------------------------------------- |
| type  | 'text' \| 'image' | 'file'      | 'custom' | 'poll' | 'text', 'image', 'file', 'custom', or 'poll'. |

#### module.exports.pin(id)

Pins a chat message

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param | Type   | Description                    |
| ----- | ------ | ------------------------------ |
| id    | string | ID of the message to be pinned |

#### module.exports.unpin(id)

Unpins a chat message

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param | Type   | Description                      |
| ----- | ------ | -------------------------------- |
| id    | string | ID of the message to be unpinned |

#### module.exports.fetchPublicMessages(options)

Fetches messages from the chat with pagination.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param   | Type                | Description                                                                                            |
| ------- | ------------------- | ------------------------------------------------------------------------------------------------------ |
| options | FetchMessageOptions | Configuration options for fetching messages, including timestamp, limit, and direction for pagination. |

#### module.exports.fetchPrivateMessages(options)

Fetches private messages between the current user and another participant with pagination.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param   | Type                        | Description                                                                                                                             |
| ------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| options | FetchPrivateMessagesOptions | Configuration options for fetching private messages, including private RTKChat ID (User ID of the participant) and pagination settings. |

#### module.exports.fetchPinnedMessages(options)

Fetches pinned messages with pagination.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param   | Type                | Description                                                                                    |
| ------- | ------------------- | ---------------------------------------------------------------------------------------------- |
| options | FetchMessageOptions | Configuration options for fetching pinned messages, including timestamp, limit, and direction. |

#### ~~module.exports.getMessages(timeStamp, size, reversed, \[offset\])~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param      | Type    | Default |
| ---------- | ------- | ------- |
| timeStamp  | number  |         |
| size       | number  |         |
| reversed   | boolean |         |
| \[offset\] | number  | 0       |

#### ~~module.exports.searchMessages(query, \[filters\])~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKChat--module.exports)

| Param       | Type          |
| ----------- | ------------- |
| query       | string        |
| \[filters\] | SearchFilters |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkchat/","name":"RTKChat"}}]}
```

---

---
title: RTKConnectedMeetings
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKConnectedMeetings.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKConnectedMeetings

This consists of the methods to faciliate connected meetings

* [RTKConnectedMeetings](#module%5FRTKConnectedMeetings)  
   * [module.exports](#exp%5Fmodule%5FRTKConnectedMeetings--module.exports) ⏏  
         * [new module.exports(context)](#new%5Fmodule%5FRTKConnectedMeetings--module.exports%5Fnew)  
         * [.getRTKConnectedMeetings()](#module%5FRTKConnectedMeetings--module.exports+getRTKConnectedMeetings)  
         * [.createMeetings(request)](#module%5FRTKConnectedMeetings--module.exports+createMeetings)  
         * [.updateMeetings(request)](#module%5FRTKConnectedMeetings--module.exports+updateMeetings)  
         * [.deleteMeetings(meetingIds)](#module%5FRTKConnectedMeetings--module.exports+deleteMeetings)  
         * [.moveParticipants(sourceMeetingId, destinationMeetingId, participantIds)](#module%5FRTKConnectedMeetings--module.exports+moveParticipants)  
         * [.moveParticipantsWithCustomPreset(sourceMeetingId, destinationMeetingId, participants)](#module%5FRTKConnectedMeetings--module.exports+moveParticipantsWithCustomPreset)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(context)

| Param   | Type    |
| ------- | ------- |
| context | Context |

#### module.exports.getRTKConnectedMeetings()

get connected meeting state

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKConnectedMeetings--module.exports)  

#### module.exports.createMeetings(request)

create connected meetings

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKConnectedMeetings--module.exports)

| Param   | Type                    |
| ------- | ----------------------- |
| request | Array.<{title: string}> |

#### module.exports.updateMeetings(request)

update meeting title

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKConnectedMeetings--module.exports)

| Param   | Type                                |
| ------- | ----------------------------------- |
| request | Array.<{id: string, title: string}> |

#### module.exports.deleteMeetings(meetingIds)

delete connected meetings

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKConnectedMeetings--module.exports)

| Param      | Type           |
| ---------- | -------------- |
| meetingIds | Array.<string> |

#### module.exports.moveParticipants(sourceMeetingId, destinationMeetingId, participantIds)

Trigger event to move participants

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKConnectedMeetings--module.exports)

| Param                | Type           | Description                    |
| -------------------- | -------------- | ------------------------------ |
| sourceMeetingId      | string         | id of source meeting           |
| destinationMeetingId | string         | id of destination meeting      |
| participantIds       | Array.<string> | list of id of the participants |

#### module.exports.moveParticipantsWithCustomPreset(sourceMeetingId, destinationMeetingId, participants)

Trigger event to move participants with custom preset

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKConnectedMeetings--module.exports)

| Param                | Type                                   | Description               |
| -------------------- | -------------------------------------- | ------------------------- |
| sourceMeetingId      | string                                 | id of source meeting      |
| destinationMeetingId | string                                 | id of destination meeting |
| participants         | Array.<{id: string, presetId: string}> |                           |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkconnectedmeetings/","name":"RTKConnectedMeetings"}}]}
```

---

---
title: RTKLivestream
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKLivestream.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKLivestream

The RTKLivestream module represents the state of the current livestream, and allows to start/stop live streams.

* [RTKLivestream](#module%5FRTKLivestream)  
   * [module.exports](#exp%5Fmodule%5FRTKLivestream--module.exports) ⏏  
         * [new module.exports(context, self)](#new%5Fmodule%5FRTKLivestream--module.exports%5Fnew)  
         * [.telemetry](#module%5FRTKLivestream--module.exports+telemetry)  
         * [.setRTKLivestreamState(livestreamState)](#module%5FRTKLivestream--module.exports+setRTKLivestreamState)  
         * [.start(\[livestreamConfig\])](#module%5FRTKLivestream--module.exports+start)  
         * [.stop()](#module%5FRTKLivestream--module.exports+stop)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(context, self)

| Param   | Type    |
| ------- | ------- |
| context | Context |
| self    | Self    |

#### module.exports.telemetry

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKLivestream--module.exports)  

#### module.exports.setRTKLivestreamState(livestreamState)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKLivestream--module.exports)

| Param           | Type               |
| --------------- | ------------------ |
| livestreamState | RTKLivestreamState |

#### module.exports.start(\[livestreamConfig\])

Starts livestreaming the meeting.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKLivestream--module.exports)

| Param                | Type                     |
| -------------------- | ------------------------ |
| \[livestreamConfig\] | StartRTKLivestreamConfig |

#### module.exports.stop()

Stops livestreaming the meeting.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKLivestream--module.exports)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtklivestream/","name":"RTKLivestream"}}]}
```

---

---
title: RTKMeta
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKMeta.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKMeta

This consists of the metadata of the meeting, such as the room name and the title.

* [RTKMeta](#module%5FRTKMeta)  
   * [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports) ⏏  
         * [new module.exports(context, self, viewType, roomSocketHandler, meetingTitle)](#new%5Fmodule%5FRTKMeta--module.exports%5Fnew)  
         * [.selfActiveTab](#module%5FRTKMeta--module.exports+selfActiveTab)  
         * [.broadcastTabChanges](#module%5FRTKMeta--module.exports+broadcastTabChanges)  
         * [.viewType](#module%5FRTKMeta--module.exports+viewType)  
         * [.meetingStartedTimestamp](#module%5FRTKMeta--module.exports+meetingStartedTimestamp)  
         * [.meetingTitle](#module%5FRTKMeta--module.exports+meetingTitle)  
         * [.sessionId](#module%5FRTKMeta--module.exports+sessionId)  
         * [.meetingId](#module%5FRTKMeta--module.exports+meetingId)  
         * [.setBroadcastTabChanges(broadcastTabChanges)](#module%5FRTKMeta--module.exports+setBroadcastTabChanges)  
         * [.setSelfActiveTab(spotlightTab, tabChangeSource)](#module%5FRTKMeta--module.exports+setSelfActiveTab)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(context, self, viewType, roomSocketHandler, meetingTitle)

| Param             | Type              |
| ----------------- | ----------------- |
| context           | Context           |
| self              | Self              |
| viewType          | string            |
| roomSocketHandler | RoomSocketHandler |
| meetingTitle      | string            |

#### module.exports.selfActiveTab

Represents the current active tab

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports)  

#### module.exports.broadcastTabChanges

Represents whether current user is spotlighted

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports)  

#### module.exports.viewType

The `viewType` tells the type of the meeting possible values are: GROUP\_CALL| LIVESTREAM | CHAT | AUDIO\_ROOM

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports)  

#### module.exports.meetingStartedTimestamp

The timestamp of the time when the meeting started.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports)  

#### module.exports.meetingTitle

The title of the meeting.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports)  

#### module.exports.sessionId

(Experimental) The sessionId this meeting object is part of.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports)  

#### module.exports.meetingId

The room name of the meeting.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports)  

#### module.exports.setBroadcastTabChanges(broadcastTabChanges)

Sets current user as broadcasting tab changes

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports)

| Param               | Type    |
| ------------------- | ------- |
| broadcastTabChanges | boolean |

#### module.exports.setSelfActiveTab(spotlightTab, tabChangeSource)

Sets current active tab for user

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKMeta--module.exports)

| Param           | Type            |
| --------------- | --------------- |
| spotlightTab    | ActiveTab       |
| tabChangeSource | TabChangeSource |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkmeta/","name":"RTKMeta"}}]}
```

---

---
title: RTKParticipant
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKParticipant.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKParticipant

This module represents a single participant in the meeting. The participant object can be accessed from one of the participant lists present in the `meeting.participants` object. For example,

TypeScript

```

const participant1 = meeting.participants.active.get(participantId);

const participant2 = meeting.participants.joined.get(participantId);

const participant3 = meeting.participants.active.toArray()[0];

const participant4 = meeting.participants.active.toArray().filter((p) => p.name === 'John');


```

* [RTKParticipant](#module%5FRTKParticipant)  
   * [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports) ⏏  
         * [new module.exports(context, participant, self, roomSocket)](#new%5Fmodule%5FRTKParticipant--module.exports%5Fnew)  
         * [.id](#module%5FRTKParticipant--module.exports+id)  
         * [.userId](#module%5FRTKParticipant--module.exports+userId)  
         * [.name](#module%5FRTKParticipant--module.exports+name)  
         * [.picture](#module%5FRTKParticipant--module.exports+picture)  
         * [.customRTKParticipantId](#module%5FRTKParticipant--module.exports+customRTKParticipantId)  
         * ~~[.clientSpecificId](#module%5FRTKParticipant--module.exports+clientSpecificId)~~  
         * [.device](#module%5FRTKParticipant--module.exports+device)  
         * [.videoTrack](#module%5FRTKParticipant--module.exports+videoTrack)  
         * [.audioTrack](#module%5FRTKParticipant--module.exports+audioTrack)  
         * [.screenShareTracks](#module%5FRTKParticipant--module.exports+screenShareTracks)  
         * [.videoEnabled](#module%5FRTKParticipant--module.exports+videoEnabled)  
         * [.audioEnabled](#module%5FRTKParticipant--module.exports+audioEnabled)  
         * [.screenShareEnabled](#module%5FRTKParticipant--module.exports+screenShareEnabled)  
         * [.producers](#module%5FRTKParticipant--module.exports+producers)  
         * [.manualProducerConfig](#module%5FRTKParticipant--module.exports+manualProducerConfig)  
         * [.supportsRemoteControl](#module%5FRTKParticipant--module.exports+supportsRemoteControl)  
         * [.presetName](#module%5FRTKParticipant--module.exports+presetName)  
         * [.stageStatus](#module%5FRTKParticipant--module.exports+stageStatus)  
         * [.telemetry](#module%5FRTKParticipant--module.exports+telemetry)  
         * [.isPinned](#module%5FRTKParticipant--module.exports+isPinned)  
         * [.setVideoEnabled(videoEnabled, \[emitEvent\])](#module%5FRTKParticipant--module.exports+setVideoEnabled)  
         * [.setAudioEnabled(audioEnabled, \[emitEvent\])](#module%5FRTKParticipant--module.exports+setAudioEnabled)  
         * [.setScreenShareEnabled(screenShareEnabled, \[emitEvent\])](#module%5FRTKParticipant--module.exports+setScreenShareEnabled)  
         * [.pin()](#module%5FRTKParticipant--module.exports+pin)  
         * [.unpin()](#module%5FRTKParticipant--module.exports+unpin)  
         * [.setIsPinned(isPinned, \[emitEvent\])](#module%5FRTKParticipant--module.exports+setIsPinned)  
         * [.disableAudio()](#module%5FRTKParticipant--module.exports+disableAudio)  
         * [.kick()](#module%5FRTKParticipant--module.exports+kick)  
         * [.disableVideo()](#module%5FRTKParticipant--module.exports+disableVideo)  
         * [.registerVideoElement(videoElem)](#module%5FRTKParticipant--module.exports+registerVideoElement)  
         * [.deregisterVideoElement(\[videoElem\])](#module%5FRTKParticipant--module.exports+deregisterVideoElement)  
         * [.updateVideo(e)](#module%5FRTKParticipant--module.exports+updateVideo)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(context, participant, self, roomSocket)

| Param       | Type              |
| ----------- | ----------------- |
| context     | Context           |
| participant | IRTKParticipant   |
| self        | Self              |
| roomSocket  | RoomSocketHandler |

#### module.exports.id

The peer ID of the participant. The participants are indexed by this ID in the participant map.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.userId

The user ID of the participant.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.name

The name of the participant.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.picture

The picture of the participant.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.customRTKParticipantId

The custom id of the participant set during Add RTKParticipant REST API

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### ~~module.exports.clientSpecificId~~

_**Deprecated**_

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.device

The device configuration of the participant.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.videoTrack

The participant's video track.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.audioTrack

The participant's audio track.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.screenShareTracks

The participant's screenshare video and audio track.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.videoEnabled

This is true if the participant's video is enabled.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.audioEnabled

This is true if the participant's audio is enabled.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.screenShareEnabled

This is true if the participant is screensharing.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.producers

producers created by participant

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.manualProducerConfig

producer config passed during manual subscription

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.supportsRemoteControl

This is true if the participant supports remote control.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.presetName

The preset of the participant.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.stageStatus

Denotes the participants's current stage status.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.telemetry

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.isPinned

Returns true if the participant is pinned.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.setVideoEnabled(videoEnabled, \[emitEvent\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)

| Param         | Type    | Default |
| ------------- | ------- | ------- |
| videoEnabled  | boolean |         |
| \[emitEvent\] | boolean | true    |

#### module.exports.setAudioEnabled(audioEnabled, \[emitEvent\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)

| Param         | Type    | Default |
| ------------- | ------- | ------- |
| audioEnabled  | boolean |         |
| \[emitEvent\] | boolean | true    |

#### module.exports.setScreenShareEnabled(screenShareEnabled, \[emitEvent\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)

| Param              | Type    | Default |
| ------------------ | ------- | ------- |
| screenShareEnabled | boolean |         |
| \[emitEvent\]      | boolean | true    |

#### module.exports.pin()

Returns `participant.id` if user has permission to pin participants.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.unpin()

Returns `participant.id` if user has permission to unpin participants.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.setIsPinned(isPinned, \[emitEvent\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)

| Param         | Type    | Default |
| ------------- | ------- | ------- |
| isPinned      | boolean |         |
| \[emitEvent\] | boolean | true    |

#### module.exports.disableAudio()

Disables audio for this participant. Requires the permission to disable participant audio.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.kick()

Kicks this participant from the meeting. Requires the permission to kick a participant.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.disableVideo()

Disables video for this participant. Requires the permission to disable video for a participant.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)  

#### module.exports.registerVideoElement(videoElem)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)

| Param     | Type             |
| --------- | ---------------- |
| videoElem | HTMLVideoElement |

#### module.exports.deregisterVideoElement(\[videoElem\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)

| Param         | Type             |
| ------------- | ---------------- |
| \[videoElem\] | HTMLVideoElement |

#### module.exports.updateVideo(e)

Internal method, do not use

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipant--module.exports)

| Param | Type             |
| ----- | ---------------- |
| e     | HTMLVideoElement |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkparticipant/","name":"RTKParticipant"}}]}
```

---

---
title: RTKParticipantMap
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKParticipantMap.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKParticipantMap

This is a map of participants, indexed by `participant.id` (a participant's peer ID). This map emits an event whenever a participant present in the map emits an event. For example, when a participant is added to this map, a `participantJoined` event is emitted from the map. When a participant object emits an event `videoUpdate`, the map re-emits that event (provided the participant is present in the map).

* [RTKParticipantMap](#module%5FRTKParticipantMap)  
   * [module.exports](#exp%5Fmodule%5FRTKParticipantMap--module.exports) ⏏  
         * [new module.exports(logger, \[options\])](#new%5Fmodule%5FRTKParticipantMap--module.exports%5Fnew)  
         * [.add(participant, \[emitEvent\])](#module%5FRTKParticipantMap--module.exports+add)  
         * [.clear(\[emitEvent\], \[removeListeners\])](#module%5FRTKParticipantMap--module.exports+clear)  
         * [.delete(participantId, \[emitEvent\], \[removeListeners\])](#module%5FRTKParticipantMap--module.exports+delete)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(logger, \[options\])

| Param       | Type      |
| ----------- | --------- |
| logger      | Logger    |
| \[options\] | MapEvents |

#### module.exports.add(participant, \[emitEvent\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipantMap--module.exports)

| Param         | Type    | Default |
| ------------- | ------- | ------- |
| participant   | T       |         |
| \[emitEvent\] | boolean | true    |

#### module.exports.clear(\[emitEvent\], \[removeListeners\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipantMap--module.exports)

| Param               | Type    | Default |
| ------------------- | ------- | ------- |
| \[emitEvent\]       | boolean | true    |
| \[removeListeners\] | boolean | false   |

#### module.exports.delete(participantId, \[emitEvent\], \[removeListeners\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipantMap--module.exports)

| Param               | Type    | Default |
| ------------------- | ------- | ------- |
| participantId       | string  |         |
| \[emitEvent\]       | boolean | true    |
| \[removeListeners\] | boolean | false   |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkparticipantmap/","name":"RTKParticipantMap"}}]}
```

---

---
title: RTKParticipants
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKParticipants.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKParticipants

This module represents all the participants in the meeting (except the local user). It consists of 4 maps:

* `joined`: A map of all participants that have joined the meeting.
* `waitlisted`: A map of all participants that have been added to the waitlist.
* `active`: A map of active participants who should be displayed in the meeting grid.
* `pinned`: A map of pinned participants.
* [RTKParticipants](#module%5FRTKParticipants)  
   * [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports) ⏏  
         * [new module.exports(context, self, roomSocketHandler)](#new%5Fmodule%5FRTKParticipants--module.exports%5Fnew)  
         * [.waitlisted](#module%5FRTKParticipants--module.exports+waitlisted)  
         * [.joined](#module%5FRTKParticipants--module.exports+joined)  
         * ~~[.active](#module%5FRTKParticipants--module.exports+active)~~  
         * [.videoSubscribed](#module%5FRTKParticipants--module.exports+videoSubscribed)  
         * [.audioSubscribed](#module%5FRTKParticipants--module.exports+audioSubscribed)  
         * [.pinned](#module%5FRTKParticipants--module.exports+pinned)  
         * [.all](#module%5FRTKParticipants--module.exports+all)  
         * [.pip](#module%5FRTKParticipants--module.exports+pip)  
         * [.telemetry](#module%5FRTKParticipants--module.exports+telemetry)  
         * [.viewMode](#module%5FRTKParticipants--module.exports+viewMode)  
         * [.currentPage](#module%5FRTKParticipants--module.exports+currentPage)  
         * [.lastActiveSpeaker](#module%5FRTKParticipants--module.exports+lastActiveSpeaker)  
         * [.selectedPeers](#module%5FRTKParticipants--module.exports+selectedPeers)  
         * [.count](#module%5FRTKParticipants--module.exports+count)  
         * [.maxActiveRTKParticipantsCount](#module%5FRTKParticipants--module.exports+maxActiveRTKParticipantsCount)  
         * [.pageCount](#module%5FRTKParticipants--module.exports+pageCount)  
         * [.setMaxActiveRTKParticipantsCount(limit)](#module%5FRTKParticipants--module.exports+setMaxActiveRTKParticipantsCount)  
         * [.acceptWaitingRoomRequest(id)](#module%5FRTKParticipants--module.exports+acceptWaitingRoomRequest)  
         * [.acceptAllWaitingRoomRequest(userIds)](#module%5FRTKParticipants--module.exports+acceptAllWaitingRoomRequest)  
         * [.rejectWaitingRoomRequest(id)](#module%5FRTKParticipants--module.exports+rejectWaitingRoomRequest)  
         * [.setViewMode(viewMode)](#module%5FRTKParticipants--module.exports+setViewMode)  
         * [.subscribe(peerIds, \[kinds\])](#module%5FRTKParticipants--module.exports+subscribe)  
         * [.unsubscribe(peerIds, \[kinds\])](#module%5FRTKParticipants--module.exports+unsubscribe)  
         * [.setPage(page)](#module%5FRTKParticipants--module.exports+setPage)  
         * [.disableAllAudio(allowUnmute)](#module%5FRTKParticipants--module.exports+disableAllAudio)  
         * [.disableAllVideo()](#module%5FRTKParticipants--module.exports+disableAllVideo)  
         * ~~[.disableAudio(participantId)](#module%5FRTKParticipants--module.exports+disableAudio)~~  
         * ~~[.disableVideo(participantId)](#module%5FRTKParticipants--module.exports+disableVideo)~~  
         * ~~[.kick(participantId)](#module%5FRTKParticipants--module.exports+kick)~~  
         * [.kickAll()](#module%5FRTKParticipants--module.exports+kickAll)  
         * [.broadcastMessage(type, payload, target)](#module%5FRTKParticipants--module.exports+broadcastMessage)  
         * [.getAllJoinedPeers(searchQuery, limit, offset)](#module%5FRTKParticipants--module.exports+getAllJoinedPeers)  
         * [.getRTKParticipantsInMeetingPreJoin()](#module%5FRTKParticipants--module.exports+getRTKParticipantsInMeetingPreJoin)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(context, self, roomSocketHandler)

This constructs a new Participant object and maintains the maps of active/joined/waitlisted/pinned/selectedPeers maps. self : Self

| Param             | Type              |
| ----------------- | ----------------- |
| context           | Context           |
| self              | Self              |
| roomSocketHandler | RoomSocketHandler |

#### module.exports.waitlisted

Returns a list of participants waiting to join the meeting.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.joined

Returns a list of all participants in the meeting.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### ~~module.exports.active~~

_**Deprecated**_

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.videoSubscribed

Returns a list of participants whose video streams are currently consumed.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.audioSubscribed

Returns a list of participants whose audio streams are currently consumed.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.pinned

Returns a list of participants who have been pinned.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.all

Returns all added participants irrespective of whether they are currently in the meeting or not

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.pip

Return the controls for Picture-in-Picture

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.telemetry

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.viewMode

Indicates whether the meeting is in 'ACTIVE\_GRID' mode or 'PAGINATED' mode.

In 'ACTIVE\_GRID' mode, participants are populated in the participants.active map dynamically. The participants present in the map will keep changing when other participants unmute their audio or turn on their videos.

In 'PAGINATED' mode, participants are populated in the participants.active map just once, and the participants in the map will only change if the page number is changed by the user using setPage(page).

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.currentPage

This indicates the current page that has been set by the user in PAGINATED mode. If the meeting is in ACTIVE\_GRID mode, this value will be 0.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.lastActiveSpeaker

This stores the `participantId` of the last participant who spoke in the meeting.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.selectedPeers

Keeps a list of all participants who have been present in the selected peers list.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.count

Returns the number of participants who are joined in the meeting.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.maxActiveRTKParticipantsCount

Returns the maximum number of participants that can be present in the active map.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.pageCount

Returns the number of pages that are available in the meeting in PAGINATED mode. If the meeting is in ACTIVE\_GRID mode, this value will be 0.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.setMaxActiveRTKParticipantsCount(limit)

Updates the maximum number of participants that are populated in the active map.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param | Type   | Description       |
| ----- | ------ | ----------------- |
| limit | number | Updated max limit |

#### module.exports.acceptWaitingRoomRequest(id)

Accepts requests from waitlisted participants if user has appropriate permissions.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param | Type   | Description                                     |
| ----- | ------ | ----------------------------------------------- |
| id    | string | peerId or userId of the waitlisted participant. |

#### module.exports.acceptAllWaitingRoomRequest(userIds)

We need a new event for socket service events since if we send them all together, sequence of events can be unreliable

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param   | Type           |
| ------- | -------------- |
| userIds | Array.<string> |

#### module.exports.rejectWaitingRoomRequest(id)

Rejects requests from waitlisted participants if user has appropriate permissions.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param | Type   | Description                                  |
| ----- | ------ | -------------------------------------------- |
| id    | string | participantId of the waitlisted participant. |

#### module.exports.setViewMode(viewMode)

Sets the view mode of the meeting to either ACTIVE\_GRID or PAGINATED.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param    | Type     | Description                                          |
| -------- | -------- | ---------------------------------------------------- |
| viewMode | ViewMode | The mode in which the active map should be populated |

#### module.exports.subscribe(peerIds, \[kinds\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param     | Type                                                             |
| --------- | ---------------------------------------------------------------- |
| peerIds   | Array.<string>                                                   |
| \[kinds\] | Array.<('audio'\|'video'|'screenshareAudio'|'screenshareVideo')> |

#### module.exports.unsubscribe(peerIds, \[kinds\])

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param     | Type                                                             |
| --------- | ---------------------------------------------------------------- |
| peerIds   | Array.<string>                                                   |
| \[kinds\] | Array.<('audio'\|'video'|'screenshareAudio'|'screenshareVideo')> |

#### module.exports.setPage(page)

Populates the active map with participants present in the page number indicated by the parameter `page` in PAGINATED mode. Does not do anything in ACTIVE\_GRID mode.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param | Type   | Description                |
| ----- | ------ | -------------------------- |
| page  | number | The page number to be set. |

#### module.exports.disableAllAudio(allowUnmute)

Disables audio for all participants in the meeting.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param       | Type    | Description                                        |
| ----------- | ------- | -------------------------------------------------- |
| allowUnmute | boolean | Allow participants to unmute after they are muted. |

#### module.exports.disableAllVideo()

Disables video for all participants in the meeting.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### ~~module.exports.disableAudio(participantId)~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param         | Type   | Description                    |
| ------------- | ------ | ------------------------------ |
| participantId | string | ID of participant to be muted. |

#### ~~module.exports.disableVideo(participantId)~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param         | Type   | Description                    |
| ------------- | ------ | ------------------------------ |
| participantId | string | ID of participant to be muted. |

#### ~~module.exports.kick(participantId)~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param         | Type   | Description                     |
| ------------- | ------ | ------------------------------- |
| participantId | string | ID of participant to be kicked. |

#### module.exports.kickAll()

Kicks all participants from the meeting.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)  

#### module.exports.broadcastMessage(type, payload, target)

Broadcasts the message to participants

If no `target` is specified it is sent to all participants including `self`.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param   | Type                    | Description                                                                                                                        |
| ------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| type    | string                  |                                                                                                                                    |
| payload | BroadcastMessagePayload |                                                                                                                                    |
| target  | BroadcastMessageTarget  | object containing a list of participantIds or object containing presetName \- every user with that preset will be sent the message |

#### module.exports.getAllJoinedPeers(searchQuery, limit, offset)

Returns all peers currently present in the room If you are in a group call, use `meeting.participants.joined`instead

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

| Param       | Type   |
| ----------- | ------ |
| searchQuery | string |
| limit       | number |
| offset      | number |

#### module.exports.getRTKParticipantsInMeetingPreJoin()

Returns all peers currently in the room, is a non paginated call and should only be used if you are in a non room joined state, if in a joined group call, use `meeting.participants.joined`

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKParticipants--module.exports)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkparticipants/","name":"RTKParticipants"}}]}
```

---

---
title: RTKPermissionsPreset
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKPermissionsPreset.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKPermissionsPreset

The PermissionPreset class represents the meeting permissions for the current participant

* [PermissionPreset](#module%5FPermissionPreset)  
   * _instance_  
         * [.stageEnabled](#module%5FPermissionPreset+stageEnabled)  
         * [.stageAccess](#module%5FPermissionPreset+stageAccess)  
         * [.acceptWaitingRequests](#module%5FPermissionPreset+acceptWaitingRequests)  
         * [.requestProduceVideo](#module%5FPermissionPreset+requestProduceVideo)  
         * [.requestProduceAudio](#module%5FPermissionPreset+requestProduceAudio)  
         * [.requestProduceScreenshare](#module%5FPermissionPreset+requestProduceScreenshare)  
         * [.canAllowParticipantAudio](#module%5FPermissionPreset+canAllowParticipantAudio)  
         * [.canAllowParticipantScreensharing](#module%5FPermissionPreset+canAllowParticipantScreensharing)  
         * [.canAllowParticipantVideo](#module%5FPermissionPreset+canAllowParticipantVideo)  
         * [.canDisableParticipantAudio](#module%5FPermissionPreset+canDisableParticipantAudio)  
         * [.canDisableParticipantVideo](#module%5FPermissionPreset+canDisableParticipantVideo)  
         * [.kickParticipant](#module%5FPermissionPreset+kickParticipant)  
         * [.pinParticipant](#module%5FPermissionPreset+pinParticipant)  
         * [.canRecord](#module%5FPermissionPreset+canRecord)  
         * ~~[.waitingRoomType](#module%5FPermissionPreset+waitingRoomType)~~  
         * [.waitingRoomBehaviour](#module%5FPermissionPreset+waitingRoomBehaviour)  
         * [.plugins](#module%5FPermissionPreset+plugins)  
         * [.polls](#module%5FPermissionPreset+polls)  
         * ~~[.produceVideo](#module%5FPermissionPreset+produceVideo)~~  
         * ~~[.requestProduce](#module%5FPermissionPreset+requestProduce)~~  
         * [.canProduceVideo](#module%5FPermissionPreset+canProduceVideo)  
         * ~~[.produceScreenshare](#module%5FPermissionPreset+produceScreenshare)~~  
         * [.canProduceScreenshare](#module%5FPermissionPreset+canProduceScreenshare)  
         * ~~[.produceAudio](#module%5FPermissionPreset+produceAudio)~~  
         * [.canProduceAudio](#module%5FPermissionPreset+canProduceAudio)  
         * [.chatPublic](#module%5FPermissionPreset+chatPublic)  
         * [.chatPrivate](#module%5FPermissionPreset+chatPrivate)  
         * [.hiddenParticipant](#module%5FPermissionPreset+hiddenParticipant)  
         * [.showParticipantList](#module%5FPermissionPreset+showParticipantList)  
         * ~~[.canChangeParticipantRole](#module%5FPermissionPreset+canChangeParticipantRole)~~  
         * [.canChangeParticipantPermissions](#module%5FPermissionPreset+canChangeParticipantPermissions)  
         * ~~[.canChangeTheme](#module%5FPermissionPreset+canChangeTheme)~~  
         * ~~[.canPresent](#module%5FPermissionPreset+canPresent)~~  
         * ~~[.acceptPresentRequests](#module%5FPermissionPreset+acceptPresentRequests)~~  
         * ~~[.maxScreenShareCount](#module%5FPermissionPreset+maxScreenShareCount)~~  
         * [.canLivestream](#module%5FPermissionPreset+canLivestream)  
   * _static_  
         * [.fromResponse()](#module%5FPermissionPreset.fromResponse)  
         * [.default()](#module%5FPermissionPreset.default)

### meeting.self.permissions.stageEnabled

The `stageEnabled` property returns a boolean value. If `true`, stage management is available for the participant.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.stageAccess

The `stageAccess` property dictactes how a user interacts with the stage. There possible values are `ALLOWED`, `NOT_ALLOWED`, `CAN_REQUEST`;

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.acceptWaitingRequests

The `acceptWaitingRequests` returns boolean value. If `true`, participant can accept the request of waiting participant.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.requestProduceVideo

The `requestProduceVideo` returns boolean value. If `true`, participant can send request to participants about producing video.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.requestProduceAudio

The `requestProduceAudio` returns boolean value. If `true`, participant can send request to participants about producing audio.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.requestProduceScreenshare

The `requestProduceScreenshare` returns boolean value. If `true`, participant can send request to participants about sharing screen.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canAllowParticipantAudio

The `canAllowParticipantAudio` returns boolean value. If `true`, participant can enable other participants\` audio.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canAllowParticipantScreensharing

The `canAllowParticipantScreensharing` returns boolean value. If `true`, participant can enable other participants\` screen share.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canAllowParticipantVideo

The `canAllowParticipantVideo` returns boolean value. If `true`, participant can enable other participants\` video.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canDisableParticipantAudio

If `true`, a participant can disable other participants\` audio.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canDisableParticipantVideo

If `true`, a participant can disable other participants\` video.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.kickParticipant

The `kickParticipant` returns boolean value. If `true`, participant can remove other participants from the meeting.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.pinParticipant

The `pinParticipant` returns boolean value. If `true`, participant can pin a participant in the meeting.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canRecord

The `canRecord` returns boolean value. If `true`, participant can record the meeting.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.waitingRoomType~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.waitingRoomBehaviour

The `waitingRoomType` returns string value. type of waiting room behavior possible values are `SKIP`, `ON_PRIVILEGED_USER_ENTRY`, `SKIP_ON_ACCEPT`

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.plugins

The `plugins` tells if the participant can act on plugins there are 2 permissions with boolean values, `canStart` and `canClose`.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.polls

The `polls` tells if the participant can use polls. There are 3 permissions with boolean values, `canCreate`, `canVote`, `canViewResults`

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.produceVideo~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.requestProduce~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canProduceVideo

The `canProduceVideo` shows permissions for enabling video. There possible values are `ALLOWED`, `NOT_ALLOWED`, `CAN_REQUEST`

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.produceScreenshare~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canProduceScreenshare

The `canProduceScreenshare` shows permissions for sharing screen. There possible values are `ALLOWED`, `NOT_ALLOWED`, `CAN_REQUEST`

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.produceAudio~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canProduceAudio

The `canProduceAudio` shows permissions for enabling audio. There possible values are `ALLOWED`, `NOT_ALLOWED`, `CAN_REQUEST`

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.chatPublic

The `chatPublic` shows permissions for public chat there are 4 permissions`canSend` \- if true, the participant can send chat`text` \- if true, the participant can send text`files` \- if true, the participant can send files

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.chatPrivate

The `chatPrivate` shows permissions for public chat there are 4 permissions`canSend` \- if true, the participant can send private chat`text` \- if true, the participant can send text as private chat`files` \- if true, the participant can send files as private chat`canReceive` \- (optional) if true, the participant can receive private chat

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.hiddenParticipant

The `hiddenParticipant` returns boolean value. If `true`, participant is hidden.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.showParticipantList

The `showParticipantList` returns boolean value. If `true`, participant list can be shown to the participant.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.canChangeParticipantRole~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canChangeParticipantPermissions

The `canChangeParticipantPermissions` returns boolean value. If `true`, allow changing the participants' permissions.

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.canChangeTheme~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.canPresent~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.acceptPresentRequests~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### ~~meeting.self.permissions.maxScreenShareCount~~

_**Deprecated**_

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.canLivestream

Livestream

**Kind**: instance property of [PermissionPreset](#module%5FPermissionPreset)  

### meeting.self.permissions.fromResponse()

**Kind**: static method of [PermissionPreset](#module%5FPermissionPreset)  
**Deprecated.**: Use init()  

### meeting.self.permissions.default()

**Kind**: static method of [PermissionPreset](#module%5FPermissionPreset)  
**Deprecated.**: Use init()

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkpermissionspreset/","name":"RTKPermissionsPreset"}}]}
```

---

---
title: RTKPip
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKPip.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKPip

## Functions

[getInitials()](#getInitials)

Code from ui-kit. Same method used in the avatar component

[\_init(context, self)](#%5Finit)

[init(\[options\])](#init)

Initialize PiP and prepare sources

[disableSource(source)](#disableSource)

[addSource(id, element, enabled, \[displayText\])](#addSource)

Add a video source from the participant grid

[updateSource(id, source)](#updateSource)

Update a video source

[removeSource(id)](#removeSource)

Remove the video source for the participant

[removePinnedSource(id)](#removePinnedSource)

Remove the pinned source

[removeAllSources()](#removeAllSources)

Remove all sources

[enable()](#enable)

Enable PiP

Code from ui-kit. Same method used in the avatar component

**Kind**: global function  

**Kind**: global function

| Param   | Type    |
| ------- | ------- |
| context | Context |
| self    | Self    |

Initialize PiP and prepare sources

**Kind**: global function

| Param              | Type   |
| ------------------ | ------ |
| \[options\]        | Object |
| \[options.height\] | number |
| \[options.width\]  | number |

**Kind**: global function

| Param  | Type   |
| ------ | ------ |
| source | string |

Add a video source from the participant grid

**Kind**: global function

| Param           | Type             | Description                            |
| --------------- | ---------------- | -------------------------------------- |
| id              | string           | id for the source (ex. participant id) |
| element         | HTMLVideoElement | HTMLVideoElement for the video source  |
| enabled         | boolean          | if source is enabled                   |
| \[displayText\] | string           | two character display text             |

Update a video source

**Kind**: global function

| Param  | Type   |
| ------ | ------ |
| id     | string |
| source | any    |

Remove the video source for the participant

**Kind**: global function

| Param | Description                            |
| ----- | -------------------------------------- |
| id    | id for the source (ex. participant id) |

Remove the pinned source

**Kind**: global function

| Param | Description                            |
| ----- | -------------------------------------- |
| id    | id for the source (ex. participant id) |

Remove all sources

**Kind**: global function  

Enable PiP

**Kind**: global function

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkpip/","name":"RTKPip"}}]}
```

---

---
title: RTKPlugin
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKPlugin.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKPlugin

The RTKPlugin module represents a single plugin in the meeting. A plugin can be obtained from one of the plugin arrays in `meeting.plugins`. For example,

TypeScript

```

const plugin1 = meeting.plugins.active.get(pluginId);

const plugin2 = meeting.plugins.all.get(pluginId);


```

* [RTKPlugin](#module%5FRTKPlugin)  
   * [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports) ⏏  
         * [new module.exports(context, plugin, pluginSocketHandler, self, participants, chat, meetingTitle)](#new%5Fmodule%5FRTKPlugin--module.exports%5Fnew)  
         * [.telemetry](#module%5FRTKPlugin--module.exports+telemetry)  
         * [.sendIframeEvent(message)](#module%5FRTKPlugin--module.exports+sendIframeEvent)  
         * [.handleIframeMessage(iframeMessage)](#module%5FRTKPlugin--module.exports+handleIframeMessage)  
         * [.sendData(payload)](#module%5FRTKPlugin--module.exports+sendData)  
         * [.removeRTKPluginView(viewId)](#module%5FRTKPlugin--module.exports+removeRTKPluginView)  
         * [.addRTKPluginView(iframe, viewId)](#module%5FRTKPlugin--module.exports+addRTKPluginView)  
         * [.setActive(active)](#module%5FRTKPlugin--module.exports+setActive)  
         * [.activateForSelf()](#module%5FRTKPlugin--module.exports+activateForSelf)  
         * [.deactivateForSelf()](#module%5FRTKPlugin--module.exports+deactivateForSelf)  
         * ~~[.enable()](#module%5FRTKPlugin--module.exports+enable)~~  
         * ~~[.disable()](#module%5FRTKPlugin--module.exports+disable)~~  
         * [.activate()](#module%5FRTKPlugin--module.exports+activate)  
         * [.deactivate()](#module%5FRTKPlugin--module.exports+deactivate)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(context, plugin, pluginSocketHandler, self, participants, chat, meetingTitle)

| Param               | Type                   |
| ------------------- | ---------------------- |
| context             | Context                |
| plugin              | RTKPluginResponse      |
| pluginSocketHandler | RTKPluginSocketHandler |
| self                | Self                   |
| participants        | Participants           |
| chat                | Chat                   |
| meetingTitle        | string                 |

#### module.exports.telemetry

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)  

#### module.exports.sendIframeEvent(message)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)

| Param   | Type                   | Description                              |
| ------- | ---------------------- | ---------------------------------------- |
| message | RTKPluginIframeMessage | Socket message forwarded to this plugin. |

#### module.exports.handleIframeMessage(iframeMessage)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)

| Param         | Type                   |
| ------------- | ---------------------- |
| iframeMessage | RTKPluginIframeMessage |

#### module.exports.sendData(payload)

This method is used to send arbitrary data to the plugin.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)

| Param             | Type            | Description                                                            |
| ----------------- | --------------- | ---------------------------------------------------------------------- |
| payload           | SendDataOptions | The payload that you want to send inside the plugin.                   |
| payload.eventName | string          | Name of the event. This is used to listen for the event in plugin SDK. |
| payload.data      | any             | Data you wish to emit. It can assume any data type.                    |

#### module.exports.removeRTKPluginView(viewId)

This method is used for cleaning up event listeners attached to an iframe. It must be used before the iframe is removed from the DOM.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)

| Param  | Type   | Default   | Description                                                        |
| ------ | ------ | --------- | ------------------------------------------------------------------ |
| viewId | string | "default" | ID of the view corresponding to this iframe. Default is 'default'. |

#### module.exports.addRTKPluginView(iframe, viewId)

This method adds the communcation layer between the plugin inside the iframe and the core application (meeting object) in the main window.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)

| Param  | Type                                    | Default                                | Description                                                        |
| ------ | --------------------------------------- | -------------------------------------- | ------------------------------------------------------------------ |
| iframe | HTMLIFrameElement \| ReactNativeWebView | Iframe element to display this plugin. |                                                                    |
| viewId | string                                  | "default"                              | ID of the view corresponding to this iframe. Default is 'default'. |

#### module.exports.setActive(active)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)

| Param  | Type    |
| ------ | ------- |
| active | boolean |

#### module.exports.activateForSelf()

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)  

#### module.exports.deactivateForSelf()

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)  

#### ~~module.exports.enable()~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)  

#### ~~module.exports.disable()~~

_**Deprecated**_

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)  

#### module.exports.activate()

Activate this plugin for all participants.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)  

#### module.exports.deactivate()

Deactivate this plugin for all participants.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKPlugin--module.exports)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkplugin/","name":"RTKPlugin"}}]}
```

---

---
title: RTKPlugins
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKPlugins.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKPlugins

The RTKPlugins module consists of all the plugins in the meeting. It has 2 maps:

* `all`: Consists of all the plugins in the meeting.
* `active`: Consists of the plugins that are currently in use.
* [RTKPlugins](#module%5FRTKPlugins)  
   * [module.exports](#exp%5Fmodule%5FRTKPlugins--module.exports) ⏏  
         * [new module.exports(logger)](#new%5Fmodule%5FRTKPlugins--module.exports%5Fnew)  
         * [.all](#module%5FRTKPlugins--module.exports+all)  
         * [.active](#module%5FRTKPlugins--module.exports+active)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(logger)

| Param  | Type   |
| ------ | ------ |
| logger | Logger |

#### module.exports.all

All plugins accessible by the current user.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKPlugins--module.exports)  

#### module.exports.active

All plugins that are currently enabled in the room.

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKPlugins--module.exports)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkplugins/","name":"RTKPlugins"}}]}
```

---

---
title: RTKPolls
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKPolls.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKPolls

The RTKPolls module consists of the polls that have been created in the meeting.

* [RTKPolls](#module%5FRTKPolls)  
   * [.items](#module%5FRTKPolls+items)  
   * [.create(question, options, anonymous, hideVotes)](#module%5FRTKPolls+create)  
   * [.vote(pollId, index)](#module%5FRTKPolls+vote)

### meeting.polls.items

An array of poll items.

**Kind**: instance property of [RTKPolls](#module%5FRTKPolls)  

### meeting.polls.create(question, options, anonymous, hideVotes)

Creates a poll in the meeting.

**Kind**: instance method of [RTKPolls](#module%5FRTKPolls)

| Param     | Default                               | Description                                |
| --------- | ------------------------------------- | ------------------------------------------ |
| question  | The question that is to be voted for. |                                            |
| options   | The options of the poll.              |                                            |
| anonymous | false                                 | If true, the poll votes are anonymous.     |
| hideVotes | false                                 | If true, the votes on the poll are hidden. |

### meeting.polls.vote(pollId, index)

Casts a vote on an existing poll.

**Kind**: instance method of [RTKPolls](#module%5FRTKPolls)

| Param  | Description                                |
| ------ | ------------------------------------------ |
| pollId | The ID of the poll that is to be voted on. |
| index  | The index of the option.                   |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkpolls/","name":"RTKPolls"}}]}
```

---

---
title: RTKRecording
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKRecording.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKRecording

The RTKRecording module represents the state of the current recording, and allows to start/stop recordings and check if there's a recording in progress.

* [RTKRecording](#module%5FRTKRecording)  
   * [.telemetry](#module%5FRTKRecording+telemetry)  
   * [.start()](#module%5FRTKRecording+start)  
   * [.stop()](#module%5FRTKRecording+stop)  
   * [.pause()](#module%5FRTKRecording+pause)  
   * [.resume()](#module%5FRTKRecording+resume)

### meeting.recording.telemetry

**Kind**: instance property of [RTKRecording](#module%5FRTKRecording)  

### meeting.recording.start()

Starts recording the meeting.

**Kind**: instance method of [RTKRecording](#module%5FRTKRecording)  

### meeting.recording.stop()

Stops all recording currently in 'RECORDING' state

**Kind**: instance method of [RTKRecording](#module%5FRTKRecording)  

### meeting.recording.pause()

Pauses all recording currently in 'RECORDING' state

**Kind**: instance method of [RTKRecording](#module%5FRTKRecording)  

### meeting.recording.resume()

Resumes all recording currently in 'PAUSED' state

**Kind**: instance method of [RTKRecording](#module%5FRTKRecording)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkrecording/","name":"RTKRecording"}}]}
```

---

---
title: RTKSelf
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKSelf.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKSelf

The RTKSelf module represents the current user, and allows to modify the state of the user in the meeting. The audio and video streams of the user can be retrieved from this module.

* [RTKSelf](#module%5FRTKSelf)  
   * [.telemetry](#module%5FRTKSelf+telemetry)  
   * [.peerId](#module%5FRTKSelf+peerId)  
   * [.roomState](#module%5FRTKSelf+roomState)  
   * [.permissions](#module%5FRTKSelf+permissions)  
   * [.config](#module%5FRTKSelf+config)  
   * [.roomJoined](#module%5FRTKSelf+roomJoined)  
   * [.isPinned](#module%5FRTKSelf+isPinned)  
   * [.cleanupEvents()](#module%5FRTKSelf+cleanupEvents)  
   * [.setName(name)](#module%5FRTKSelf+setName)  
   * [.setupTracks(options)](#module%5FRTKSelf+setupTracks)  
   * [.enableAudio()](#module%5FRTKSelf+enableAudio)  
   * [.enableVideo()](#module%5FRTKSelf+enableVideo)  
   * [.updateVideoConstraints()](#module%5FRTKSelf+updateVideoConstraints)  
   * [.enableScreenShare()](#module%5FRTKSelf+enableScreenShare)  
   * [.updateScreenshareConstraints()](#module%5FRTKSelf+updateScreenshareConstraints)  
   * [.disableAudio()](#module%5FRTKSelf+disableAudio)  
   * [.disableVideo()](#module%5FRTKSelf+disableVideo)  
   * [.disableScreenShare()](#module%5FRTKSelf+disableScreenShare)  
   * [.getAllDevices()](#module%5FRTKSelf+getAllDevices)  
   * [.setIsPinned()](#module%5FRTKSelf+setIsPinned)  
   * [.pin()](#module%5FRTKSelf+pin)  
   * [.unpin()](#module%5FRTKSelf+unpin)  
   * [.hide()](#module%5FRTKSelf+hide)  
   * [.show()](#module%5FRTKSelf+show)  
   * [.setDevice(device)](#module%5FRTKSelf+setDevice)  
   * [.updateVideo()](#module%5FRTKSelf+updateVideo)

### meeting.self.telemetry

**Kind**: instance property of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.peerId

NOTE(ishita1805): Discussed with Ravindra, added a duplicate for consistency when using identifiers in Locker. We might want to look at deprecating the `id` sometime later.

**Kind**: instance property of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.roomState

Returns the current state of room init - Inital State joined - User is in the meeting waitlisted - User is in the waitlist state rejected - User's was in the waiting room, but the entry was rejected kicked - A priveleged user removed the user from the meeting left - User left the meeting ended - The meeting was ended

**Kind**: instance property of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.permissions

Returns the current permission given to the user for the meeting.

**Kind**: instance property of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.config

Returns configuration for the meeting.

**Kind**: instance property of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.roomJoined

Returns true if the local participant has joined the meeting.

**Kind**: instance property of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.isPinned

Returns true if the current user is pinned.

**Kind**: instance property of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.cleanupEvents()

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.setName(name)

The name of the user can be set by calling this method. This will get reflected to other participants ONLY if this method is called before the room is joined.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)

| Param | Type   | Description       |
| ----- | ------ | ----------------- |
| name  | string | Name of the user. |

### meeting.self.setupTracks(options)

Sets up the local media tracks.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)

| Param                  | Type    | Description                                       |
| ---------------------- | ------- | ------------------------------------------------- |
| options                | Object  | The audio and video options.                      |
| \[options.video\]      | boolean | If true, the video stream is fetched.             |
| \[options.audio\]      | boolean | If true, the audio stream is fetched.             |
| \[options.forceReset\] | boolean | If true, force resets tracks before re-acquiring. |

### meeting.self.enableAudio()

This method is used to unmute the local participant's audio.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.enableVideo()

This method is used to start streaming the local participant's video to the meeting.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.updateVideoConstraints()

This method is used to apply constraints to the current video stream.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.enableScreenShare()

This method is used to start sharing the local participant's screen to the meeting.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.updateScreenshareConstraints()

This method is used to apply constraints to the current screenshare stream.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.disableAudio()

This method is used to mute the local participant's audio.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.disableVideo()

This participant is used to disable the local participant's video.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.disableScreenShare()

This method is used to stop sharing the local participant's screen.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.getAllDevices()

Returns all media devices accessible by the local participant.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.setIsPinned()

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.pin()

Returns `self.id` if user has permission to pin participants.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.unpin()

Returns `self.id` if user has permission to unpin participants.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.hide()

Hide's user's tile in the UI (locally)

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.show()

Show's user's tile in the UI if hidden (locally)

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)  

### meeting.self.setDevice(device)

Change the current media device that is being used by the local participant.

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)

| Param  | Type            | Description                                                                                    |
| ------ | --------------- | ---------------------------------------------------------------------------------------------- |
| device | MediaDeviceInfo | The device that is to be used. A device of the same kind will be replaced. the primary stream. |

### meeting.self.updateVideo()

Internal method, do not use

**Kind**: instance method of [RTKSelf](#module%5FRTKSelf)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkself/","name":"RTKSelf"}}]}
```

---

---
title: RTKSelfMedia
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKSelfMedia.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKSelfMedia

## Members

[audioTrack](#audioTrack)

Returns the `audioTrack`.

[rawAudioTrack](#rawAudioTrack)

Returns the `rawAudioTrack` having no middleware executed on it.

[mediaPermissions](#mediaPermissions)

Returns the current audio and video permissions given by the user. 'ACCEPTED' if the user has given permission to use the media. 'CANCELED' if the user has canceled the screenshare. 'DENIED' if the user has denied permission to use the media. 'SYS\_DENIED' if the user's system has denied permission to use the media. 'UNAVAILABLE' if the media is not available (or being used by a different application).

[videoTrack](#videoTrack)

Returns the `videoTrack`.

[rawVideoTrack](#rawVideoTrack)

Returns the `videoTrack` having no middleware executed on it.

[screenShareTracks](#screenShareTracks)

Returns the screen share tracks.

[audioEnabled](#audioEnabled)

Returns true if audio is enabled.

[videoEnabled](#videoEnabled)

Returns true if video is enabled.

[screenShareEnabled](#screenShareEnabled)

Returns true if screen share is enabled.

## Functions

[init(options, \[skipAwaits\], \[context\])](#init)

[addAudioMiddleware(audioMiddleware)](#addAudioMiddleware)

Adds the audio middleware to be executed on the raw audio stream. If there are more than 1 audio middlewares, they will be executed in the sequence they were added in. If you want the sequence to be altered, please remove all previous middlewares and re-add.

[removeAudioMiddleware(audioMiddleware)](#removeAudioMiddleware)

Removes the audio middleware, if it is there.

[removeAllAudioMiddlewares()](#removeAllAudioMiddlewares)

Removes all audio middlewares, if they are there.

[addVideoMiddleware(videoMiddleware)](#addVideoMiddleware)

Adds the video middleware to be executed on the raw video stream. If there are more than 1 video middlewares, they will be executed in the sequence they were added in. If you want the sequence to be altered, please remove all previous middlewares and re-add.

[setVideoMiddlewareGlobalConfig(config)](#setVideoMiddlewareGlobalConfig)

Sets global config to be used by video middlewares.

[removeVideoMiddleware(videoMiddleware)](#removeVideoMiddleware)

Removes the video middleware, if it is there.

[removeAllVideoMiddlewares()](#removeAllVideoMiddlewares)

Removes all video middlewares, if they are there.

[getCurrentDevices()](#getCurrentDevices)

Returns the media devices currently being used.

[getAudioDevices()](#getAudioDevices)

Returns the local participant's audio devices.

[getVideoDevices()](#getVideoDevices)

Returns the local participant's video devices.

[getSpeakerDevices()](#getSpeakerDevices)

Returns the local participant's speaker devices.

[getDeviceById(deviceId, kind)](#getDeviceById)

Returns the local participant's device, indexed by ID and kind.

[setDevice(device)](#setDevice)

Change the current media device that is being used by the local participant.

Returns the `audioTrack`.

**Kind**: global variable  

Returns the `rawAudioTrack` having no middleware executed on it.

**Kind**: global variable  

Returns the current audio and video permissions given by the user. 'ACCEPTED' if the user has given permission to use the media. 'CANCELED' if the user has canceled the screenshare. 'DENIED' if the user has denied permission to use the media. 'SYS\_DENIED' if the user's system has denied permission to use the media. 'UNAVAILABLE' if the media is not available (or being used by a different application).

**Kind**: global variable  

Returns the `videoTrack`.

**Kind**: global variable  

Returns the `videoTrack` having no middleware executed on it.

**Kind**: global variable  

Returns the screen share tracks.

**Kind**: global variable  

Returns true if audio is enabled.

**Kind**: global variable  

Returns true if video is enabled.

**Kind**: global variable  

Returns true if screen share is enabled.

**Kind**: global variable  

**Kind**: global function

| Param                   | Type             | Default |
| ----------------------- | ---------------- | ------- |
| options                 | Object           |         |
| \[options.video\]       | boolean          |         |
| \[options.audio\]       | boolean          |         |
| \[options.constraints\] | MediaConstraints |         |
| \[skipAwaits\]          | boolean          | false   |
| \[context\]             | Context          |         |

Adds the audio middleware to be executed on the raw audio stream. If there are more than 1 audio middlewares, they will be executed in the sequence they were added in. If you want the sequence to be altered, please remove all previous middlewares and re-add.

**Kind**: global function

| Param           | Type            |
| --------------- | --------------- |
| audioMiddleware | AudioMiddleware |

Removes the audio middleware, if it is there.

**Kind**: global function

| Param           | Type            |
| --------------- | --------------- |
| audioMiddleware | AudioMiddleware |

Removes all audio middlewares, if they are there.

**Kind**: global function  

Adds the video middleware to be executed on the raw video stream. If there are more than 1 video middlewares, they will be executed in the sequence they were added in. If you want the sequence to be altered, please remove all previous middlewares and re-add.

**Kind**: global function

| Param           | Type            |
| --------------- | --------------- |
| videoMiddleware | VideoMiddleware |

Sets global config to be used by video middlewares.

**Kind**: global function

| Param                                 | Type                        | Description                                                                                                                                                                                                                                                                                             |
| ------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| config                                | VideoMiddlewareGlobalConfig | config                                                                                                                                                                                                                                                                                                  |
| config.disablePerFrameCanvasRendering | boolean                     | If set to true, Instead of calling Middleware for every frame, Middleware will only be called once that too with empty canvas, it is the responsibility of the middleware author to keep updating this canvas. meeting.self.rawVideoTrack can be used to retrieve video track for the periodic updates. |

Removes the video middleware, if it is there.

**Kind**: global function

| Param           | Type            |
| --------------- | --------------- |
| videoMiddleware | VideoMiddleware |

Removes all video middlewares, if they are there.

**Kind**: global function  

Returns the media devices currently being used.

**Kind**: global function  

Returns the local participant's audio devices.

**Kind**: global function  

Returns the local participant's video devices.

**Kind**: global function  

Returns the local participant's speaker devices.

**Kind**: global function  

Returns the local participant's device, indexed by ID and kind.

**Kind**: global function

| Param    | Type               | Description           |                                                   |
| -------- | ------------------ | --------------------- | ------------------------------------------------- |
| deviceId | string             | The ID of the device. |                                                   |
| kind     | 'audio' \| 'video' | 'speaker'             | The kind of the device: audio, video, or speaker. |

Change the current media device that is being used by the local participant.

**Kind**: global function

| Param  | Type            | Description                                                                                    |
| ------ | --------------- | ---------------------------------------------------------------------------------------------- |
| device | MediaDeviceInfo | The device that is to be used. A device of the same kind will be replaced. the primary stream. |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkselfmedia/","name":"RTKSelfMedia"}}]}
```

---

---
title: RTKStage
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKStage.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKStage

The RTKStage module represents a class to mange the RTKStage of the meeting RTKStage refers to a virtual area, where participants stream are visible to other participants. When a participant is off stage, they are not producing media but only consuming media from participants who are on RTKStage

* [RTKStage](#module%5FRTKStage)  
   * [module.exports](#exp%5Fmodule%5FRTKStage--module.exports) ⏏  
         * [new module.exports(context, self, participants, stageSocketHandler, roomSocketHandler)](#new%5Fmodule%5FRTKStage--module.exports%5Fnew)  
         * [.telemetry](#module%5FRTKStage--module.exports+telemetry)  
         * [.peerId](#module%5FRTKStage--module.exports+peerId)  
         * [.getAccessRequests()](#module%5FRTKStage--module.exports+getAccessRequests)  
         * [.requestAccess()](#module%5FRTKStage--module.exports+requestAccess)  
         * [.cancelRequestAccess()](#module%5FRTKStage--module.exports+cancelRequestAccess)  
         * [.grantAccess()](#module%5FRTKStage--module.exports+grantAccess)  
         * [.denyAccess()](#module%5FRTKStage--module.exports+denyAccess)  
         * [.join()](#module%5FRTKStage--module.exports+join)  
         * [.leave()](#module%5FRTKStage--module.exports+leave)  
         * [.kick(userIds)](#module%5FRTKStage--module.exports+kick)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(context, self, participants, stageSocketHandler, roomSocketHandler)

| Param              | Type                  |
| ------------------ | --------------------- |
| context            | Context               |
| self               | Self                  |
| participants       | Participants          |
| stageSocketHandler | RTKStageSocketHandler |
| roomSocketHandler  | RoomSocketHandler     |

#### module.exports.telemetry

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)  

#### module.exports.peerId

Returns the peerId of the current user

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)  

#### module.exports.getAccessRequests()

Method to fetch all RTKStage access requests from viewers

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)  

#### module.exports.requestAccess()

Method to send a request to privileged users to join the stage

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)  

#### module.exports.cancelRequestAccess()

Method to cancel a previous RTKStage join request

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)  

#### module.exports.grantAccess()

Method to grant access to RTKStage. This can be in response to a RTKStage Join request but it can be called on other users as well

`permissions.acceptRTKStageRequests` privilege required

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)  

#### module.exports.denyAccess()

Method to deny access to RTKStage. This should be called in response to a RTKStage Join request

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)  

#### module.exports.join()

Method to join the stage Users either need to have the permission in the preset or must be accepted by a priveleged user to call this method

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)  

#### module.exports.leave()

Method to leave the stage Users must either be on the stage already or be accepted to join the stage to call this method

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)  

#### module.exports.kick(userIds)

Method to kick a user off the stage

`permissions.acceptRTKStageRequests` privilege required

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStage--module.exports)

| Param   | Type           |
| ------- | -------------- |
| userIds | Array.<string> |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkstage/","name":"RTKStage"}}]}
```

---

---
title: RTKStore
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKStore.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKStore

This module represents a single global store. The store can be accessed from the `meeting.stores` module.

**Returns**: An instance of RTKStore.  
**Example**

JavaScript

```

const handRaiseRTKStore = meeting.stores.stores.get('handRaise');


```

* [RTKStore](#module%5FRTKStore) ⇒  
   * [module.exports](#exp%5Fmodule%5FRTKStore--module.exports) ⏏  
         * [new module.exports(args)](#new%5Fmodule%5FRTKStore--module.exports%5Fnew)  
         * [.set(key, value, \[sync\], \[emit\])](#module%5FRTKStore--module.exports+set) ⇒ `Promise.<void>`  
         * [.bulkSet(data)](#module%5FRTKStore--module.exports+bulkSet) ⇒ `Promise.<void>`  
         * [.update(key, value, \[sync\])](#module%5FRTKStore--module.exports+update) ⇒ `Promise.<void>`  
         * [.delete(key, \[sync\], \[emit\])](#module%5FRTKStore--module.exports+delete) ⇒ `Promise.<void>`  
         * [.bulkDelete(data)](#module%5FRTKStore--module.exports+bulkDelete) ⇒ `Promise.<void>`  
         * [.get(key)](#module%5FRTKStore--module.exports+get) ⇒ `any`  
         * [.getAll()](#module%5FRTKStore--module.exports+getAll) ⇒ `RTKStoreData`  
         * [.updateRateLimits(num, period)](#module%5FRTKStore--module.exports+updateRateLimits)  
         * [.updateBulkRateLimits(num, period)](#module%5FRTKStore--module.exports+updateBulkRateLimits)  
         * [.subscribe(key, cb)](#module%5FRTKStore--module.exports+subscribe) ⇒ `void`  
         * [.unsubscribe(key, \[cb\])](#module%5FRTKStore--module.exports+unsubscribe) ⇒ `void`  
         * [.populate(data)](#module%5FRTKStore--module.exports+populate)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(args)

| Param              | Type                |
| ------------------ | ------------------- |
| args               | Object              |
| args.name          | string              |
| args.socketHandler | PluginSocketHandler |
| args.meetingId     | string              |

#### module.exports.set(key, value, \[sync\], \[emit\]) ⇒ `Promise.<void>`

Sets a value in the store.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)  
**Returns**: `Promise.<void>` \- A promise.

| Param    | Type    | Default                                | Description                             |
| -------- | ------- | -------------------------------------- | --------------------------------------- |
| key      | string  | Unique identifier used to store value. |                                         |
| value    | any     | Data to be set.                        |                                         |
| \[sync\] | boolean | true                                   | Whether to sync change to remote store. |
| \[emit\] | boolean | false                                  | Whether to emit to local subscribers.   |

#### module.exports.bulkSet(data) ⇒ `Promise.<void>`

Sets multiple values in the store.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)  
**Returns**: `Promise.<void>` \- A promise.

| Param | Type                                |
| ----- | ----------------------------------- |
| data  | Array.<{key: string, payload: any}> |

#### module.exports.update(key, value, \[sync\]) ⇒ `Promise.<void>`

Updates an already existing value in the store. If the value stored is `['a', 'b']`, the operation`store.update(key, ['c'])` will modify the value to `['a','b','c']`.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)  
**Returns**: `Promise.<void>` \- A promise.

| Param    | Type    | Default                                | Description                             |
| -------- | ------- | -------------------------------------- | --------------------------------------- |
| key      | string  | Unique identifier used to store value. |                                         |
| value    | any     | Data to be updated.                    |                                         |
| \[sync\] | boolean | true                                   | Whether to sync change to remote store. |

#### module.exports.delete(key, \[sync\], \[emit\]) ⇒ `Promise.<void>`

Deletes a key value pair form the store.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)  
**Returns**: `Promise.<void>` \- A promise.

| Param    | Type    | Default                                | Description                             |
| -------- | ------- | -------------------------------------- | --------------------------------------- |
| key      | string  | Unique identifier used to store value. |                                         |
| \[sync\] | boolean | true                                   | Whether to sync change to remote store. |
| \[emit\] | boolean | false                                  | Whether to emit to local subscribers.   |

#### module.exports.bulkDelete(data) ⇒ `Promise.<void>`

Deletes multiple values from the store.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)  
**Returns**: `Promise.<void>` \- A promise.

| Param | Type                  |
| ----- | --------------------- |
| data  | Array.<{key: string}> |

#### module.exports.get(key) ⇒ `any`

Returns value for the given key.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)  
**Returns**: `any` \- Value for the given key.

| Param | Type   | Description                            |
| ----- | ------ | -------------------------------------- |
| key   | string | Unique identifier used to store value. |

#### module.exports.getAll() ⇒ `RTKStoreData`

Returns the entire store.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)  
**Returns**: `RTKStoreData` \- An instance of RTKStoreData.  

#### module.exports.updateRateLimits(num, period)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)

| Param  | Type   |
| ------ | ------ |
| num    | number |
| period | number |

#### module.exports.updateBulkRateLimits(num, period)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)

| Param  | Type   |
| ------ | ------ |
| num    | number |
| period | number |

#### module.exports.subscribe(key, cb) ⇒ `void`

Listens for data change on a store key.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)  
**Returns**: `void` \- void

| Param | Type     | Description                                                     |
| ----- | -------- | --------------------------------------------------------------- |
| key   | string   | Unique identifier used to store value.                          |
| cb    | function | The callback function that gets executed when data is modified. |

#### module.exports.unsubscribe(key, \[cb\]) ⇒ `void`

Removes all listeners for a key on the store.

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)  
**Returns**: `void` \- void

| Param  | Type     | Description                            |
| ------ | -------- | -------------------------------------- |
| key    | string   | Unique identifier used to store value. |
| \[cb\] | function | Callback to be removed.                |

#### module.exports.populate(data)

**Kind**: instance method of [module.exports](#exp%5Fmodule%5FRTKStore--module.exports)

| Param | Type         |
| ----- | ------------ |
| data  | RTKStoreData |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkstore/","name":"RTKStore"}}]}
```

---

---
title: RTKThemePreset
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/api-reference/RTKThemePreset.md) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RTKThemePreset

The RTKThemePreset class represents the meeting theme for the current participant

* [RTKThemePreset](#module%5FRTKThemePreset)  
   * [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports) ⏏  
         * [new module.exports(preset)](#new%5Fmodule%5FRTKThemePreset--module.exports%5Fnew)  
         * _instance_  
                  * ~~[.setupScreen](#module%5FRTKThemePreset--module.exports+setupScreen)~~  
                  * ~~[.waitingRoom](#module%5FRTKThemePreset--module.exports+waitingRoom)~~  
                  * ~~[.controlBar](#module%5FRTKThemePreset--module.exports+controlBar)~~  
                  * ~~[.header](#module%5FRTKThemePreset--module.exports+header)~~  
                  * ~~[.pipMode](#module%5FRTKThemePreset--module.exports+pipMode)~~  
                  * [.viewType](#module%5FRTKThemePreset--module.exports+viewType)  
                  * [.livestreamViewerQualities](#module%5FRTKThemePreset--module.exports+livestreamViewerQualities)  
                  * [.maxVideoStreams](#module%5FRTKThemePreset--module.exports+maxVideoStreams)  
                  * [.maxScreenShareCount](#module%5FRTKThemePreset--module.exports+maxScreenShareCount)  
                  * ~~[.plugins](#module%5FRTKThemePreset--module.exports+plugins)~~  
                  * [.disabledPlugins](#module%5FRTKThemePreset--module.exports+disabledPlugins)  
         * _static_  
                  * [.fromResponse(preset)](#module%5FRTKThemePreset--module.exports.fromResponse)  
                  * [.default()](#module%5FRTKThemePreset--module.exports.default)  
                  * [.init(\[preset\], \[useDefault\])](#module%5FRTKThemePreset--module.exports.init)

### module.exports ⏏

**Kind**: Exported class  

#### new module.exports(preset)

| Param  | Type               |
| ------ | ------------------ |
| preset | PresetV2CamelCased |

#### ~~module.exports.setupScreen~~

_**Deprecated**_

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### ~~module.exports.waitingRoom~~

_**Deprecated**_

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### ~~module.exports.controlBar~~

_**Deprecated**_

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### ~~module.exports.header~~

_**Deprecated**_

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### ~~module.exports.pipMode~~

_**Deprecated**_

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### module.exports.viewType

The `viewType` tells the type of the meeting possible values are: GROUP\_CALL| LIVESTREAM | CHAT | AUDIO\_ROOM

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### module.exports.livestreamViewerQualities

The `livestreamViewerQualities` specifies the allowed qualities of a stream, that can be viewed by a livestream viewer

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### module.exports.maxVideoStreams

The `maxVideoStreams` contains the maximum video streams for mobile and desktop

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### module.exports.maxScreenShareCount

The `maxScreenShareCount` contains the maximum possible concurrent screen shares

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### ~~module.exports.plugins~~

_**Deprecated**_

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### module.exports.disabledPlugins

The `disabledPlugins` property returns id of all disabled plugins

**Kind**: instance property of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  

#### module.exports.fromResponse(preset)

**Kind**: static method of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  
**Deprecated.**: Use init()

| Param  | Type               |
| ------ | ------------------ |
| preset | PresetV2CamelCased |

#### module.exports.default()

**Kind**: static method of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)  
**Deprecated.**: Use init()  

#### module.exports.init(\[preset\], \[useDefault\])

**Kind**: static method of [module.exports](#exp%5Fmodule%5FRTKThemePreset--module.exports)

| Param          | Type               | Default |
| -------------- | ------------------ | ------- |
| \[preset\]     | PresetV2CamelCased |         |
| \[useDefault\] | boolean            | true    |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/api-reference/","name":"API Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/api-reference/rtkthemepreset/","name":"RTKThemePreset"}}]}
```

---

---
title: Breakout Rooms
description: Breakout rooms allow participants of a meeting to split into smaller groups for targeted discussions and collaboration. With the rise of remote work and online learning, breakout rooms have become an essential tool for enhancing engagement and building community in virtual settings. They are an ideal choice for workshops, online classrooms, or when you need to speak privately with select participants outside the main meeting.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/breakout-rooms.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Breakout Rooms

WebMobile

ReactWeb ComponentsAngular

Note

The breakout rooms feature, also known as connected meetings, is currently in beta, which means it is still being tested and evaluated, and may undergo some changes.

Breakout rooms allow participants of a meeting to split into smaller groups for targeted discussions and collaboration. With the rise of remote work and online learning, breakout rooms have become an essential tool for enhancing engagement and building community in virtual settings. They are an ideal choice for workshops, online classrooms, or when you need to speak privately with select participants outside the main meeting.

Note

Breakout rooms are currently supported on web only.

In RealtimeKit, breakout rooms are created as a separate meeting. Each breakout room is an independent meeting and can be managed like any other RealtimeKit meeting. RealtimeKit provides a set of SDK APIs to create, manage, and switch between breakout rooms.

## Key features

The following are some of the key features of RealtimeKit's breakout rooms:

* Manage permissions and privileges of hosts and participants using presets
* Hosts can create breakout rooms, assign participants, start and close the breakout rooms, and switch between rooms
* Participants can start and stop video, interact with other participants using chat and polls, and mute/unmute audio
* Record all breakout sessions individually like any other RealtimeKit meeting

## Roles in a breakout room

Roles in the breakout room are managed by presets.

### Host

Hosts can create breakout rooms, assign participants, start and close the breakout rooms, and switch between rooms.

### Participants

As a participant in a breakout room, you can:

* **Switch to Parent Meeting** \- Switch back to the main meeting (if you have the required permissions)
* **Switch Connected Meetings** \- Move from the main meeting to smaller, focused discussion groups (breakout rooms) for collaboration
* **Collaborate** \- Use tools such as chat and polls during breakout sessions

## Audio and video

Each breakout room functions as an independent meeting. When you switch to a breakout room from the main meeting, it automatically switches to the audio and video of the breakout session. You can mute or unmute your audio and start or stop your video at any time during the breakout session, just as you can in the main meeting.

When the breakout session ends, your audio and video automatically switch back to the main meeting.

* If your video was turned on during a breakout session, it will remain on when you return to the main session
* If your microphone was on during a breakout session, it will stay on when you return to the main session

## Recording breakout sessions

Each breakout session is a separate session. Each breakout session's recording is stored and managed separately, just like any other RealtimeKit meeting. For more information, refer to [Recording](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/).

## Breakout rooms management

Breakout rooms allow the participants to split into separate sessions. The host can create breakout rooms, assign participants, start and close the breakout rooms.

### Create presets

A preset is a set of permissions and UI configurations that are applied to hosts and participants. They determine the look, feel, and behavior of the breakout room.

For breakout rooms, you must provide the following permissions for hosts and participants in Connected Meetings:

#### Host

The host preset should have **Full Access** permission in Connected Meetings. This allows the host to:

* Create breakout rooms
* Assign participants to rooms
* Start and close breakout rooms
* Switch between rooms

#### Participants

You can choose to provide the following permissions to participants:

* **Switch Connected Meetings** \- Allows participants to move between breakout rooms
* **Switch to Parent Meeting** \- Allows participants to return to the main meeting

### Save the preset

1. Once you have made all the changes to your preset, click **Save**
2. Enter a name for your preset and click **Save**
3. Your preset is listed - click **Edit** to make any changes

### Create a meeting

Create a RealtimeKit meeting using the [Create meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/). This API returns a unique identifier for your meeting.

### Add participants

After creating the meeting, add each participant using the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/). The `presetName` created earlier must be passed in the body of the Add Participant API request.

### Validate permissions

Before creating breakout rooms, validate the permissions of the current participant to ensure that the participant has the required permissions to create breakout rooms. Incorrect permissions can lead to errors being thrown.

JavaScript

```

// Check if breakout rooms are supported

const areBreakoutRoomsSupported = meeting.connectedMeetings.supportsConnectedMeetings;


// Check if any breakout rooms are already created

const areBreakoutRoomsActive = meeting.connectedMeetings.isActive;


// Check if the current participant has permission to create breakout rooms

const hasPermissionToCreateBreakoutRooms = meeting.self.permissions.connectedMeetings.canAlterConnectedMeetings;


// Check if the current participant has permission to switch to parent meeting

const hasPermissionToSwitchToParentMeeting = meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;


// Check if the current participant has permission to switch to connected meeting

const hasPermissionToSwitchToConnectedMeeting = meeting.self.permissions.connectedMeetings.canSwitchConnectedMeetings;


```

JavaScript

```

// Check if breakout rooms are supported

const areBreakoutRoomsSupported = meeting.connectedMeetings.supportsConnectedMeetings;


// Check if any breakout rooms are already created

const areBreakoutRoomsActive = meeting.connectedMeetings.isActive;


// Check if the current participant has permission to create breakout rooms

const hasPermissionToCreateBreakoutRooms = meeting.self.permissions.connectedMeetings.canAlterConnectedMeetings;


// Check if the current participant has permission to switch to parent meeting

const hasPermissionToSwitchToParentMeeting = meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;


// Check if the current participant has permission to switch to connected meeting

const hasPermissionToSwitchToConnectedMeeting = meeting.self.permissions.connectedMeetings.canSwitchConnectedMeetings;


```

JavaScript

```

// Check if breakout rooms are supported

const areBreakoutRoomsSupported = meeting.connectedMeetings.supportsConnectedMeetings;


// Check if any breakout rooms are already created

const areBreakoutRoomsActive = meeting.connectedMeetings.isActive;


// Check if the current participant has permission to create breakout rooms

const hasPermissionToCreateBreakoutRooms = meeting.self.permissions.connectedMeetings.canAlterConnectedMeetings;


// Check if the current participant has permission to switch to parent meeting

const hasPermissionToSwitchToParentMeeting = meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;


// Check if the current participant has permission to switch to connected meeting

const hasPermissionToSwitchToConnectedMeeting = meeting.self.permissions.connectedMeetings.canSwitchConnectedMeetings;


```

### Create breakout rooms

JavaScript

```

const breakoutRooms = await meeting.connectedMeetings.createMeetings([

  { title: "Breakout Room 1" },

  { title: "Breakout Room 2" },

  { title: "Breakout Room 3" },

]);


console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));


```

`breakoutRooms` is an array of basic meeting information such as id and title. You can use the `id` of these objects to move participants to the breakout room.

JavaScript

```

const breakoutRooms = await meeting.connectedMeetings.createMeetings([

  { title: "Breakout Room 1" },

  { title: "Breakout Room 2" },

  { title: "Breakout Room 3" },

]);


console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));


```

`breakoutRooms` is an array of basic meeting information such as id and title. You can use the `id` of these objects to move participants to the breakout room.

JavaScript

```

const breakoutRooms = await meeting.connectedMeetings.createMeetings([

  { title: "Breakout Room 1" },

  { title: "Breakout Room 2" },

  { title: "Breakout Room 3" },

]);


console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));


```

`breakoutRooms` is an array of basic meeting information such as id and title. You can use the `id` of these objects to move participants to the breakout room.

### Retrieve list of breakout rooms and their participants

If there are more than one host in the room creating breakouts, you can retrieve consolidated list of breakout rooms using the following API.

JavaScript

```

const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();


```

`breakoutRoomsInfo` is an object containing the list of breakout rooms and their participants, along with details of the parent meeting.

This data can be used to display the list of breakout rooms & participants in the UI. This API refetches the list of breakout rooms & participants, therefore can be considered the source of truth for breakout rooms & participants. It is advised to call this API, to get the latest list of breakout rooms & participants, if a lot of changes are in progress.

You can also listen to `stateUpdate` event to get the latest list of breakout rooms & participants, as they are updated in real-time.

JavaScript

```

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {

  console.log("stateUpdate", {meetings, parentMeeting});


  // Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object

  console.log("Meetings List", meeting.connectedMeetings.meetings);

  console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);

});


```

JavaScript

```

const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();


```

`breakoutRoomsInfo` is an object containing the list of breakout rooms and their participants, along with details of the parent meeting.

This data can be used to display the list of breakout rooms & participants in the UI. This API refetches the list of breakout rooms & participants, therefore can be considered the source of truth for breakout rooms & participants. It is advised to call this API, to get the latest list of breakout rooms & participants, if a lot of changes are in progress.

You can also listen to `stateUpdate` event to get the latest list of breakout rooms & participants, as they are updated in real-time.

JavaScript

```

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {

  console.log("stateUpdate", {meetings, parentMeeting});


  // Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object

  console.log("Meetings List", meeting.connectedMeetings.meetings);

  console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);

});


```

JavaScript

```

const breakoutRooms = await meeting.connectedMeetings.createMeetings([

  { title: "Breakout Room 1" },

  { title: "Breakout Room 2" },

  { title: "Breakout Room 3" },

]);


console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));


```

`breakoutRooms` is an array of basic meeting information such as id and title. You can use the `id` of these objects to move participants to the breakout room.

### Move participants to breakout rooms

Once you have created breakout rooms, assign participants to the rooms.

JavaScript

```

// Retrieve list of breakout rooms & participants

const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();


/*

* You can retrieve meetingIds and participantIds from the breakoutRoomsInfo object.

* Based on where the participant currently is, you can decide the sourceMeetingId and targetMeetingId.

*/


// Move participants to breakout rooms

const response = await meeting.connectedMeetings.moveParticipants(

  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in

  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved

  ["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"], // participantIds, array of participant ids to be moved

);


```

JavaScript

```

// Retrieve list of breakout rooms & participants

const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();


/*

* You can retrieve meetingIds and participantIds from the breakoutRoomsInfo object.

* Based on where the participant currently is, you can decide the sourceMeetingId and targetMeetingId.

*/


// Move participants to breakout rooms

const response = await meeting.connectedMeetings.moveParticipants(

  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in

  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved

  ["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"], // participantIds, array of participant ids to be moved

);


```

JavaScript

```

// Retrieve list of breakout rooms & participants

const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();


/*

* You can retrieve meetingIds and participantIds from the breakoutRoomsInfo object.

* Based on where the participant currently is, you can decide the sourceMeetingId and targetMeetingId.

*/


// Move participants to breakout rooms

const response = await meeting.connectedMeetings.moveParticipants(

  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in

  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved

  ["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"], // participantIds, array of participant ids to be moved

);


```

### Move participants, with a specific preset, to breakout rooms

Once you have created breakout rooms, assign participants to the rooms.

JavaScript

```

const response = await meeting.connectedMeetings.moveParticipantsWithCustomPreset(

  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in

  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved

  [{ presetId: "PRESET_ID_1" }, { presetId: "PRESET_ID_2" }], // array of objects with presetId field

);


```

JavaScript

```

const response = await meeting.connectedMeetings.moveParticipantsWithCustomPreset(

  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in

  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved

  [{ presetId: "PRESET_ID_1" }, { presetId: "PRESET_ID_2" }], // array of objects with presetId field

);


```

JavaScript

```

const response = await meeting.connectedMeetings.moveParticipantsWithCustomPreset(

  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in

  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved

  [{ presetId: "PRESET_ID_1" }, { presetId: "PRESET_ID_2" }], // array of objects with presetId field

);


```

### Move local participant to breakout room

To move the local participant to a different breakout room or back to the parent meeting, use the same API as for moving other participants, but pass the local participant's ID. The local participant must have the appropriate permissions: `canSwitchConnectedMeetings` to switch between breakout rooms, or `canSwitchToParentMeeting` to return to the parent meeting, if the request was originated by the non-host local participant.

### Handle breakout room events

If a participant has been moved to a breakout room, the `changingMeeting` event is triggered, followed by the `meetingChanged` event. These events are also triggered when a participant switches between the main meeting and breakout rooms. Participants will autojoin the breakout room if they are assigned to it. You won't have to join meeting explicitly.

JavaScript

```

// Listen to changingMeeting event to show a custom UI to indicate that a meeting switch is happening

meeting.connectedMeetings.on("changingMeeting", (meetingId) => {

  console.log("Switching to breakout room or main meeting with id: " + meetingId);

  console.log("Show a Custom UI to indicate that a meeting switch is happening");

});


// Listen to meetingChanged event to update the meeting object reference

meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {

  console.log("Switched to breakout room or main meeting");

  console.log("Every action now should be performed on this meeting");

});


```

JavaScript

```

// Listen to changingMeeting event to show a custom UI to indicate that a meeting switch is happening

meeting.connectedMeetings.on("changingMeeting", (meetingId) => {

  console.log("Switching to breakout room or main meeting with id: " + meetingId);

  console.log("Show a Custom UI to indicate that a meeting switch is happening");

});


// Listen to meetingChanged event to update the meeting object reference

meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {

  console.log("Switched to breakout room or main meeting");

  console.log("Every action now should be performed on this meeting");

});


```

JavaScript

```

// Listen to changingMeeting event to show a custom UI to indicate that a meeting switch is happening

meeting.connectedMeetings.on("changingMeeting", (meetingId) => {

  console.log("Switching to breakout room or main meeting with id: " + meetingId);

  console.log("Show a Custom UI to indicate that a meeting switch is happening");

});


// Listen to meetingChanged event to update the meeting object reference

meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {

  console.log("Switched to breakout room or main meeting");

  console.log("Every action now should be performed on this meeting");

});


```

### Close breakout rooms

You can close/delete the breakout rooms. This will force participants in those meetings to come to the main room.

JavaScript

```

await meeting.connectedMeetings.deleteMeetings([

  "MEETING_ID_TO_CLOSE_1",

  "MEETING_ID_TO_CLOSE_2",

]);


```

This would also trigger `stateUpdate` event updating the list of breakout rooms & participants.

JavaScript

```

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {

  console.log("stateUpdate", {meetings, parentMeeting});

});


// Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object

console.log("Meetings List", meeting.connectedMeetings.meetings);

console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);


```

JavaScript

```

await meeting.connectedMeetings.deleteMeetings([

  "MEETING_ID_TO_CLOSE_1",

  "MEETING_ID_TO_CLOSE_2",

]);


```

This would also trigger `stateUpdate` event updating the list of breakout rooms & participants.

JavaScript

```

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {

  console.log("stateUpdate", {meetings, parentMeeting});

});


// Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object

console.log("Meetings List", meeting.connectedMeetings.meetings);

console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);


```

JavaScript

```

await meeting.connectedMeetings.deleteMeetings([

  "MEETING_ID_TO_CLOSE_1",

  "MEETING_ID_TO_CLOSE_2",

]);


```

This would also trigger `stateUpdate` event updating the list of breakout rooms & participants.

JavaScript

```

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {

  console.log("stateUpdate", {meetings, parentMeeting});

});


// Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object

console.log("Meetings List", meeting.connectedMeetings.meetings);

console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);


```

## Next steps

You have successfully integrated breakout rooms into your RealtimeKit application. Participants can now:

* Join the main meeting
* Be assigned to breakout rooms by the host
* Switch between the main meeting and breakout rooms
* Collaborate in smaller focused groups

For more advanced customization, explore the following:

* [UI Kit Components Library](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/) \- Browse available components
* [UI Kit States](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/) \- Learn how components synchronize
* [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/) \- Create custom meeting interfaces

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/breakout-rooms/","name":"Breakout Rooms"}}]}
```

---

---
title: Chat
description: This guide explains how to send and receive chat messages in a meeting using Cloudflare RealtimeKit.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/chat.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Chat

This guide explains how to send and receive chat messages in a meeting using Cloudflare RealtimeKit.

WebMobile

ReactWeb ComponentsAngular

## Introduction

There are three types of messages that can be sent in chat:

* Text messages
* Images
* Files

The meeting chat object is stored in `meeting.chat`, which has methods for sending and receiving messages.

JavaScript

```

console.log("Chat object:", meeting.chat);


```

The `meeting.chat.messages` array contains all the messages that have been sent in the chat. This is an array of objects, where each object is of type `Message`.

JavaScript

```

console.log("All chat messages:", meeting.chat.messages);


```

There are three types of messages that can be sent in chat:

* Text messages
* Images
* Files

The meeting chat object is stored in `meeting.chat`, which has methods for sending and receiving messages.

```

meeting.chat;


```

The `meeting.chat.messages` array contains all the messages that have been sent in the chat. This is an array of objects, where each object is of type `Message`.

```

meeting.chat.messages;


```

There are three types of messages that can be sent in chat:

* Text messages
* Images
* Files

The meeting chat object is stored in `meeting.chat`, which has methods for sending and receiving messages.

```

meeting.chat


```

The `meeting.chat.messages` array contains all the messages that have been sent in the chat. This is an array of objects, where each object is of type `com.cloudflare.realtimekit.chat.ChatMessage`.

```

meeting.chat.messages


```

There are three types of messages that can be sent in chat:

* Text messages
* Images
* Files

The meeting chat object is stored in `meeting.chat`, which has methods for sending and receiving messages.

```

meeting.chat


```

The `meeting.chat.messages` array contains all the messages that have been sent in the chat. This is an array of objects, where each object is of type `RealtimeKit.ChatMessage`.

```

meeting.chat.messages


```

There are three types of messages that can be sent in chat:

* Text messages
* Images
* Files

The meeting chat object is stored in `meeting.chat`, which has methods for sending and receiving messages.

```

meeting.chat;


```

The `meeting.chat.messages` array contains all the messages that have been sent in the chat. This is an array of objects, where each object is of type `ChatMessage`.

```

meeting.chat.messages;


```

There are three types of messages that can be sent in chat:

* Text messages
* Images
* Files

The meeting chat object is stored in `meeting.chat`, which has methods for sending and receiving messages.

```

meeting.chat;


```

The `meeting.chat.messages` array contains all the messages that have been sent in the chat. This is an array of objects, where each object is of type `Message`.

```

meeting.chat.messages;


```

### Message Type

The `Message` type is defined as follows:

TypeScript

```

interface BaseMessage<T extends MessageType> {

  type: T;

  userId: string;

  displayName: string;

  time: Date;

  id: string;

  isEdited?: boolean;

  read?: boolean;

  pluginId?: string;

  pinned?: boolean;

  targetUserIds?: string[];

}


interface TextMessage extends BaseMessage<MessageType.text> {

  message: string;

}


interface ImageMessage extends BaseMessage<MessageType.image> {

  link: string;

}


interface FileMessage extends BaseMessage<MessageType.file> {

  name: string;

  size: number;

  link: string;

}


type Message = TextMessage | ImageMessage | FileMessage;


```

The `Message` type is defined as follows:

TypeScript

```

interface BaseMessage<T extends MessageType> {

  type: T;

  userId: string;

  displayName: string;

  time: Date;

  id: string;

  isEdited?: boolean;

  read?: boolean;

  pluginId?: string;

  pinned?: boolean;

  targetUserIds?: string[];

}


interface TextMessage extends BaseMessage<MessageType.text> {

  message: string;

}


interface ImageMessage extends BaseMessage<MessageType.image> {

  link: string;

}


interface FileMessage extends BaseMessage<MessageType.file> {

  name: string;

  size: number;

  link: string;

}


type Message = TextMessage | ImageMessage | FileMessage;


```

The `ChatMessage` class is defined as follows:

Kotlin

```

enum class ChatMessageType {

  TEXT,

  IMAGE,

  FILE

}


open class ChatMessage(

  val userId: String,

  val displayName: String,

  val read: Boolean,

  val pluginId: String?,

  val type: ChatMessageType,

  val time: String,

  val createdAtMillis: Long,

  val targetUserIds: List<String>?,

)


class TextMessage(val message: String): ChatMessage(...)


class ImageMessage(val link: String): ChatMessage(...)


class FileMessage(

  val name: String,

  val link: String,

  val size: Long,

): ChatMessage(...)


```

The `ChatMessage` class is defined as follows:

Swift

```

public enum ChatMessageType {

    case text

    case image

    case file

}


open class ChatMessage {

    public let userId: String

    public let displayName: String

    public let read: Bool

    public let pluginId: String?

    public let type: ChatMessageType

    public let time: String

    public let createdAtMillis: Int64

    public let targetUserIds: [String]?

}


public final class TextMessage: ChatMessage {

    public let message: String

}


public final class ImageMessage: ChatMessage {

    public let link: String

}


public final class FileMessage: ChatMessage {

    public let name: String

    public let link: String

    public let size: Int64

}


```

The `ChatMessage` class is defined as follows:

Dart

```

enum MessageType { text, image, file }


class ChatMessage {

  final String displayName;

  final MessageType type;

  final bool read;

  final String userId;

  final String? pluginId;

  final String time;

}


class TextMessage extends ChatMessage {

  final String message;

}


class ImageMessage extends ChatMessage {

  final String link;

}


class FileMessage extends ChatMessage {

  final String name;

  final String link;

  final int size;

}


```

The `Message` type is defined as follows:

TypeScript

```

interface BaseMessage<T extends MessageType> {

  type: T;

  userId: string;

  displayName: string;

  time: Date;

  id: string;

  isEdited?: boolean;

  read?: boolean;

  pluginId?: string;

  pinned?: boolean;

  targetUserIds?: string[];

}


interface TextMessage extends BaseMessage<MessageType.text> {

  message: string;

}


interface ImageMessage extends BaseMessage<MessageType.image> {

  link: string;

}


interface FileMessage extends BaseMessage<MessageType.file> {

  name: string;

  size: number;

  link: string;

}


type Message = TextMessage | ImageMessage | FileMessage;


```

## Sending a Chat Message

### Send a Text Message

There is a method in `meeting.chat` to send a message of each type.

To send a text message, use the `meeting.chat.sendTextMessage()` method. This accepts a string message and sends it to the room.

JavaScript

```

const message = "Is this the real life?";

await meeting.chat.sendTextMessage(message);


```

There is a method in `meeting.chat` to send a message of each type.

To send a text message, use the `meeting.chat.sendTextMessage()` method. This accepts a string message and sends it to the room.

```

const message = "Is this the real life?";

await meeting.chat.sendTextMessage(message);


```

There is a method in `meeting.chat` to send a message of each type.

To send a text message, use the `meeting.chat.sendTextMessage()` method. This accepts a string message and sends it to the room.

Kotlin

```

val message = "Is this the real life?"

meeting.chat.sendTextMessage(message)


```

There is a method in `meeting.chat` to send a message of each type.

To send a text message, use the `meeting.chat.sendTextMessage()` method. This accepts a string message and sends it to the room.

Swift

```

var message = "Is this the real life?"

meeting.chat.sendTextMessage(message)


```

There is a method in `meeting.chat` to send a message of each type.

To send a text message, use the `meeting.chat.sendTextMessage()` method. This accepts a string message and sends it to the room.

Dart

```

final message = "Is this the real life?";

meeting.chat.sendTextMessage(message);


```

There is a method in `meeting.chat` to send a message of each type.

To send a text message, use the `meeting.chat.sendTextMessage()` method. This accepts a string message and sends it to the room.

```

const message = "Is this the real life?";

await meeting.chat.sendTextMessage(message);


```

### Send an Image

You can send an image with the help of `meeting.chat.sendImageMessage()`. This accepts an image of type `File`, and sends it to the participants in the meeting.

```

<label for="img">Select image:</label>

<input type="file" id="img" name="img" accept="image/*" />

<button onclick="onSendImage()">Send Image</button>


```

JavaScript

```

async function onSendImage() {

  const image = document.getElementById("img");

  await meeting.chat.sendImageMessage(image.files[0]);

}


```

You can send an image with the help of `meeting.chat.sendImageMessage()`. This accepts an image of type `File`, and sends it to the participants in the meeting.

```

import { useRef } from "react";


function ChatComponent() {

  const imageInputRef = useRef(null);


  const onSendImage = async () => {

    const image = imageInputRef.current;

    if (image && image.files[0]) {

      await meeting.chat.sendImageMessage(image.files[0]);

    }

  };


  return (

    <>

      <label htmlFor="img">Select image:</label>

      <input

        type="file"

        id="img"

        name="img"

        accept="image/*"

        ref={imageInputRef}

      />

      <button onClick={onSendImage}>Send Image</button>

    </>

  );

}


```

You can send an image with the help of `meeting.chat.sendImageMessage()` and sends it to the participants in the meeting.

Kotlin

```

meeting.chat.sendImageMessage(imageUri) { err ->

  // Handle error if any

}


```

You can send an image with the help of `meeting.chat.sendImageMessage()` and sends it to the participants in the meeting.

Swift

```

meeting.chat.sendImageMessage(imageURL: url) { err in

  // Handle error if any

}


```

You can send an image with the help of `meeting.chat.sendImageMessage()` which sends it to the participants in the meeting. It takes a string filePath as argument.

Dart

```

final filePath = "file_path_of_image";

meeting.chat.sendImageMessage(filePath, (error) {

  // Handle error if any

});


```

You can send an image with the help of `meeting.chat.sendImageMessage()`. This accepts an image of type File, and sends it to the participants in the meeting.

```

import DocumentPicker from "@react-native-documents/picker";


async function onSendImage() {

  // Get the image uri and create an object with the following fields

  const res = await DocumentPicker.pickSingle({

    type: [DocumentPicker.types.images],

  });

  const image = {

    uri: res.uri,

    name: res.name,

    size: res.size,

    type: res.type,

  };

  await meeting.chat.sendImageMessage(image);

}


```

### Send a File

Sending a file is similar to sending an image. The only difference is that when you send an image, a preview will be shown in the meeting chat, which is not the case for sending files. That being said, an image can be sent as a file too using `meeting.chat.sendFileMessage()`.

```

<label for="file">Select file:</label>

<input type="file" id="file" name="file" />

<button onclick="onSendFile()">Send File</button>


```

JavaScript

```

async function onSendFile() {

  const file = document.getElementById("file");

  await meeting.chat.sendFileMessage(file.files[0]);

}


```

Sending a file is similar to sending an image. The only difference is that when you send an image, a preview will be shown in the meeting chat, which is not the case for sending files. That being said, an image can be sent as a file too using `meeting.chat.sendFileMessage()`.

```

import { useRef } from "react";


function ChatComponent() {

  const fileInputRef = useRef(null);


  const onSendFile = async () => {

    const file = fileInputRef.current;

    if (file && file.files[0]) {

      await meeting.chat.sendFileMessage(file.files[0]);

    }

  };


  return (

    <>

      <label htmlFor="file">Select file:</label>

      <input type="file" id="file" name="file" ref={fileInputRef} />

      <button onClick={onSendFile}>Send File</button>

    </>

  );

}


```

Sending a file is similar to sending an image. The only difference is that when you send an image, a preview will be shown in the meeting chat, which is not the case for sending files. That being said, an image can be sent as a file too using `meeting.chat.sendFileMessage()`.

Kotlin

```

meeting.chat.sendFileMessage(fileUri) { err ->

  // Handle error if any

}


```

Sending a file is similar to sending an image. The only difference is that when you send an image, a preview will be shown in the meeting chat, which is not the case for sending files. That being said, an image can be sent as a file too using `meeting.chat.sendFileMessage()`.

Swift

```

meeting.chat.sendFileMessage(fileURL: url) { err in

  // Handle error if any

}


```

You can send a file with the help of `meeting.chat.sendFileMessage()` which sends it to the participants in the meeting. It takes a string filePath as argument.

Dart

```

final filePath = "file_path_of_pdf";

meeting.chat.sendFileMessage(filePath, (error) {

  // Handle error if any

});


```

Sending a file is similar to sending an image. The only difference is that when you send an image, a preview will be shown in the meeting chat, which is not the case for sending files. That being said, an image can be sent as a file too using `meeting.chat.sendFileMessage()`.

```

import DocumentPicker from "@react-native-documents/picker";


async function onSendFile() {

  // Get the file uri and create an object with the following fields

  const res = await DocumentPicker.pickSingle({

    type: [DocumentPicker.types.allFiles],

  });

  const file = {

    uri: res.uri,

    name: res.name,

    size: res.size,

    type: res.type,

  };

  await meeting.chat.sendFileMessage(file);

}


```

### Send Any Message Type

There is also a common method called `meeting.chat.sendMessage()` that can be used to send any of the three types of messages displayed above. It essentially calls one of the methods from above depending upon the type of payload you send to the method. The `sendMessage()` method accepts a parameter `message` of the following type:

TypeScript

```

async function sendMessage(

  message:

    | { type: "text"; message: string }

    | { type: "image"; image: File }

    | { type: "file"; file: File },

) {

  // ...

}


```

Here is how you would use the `sendMessage()` method to send a text message:

JavaScript

```

const message = "Is this just fantasy?";

await meeting.chat.sendMessage({ type: "text", message });


```

There is also a common method called `meeting.chat.sendMessage()` that can be used to send any of the three types of messages displayed above. It essentially calls one of the methods from above depending upon the type of payload you send to the method. The `sendMessage()` method accepts a parameter `message` of the following type:

TypeScript

```

async function sendMessage(

  message:

    | { type: "text"; message: string }

    | { type: "image"; image: File }

    | { type: "file"; file: File },

) {

  // ...

}


```

Here is how you would use the `sendMessage()` method to send a text message:

```

const message = "Is this just fantasy?";

await meeting.chat.sendMessage({ type: "text", message });


```

There is also a common method called `meeting.chat.sendMessage()` that can be used to send any of the three types of messages displayed above. It essentially calls one of the methods from above depending upon the type of payload you send to the method. The `sendMessage()` method accepts a parameter `message` of the following type:

TypeScript

```

async function sendMessage(

  message:

    | { type: "text"; message: string }

    | { type: "image"; image: File }

    | { type: "file"; file: File },

) {

  // ...

}


```

Here is how you would use the `sendMessage()` method to send a text message:

```

const message = "Is this just fantasy?";

await meeting.chat.sendMessage({ type: "text", message });


```

## Receiving Chat Messages

The `meeting.chat` object emits events when new chat messages are received. You can listen for the `chatUpdate` event to log when a new chat message is received.

JavaScript

```

meeting.chat.on("chatUpdate", ({ message, messages }) => {

  console.log(`Received message ${message}`);

  console.log(`All messages in chat: ${messages.join(", ")}`);

});


```

Here, `message` is of type `Message`, as defined in the introduction. `messages` is a list of all chat messages in the meeting, which is the same as `meeting.chat.messages`.

When a chat message is received, the `meeting.chat.messages` list is also updated.

JavaScript

```

console.log(JSON.stringify(meeting.chat.messages));


meeting.chat.on("chatUpdate", () => {

  console.log(JSON.stringify(meeting.chat.messages));

});


```

The `meeting.chat` object emits events when new chat messages are received. You can listen for the `chatUpdate` event to log when a new chat message is received.

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";


// useRealtimeKitSelector hooks only works when `RealtimeKitProvider` is used.

const messages = useRealtimeKitSelector((m) => m.chat.messages);


```

Alternatively:

```

meeting.chat.on("chatUpdate", ({ message, messages }) => {

  console.log(`Received message ${message}`);

  console.log(`All messages in chat: ${messages.join(", ")}`);

});


```

Here, `message` is of type `Message`, as defined in the introduction. `messages` is a list of all chat messages in the meeting, which is the same as `meeting.chat.messages`.

When a chat message is received, the `meeting.chat.messages` list is also updated.

```

console.log(JSON.stringify(meeting.chat.messages));


meeting.chat.on("chatUpdate", () => {

  console.log(JSON.stringify(meeting.chat.messages));

});


```

To be able to receive chat messages you need to implement a method `onChatUpdates()` method from callback `RtkChatEventListener`. You can subscribe to this events by calling `meeting.addChatEventListener(rtkChatEventListener)`.

Kotlin

```

meeting.addChatEventListener(object : RtkChatEventListener {

  override fun onChatUpdates(messages: List<ChatMessage>) {

    // to load chat messages

  }


  override fun onNewChatMessage(message: ChatMessage) {

    // when a new chat message is shared in the meeting

  }


  override fun onMessageRateLimitReset() {

    // when the rate limit for sending messages of self is reset

  }

})


```

The `onChatUpdates()` method will be called whenever there is a change in the chat messages. The `messages` parameter is a list of `ChatMessage` objects that have been sent in the chat.

The `onNewChatMessage()` method will be called whenever a new chat message is shared in the meeting. The `message` parameter is a `ChatMessage` object that has been sent in the chat.

The `onMessageRateLimitReset()` method will be called when the rate limit for sending messages of self is reset and you can send messages again. The default rate limit is 180 messages within 60 seconds.

To be able to receive chat messages you need to implement a method `onChatUpdates()` method from callback `RtkChatEventListener`. You can subscribe to this events by calling `meeting.addChatEventListener(rtkChatEventListener)`.

Swift

```

extension MainChatListener: RtkChatEventListener {

  func onChatUpdates(messages: [ChatMessage]) {

    // to load chat messages

  }


  func onNewChatMessage(message: ChatMessage) {

    // when a new chat message is shared in the meeting

  }


  func onMessageRateLimitReset() {

    // when the rate limit for sending messages of self is reset

  }

}


```

The `onChatUpdates()` method will be called whenever there is a change in the chat messages. The `messages` parameter is a list of `ChatMessage` objects that have been sent in the chat.

The `onNewChatMessage()` method will be called whenever a new chat message is shared in the meeting. The `message` parameter is a `ChatMessage` object that has been sent in the chat.

The `onMessageRateLimitReset()` method will be called when the rate limit for sending messages of self is reset and you can send messages again. The default rate limit is 180 messages within 60 seconds.

To be able to receive chat messages you need to implement a method `onChatUpdates()` method from callback `RtkChatEventListener`. You can subscribe to this events by calling `meeting.addChatEventListener(rtkChatEventListener)`.

Dart

```

class ChatEventListener extends RtkChatEventListener {

  @override

  void onChatUpdates(List<ChatMessage> messages) {

    messages.map((msg) {

      switch (msg.type) {

        case MessageType.text:

          print((msg as TextMessage).displayName);

          print((msg).message);


          // Show message/return state to show text message UI.


          break;

        case MessageType.image:

          print((msg as ImageMessage).displayName);

          print((msg).link);


          // Show message/return state to show image message UI.

          break;

        case MessageType.file:

          print((msg as FileMessage).name);

          print((msg).link);

          print((msg).size);

          // Show message/return state to show file message UI.


          break;

      }

    });

  }


  void onNewChatMessage(ChatMessage message) {

    // your code to handle new chat message

  }

}


```

In this context, `messages` refers to a list of all the chat messages in the meeting. The type of message used is `ChatMessage`, which was introduced earlier in the introduction to Chat topic.

Whenever a chat message is received, the `meeting.chat.messages` list is automatically updated.

The `meeting.chat` object emits events when new chat messages are received. You can listen for the `chatUpdate` event to log when a new chat message is received.

```

meeting.chat.on("chatUpdate", ({ message, messages }) => {

  console.log(`Received message ${message}`);

  console.log(`All messages in chat: ${messages.join(", ")}`);

});


```

Here, `message` is of type `Message`, as defined in the introduction. `messages` is a list of all chat messages in the meeting, which is the same as `meeting.chat.messages`.

When a chat message is received, the `meeting.chat.messages` list is also updated.

```

console.log(JSON.stringify(meeting.chat.messages));


meeting.chat.on("chatUpdate", () => {

  console.log(JSON.stringify(meeting.chat.messages));

});


```

## Editing Chat Messages

### Edit a Text Message

There is a method in `meeting.chat` to edit a message of each type.

To edit a text message, use the `meeting.chat.editTextMessage()` method. This accepts a `messageId` (type `string`) and a `message` (type `string`).

JavaScript

```

const message = meeting.chat.messages[0];

const messageId = message?.id;

const newMessage = "Is this the real life?";


await meeting.chat.editTextMessage(messageId, newMessage);


```

There is a method in `meeting.chat` to edit a message of each type.

To edit a text message, use the `meeting.chat.editTextMessage()` method. This accepts a `messageId` (type `string`) and a `message` (type `string`).

```

const message = meeting.chat.messages[0];

const messageId = message?.id;

const newMessage = "Is this the real life?";


await meeting.chat.editTextMessage(messageId, newMessage);


```

There is a method in `meeting.chat` to edit a message of each type.

To edit a text message, use the `meeting.chat.editTextMessage()` method. This accepts a `messageId` (type `string`) and a `message` (type `string`).

```

const message = meeting.chat.messages[0];

const messageId = message?.id;

const newMessage = "Is this the real life?";

await meeting.chat.editTextMessage(messageId, newMessage);


```

### Edit an Image

You can edit an image with the help of `meeting.chat.editImageMessage()`. This accepts a `messageId` of type `string` and an image of type `File`.

```

<label for="img">Edit image:</label>

<input type="file" id="img" name="img" accept="image/*" />

<button onclick="onEditImage()">Edit Image</button>


```

JavaScript

```

async function onEditImage() {

  const messageId = "...";

  const image = document.getElementById("img");

  await meeting.chat.editImageMessage(messageId, image.files[0]);

}


```

You can edit an image with the help of `meeting.chat.editImageMessage()`. This accepts a `messageId` of type `string` and an image of type `File`.

```

import { useRef } from "react";


function ChatComponent() {

  const imageInputRef = useRef(null);


  const onEditImage = async () => {

    const messageId = "...";

    const image = imageInputRef.current;

    if (image && image.files[0]) {

      await meeting.chat.editImageMessage(messageId, image.files[0]);

    }

  };


  return (

    <>

      <label htmlFor="img">Edit image:</label>

      <input

        type="file"

        id="img"

        name="img"

        accept="image/*"

        ref={imageInputRef}

      />

      <button onClick={onEditImage}>Edit Image</button>

    </>

  );

}


```

You can edit an image with the help of `meeting.chat.editImageMessage()`. This accepts a `messageId` of type `string` and an image of type File.

```

import DocumentPicker from "@react-native-documents/picker";


async function onEditImage() {

  const messageId = "...";

  // Get the image uri and create an object with the following fields

  const res = await DocumentPicker.pickSingle({

    type: [DocumentPicker.types.images],

  });

  const image = {

    uri: res.uri,

    name: res.name,

    size: res.size,

    type: res.type,

  };

  await meeting.chat.editImageMessage(messageId, image);

}


```

### Edit a File

Editing a file is similar to editing an image. To edit a file, use `meeting.chat.editFileMessage()`.

```

<label for="file">Edit file:</label>

<input type="file" id="file" name="file" />

<button onclick="onEditFile()">Edit File</button>


```

JavaScript

```

async function onEditFile() {

  const messageId = "...";

  const file = document.getElementById("file");

  await meeting.chat.editFileMessage(messageId, file.files[0]);

}


```

Editing a file is similar to editing an image. To edit a file, use `meeting.chat.editFileMessage()`.

```

import { useRef } from "react";


function ChatComponent() {

  const fileInputRef = useRef(null);


  const onEditFile = async () => {

    const messageId = "...";

    const file = fileInputRef.current;

    if (file && file.files[0]) {

      await meeting.chat.editFileMessage(messageId, file.files[0]);

    }

  };


  return (

    <>

      <label htmlFor="file">Edit file:</label>

      <input type="file" id="file" name="file" ref={fileInputRef} />

      <button onClick={onEditFile}>Edit File</button>

    </>

  );

}


```

Editing a file is similar to editing an image. To edit a file, use `meeting.chat.editFileMessage()`.

```

import DocumentPicker from "@react-native-documents/picker";


async function onEditFile() {

  const messageId = "...";

  // Get the file uri and create an object with the following fields

  const res = await DocumentPicker.pickSingle({

    type: [DocumentPicker.types.allFiles],

  });

  const file = {

    uri: res.uri,

    name: res.name,

    size: res.size,

    type: res.type,

  };

  await meeting.chat.editFileMessage(messageId, file);

}


```

### Edit Any Message Type

There is also a common method called `meeting.chat.editMessage()` that can be used to edit any of the three types of messages displayed above. It essentially calls one of the methods from above depending upon the type of payload you send to the method. The `editMessage()` method accepts parameters `messageId` and `message` of the following type:

TypeScript

```

async function editMessage(

  messageId: string,

  message:

    | { type: "text"; message: string }

    | { type: "image"; image: File }

    | { type: "file"; file: File },

) {

  // ...

}


```

Here is how you would use the `editMessage()` method to edit a text message:

JavaScript

```

const messageId = "...";

const message = "Is this just fantasy?";

await meeting.chat.editMessage(messageId, { type: "text", message });


```

There is also a common method called `meeting.chat.editMessage()` that can be used to edit any of the three types of messages displayed above. It essentially calls one of the methods from above depending upon the type of payload you send to the method. The `editMessage()` method accepts parameters `messageId` and `message` of the following type:

TypeScript

```

async function editMessage(

  messageId: string,

  message:

    | { type: "text"; message: string }

    | { type: "image"; image: File }

    | { type: "file"; file: File },

) {

  // ...

}


```

Here is how you would use the `editMessage()` method to edit a text message:

```

const messageId = "...";

const message = "Is this just fantasy?";

await meeting.chat.editMessage(messageId, { type: "text", message });


```

There is also a common method called `meeting.chat.editMessage()` that can be used to edit any of the three types of messages displayed above. It essentially calls one of the methods from above depending upon the type of payload you send to the method. The `editMessage()` method accepts parameters `messageId` and `message` of the following type:

TypeScript

```

async function editMessage(

  messageId: string,

  message:

    | { type: "text"; message: string }

    | { type: "image"; image: File }

    | { type: "file"; file: File },

) {

  // ...

}


```

Here is how you would use the `editMessage()` method to edit a text message:

```

const messageId = "...";

const message = "Is this just fantasy?";

await meeting.chat.editMessage(messageId, { type: "text", message });


```

## Other Chat Functions

### Get Messages by a User

The `meeting.chat` object exposes certain other methods for convenience when working with chat.

You can get messages by a particular user by passing the user's ID to the `meeting.chat.getMessagesByUser()` method.

JavaScript

```

// Find the userId of the user with name "Freddie".

const { userId } = meeting.participants.joined

  .toArray()

  .find((p) => p.name === "Freddie");


const messages = meeting.chat.getMessagesByUser(userId);


```

The `meeting.chat` object exposes certain other methods for convenience when working with chat.

You can get messages by a particular user by passing the user's ID to the `meeting.chat.getMessagesByUser()` method.

```

// Find the userId of the user with name "Freddie".

const { userId } = meeting.participants.joined

  .toArray()

  .find((p) => p.name === "Freddie");


const messages = meeting.chat.getMessagesByUser(userId);


```

The `meeting.chat` object exposes certain other methods for convenience when working with chat.

You can get messages by a particular user by passing the user's ID to the `meeting.chat.getMessagesByUser()` method.

```

// Find the userId of the user with name "Freddie".

const { userId } = meeting.participants.joined

  .toArray()

  .find((p) => p.name === "Freddie");


const messages = meeting.chat.getMessagesByUser(userId);


```

### Get Messages of a Particular Type

You can also get messages of a particular type using the `meeting.chat.getMessagesByType()` method. For example, you can get all image messages present in the chat using the following snippet:

JavaScript

```

const imageMessages = meeting.chat.getMessagesByType("image");


```

You can also get messages of a particular type using the `meeting.chat.getMessagesByType()` method. For example, you can get all image messages present in the chat using the following snippet:

```

const imageMessages = meeting.chat.getMessagesByType("image");


```

You can also get messages of a particular type using the `meeting.chat.getMessagesByType()` method. For example, you can get all image messages present in the chat using the following snippet:

```

const imageMessages = meeting.chat.getMessagesByType("image");


```

### Pinning a Chat Message

You can pin a number of messages to the chat. When you pin a message, the message object will have the attribute `pinned: true`, using which you can identify if a message is pinned.

To pin a message:

JavaScript

```

// Pin the first message in the chat (could be text, image, or file).

const { id } = meeting.chat.messages[0];

await meeting.chat.pin(id);


```

Once you pin a message, it will be added to `meeting.chat.pinned`.

JavaScript

```

const { id } = meeting.chat.messages[0];

await meeting.chat.pin(id);


console.log(meeting.chat.pinned);

console.log(meeting.chat.pinned.length > 0); // Should be true


```

You can also unpin a pinned message by using the `meeting.chat.unpin()` method.

JavaScript

```

// Unpin the first pinned message.

const { id } = meeting.chat.pinned[0];

await meeting.chat.unpin(id);


```

You can listen for events to know when a message is pinned or unpinned.

JavaScript

```

meeting.chat.on("pinMessage", ({ message }) => {

  console.log("A message was pinned", JSON.stringify(message));

});


meeting.chat.on("unpinMessage", ({ message }) => {

  console.log("A message was unpinned", JSON.stringify(message));

});


```

You can pin a number of messages to the chat. When you pin a message, the message object will have the attribute `pinned: true`, using which you can identify if a message is pinned.

To pin a message:

```

// Pin the first message in the chat (could be text, image, or file).

const { id } = meeting.chat.messages[0];

await meeting.chat.pin(id);


```

Once you pin a message, it will be added to `meeting.chat.pinned`.

```

const { id } = meeting.chat.messages[0];

await meeting.chat.pin(id);


console.log(meeting.chat.pinned);

console.log(meeting.chat.pinned.length > 0); // Should be true


```

You can also unpin a pinned message by using the `meeting.chat.unpin()` method.

```

// Unpin the first pinned message.

const { id } = meeting.chat.pinned[0];

await meeting.chat.unpin(id);


```

You can listen for events to know when a message is pinned or unpinned.

```

meeting.chat.on("pinMessage", ({ message }) => {

  console.log("A message was pinned", JSON.stringify(message));

});


meeting.chat.on("unpinMessage", ({ message }) => {

  console.log("A message was unpinned", JSON.stringify(message));

});


```

You can pin a number of messages to the chat. When you pin a message, the message object will have the attribute `pinned: true`, using which you can identify if a message is pinned.

To pin a message:

```

// Pin the first message in the chat (could be text, image, or file).

const { id } = meeting.chat.messages[0];

await meeting.chat.pin(id);


```

Once you pin a message, it will be added to `meeting.chat.pinned`.

```

const { id } = meeting.chat.messages[0];

await meeting.chat.pin(id);


console.log(meeting.chat.pinned);

console.log(meeting.chat.pinned.length > 0); // Should be true


```

You can also unpin a pinned message by using the `meeting.chat.unpin()` method.

```

// Unpin the first pinned message.

const { id } = meeting.chat.pinned[0];

await meeting.chat.unpin(id);


```

You can listen for events to know when a message is pinned or unpinned.

```

meeting.chat.on("pinMessage", ({ message }) => {

  console.log("A message was pinned", JSON.stringify(message));

});


meeting.chat.on("unpinMessage", ({ message }) => {

  console.log("A message was unpinned", JSON.stringify(message));

});


```

### Deleting a Chat Message

The `meeting.chat` namespace exposes a method called `deleteMessage()`. It takes a parameter `messageId` of type `string`.

JavaScript

```

const messageId = "...";

await meeting.chat.deleteMessage(messageId);


```

The `meeting.chat` namespace exposes a method called `deleteMessage()`. It takes a parameter `messageId` of type `string`.

```

const messageId = "...";

await meeting.chat.deleteMessage(messageId);


```

The `meeting.chat` namespace exposes a method called `deleteMessage()`. It takes a parameter `messageId` of type `string`.

```

const messageId = "...";

await meeting.chat.deleteMessage(messageId);


```

## Export chat messages

You can programmatically retrieve all chat messages of a RealtimeKit session in the following ways:

* Using the Chat Replay API
* Setting up webhook for the `meeting.chatSynced` event

### Get chat download URL

To get the chat download URL, make an HTTP `GET` request to the [Chat Replay API endpoint](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/sessions/methods/get%5Fsession%5Fchat/). The API returns:

```

{

  "success": true,

  "data": {

    "chat_download_url": "string",

    "chat_download_url_expiry": "string"

  }

}


```

* **`chat_download_url`** \- A URL that allows you to download the entire chat dump of a session in CSV format from AWS S3
* **`chat_download_url_expiry`** \- The expiry timestamp of the `chat_download_url`. If the URL expires, call this endpoint again to obtain a new download URL

For details on the Chat Replay API endpoint, refer to the [Realtime Kit API documentation](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/sessions/methods/get%5Fsession%5Fchat/).

### Download the chat dump file

You can download the chat dump file in CSV format by making an HTTP `GET` request to the `chat_download_url` obtained in the previous step.

The process of downloading a file from an HTTP URL differs based on whether you are downloading on the client side or server side.

#### Download on the client

To download at client side:

1. Make a `GET` request to the `chat_download_url`
2. Convert the response to a blob
3. Create an invisible `<a>` HTML element with a `download` attribute and add the blob to its `href`
4. Programmatically click on the `<a>` element so that the browser automatically starts downloading, then remove the `<a>` element

#### Download on the server

To download on the server using Node.js streams:

1. Create a writable stream for a local file
2. Make a `GET` request to `chat_download_url`
3. Get a readable stream using `res.body` and pipe to the writable stream created in the first step

### CSV chat dump format

The CSV file contains all chat messages along with participant information and metadata. It includes the following column headings:

* **`id`** \- Unique chat message ID
* **`participantId`** \- ID of the participant who sent the message
* **`sessionId`** \- The session ID from which the chat message was sent
* **`meetingId`** \- The ID of the meeting to which this session belongs
* **`displayName`** \- Display name of the participant who sent this message
* **`pinned`** \- A boolean that indicates if the current message was pinned
* **`isEdited`** \- A boolean that indicates if the current message was edited
* **`payloadType`** \- An ENUM that indicates the type of payload sent in the chat message. It can be one of `TEXT_MESSAGE`, `IMAGE_MESSAGE`, `FILE_MESSAGE`
* **`payload`** \- The actual payload sent in the chat message
* **`createdAt`** \- Timestamp when this chat message was sent

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/chat/","name":"Chat"}}]}
```

---

---
title: Display active speakers
description: RealtimeKit automatically detects and tracks participants who are actively speaking in a meeting. You can display either a single active speaker or multiple active speakers in your application UI, depending on your design requirements.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/display-active-speakers.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Display active speakers

WebMobile

ReactWeb ComponentsAngular

RealtimeKit automatically detects and tracks participants who are actively speaking in a meeting. You can display either a single active speaker or multiple active speakers in your application UI, depending on your design requirements.

An active speaker in RealtimeKit is a remote participant with prominent audio activity at any given moment. The SDK maintains two types of data to help you build your UI:

* **Active speaker** — A single remote participant who is currently speaking most prominently.
* **Active participants** — A set of remote participants with the most prominent audio activity.

The SDK automatically updates these properties and subscribes to participant media as speaking activity changes. It prioritizes prominent audio activity, so a participant not currently visible in your UI can replace a visible participant if their audio becomes more active.

Note

The SDK tracks active speakers only when the local participant is viewing or rendering participants in ACTIVE mode (page 0). Refer to the [Remote participants](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#participant-view-modes) page to learn about participant view modes.

Active speaker properties contain only remote participants. The local participant is available separately.

The maximum number of participants in the `active` map is one less than the grid size configured in the local participant's [Preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/). This reserves space for the local participant in your UI. For example, if the grid size is 6, the `active` map contains a maximum of 5 remote participants.

## Display a single active speaker

Use `lastActiveSpeaker` to show the most recently active participant in your UI. Access the current active speaker with the `useRealtimeKitSelector` hook:

TypeScript

```

const activeSpeaker = useRealtimeKitSelector((meeting) => {

  const activeSpeakerId = meeting.participants.lastActiveSpeaker;

  return meeting.participants.joined.get(activeSpeakerId);

});


if (activeSpeaker) {

  // Render the active speaker video

}


```

The `useRealtimeKitSelector` hook automatically updates your component when the active speaker changes.

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK also emits an `activeSpeaker` event on `meeting.participants` when a different participant becomes the active speaker. For imperative updates or side effects, listen to this event:

TypeScript

```

meeting.participants.on("activeSpeaker", ({ peerId, volume }) => {

  const activeSpeaker = meeting.participants.joined.get(peerId);

  // Update your UI or trigger side effects

});


```

Use `lastActiveSpeaker` to show the most recently active participant in your UI.

Access the `lastActiveSpeaker` property to get the participant ID, then retrieve the participant object from the joined participants map:

TypeScript

```

const activeSpeakerId = meeting.participants.lastActiveSpeaker;

const activeSpeaker = meeting.participants.joined.get(activeSpeakerId);


if (activeSpeaker) {

  // Render the active speaker video

}


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK emits an `activeSpeaker` event on `meeting.participants` when a different participant becomes the active speaker:

TypeScript

```

meeting.participants.on("activeSpeaker", ({ peerId, volume }) => {

  const activeSpeaker = meeting.participants.joined.get(peerId);

  // Update your UI to display the new active speaker

});


```

Use `lastActiveSpeaker` to show the most recently active participant in your UI.

Access the `lastActiveSpeaker` property to get the participant ID, then retrieve the participant object from the joined participants map:

TypeScript

```

const activeSpeakerId = meeting.participants.lastActiveSpeaker;

const activeSpeaker = meeting.participants.joined.get(activeSpeakerId);


if (activeSpeaker) {

  // Render the active speaker video

}


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK emits an `activeSpeaker` event on `meeting.participants` when a different participant becomes the active speaker:

TypeScript

```

meeting.participants.on("activeSpeaker", ({ peerId, volume }) => {

  const activeSpeaker = meeting.participants.joined.get(peerId);

  // Update your UI to display the new active speaker

});


```

Use `activeSpeaker` to show the most recently active participant in your UI.

Access the `activeSpeaker` property to get the current active speaker:

Kotlin

```

val activeSpeaker = meeting.participants.activeSpeaker


if (activeSpeaker != null) {

  // Render the active speaker video

}


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK emits an event when a different participant becomes the active speaker. Listen to this event using `RtkParticipantsEventListener`:

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onActiveSpeakerChanged(participant: RtkRemoteParticipant?) {

    // Update your UI to display the new active speaker

  }

})


```

Use `activeSpeaker` to show the most recently active participant in your UI.

Access the `activeSpeaker` property to get the current active speaker:

Swift

```

let activeSpeaker = meeting.participants.activeSpeaker


if let activeSpeaker = activeSpeaker {

  // Render the active speaker video

}


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK emits an event when a different participant becomes the active speaker. Listen to this event by implementing `RtkParticipantsEventListener`:

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onActiveSpeakerChanged(participant: RtkRemoteParticipant?) {

    // Update your UI to display the new active speaker

  }

}


meeting.addParticipantsEventListener(self)


```

Use `activeSpeaker` to show the most recently active participant in your UI.

The Flutter SDK tracks active speakers through the `onActiveSpeakerChanged` event listener:

Dart

```

class ParticipantsNotifier extends RtkParticipantsEventListener {

  @override

  void onActiveSpeakerChanged(RtkRemoteParticipant? participant) {

    if (participant != null) {

      // Update your UI to display the new active speaker

    }

  }

}


meeting.addParticipantsEventListener(ParticipantsNotifier());


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

Use `lastActiveSpeaker` to show the most recently active participant in your UI. Access the current active speaker with the `useRealtimeKitSelector` hook:

```

const activeSpeaker = useRealtimeKitSelector((meeting) => {

  const activeSpeakerId = meeting.participants.lastActiveSpeaker;

  return meeting.participants.joined.get(activeSpeakerId);

});


if (activeSpeaker) {

  // Render the active speaker video

}


```

The `useRealtimeKitSelector` hook automatically updates your component when the active speaker changes.

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK also emits an `activeSpeaker` event on `meeting.participants` when a different participant becomes the active speaker. For imperative updates or side effects, listen to this event:

```

meeting.participants.on("activeSpeaker", (participant) => {

  // Update your UI or trigger side effects

});


```

## Display multiple active speakers

Use the `active` map to show multiple participants with prominent audio activity, typically in a grid layout. Access the current active participants with the `useRealtimeKitSelector` hook:

TypeScript

```

const activeMap = useRealtimeKitSelector(

  (meeting) => meeting.participants.active,

);


const activeParticipants = activeMap.toArray();


// Render active participants in your grid

activeParticipants.forEach((participant) => {

  // Render participant video tile

});


```

The `useRealtimeKitSelector` hook automatically updates your component when the set of active speakers changes.

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK also emits a `participantsUpdate` event on the `active` map when the set of active speakers changes. For imperative updates or side effects when the `active` map changes, listen to this event:

TypeScript

```

meeting.participants.active.on("participantsUpdate", () => {

  const activeParticipants = meeting.participants.active.toArray();

  // Perform side effects

});


```

(Optional) If your application needs to respond when a specific participant is added to or removed from the active map, listen for `participantJoined` and `participantLeft` on `meeting.participants.active` map.

TypeScript

```

meeting.participants.active.on("participantJoined", (participant) => {

  console.log("Participant added to active map:", participant.id);

});


meeting.participants.active.on("participantLeft", (participant) => {

  console.log("Participant removed from active map:", participant.id);

});


```

Use the `active` map to show multiple participants with prominent audio activity, typically in a grid layout.

TypeScript

```

const activeParticipants = meeting.participants.active.toArray();


// Render active participants in your grid

activeParticipants.forEach((participant) => {

  // Render participant video tile

});


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK emits a `participantsUpdate` event on the `active` map when the set of active speakers changes. Listen to this event, retrieve the updated array, and re-render your grid:

TypeScript

```

meeting.participants.active.on("participantsUpdate", () => {

  const activeParticipants = meeting.participants.active.toArray();

  // Update your grid UI with the new active participants

});


```

(Optional) If your application needs to respond when a specific participant is added to or removed from the active map, listen for `participantJoined` and `participantLeft` on `meeting.participants.active` map.

TypeScript

```

meeting.participants.active.on("participantJoined", (participant) => {

  console.log("Participant added to active map:", participant.id);

});


meeting.participants.active.on("participantLeft", (participant) => {

  console.log("Participant removed from active map:", participant.id);

});


```

Use the `active` map to show multiple participants with prominent audio activity, typically in a grid layout.

TypeScript

```

const activeParticipants = meeting.participants.active.toArray();


// Render active participants in your grid

activeParticipants.forEach((participant) => {

  // Render participant video tile

});


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK emits a `participantsUpdate` event on the `active` map when the set of active speakers changes. Listen to this event, retrieve the updated array, and re-render your grid:

TypeScript

```

meeting.participants.active.on("participantsUpdate", () => {

  const activeParticipants = meeting.participants.active.toArray();

  // Update your grid UI with the new active participants

});


```

(Optional) If your application needs to respond when a specific participant is added to or removed from the active map, listen for `participantJoined` and `participantLeft` on `meeting.participants.active` map.

TypeScript

```

meeting.participants.active.on("participantJoined", (participant) => {

  console.log("Participant added to active map:", participant.id);

});


meeting.participants.active.on("participantLeft", (participant) => {

  console.log("Participant removed from active map:", participant.id);

});


```

Use the `active` list to show multiple participants with prominent audio activity, in a grid layout:

Kotlin

```

val activeParticipants = meeting.participants.active


// Render active participants in your grid

activeParticipants.forEach { participant ->

  // Render participant video tile

}


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK emits an event when the set of active speakers changes. Listen to this event using `RtkParticipantsEventListener`:

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onActiveParticipantsChanged(active: List<RtkRemoteParticipant>) {

    // Update your grid UI with the new active participants

  }

})


```

Use the `active` list to show multiple participants with prominent audio activity, typically in a grid layout:

Swift

```

let activeParticipants = meeting.participants.active


// Render active participants in your grid

for participant in activeParticipants {

  // Render participant video tile

}


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK emits an event when the set of active speakers changes. Listen to this event by implementing `RtkParticipantsEventListener`:

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onActiveParticipantsChanged(active: [RtkRemoteParticipant]) {

    // Update your grid UI with the new active participants

  }

}


meeting.addParticipantsEventListener(self)


```

Use the `active` list to show multiple participants with prominent audio activity, typically in a grid layout:

Dart

```

final activeParticipants = meeting.participants.active;


// Render active participants in your grid

for (var participant in activeParticipants) {

  // Render participant video tile

}


```

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK emits an event when the set of active speakers changes. Listen to this event using `RtkParticipantsEventListener`:

Dart

```

class ParticipantsNotifier extends RtkParticipantsEventListener {

  @override

  void onActiveParticipantsChanged(List<RtkRemoteParticipant> active) {

    // Update your grid UI with the new active participants

  }

}


meeting.addParticipantsEventListener(ParticipantsNotifier());


```

Use the `active` map to show multiple participants with prominent audio activity, typically in a grid layout. Access the current active participants with the `useRealtimeKitSelector` hook:

```

const activeMap = useRealtimeKitSelector(

  (meeting) => meeting.participants.active,

);


const activeParticipants = activeMap.toArray();


// Render active participants in your grid

activeParticipants.forEach((participant) => {

  // Render participant video tile

});


```

The `useRealtimeKitSelector` hook automatically updates your component when the set of active speakers changes.

Refer to [Display participant videos](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#display-participant-videos) to learn how to render the participant video in your UI.

The SDK also emits a `participantsUpdate` event on the `active` map when the set of active speakers changes. For imperative updates or side effects when the `active` map changes, listen to this event:

```

meeting.participants.active.on("participantsUpdate", () => {

  const activeParticipants = meeting.participants.active.toArray();

  // Perform side effects

});


```

(Optional) If your application needs to respond when a specific participant is added to or removed from the active map, listen for `participantJoined` and `participantLeft` on `meeting.participants.active` map:

```

meeting.participants.active.on("participantJoined", (participant) => {

  console.log("Participant added to active map:", participant.id);

});


meeting.participants.active.on("participantLeft", (participant) => {

  console.log("Participant removed from active map:", participant.id);

});


```

## Visualize audio activity

You can create custom audio visualizations using audio data from a participant's audio track. Extract volume information from the audio track to calculate amplitude series. Use this data to render waveforms, speech indicators, or audio level meters in your UI.

You can create custom audio visualizations using audio data from a participant's audio track. Extract volume information from the audio track to calculate amplitude series. Use this data to render waveforms, speech indicators, or audio level meters in your UI.

You can create custom audio visualizations using audio data from a participant's audio track. Extract volume information from the audio track to calculate amplitude series. Use this data to render waveforms, speech indicators, or audio level meters in your UI.

Audio activity visualization is not supported on Android.

Audio activity visualization is not supported on iOS.

Audio activity visualization is not supported on Flutter.

Audio activity visualization is not supported on React Native.

## Related resources

* [Meeting object explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) \- Understand the meeting object structure and available properties.
* [Remote participant](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/) \- Learn more about remote participants in a session and how to display their video.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/display-active-speakers/","name":"Display active speakers"}}]}
```

---

---
title: End a session
description: To end the current session for all participants, remove all participants using kickAll(). This stops any ongoing recording for that session and sets the session status to ENDED.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/end-a-session.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# End a session

Prerequisites

Ensure your participant's preset has the **Kick Participants** (`kick_participant`) host permission enabled.

To end the current [session](https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting/#session/) for all participants, remove all participants using `kickAll()`. This stops any ongoing recording for that session and sets the session status to `ENDED`.

Ending a session is different from leaving a meeting. Leaving disconnects only the current participant. The session remains active if other participants are still present.

## Steps

WebMobile

ReactWeb ComponentsAngular

1. Check that the local participant has permission to remove participants.  
TypeScript  
```  
const canEndSession = meeting.self.permissions.kickParticipant === true;  
if (!canEndSession) {  
  // Disable the "End meeting/session" control in your UI.  
  // You can also show a message to explain why the action is not available.  
}  
```  
TypeScript  
```  
const canEndSession = meeting.self.permissions.kickParticipant === true;  
if (!canEndSession) {  
  // Disable the "End meeting/session" control in your UI.  
  // You can also show a message to explain why the action is not available.  
}  
```  
TypeScript  
```  
const canEndSession = meeting.self.permissions.kickParticipant === true;  
if (!canEndSession) {  
  // Disable the "End meeting/session" control in your UI.  
  // You can also show a message to explain why the action is not available.  
}  
```  
Kotlin  
```  
val canEndSession = meeting.localUser.permissions.host.canKickParticipant  
if (!canEndSession) {  
    // Disable the "End meeting/session" control in your UI.  
    // You can also show a message to explain why the action is not available.  
}  
```  
Swift  
```  
let canEndSession = meeting.localUser.permissions.host.canKickParticipant  
if !canEndSession {  
    // Disable the "End meeting/session" control in your UI.  
    // You can also show a message to explain why the action is not available.  
}  
```  
Dart  
```  
final canEndSession = meeting.localUser.permissions.host.canKickParticipant;  
if (!canEndSession) {  
  // Disable the "End meeting/session" control in your UI.  
  // You can also show a message to explain why the action is not available.  
}  
```  
JavaScript  
```  
const canEndSession = meeting.self.permissions.kickParticipant === true;  
if (!canEndSession) {  
  // Disable the "End meeting/session" control in your UI.  
  // You can also show a message to explain why the action is not available.  
}  
```
2. End the session by removing all participants.  
If the participant does not have the required permission, `kickAll()` throws a ClientError with error code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.kickAll();  
} catch (err) {  
  if (err?.code === 1201) {  
    // The participant does not have permission to end the session.  
    // Update your UI to indicate that the action is not allowed.  
    return;  
  }  
  throw err;  
}  
```  
If the participant does not have the required permission, `kickAll()` throws a ClientError with error code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.kickAll();  
} catch (err) {  
  if (err?.code === 1201) {  
    // The participant does not have permission to end the session.  
    // Update your UI to indicate that the action is not allowed.  
    return;  
  }  
  throw err;  
}  
```  
If the participant does not have the required permission, `kickAll()` throws a ClientError with error code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.kickAll();  
} catch (err) {  
  if (err?.code === 1201) {  
    // The participant does not have permission to end the session.  
    // Update your UI to indicate that the action is not allowed.  
    return;  
  }  
  throw err;  
}  
```  
If the participant does not have the required permission, `kickAll()` returns a `HostError`.  
Kotlin  
```  
val error: HostError? = meeting.participants.kickAll()  
if (error != null) {  
    when (error) {  
        is HostError.KickPermissionDenied -> {  
            // The participant does not have permission to end the session.  
            // Update your UI to indicate that the action is not allowed.  
        }  
    }  
} else {  
    // Successfully initiated session end  
}  
```  
If the participant does not have the required permission, `kickAll()` returns a `HostError`.  
Swift  
```  
let error: HostError? = meeting.participants.kickAll()  
if let error = error {  
    switch error {  
    case .kickPermissionDenied:  
        // The participant does not have permission to end the session.  
        // Update your UI to indicate that the action is not allowed.  
        break  
    default:  
        break  
    }  
} else {  
    // Successfully initiated session end  
}  
```  
Dart  
```  
meeting.participants.kickAll(onResult: (error) {  
  if (error != null) {  
    // The participant does not have permission to end the session.  
    // Update your UI to indicate that the action is not allowed.  
  } else {  
    // Successfully initiated session end  
  }  
});  
```  
If the participant does not have the required permission, `kickAll()` throws a ClientError with error code `1201`.  
JavaScript  
```  
try {  
  await meeting.participants.kickAll();  
} catch (err) {  
  if (err?.code === 1201) {  
    // The participant does not have permission to end the session.  
    // Update your UI to indicate that the action is not allowed.  
    return;  
  }  
  throw err;  
}  
```
3. Listen for the session end event.  
When the session ends, all participants leave the session. The SDK emits a `roomLeft` event with `state` set to `ended`.  
TypeScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "ended") {  
    // Update your UI to show that the meeting session has ended.  
  }  
});  
```  
When the session ends, all participants leave the session. The SDK emits a `roomLeft` event with `state` set to `ended`.  
TypeScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "ended") {  
    // Update your UI to show that the meeting session has ended.  
  }  
});  
```  
When the session ends, all participants leave the session. The SDK emits a `roomLeft` event with `state` set to `ended`.  
TypeScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "ended") {  
    // Update your UI to show that the meeting session has ended.  
  }  
});  
```  
When the session ends, all participants leave the session. You can subscribe to the event listeners to handle the session end.  
Kotlin  
```  
meeting.addMeetingRoomEventListener(object : RtkMeetingRoomEventListener {  
    override fun onMeetingEnded() {  
        // Update your UI to show that the meeting session has ended.  
    }  
})  
```  
When the session ends, all participants leave the session. You can subscribe to the event listeners to handle the session end.  
Swift  
```  
// Implement the delegate method  
extension MeetingViewModel: RtkMeetingRoomEventListener {  
  func onMeetingEnded() {  
      // Update your UI to show that the meeting session has ended.  
  }  
}  
meeting.addMeetingRoomEventListener(self)  
```  
When the session ends, all participants leave the session. You can subscribe to the event listeners to handle the session end.  
Dart  
```  
class MeetingRoomListener extends RtkMeetingRoomEventListener {  
  @override  
  void onMeetingEnded() {  
    // Update your UI to show that the meeting session has ended.  
  }  
}  
// Add the listener  
meeting.addMeetingRoomEventListener(MeetingRoomListener());  
```  
When the session ends, all participants leave the session. The SDK emits a `roomLeft` event with `state` set to `ended`.  
JavaScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "ended") {  
    // Update your UI to show that the meeting session has ended.  
  }  
});  
```

You can also end a session from your backend by removing all participants using the [Kick all participants](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/active-session/methods/kick%5Fall%5Fparticipants/) API.

## End a session from your backend

### Remove all participants with the API

Use the [Kick all participants](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/active-session/methods/kick%5Fall%5Fparticipants/) API method to remove all participants from an active session for a meeting.

Required API token permissions

At least one of the following [token permissions](https://developers.cloudflare.com/fundamentals/api/reference/permissions/)is required:
* `Realtime Admin`
* `Realtime`

Kick all participants

```

curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/active-session/kick-all" \

  --request POST \

  --header "Authorization: Bearer $CLOUDFLARE_API_TOKEN"


```

### Listen for session end events with webhooks

Register a webhook that subscribes to `meeting.ended`. RealtimeKit sends this event when the session ends. You can use it to trigger backend workflows, such as sending a notification, generating a report, or updating session records in your database.

Required API token permissions

At least one of the following [token permissions](https://developers.cloudflare.com/fundamentals/api/reference/permissions/)is required:
* `Realtime Admin`
* `Realtime`

Add a webhook

```

curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks" \

  --request POST \

  --header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \

  --json '{

    "name": "Session ended webhook",

    "url": "<YOUR_WEBHOOK_URL>",

    "events": [

        "meeting.ended"

    ]

  }'


```

## Disable a meeting

Ending a session does not disable the meeting. Participants can join the meeting again and start a new session. To prevent participants from joining again and starting a new session, set the meeting status to `INACTIVE` using the [Update a meeting](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/update%5Fmeeting%5Fby%5Fid/) API.

Required API token permissions

At least one of the following [token permissions](https://developers.cloudflare.com/fundamentals/api/reference/permissions/)is required:
* `Realtime Admin`
* `Realtime`

Update a meeting

```

curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID" \

  --request PATCH \

  --header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \

  --json '{

    "status": "INACTIVE"

  }'


```

## Next steps

* Review how presets control permissions in [Preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/).
* Review the possible values of the local participant room state in [Local Participant](https://developers.cloudflare.com/realtime/realtimekit/core/local-participant/#state-properties/).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/end-a-session/","name":"End a session"}}]}
```

---

---
title: Error Codes
description: This page describes RealtimeKit error codes to help you identify and troubleshoot issues.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/error-codes.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Error Codes

This page describes RealtimeKit error codes to help you identify and troubleshoot issues.

WebMobile

ReactWeb ComponentsAngular

All Web Frameworks (Web Components, React, Angular) share the same error codes.

## RealtimeKitClient

#### Error code: 0001

* **Error message**: Failed to initialize
* **Possible reason**: RealtimeKitClient is not getting initialized.
* **Possible solution**: Verify if you initialized the RealtimeKitClient correctly `await RealtimeKitClient.init({ ... })`. See [RealtimeKitClient ↗](https://docs.realtime.cloudflare.com/web-core/reference/RealtimeKitClient). If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 0002

* **Error message**: Failed to join room
* **Possible reason**: Indicates a problem with the RealtimeKitClient.
* **Possible solution**: The `join()` method is used to join a meeting room in RealtimeKit. Try calling this method again on the RealtimeKitClient:

JavaScript

```

await meeting.join();


```

Once the join room process completes, you'll see the `roomJoined` event is emitted on the `meeting.self` namespace.

#### Error code: 0003

* **Error message**: Failed to leave room
* **Possible reason**: Indicates a problem with the RealtimeKitClient.
* **Possible solution**: The `leave()` method is used to leave a meeting room in RealtimeKit. Try calling this method again on the RealtimeKitClient:

JavaScript

```

await meeting.leave();


```

#### Error code: 0004

* **Error message**: Invalid auth token
* **Possible reason**: Indicates a problem with the passed participant auth token.
* **Possible solution**: Ensure that the passed auth token is a valid JWT auth token that is not expired yet.

#### Error code: 0010

* **Error message**: Browser not supported
* **Possible reason**: Browser is too old and does not support WebRTC
* **Possible solution**: Upgrade browser to the latest version. Google Chrome is preferred.

#### Error code: 0011

* **Error message**: HTTP Network Error
* **Possible reason**: Either internet issues are present or the API requests are failing due to a faulty auth token among other cases
* **Possible solution**: Ensure that the internet connection is proper. Speed test can be performed at [fast.com ↗](https://fast.com/). Make sure that the meeting is active and the token has not expired.

#### Error code: 0012

* **Error message**: Websocket Network Error
* **Possible reason**: Either internet issues are present or the Websocket connection failed due to a faulty auth token among other cases
* **Possible solution**: Ensure that the internet connection is proper. Speed test can be performed at [fast.com ↗](https://fast.com/). Make sure that the meeting is active and the token has not expired.

#### Error code: 0013

* **Error message**: Rate Limited
* **Possible reason**: SDK API that you are calling is being called too often
* **Possible solution**: API rate limiting generally occurs when the webpage is making an unusually high number of requests within a short period. To resolve this, analyze your code to determine why so many requests are being sent and implement optimizations to reduce unnecessary calls.

## Controller

#### Error code: 0100

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Controller module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 0101

* **Error message**: Permission denied
* **Possible reason**: The participant does not have the required permissions to perform the action.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 0102

* **Error message**: Prerequisite module missing
* **Possible reason**: A required module such as `self` for the Controller is missing or not initialized.
* **Possible solution**: Ensure all prerequisite modules are properly passed in RealtimeKitClient initialization.

## RoomNodeClient

#### Error code: 0200

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the RoomNodeClient module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

## HiveNodeClient

#### Error code: 0300

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the HiveNodeClient module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

## SocketService

#### Error code: 0400

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the SocketService module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 0404

* **Error message**: Missing prerequisites to establish a websocket connection
* **Possible reason**: Required prerequisites for establishing a WebSocket connection are missing.
* **Possible solution**: Ensure all prerequisites (e.g., JWT auth token with meetingId, network connectivity) are met. This is an extremely rare case and usually indicates an issue in RealtimeKit SDK.

## Chat

#### Error code: 0500

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Chat module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 0501

* **Error message**: Permission denied
* **Possible reason**: The participant does not have the required permissions to perform the action.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 0502

* **Error message**: Invalid message body
* **Possible reason**: The message body does not conform to the expected format.
* **Possible solution**: The `Message` type is not defined correctly. See [Chat ↗](https://docs.realtime.cloudflare.com/web-core/chat/introduction).

#### Error code: 0503

* **Error message**: Text message is too large
* **Possible reason**: The message exceeds the allowed character limit.
* **Possible solution**: Reduce the message length and try again.

#### Error code: 0504

* **Error message**: Message not found by the given ID
* **Possible reason**: The message ID provided does not correspond to an existing message.
* **Possible solution**: Verify the message ID and ensure the message exists before querying.

#### Error code: 0505

* **Error message**: Action not permitted without joining room
* **Possible reason**: The participant attempted to perform an action that requires them to join the meeting first.
* **Possible solution**: The participant must first join the meeting using `meeting.join()` before attempting the action again.

#### Error code: 0506

* **Error message**: Message search is disabled
* **Possible reason**: The message search feature is turned off.
* **Possible solution**: Please reach out to Cloudflare support for assistance.

#### Error code: 0510

* **Error message**: Invalid channel name
* **Possible reason**: The channel name provided does not meet the required format or does not exist.
* **Possible solution**: Ensure the channel name is correctly formatted and exists in the system.

## Plugin

#### Error code: 0600

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Plugin module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 0601

* **Error message**: Permission denied
* **Possible reason**: The participant does not have the required permissions to perform the action.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 0602

* **Error message**: Plugin not found
* **Possible reason**: The specified plugin does not exist or is not available.
* **Possible solution**: Verify the plugin ID and ensure the plugin is enabled for your meeting.

#### Error code: 0603

* **Error message**: Action not permitted without joining room
* **Possible reason**: The participant attempted to perform an action that requires them to join the meeting first.
* **Possible solution**: The participant must first join the meeting using `meeting.join()` before attempting the action again.

## Polls

#### Error code: 0700

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Polls module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 0705

* **Error message**: Action not permitted without joining room
* **Possible reason**: The participant attempted to perform an action that requires them to join the meeting first.
* **Possible solution**: The participant must first join the meeting using `meeting.join()` before attempting the action again.

## Meta

#### Error code: 0800

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Meta module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 0801

* **Error message**: Permission denied
* **Possible reason**: The participant does not have the required permissions to perform the action.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

## Preset

#### Error code: 0900

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Preset module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 0904

* **Error message**: Invalid preset configuration
* **Possible reason**: The preset configuration contains invalid or incompatible settings.
* **Possible solution**: Review your preset configuration and ensure all settings are valid.

## Recording

#### Error code: 1000

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Recording module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 1001

* **Error message**: Permission denied
* **Possible reason**: The participant does not have the required permissions to perform the action.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 1004

* **Error message**: Recording not started
* **Possible reason**: Attempted to stop or interact with a recording that hasn't been started.
* **Possible solution**: Start a recording before attempting to stop or interact with it.

#### Error code: 1005

* **Error message**: Recording already in progress
* **Possible reason**: Attempted to start a recording when one is already active.
* **Possible solution**: Stop the current recording before starting a new one.

## Self

#### Error code: 1100

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Self module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 1101

* **Error message**: Permission denied
* **Possible reason**: The participant does not have the required permissions to perform the action.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 1102

* **Error message**: Device not found
* **Possible reason**: The specified media device (microphone/camera) is not available.
* **Possible solution**: Ensure the device is connected and browser permissions are granted.

#### Error code: 1103

* **Error message**: Failed to access media device
* **Possible reason**: Browser permissions were denied or device is in use by another application.
* **Possible solution**: Grant browser permissions and ensure the device is not being used by another application.

#### Error code: 1104

* **Error message**: Invalid device configuration
* **Possible reason**: The device configuration provided is invalid or incompatible.
* **Possible solution**: Verify the device configuration and ensure it meets the required specifications.

#### Error code: 1105

* **Error message**: Screen share not supported
* **Possible reason**: Browser does not support screen sharing or permissions were denied.
* **Possible solution**: Use a supported browser (Chrome, Edge, Firefox) and grant screen share permissions.

#### Error code: 1106

* **Error message**: Action not permitted without joining room
* **Possible reason**: The participant attempted to perform an action that requires them to join the meeting first.
* **Possible solution**: The participant must first join the meeting using `meeting.join()` before attempting the action again.

## Participant

#### Error code: 1200

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Participant module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 1201

* **Error message**: Permission denied
* **Possible reason**: The participant does not have the required permissions to perform the action.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 1202

* **Error message**: Participant not found
* **Possible reason**: The specified participant ID does not exist in the meeting.
* **Possible solution**: Verify the participant ID and ensure they have joined the meeting.

#### Error code: 1203

* **Error message**: Cannot perform action on self
* **Possible reason**: Attempted to perform an action on yourself that should target other participants.
* **Possible solution**: Use the appropriate `meeting.self` methods for self-actions.

#### Error code: 1204

* **Error message**: Invalid participant ID
* **Possible reason**: The participant ID format is invalid.
* **Possible solution**: Ensure you're using a valid participant or peer ID.

#### Error code: 1205

* **Error message**: Participant already exists
* **Possible reason**: Attempted to add a participant that is already in the meeting.
* **Possible solution**: Check if the participant has already joined before attempting to add them.

#### Error code: 1206

* **Error message**: Max participants limit reached
* **Possible reason**: The meeting has reached its maximum participant capacity.
* **Possible solution**: Wait for participants to leave or upgrade your plan for higher limits.

#### Error code: 1207

* **Error message**: Participant is in waiting room
* **Possible reason**: Attempted to perform an action on a participant who is still in the waiting room.
* **Possible solution**: Admit the participant from the waiting room first.

#### Error code: 1208

* **Error message**: Action not permitted without joining room
* **Possible reason**: The participant attempted to perform an action that requires them to join the meeting first.
* **Possible solution**: The participant must first join the meeting using `meeting.join()` before attempting the action again.

#### Error code: 1209

* **Error message**: Participant has been removed
* **Possible reason**: Attempted to interact with a participant who has been removed from the meeting.
* **Possible solution**: Verify participant status before performing actions.

## Spotlight

#### Error code: 1300

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Spotlight module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

## Webinar

#### Error code: 1500

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Webinar module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

## LocalMediaHandler

#### Error code: 1601

* **Error message**: Media constraints not supported
* **Possible reason**: The media constraints provided are not supported by the browser or device.
* **Possible solution**: Adjust media constraints to supported values.

#### Error code: 1602

* **Error message**: Failed to get user media
* **Possible reason**: Browser could not access camera/microphone due to permissions or hardware issues.
* **Possible solution**: Grant browser permissions and ensure devices are properly connected.

#### Error code: 1603

* **Error message**: No audio device found
* **Possible reason**: No microphone is available or connected.
* **Possible solution**: Connect a microphone and ensure it's recognized by the system.

#### Error code: 1604

* **Error message**: No video device found
* **Possible reason**: No camera is available or connected.
* **Possible solution**: Connect a camera and ensure it's recognized by the system.

#### Error code: 1605

* **Error message**: Device in use
* **Possible reason**: The requested device is already in use by another application.
* **Possible solution**: Close other applications using the device and try again.

#### Error code: 1606

* **Error message**: Device disconnected
* **Possible reason**: The media device was disconnected during the session.
* **Possible solution**: Reconnect the device and refresh the connection.

#### Error code: 1607

* **Error message**: Track ended unexpectedly
* **Possible reason**: The media track ended due to device disconnection or system error.
* **Possible solution**: Restart the media track or reconnect the device.

#### Error code: 1608

* **Error message**: Failed to switch device
* **Possible reason**: Error occurred while switching between media devices.
* **Possible solution**: Verify the new device is available and try again.

#### Error code: 1609

* **Error message**: Screen share permission denied
* **Possible reason**: User denied screen share permission in the browser.
* **Possible solution**: Grant screen share permission when prompted.

#### Error code: 1610

* **Error message**: Screen share canceled
* **Possible reason**: User canceled the screen share selection.
* **Possible solution**: Retry screen sharing and select a window/screen to share.

#### Error code: 1611

* **Error message**: Invalid media track
* **Possible reason**: The provided media track is invalid or has ended.
* **Possible solution**: Ensure the media track is active before using it.

## End-to-End Encryption

#### Error code: 1701

* **Error message**: E2EE not supported
* **Possible reason**: End-to-end encryption is not supported in the current browser or configuration.
* **Possible solution**: Use a browser that supports E2EE or check your configuration.

## AI

#### Error code: 1800

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the AI module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 1801

* **Error message**: AI feature not enabled
* **Possible reason**: The AI feature you're trying to use is not enabled in your preset.
* **Possible solution**: Enable the AI feature in your preset configuration.

## Livestream

#### Error code: 1900

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Livestream module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 1901

* **Error message**: Livestream not started
* **Possible reason**: Attempted to stop or interact with a livestream that hasn't been started.
* **Possible solution**: Start a livestream before attempting to stop or interact with it.

#### Error code: 1902

* **Error message**: Livestream already in progress
* **Possible reason**: Attempted to start a livestream when one is already active.
* **Possible solution**: Stop the current livestream before starting a new one.

## Stage

#### Error code: 2000

* **Error message**: Internal exception
* **Possible reason**: An unexpected error occurred within the Stage module.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 2001

* **Error message**: Permission denied
* **Possible reason**: The participant does not have the required permissions to perform the action.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 2002

* **Error message**: Participant not on stage
* **Possible reason**: Attempted to perform a stage action on a participant who is not on stage.
* **Possible solution**: Ensure the participant is on stage before performing stage-specific actions.

#### Error code: 2003

* **Error message**: Stage is full
* **Possible reason**: The stage has reached its maximum participant capacity.
* **Possible solution**: Remove participants from stage or upgrade your plan for higher limits.

#### Error code: 2004

* **Error message**: Participant already on stage
* **Possible reason**: Attempted to add a participant to stage who is already on stage.
* **Possible solution**: Check stage status before attempting to add participants.

#### Error code: 2005

* **Error message**: Invalid stage request
* **Possible reason**: The stage request contains invalid parameters or configuration.
* **Possible solution**: Review the stage request parameters and ensure they are valid.

#### Error code: 2006

* **Error message**: Stage feature not enabled
* **Possible reason**: The stage feature is not enabled in your preset or plan.
* **Possible solution**: Enable the stage feature in your preset configuration.

## General

#### Error code: 9900

* **Error message**: Unknown error
* **Possible reason**: An unexpected error occurred that doesn't fall into other categories.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

Note

React Native shares the same error codes as Web Frameworks. Refer to the Web Frameworks tab for the complete list of error codes and solutions.

All mobile platforms (iOS, Android, Flutter) share the same error codes. All fallible APIs in RealtimeKit mobile SDKs return an operation-specific error type that implements the `RtkError` interface with `code: Int` (or `ErrorCode` for iOS) and `message: String` fields.

## Meeting

#### Error code: 1000

* **Error message**: Invalid auth token
* **Possible reason**: The authentication token provided is invalid or malformed.
* **Possible solution**: Ensure that the passed auth token is a valid JWT auth token that is not expired yet.

#### Error code: 1001

* **Error message**: Failed to initialize meeting
* **Possible reason**: Meeting initialization encountered an error.
* **Possible solution**: Check your initialization parameters and network connectivity. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 1002

* **Error message**: Invalid base URL
* **Possible reason**: The base URL provided is invalid or inaccessible.
* **Possible solution**: Verify the base URL configuration in your initialization code.

#### Error code: 1003

* **Error message**: Failed to join room
* **Possible reason**: Indicates a problem joining the meeting room.
* **Possible solution**: Ensure the meeting is active and the token has not expired. Check network connectivity and try again.

#### Error code: 1004

* **Error message**: Unauthorised participant
* **Possible reason**: The participant does not have authorization to join the meeting.
* **Possible solution**: Verify the participant's auth token and ensure they have the required permissions.

#### Error code: 1005

* **Error message**: Meeting is in the `INACTIVE` state
* **Possible reason**: The meeting is not currently active.
* **Possible solution**: Ensure the meeting has been started before attempting to join.

#### Error code: 1006

* **Error message**: Unknown error
* **Possible reason**: An unexpected error occurred.
* **Possible solution**: Check the logs for more details and retry the operation. If you continue to experience issues, please reach out to Cloudflare support.

## Audio

#### Error code: 2100

* **Error message**: No permission to share audio in the meeting
* **Possible reason**: The participant does not have permission to enable audio.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 2101

* **Error message**: Microphone permission denied by the OS
* **Possible reason**: The operating system has denied microphone access.
* **Possible solution**: Grant microphone permissions in your device settings and restart the application.

#### Error code: 2102

* **Error message**: Transient error in enabling microphone access
* **Possible reason**: A temporary error occurred while enabling the microphone.
* **Possible solution**: Try enabling the microphone again. If you continue to experience issues, please reach out to Cloudflare support.

## Video

#### Error code: 2200

* **Error message**: No permission to share camera in the meeting
* **Possible reason**: The participant does not have permission to enable video.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 2201

* **Error message**: Camera permission denied by the OS
* **Possible reason**: The operating system has denied camera access.
* **Possible solution**: Grant camera permissions in your device settings and restart the application.

#### Error code: 2202

* **Error message**: Transient error in enabling camera access
* **Possible reason**: A temporary error occurred while enabling the camera.
* **Possible solution**: Try enabling the camera again. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 2203

* **Error message**: Cannot share video in this meeting type
* **Possible reason**: Video sharing is not allowed for this meeting type.
* **Possible solution**: Check the meeting configuration and preset settings.

## Screen Share

#### Error code: 2300

* **Error message**: No permission to enable screen share in the meeting
* **Possible reason**: The participant does not have permission to share their screen.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 2301

* **Error message**: Screen share permission denied by the OS
* **Possible reason**: The operating system has denied screen share access.
* **Possible solution**: Grant screen share permissions in your device settings and restart the application.

#### Error code: 2302

* **Error message**: Screen share operation failed
* **Possible reason**: An error occurred during screen sharing.
* **Possible solution**: Try starting screen share again. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 2303

* **Error message**: Maximum limit of screen shares has been reached
* **Possible reason**: The meeting has reached the maximum number of concurrent screen shares.
* **Possible solution**: Wait for other participants to stop sharing or upgrade your plan for higher limits.

#### Error code: 2304

* **Error message**: Cannot screen share in this meeting type
* **Possible reason**: Screen sharing is not allowed for this meeting type.
* **Possible solution**: Check the meeting configuration and preset settings.

## Participant Control

#### Error code: 3000

* **Error message**: Pin permission denied to host
* **Possible reason**: The participant does not have permission to pin other participants.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 3002

* **Error message**: Mute video permission denied to host
* **Possible reason**: The participant does not have permission to mute other participants' video.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 3003

* **Error message**: Mute audio permission denied to host
* **Possible reason**: The participant does not have permission to mute other participants' audio.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 3006

* **Error message**: Kick permission denied to host
* **Possible reason**: The participant does not have permission to remove other participants.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

## Chat

#### Error code: 4000

* **Error message**: No permission to send chat messages in the meeting
* **Possible reason**: The participant does not have permission to send chat messages.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 4001

* **Error message**: Host tried to apply an invalid value to the chat configuration
* **Possible reason**: The chat configuration contains invalid settings.
* **Possible solution**: Review the chat configuration and ensure all settings are valid.

#### Error code: 4002

* **Error message**: Rate limit breached for chat messages
* **Possible reason**: Too many chat messages were sent in a short period.
* **Possible solution**: Reduce the frequency of chat messages and try again.

#### Error code: 4101

* **Error message**: Chat message cannot be blank
* **Possible reason**: An empty message was sent.
* **Possible solution**: Ensure the message contains text before sending.

#### Error code: 4102

* **Error message**: Chat message exceeded character limit
* **Possible reason**: The message is too long.
* **Possible solution**: Reduce the message length and try again.

#### Error code: 4201

* **Error message**: File format cannot be sent in chat
* **Possible reason**: The file type is not supported.
* **Possible solution**: Check the supported file formats and convert the file if necessary.

#### Error code: 4202

* **Error message**: Failed to read the file to send in chat
* **Possible reason**: The file could not be read from the device.
* **Possible solution**: Ensure the file exists and is accessible, then try again.

#### Error code: 4203

* **Error message**: Failed to upload the file to chat
* **Possible reason**: File upload encountered an error.
* **Possible solution**: Check network connectivity and try uploading the file again.

## Polls

#### Error code: 5000

* **Error message**: No permission to create polls in the meeting
* **Possible reason**: The participant does not have permission to create polls.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 5001

* **Error message**: Poll question cannot be blank
* **Possible reason**: An empty poll question was provided.
* **Possible solution**: Ensure the poll question contains text before creating the poll.

#### Error code: 5002

* **Error message**: Poll does not have enough options
* **Possible reason**: The poll needs at least two options.
* **Possible solution**: Add more options to the poll before creating it.

#### Error code: 5003

* **Error message**: Poll option cannot be blank
* **Possible reason**: One or more poll options are empty.
* **Possible solution**: Ensure all poll options contain text before creating the poll.

#### Error code: 5004

* **Error message**: Cannot vote in this poll
* **Possible reason**: The participant does not have permission to vote or the poll is closed.
* **Possible solution**: Check the poll status and participant permissions.

#### Error code: 5005

* **Error message**: Poll ID was invalid
* **Possible reason**: The specified poll does not exist.
* **Possible solution**: Verify the poll ID and ensure the poll exists.

## Plugin

#### Error code: 6000

* **Error message**: User does not have permissions to launch/close plugins
* **Possible reason**: The participant does not have permission to manage plugins.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 6001

* **Error message**: Cannot send data to an inactive plugin
* **Possible reason**: The plugin is not currently active.
* **Possible solution**: Ensure the plugin is activated before attempting to send data to it.

## Recording

#### Error code: 7000

* **Error message**: User does not have permission to start recording
* **Possible reason**: The participant does not have permission to start recording.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 7001

* **Error message**: Recording operation failed
* **Possible reason**: An error occurred during the recording operation.
* **Possible solution**: Try starting the recording again. If you continue to experience issues, please reach out to Cloudflare support.

#### Error code: 7002

* **Error message**: There is no recording in progress
* **Possible reason**: Attempted to stop a recording that is not active.
* **Possible solution**: Verify that a recording is in progress before attempting to stop it.

#### Error code: 7003

* **Error message**: Invalid recording state
* **Possible reason**: The recording is in an unexpected state.
* **Possible solution**: Check the recording status and try again. If you continue to experience issues, please reach out to Cloudflare support.

## Stage

#### Error code: 8000

* **Error message**: Stage is disabled for this meeting type
* **Possible reason**: The stage feature is not enabled for this meeting.
* **Possible solution**: Enable the stage feature in your preset configuration.

#### Error code: 8001

* **Error message**: Permission denied for stage operation
* **Possible reason**: The participant does not have permission to perform stage operations.
* **Possible solution**: Verify the participant's permissions in their respective preset and try again.

#### Error code: 8003

* **Error message**: User has not requested stage access
* **Possible reason**: The participant has not requested to join the stage.
* **Possible solution**: Request stage access before attempting to join.

#### Error code: 8004

* **Error message**: Action is invalid for user's current stage status
* **Possible reason**: The action cannot be performed in the current stage status.
* **Possible solution**: Check the participant's stage status and perform the appropriate action.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/error-codes/","name":"Error Codes"}}]}
```

---

---
title: Local Participant
description: Manage local user media devices, control audio, video, and screenshare, and handle events in RealtimeKit meetings.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/local-participant.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Local Participant

Manage local user media devices, control audio, video, and screenshare, and handle events in RealtimeKit meetings.

Prerequisites

Initialize the SDK and understand the meeting object structure. Refer to [Initialize SDK](https://developers.cloudflare.com/realtime/realtimekit/core/) and [Meeting Object Explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/).

## Introduction

The local user is accessible via `meeting.self` and contains all information and methods related to the current participant. This includes media controls, device management, participant metadata, and state information.

## Properties

WebMobile

ReactWeb ComponentsAngular

### Metadata Properties

Access participant identifiers and display information:

JavaScript

```

// Participant identifiers

meeting.self.id; // Peer ID (unique per session)

meeting.self.userId; // User ID (persistent across sessions)

meeting.self.customParticipantId; // Custom identifier set by developer

meeting.self.name; // Display name

meeting.self.picture; // Display picture URL


```

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";


// Participant identifiers

const id = useRealtimeKitSelector((m) => m.self.id);

const userId = useRealtimeKitSelector((m) => m.self.userId);

const customParticipantId = useRealtimeKitSelector(

  (m) => m.self.customParticipantId,

);

const name = useRealtimeKitSelector((m) => m.self.name);

const picture = useRealtimeKitSelector((m) => m.self.picture);


```

Kotlin

```

// Participant identifiers

meeting.localUser.id // Peer ID (unique per session)

meeting.localUser.userId // User ID (persistent across sessions)

meeting.localUser.customParticipantId // Custom identifier set by developer

meeting.localUser.name // Display name

meeting.localUser.picture // Display picture URL


```

Swift

```

// Participant identifiers

meeting.localUser.id // Peer ID (unique per session)

meeting.localUser.userId // User ID (persistent across sessions)

meeting.localUser.customParticipantId // Custom identifier set by developer

meeting.localUser.name // Display name

meeting.localUser.picture // Display picture URL


```

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";


// Participant identifiers

const id = useRealtimeKitSelector((m) => m.self.id);

const userId = useRealtimeKitSelector((m) => m.self.userId);

const customParticipantId = useRealtimeKitSelector(

  (m) => m.self.customParticipantId,

);

const name = useRealtimeKitSelector((m) => m.self.name);

const picture = useRealtimeKitSelector((m) => m.self.picture);


```

Dart

```

// Participant identifiers

meeting.localUser.id // Peer ID (unique per session)

meeting.localUser.userId // User ID (persistent across sessions)

meeting.localUser.customParticipantId // Custom identifier set by developer

meeting.localUser.name // Display name

meeting.localUser.picture // Display picture URL


```

### Media Properties

Access the local user's media tracks and states:

JavaScript

```

// Media state flags

meeting.self.audioEnabled; // Boolean: Is audio enabled?

meeting.self.videoEnabled; // Boolean: Is video enabled?

meeting.self.screenShareEnabled; // Boolean: Is screen share active?


// Media tracks (MediaStreamTrack objects)

meeting.self.audioTrack; // Audio MediaStreamTrack (available when audioEnabled is true)

meeting.self.videoTrack; // Video MediaStreamTrack (available when videoEnabled is true)

meeting.self.screenShareTracks; // Object: { video: MediaStreamTrack, audio?: MediaStreamTrack }


// Permissions granted by user

meeting.self.mediaPermissions; // Current audio/video permissions


```

```

// Media state flags

const audioEnabled = useRealtimeKitSelector((m) => m.self.audioEnabled);

const videoEnabled = useRealtimeKitSelector((m) => m.self.videoEnabled);

const screenShareEnabled = useRealtimeKitSelector(

  (m) => m.self.screenShareEnabled,

);


// Media tracks (MediaStreamTrack objects)

const audioTrack = useRealtimeKitSelector((m) => m.self.audioTrack);

const videoTrack = useRealtimeKitSelector((m) => m.self.videoTrack);

const screenShareTracks = useRealtimeKitSelector(

  (m) => m.self.screenShareTracks,

);


// Permissions granted by user

const mediaPermissions = useRealtimeKitSelector((m) => m.self.mediaPermissions);


```

Kotlin

```

// Media state flags

meeting.localUser.audioEnabled // Boolean: Is audio enabled?

meeting.localUser.videoEnabled // Boolean: Is video enabled?

meeting.localUser.screenShareEnabled // Boolean: Is screen share active?


// Permissions granted by user

meeting.localUser.isCameraPermissionGranted // Camera permission status

meeting.localUser.isMicrophonePermissionGranted // Microphone permission status


```

Swift

```

// Media state flags

meeting.localUser.audioEnabled // Boolean: Is audio enabled?

meeting.localUser.videoEnabled // Boolean: Is video enabled?

meeting.localUser.screenShareEnabled // Boolean: Is screen share active?


// Permissions granted by user

meeting.localUser.isCameraPermissionGranted // Camera permission status

meeting.localUser.isMicrophonePermissionGranted // Microphone permission status


```

```

// Media state flags

const audioEnabled = useRealtimeKitSelector((m) => m.self.audioEnabled);

const videoEnabled = useRealtimeKitSelector((m) => m.self.videoEnabled);

const screenShareEnabled = useRealtimeKitSelector(

  (m) => m.self.screenShareEnabled,

);


// Media tracks (MediaStreamTrack objects)

const audioTrack = useRealtimeKitSelector((m) => m.self.audioTrack);

const videoTrack = useRealtimeKitSelector((m) => m.self.videoTrack);

const screenShareTracks = useRealtimeKitSelector(

  (m) => m.self.screenShareTracks,

);


// Permissions granted by user

const mediaPermissions = useRealtimeKitSelector((m) => m.self.mediaPermissions);


```

Dart

```

// Media state flags

meeting.localUser.audioEnabled // Boolean: Is audio enabled?

meeting.localUser.videoEnabled // Boolean: Is video enabled?

meeting.localUser.screenShareEnabled // Boolean: Is screen share active?


// Permissions granted by user

meeting.localUser.isCameraPermissionGranted // Camera permission status

meeting.localUser.isMicrophonePermissionGranted // Microphone permission status


```

### State Properties

Access room state and participant status:

JavaScript

```

// Room state

meeting.self.roomJoined; // Boolean: Has joined the meeting?

meeting.self.roomState; // Current room state (see possible values below)

meeting.self.isPinned; // Boolean: Is the local user pinned?


// Permissions and config

meeting.self.permissions; // Capabilities defined by preset

meeting.self.config; // Configuration for meeting appearance


```

**Room state values:**

* `'init'` \- Initialized but not joined
* `'joined'` \- Successfully joined the meeting
* `'waitlisted'` \- Waiting in the waiting room
* `'rejected'` \- Entry rejected
* `'kicked'` \- Removed from meeting
* `'left'` \- Left the meeting
* `'ended'` \- Meeting has ended
* `'disconnected'` \- Disconnected from meeting

```

// Room state

const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);

const roomState = useRealtimeKitSelector((m) => m.self.roomState);

const isPinned = useRealtimeKitSelector((m) => m.self.isPinned);


// Permissions and config

const permissions = useRealtimeKitSelector((m) => m.self.permissions);

const config = useRealtimeKitSelector((m) => m.self.config);


```

**Example: Conditional rendering based on room state**

```

const roomState = useRealtimeKitSelector((m) => m.self.roomState);


return (

  <>

    {roomState === "disconnected" && <div>You are disconnected</div>}

    {roomState === "waitlisted" && <div>Waiting for host to admit you</div>}

    {roomState === "joined" && <div>You are in the meeting</div>}

  </>

);


```

**Room state values:**

* `'init'` \- Initialized but not joined
* `'joined'` \- Successfully joined the meeting
* `'waitlisted'` \- Waiting in the waiting room
* `'rejected'` \- Entry rejected
* `'kicked'` \- Removed from meeting
* `'left'` \- Left the meeting
* `'ended'` \- Meeting has ended
* `'disconnected'` \- Disconnected from meeting

Kotlin

```

// Room state

meeting.localUser.roomJoined // Boolean: Has joined the meeting?

meeting.localUser.waitListStatus // Waitlist status (None, Waiting, Accepted, Rejected)

meeting.localUser.isPinned // Boolean: Is the local user pinned?


// Permissions and config

meeting.localUser.permissions // Capabilities defined by preset

meeting.localUser.presetName // Name of preset for local user

meeting.localUser.presetInfo // Typed object representing preset information


```

Swift

```

// Room state

meeting.localUser.roomJoined // Boolean: Has joined the meeting?

meeting.localUser.waitListStatus // Waitlist status (None, Waiting, Accepted, Rejected)

meeting.localUser.isPinned // Boolean: Is the local user pinned?


// Permissions and config

meeting.localUser.permissions // Capabilities defined by preset

meeting.localUser.presetName // Name of preset for local user

meeting.localUser.presetInfo // Typed object representing preset information


```

```

// Room state

const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);

const roomState = useRealtimeKitSelector((m) => m.self.roomState);

const isPinned = useRealtimeKitSelector((m) => m.self.isPinned);


// Permissions and config

const permissions = useRealtimeKitSelector((m) => m.self.permissions);

const config = useRealtimeKitSelector((m) => m.self.config);


```

**Example: Conditional rendering based on room state**

```

const roomState = useRealtimeKitSelector((m) => m.self.roomState);


return (

  <>

    {roomState === "disconnected" && <Text>You are disconnected</Text>}

    {roomState === "waitlisted" && <Text>Waiting for host to admit you</Text>}

    {roomState === "joined" && <Text>You are in the meeting</Text>}

  </>

);


```

**Room state values:**

* `'init'` \- Initialized but not joined
* `'joined'` \- Successfully joined the meeting
* `'waitlisted'` \- Waiting in the waiting room
* `'rejected'` \- Entry rejected
* `'kicked'` \- Removed from meeting
* `'left'` \- Left the meeting
* `'ended'` \- Meeting has ended
* `'disconnected'` \- Disconnected from meeting

Dart

```

// Room state

meeting.localUser.isHost // Boolean: Is the local user a host?

meeting.localUser.isPinned // Boolean: Is the local user pinned?

meeting.localUser.stageStatus // Stage status of the local user


// Permissions and flags

meeting.localUser.flags // ParticipantFlags (recorder, hidden)


```

## Media Controls

### Audio control

Mute and unmute the microphone:

JavaScript

```

// Enable audio (unmute)

await meeting.self.enableAudio();


// Disable audio (mute)

await meeting.self.disableAudio();


// Check current status

const isAudioEnabled = meeting.self.audioEnabled;


```

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";


function AudioControls() {

  const [meeting] = useRealtimeKitClient();

  const audioEnabled = useRealtimeKitSelector((m) => m.self.audioEnabled);


  const toggleAudio = async () => {

    if (audioEnabled) {

      await meeting.self.disableAudio();

    } else {

      await meeting.self.enableAudio();

    }

  };


  return (

    <button onClick={toggleAudio}>{audioEnabled ? "Mute" : "Unmute"}</button>

  );

}


```

Kotlin

```

// Enable audio (unmute)

meeting.localUser.enableAudio { error: AudioError? -> }


// Disable audio (mute)

meeting.localUser.disableAudio { error: AudioError? -> }


// Check current status

val isAudioEnabled = meeting.localUser.audioEnabled


```

Swift

```

// Enable audio (unmute)

meeting.localUser.enableAudio { err in }


// Disable audio (mute)

meeting.localUser.disableAudio { err in }


// Check current status

let isAudioEnabled = meeting.localUser.audioEnabled


```

```

import {

  useRealtimeKitClient,

  useRealtimeKitSelector,

} from "@cloudflare/realtimekit-react-native";

import { TouchableHighlight, Text } from "react-native";


function AudioControls() {

  const [meeting] = useRealtimeKitClient();

  const audioEnabled = useRealtimeKitSelector((m) => m.self.audioEnabled);


  const toggleAudio = async () => {

    if (audioEnabled) {

      await meeting.self.disableAudio();

    } else {

      await meeting.self.enableAudio();

    }

  };


  return (

    <TouchableHighlight onPress={toggleAudio}>

      <Text>{audioEnabled ? "Mute" : "Unmute"}</Text>

    </TouchableHighlight>

  );

}


```

Dart

```

// Enable audio (unmute)

meeting.localUser.enableAudio(onResult: (e) {

  // handle error if any

});


// Disable audio (mute)

meeting.localUser.disableAudio(onResult: (e) {

  // handle error if any

});


// Check current status

final isAudioEnabled = meeting.localUser.audioEnabled;


```

### Video control

Enable and disable the camera:

JavaScript

```

// Enable video

await meeting.self.enableVideo();


// Disable video

await meeting.self.disableVideo();


// Check current status

const isVideoEnabled = meeting.self.videoEnabled;


```

```

function VideoControls() {

  const [meeting] = useRealtimeKitClient();

  const videoEnabled = useRealtimeKitSelector((m) => m.self.videoEnabled);


  const toggleVideo = async () => {

    if (videoEnabled) {

      await meeting.self.disableVideo();

    } else {

      await meeting.self.enableVideo();

    }

  };


  return (

    <button onClick={toggleVideo}>

      {videoEnabled ? "Stop Video" : "Start Video"}

    </button>

  );

}


```

Kotlin

```

// Enable video

meeting.localUser.enableVideo { error: VideoError? -> }


// Disable video

meeting.localUser.disableVideo { error: VideoError? -> }


// Check current status

val isVideoEnabled = meeting.localUser.videoEnabled


```

Swift

```

// Enable video

meeting.localUser.enableVideo { err in }


// Disable video

meeting.localUser.disableVideo { err in }


// Check current status

let isVideoEnabled = meeting.localUser.videoEnabled


```

```

function VideoControls() {

  const [meeting] = useRealtimeKitClient();

  const videoEnabled = useRealtimeKitSelector((m) => m.self.videoEnabled);


  const toggleVideo = async () => {

    if (videoEnabled) {

      await meeting.self.disableVideo();

    } else {

      await meeting.self.enableVideo();

    }

  };


  return (

    <TouchableHighlight onPress={toggleVideo}>

      <Text>{videoEnabled ? "Stop Video" : "Start Video"}</Text>

    </TouchableHighlight>

  );

}


```

Dart

```

// Enable video

meeting.localUser.enableVideo(onResult: (e) {

  // handle error if any

});


// Disable video

meeting.localUser.disableVideo(onResult: (e) {

  // handle error if any

});


// Check current status

final isVideoEnabled = meeting.localUser.videoEnabled;


```

### Screen share control

Start and stop screen sharing:

JavaScript

```

// Enable screen share

await meeting.self.enableScreenShare();


// Disable screen share

await meeting.self.disableScreenShare();


// Check current status

const isScreenShareEnabled = meeting.self.screenShareEnabled;


```

```

function ScreenShareControls() {

  const [meeting] = useRealtimeKitClient();

  const screenShareEnabled = useRealtimeKitSelector(

    (m) => m.self.screenShareEnabled,

  );


  const toggleScreenShare = async () => {

    if (screenShareEnabled) {

      await meeting.self.disableScreenShare();

    } else {

      await meeting.self.enableScreenShare();

    }

  };


  return (

    <button onClick={toggleScreenShare}>

      {screenShareEnabled ? "Stop Sharing" : "Share Screen"}

    </button>

  );

}


```

Kotlin

```

// Enable screen share

meeting.localUser.enableScreenShare()


// Disable screen share

meeting.localUser.disableScreenShare()


// Check current status

val isScreenShareEnabled = meeting.localUser.screenShareEnabled


```

Android API 14 and above

Declare the following permission in your app's AndroidManifest.xml to use screenshare on Android devices running Android API 14 and above:

```

<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />


```

Adding this permission requires extra steps on Google Play Console. Refer to [Google's documentation ↗](https://support.google.com/googleplay/android-developer/answer/13392821?hl=en#declare) for more information.

Swift

```

// Enable screen share

let err: ScreenShareError? = meeting.localUser.enableScreenShare()


// Disable screen share

meeting.localUser.disableScreenShare()


```

Refer to the [Screen Share Setup (iOS)](#screen-share-setup-ios) section for platform-specific configuration.

```

function ScreenShareControls() {

  const [meeting] = useRealtimeKitClient();

  const screenShareEnabled = useRealtimeKitSelector(

    (m) => m.self.screenShareEnabled,

  );


  const toggleScreenShare = async () => {

    if (screenShareEnabled) {

      await meeting.self.disableScreenShare();

    } else {

      await meeting.self.enableScreenShare();

    }

  };


  return (

    <TouchableHighlight onPress={toggleScreenShare}>

      <Text>{screenShareEnabled ? "Stop Sharing" : "Share Screen"}</Text>

    </TouchableHighlight>

  );

}


```

Dart

```

// Enable screen share

meeting.localUser.enableScreenShare();


// Disable screen share

meeting.localUser.disableScreenShare();


```

Platform-specific setup

**Android:** Declare the following permission in your app's AndroidManifest.xml to use screenshare on Android devices running Android API 14 and above:

```

<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />


```

**iOS:** Refer to the [Screen Share Setup (iOS)](#screen-share-setup-ios) section for additional configuration.

### Change display name

Update the display name before joining the meeting:

JavaScript

```

await meeting.self.setName("New Name");


```

Note

Name changes only reflect across all participants if done before joining the meeting.

```

await meeting.self.setName("New Name");


```

Note

Name changes only reflect across all participants if done before joining the meeting.

Kotlin

```

meeting.localUser.setDisplayName("New Name")


```

Note

Name changes only reflect across all participants if done before joining the meeting.

Swift

```

meeting.localUser.setDisplayName(name: "New Name")


```

Note

Name changes only reflect across all participants if done before joining the meeting.

```

await meeting.self.setName("New Name");


```

Note

Name changes only reflect across all participants if done before joining the meeting.

Dart

```

if (meeting.permissions.miscellaneous.canEditDisplayName) {

  meeting.localUser.setDisplayName("New Name");

}


```

Note

Name changes only reflect across all participants if done before joining the meeting and the local user has preset permission to change the name.

## Manage media devices

### Get available devices

JavaScript

```

// Get all media devices

const devices = await meeting.self.getAllDevices();


// Get all audio input devices (microphones)

const audioDevices = await meeting.self.getAudioDevices();


// Get all video input devices (cameras)

const videoDevices = await meeting.self.getVideoDevices();


// Get all audio output devices (speakers)

const speakerDevices = await meeting.self.getSpeakerDevices();


// Get device by ID

const device = await meeting.self.getDeviceById("device-id", "audio");


// Get current devices being used

const currentDevices = meeting.self.getCurrentDevices();

// Returns: { audio: MediaDeviceInfo, video: MediaDeviceInfo, speaker: MediaDeviceInfo }


```

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";

import { useState, useEffect } from "react";


function DeviceSelector() {

  const [meeting] = useRealtimeKitClient();

  const [audioDevices, setAudioDevices] = useState([]);

  const [videoDevices, setVideoDevices] = useState([]);


  useEffect(() => {

    if (!meeting) return;


    const loadDevices = async () => {

      const audio = await meeting.self.getAudioDevices();

      const video = await meeting.self.getVideoDevices();

      setAudioDevices(audio);

      setVideoDevices(video);

    };


    loadDevices();

  }, [meeting]);


  const handleDeviceChange = async (device) => {

    await meeting.self.setDevice(device);

  };


  return (

    <div>

      <select

        onChange={(e) => {

          const device = audioDevices.find(

            (d) => d.deviceId === e.target.value,

          );

          handleDeviceChange(device);

        }}

      >

        {audioDevices.map((device) => (

          <option key={device.deviceId} value={device.deviceId}>

            {device.label}

          </option>

        ))}

      </select>

    </div>

  );

}


```

Get current devices being used:

```

const currentDevices = meeting.self.getCurrentDevices();

// Returns: { audio: MediaDeviceInfo, video: MediaDeviceInfo, speaker: MediaDeviceInfo }


```

Kotlin

```

// Get all audio devices

val audioDevices: List<AudioDevice> = meeting.localUser.getAudioDevices()


// Get all video devices

val videoDevices: List<VideoDevice> = meeting.localUser.getVideoDevices()


// Get currently selected audio device

val selectedAudioDevice: AudioDevice = meeting.localUser.getSelectedAudioDevice()


// Get currently selected video device

val selectedVideoDevice: VideoDevice = meeting.localUser.getSelectedVideoDevice()


```

Swift

```

// Get all audio devices

let audioDevices = meeting.localUser.getAudioDevices()


// Get all video devices

let videoDevices = meeting.localUser.getVideoDevices()


// Get currently selected audio device

let selectedAudioDevice = meeting.localUser.getSelectedAudioDevice()


// Get currently selected video device

let selectedVideoDevice = meeting.localUser.getSelectedVideoDevice()


```

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react-native";

import { useState, useEffect } from "react";

import { FlatList, TouchableHighlight, Text, View } from "react-native";


function DeviceSelector() {

  const [meeting] = useRealtimeKitClient();

  const [audioDevices, setAudioDevices] = useState([]);

  const [videoDevices, setVideoDevices] = useState([]);


  useEffect(() => {

    if (!meeting) return;


    const loadDevices = async () => {

      const audio = await meeting.self.getAudioDevices();

      const video = await meeting.self.getVideoDevices();

      setAudioDevices(audio);

      setVideoDevices(video);

    };


    loadDevices();

  }, [meeting]);


  const handleDeviceChange = async (device) => {

    await meeting.self.setDevice(device);

  };


  return (

    <View>

      <FlatList

        data={audioDevices}

        renderItem={({ item }) => (

          <TouchableHighlight onPress={() => handleDeviceChange(item)}>

            <Text>{item.label}</Text>

          </TouchableHighlight>

        )}

        keyExtractor={(item) => item.deviceId}

      />

    </View>

  );

}


```

Get current devices being used:

```

const currentDevices = meeting.self.getCurrentDevices();

// Returns: { audio: MediaDeviceInfo, video: MediaDeviceInfo, speaker: MediaDeviceInfo }


```

Dart

```

// Get all audio devices

final audioDevices = await meeting.localUser.getAudioDevices();


// Get all video devices

final videoDevices = await meeting.localUser.getVideoDevices();


// Get currently selected audio device

final selectedAudioDevice = meeting.localUser.getSelectedAudioDevice();


// Get currently selected video device

final selectedVideoDevice = meeting.localUser.getSelectedVideoDevice();


```

### Change device

Switch to a different media device:

JavaScript

```

// Get all devices

const devices = await meeting.self.getAllDevices();


// Set a specific device (replaces device of the same kind)

await meeting.self.setDevice(devices[0]);


```

Use the device selector example from the previous section. The `handleDeviceChange` function demonstrates how to switch devices.

Kotlin

```

// Get all audio devices

val audioDevices = meeting.localUser.getAudioDevices()


// Set audio device

meeting.localUser.setAudioDevice(audioDevices[0])


// Get all video devices

val videoDevices = meeting.localUser.getVideoDevices()


// Set video device

meeting.localUser.setVideoDevice(videoDevices[0])


// Switch between front and back camera on devices with 2 cameras

meeting.localUser.switchCamera()


```

Swift

```

// Set audio device

meeting.localUser.setAudioDevice(device)


// Set video device

meeting.localUser.setVideoDevice(videoDevice: device)


// Switch between front and back camera

meeting.localUser.switchCamera()


```

Use the device selector example from the previous section. The `handleDeviceChange` function demonstrates how to switch devices.

JavaScript

```

const handleDeviceChange = async (device) => {

  await meeting.self.setDevice(device);

};


```

Dart

```

// Get all available audio devices

final audioDevices = await meeting.localUser.getAudioDevices();


// Switch audio device

await meeting.localUser.setAudioDevice(audioDevices[1]);


// Get all available video devices

final videoDevices = await meeting.localUser.getVideoDevices();


// Switch video device

await meeting.localUser.setVideoDevice(videoDevices[1]);


// Switch between available camera sources

meeting.localUser.switchCamera();


```

## Display local video

### Register video element

Attach the local video track to a `<video>` element:

```

<video id="local-video" autoplay playsinline></video>


```

JavaScript

```

const videoElement = document.getElementById("local-video");


// Register the video element to display video

meeting.self.registerVideoElement(videoElement);


// For local preview (not sent to other users), pass true as second argument

meeting.self.registerVideoElement(videoElement, true);


```

### Deregister video element

Remove the video element when no longer needed:

JavaScript

```

meeting.self.deregisterVideoElement(videoElement);


```

### Use UI Kit component

Display local video with the UI Kit video tile component:

```

import { RtkParticipantTile } from "@cloudflare/realtimekit-react-ui";

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";


function LocalVideo() {

  const localUser = useRealtimeKitSelector((m) => m.self);


  return <RtkParticipantTile participant={localUser} />;

}


```

### Manage video element manually

Create custom video element implementations:

```

import {

  useRealtimeKitClient,

  useRealtimeKitSelector,

} from "@cloudflare/realtimekit-react";

import { useEffect, useRef } from "react";


function LocalVideoCustom() {

  const [meeting] = useRealtimeKitClient();

  const videoEnabled = useRealtimeKitSelector((m) => m.self.videoEnabled);

  const videoTrack = useRealtimeKitSelector((m) => m.self.videoTrack);

  const videoRef = useRef(null);


  useEffect(() => {

    if (!videoRef.current || !meeting) return;


    // Register video element

    meeting.self.registerVideoElement(videoRef.current);


    return () => {

      // Cleanup: deregister on unmount

      meeting.self.deregisterVideoElement(videoRef.current);

    };

  }, [meeting]);


  return (

    <video

      ref={videoRef}

      autoPlay

      playsInline

      muted

      style={{ display: videoEnabled ? "block" : "none" }}

    />

  );

}


```

### Get video view

Retrieve a self-preview video view that renders the local camera stream:

Kotlin

```

// Get the self-preview video view

val videoView = meeting.localUser.getSelfPreview()


```

For rendering other participants' video, use:

Kotlin

```

// Get video view for camera stream

val participantVideoView = participant.getVideoView()


// Get video view for screenshare stream

val screenshareView = participant.getScreenShareVideoView()


```

### Manage lifecycle

Control video rendering with lifecycle methods:

Kotlin

```

// Start rendering video

videoView.renderVideo()


// Stop rendering video (but keep the view)

videoView.stopVideoRender()


// Release native resources when done

videoView.release()


```

### Complete Example

Kotlin

```

import android.os.Bundle

import android.widget.FrameLayout

import androidx.appcompat.app.AppCompatActivity

import io.dyte.core.VideoView


class MainActivity : AppCompatActivity() {

    private lateinit var videoView: VideoView


    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)


        // Get the self-preview video view

        videoView = meeting.localUser.getSelfPreview()


        // Add to your layout

        val container = findViewById<FrameLayout>(R.id.video_container)

        container.addView(videoView)


        // Start rendering

        videoView.renderVideo()

    }


    override fun onPause() {

        super.onPause()

        // Stop rendering when activity is paused

        videoView.stopVideoRender()

    }


    override fun onResume() {

        super.onResume()

        // Resume rendering when activity is resumed

        videoView.renderVideo()

    }


    override fun onDestroy() {

        super.onDestroy()

        // Clean up resources

        videoView.release()

    }

}


```

### Get video view

Retrieve video views that render the participant's video streams:

Swift

```

// Get video view for local camera stream

let videoView = meeting.localUser.getVideoView()


// Get video view for screenshare stream

let screenshareView = meeting.localUser.getScreenShareVideoView()


```

### Manage lifecycle

The `UIView` handles its own lifecycle automatically and cleans up native resources when it exits the current window. No manual cleanup is required.

### Example

Swift

```

import UIKit

import RealtimeKit


class VideoViewController: UIViewController {

    private var videoView: UIView?


    override func viewDidLoad() {

        super.viewDidLoad()


        // Get the video view for local camera

        videoView = meeting.localUser.getVideoView()


        // Add to your view hierarchy

        if let videoView = videoView {

            videoView.frame = view.bounds

            videoView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

            view.addSubview(videoView)

        }

    }

}


```

For screenshare:

Swift

```

// Get and display screenshare view

let screenshareView = meeting.localUser.getScreenShareVideoView()

if let screenshareView = screenshareView {

    screenshareView.frame = view.bounds

    screenshareView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    view.addSubview(screenshareView)

}


```

```

import React from "react";

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";

import { MediaStream, RTCView } from "@cloudflare/react-native-webrtc";


export default 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}

    />

  );

}


```

### VideoView widget

Display video streams with the `VideoView` widget:

Dart

```

import 'package:realtimekit_core/realtimekit_core.dart';

import 'package:flutter/material.dart';


class LocalVideoView extends StatelessWidget {

  final RtkMeetingParticipant localUser;


  const LocalVideoView({Key? key, required this.localUser}) : super(key: key);


  @override

  Widget build(BuildContext context) {

    return VideoView(

      meetingParticipant: localUser,

      isSelfParticipant: true,

    );

  }

}


```

### VideoView parameters

The `VideoView` widget accepts the following parameters:

* `meetingParticipant` (required): The `RtkMeetingParticipant` whose video should be displayed
* `isSelfParticipant` (optional): Set to `true` for the local participant's self-preview, defaults to `false`
* `key` (optional): Widget key for Flutter's widget tree management

### Example

Dart

```

import 'package:flutter/material.dart';

import 'package:realtimekit_core/realtimekit_core.dart';


class MeetingScreen extends StatelessWidget {

  final RtkMeeting meeting;


  const MeetingScreen({Key? key, required this.meeting}) : super(key: key);


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Video Preview')),

      body: Container(

        child: VideoView(

          meetingParticipant: meeting.localUser,

          isSelfParticipant: true,

        ),

      ),

    );

  }

}


```

For displaying other participants' video:

Dart

```

// Display remote participant video

VideoView(

  meetingParticipant: remoteParticipant,

  isSelfParticipant: false,

)


```

The `VideoView` widget automatically handles video rendering and resource cleanup based on Flutter's widget lifecycle.

## Screen share setup (iOS)

### Add broadcast upload extension

In Xcode, add a Broadcast Upload Extension through `File` → `New` → `Target`. Choose `iOS` → `Broadcast Upload Extension` and fill out the required information.

### Configure app groups

Add your extension to an app group:

1. Go to your extension's target in the project
2. In the Signings & Capabilities tab, click the + button in the top left
3. Add App Groups
4. Add App Groups to your main app as well, ensuring the App Group identifier is the same for both

### Configure SampleHandler

Edit your SampleHandler class:

Swift

```

import RealtimeKit


class SampleHandler: RtkSampleHandler {}


```

### Update Info.plist

Ensure **both** App and Extension Info.plist files contain these keys:

```

<key>RTKRTCAppGroupIdentifier</key>

<string>(name of the group you have created)</string>


```

Add this key inside the Info.plist of the main App:

```

<key>RTKRTCScreenSharingExtension</key>

<string>(Bundle Identifier of the Broadcast upload extension)</string>


```

### Enable screen share

Launch the broadcast extension and enable screen share:

Swift

```

meeting.localUser.enableScreenShare()


```

To stop the screen share:

Swift

```

meeting.localUser.disableScreenShare()


```

### Add broadcast upload extension

In Xcode, add a Broadcast Upload Extension through `File` → `New` → `Target`. Choose `iOS` → `Broadcast Upload Extension` and fill out the required information.

### Configure app groups

Add your extension to an app group:

1. Go to your extension's target in the project
2. In the Signings & Capabilities tab, click the + button in the top left
3. Add App Groups
4. Add App Groups to your main app as well, ensuring the App Group identifier is the same for both

### Configure SampleHandler

1. Place the `RtkSampleHandler.swift` file from [GitHub ↗](https://github.com/dyte-io/iOS-ScreenShare/blob/main/RtkSampleHandler.swift) in the `ios/<screenshare-folder>/` folder
2. Create or replace `SampleHandler.swift`:

Swift

```

import ReplayKit


class SampleHandler: RtkSampleHandler {

}


```

### Update Info.plist

Ensure **both** App and Extension Info.plist files contain these keys:

```

<key>RTKRTCAppGroupIdentifier</key>

<string>(name of the group you have created)</string>


```

Add this key inside the Info.plist of the main App:

```

<key>RTKRTCScreenSharingExtension</key>

<string>(Bundle Identifier of the Broadcast upload extension)</string>


```

### Enable screen share

Launch the broadcast extension and enable screen share:

Dart

```

meeting.localUser.enableScreenShare()


```

To stop the screen share:

Dart

```

meeting.localUser.disableScreenShare()


```

### Add broadcast upload extension

In Xcode, add a Broadcast Upload Extension through `File` → `New` → `Target`. Choose `iOS` → `Broadcast Upload Extension` and fill out the required information.

### Configure app groups

Add your extension to an app group:

1. Go to your extension's target in the project
2. In the Signings & Capabilities tab, click the + button in the top left
3. Add App Groups
4. Add App Groups to your main app as well, ensuring the App Group identifier is the same for both

### Configure SampleHandler

Edit your SampleHandler class:

Swift

```

import RealtimeKitCore


class SampleHandler: RTKScreenshareHandler {

  override init() {

       super.init(appGroupIdentifier: "<YOUR_APP_GROUP_IDENTIFIER>", bundleIdentifier: "<YOUR_APP_BUNDLE_IDENTIFIER>")

   }

}


```

### Update Info.plist

Ensure **both** App and Extension Info.plist files contain these keys:

```

<key>RTCAppGroupIdentifier</key>

<string>(YOUR_APP_GROUP_IDENTIFIER)</string>


```

Add this key inside the Info.plist of the main App:

```

<key>RTCAppScreenSharingExtension</key>

<string>(Bundle Identifier of the Broadcast upload extension)</string>


```

### Enable screen share

Launch the broadcast extension and enable screen share:

JavaScript

```

meeting.self.enableScreenShare();


```

To stop the screen share:

JavaScript

```

meeting.self.disableScreenShare();


```

## Events

### Room joined

Fires when the local user joins the meeting:

JavaScript

```

meeting.self.on("roomJoined", () => {

  console.log("Successfully joined the meeting");

});


```

```

const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);


useEffect(() => {

  if (roomJoined) {

    console.log("Successfully joined the meeting");

  }

}, [roomJoined]);


```

Or use event listener:

```

useEffect(() => {

  if (!meeting) return;


  const handleRoomJoined = () => {

    console.log("Successfully joined the meeting");

  };


  meeting.self.on("roomJoined", handleRoomJoined);


  return () => {

    meeting.self.off("roomJoined", handleRoomJoined);

  };

}, [meeting]);


```

Android SDK uses a different event model. Monitor `roomJoined` property changes or use listeners for state changes.

iOS SDK uses a different event model. Monitor `roomJoined` property changes or use listeners for state changes.

```

const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);


useEffect(() => {

  if (roomJoined) {

    console.log("Successfully joined the meeting");

  }

}, [roomJoined]);


```

Or use event listener:

```

useEffect(() => {

  if (!meeting) return;


  const handleRoomJoined = () => {

    console.log("Successfully joined the meeting");

  };


  meeting.self.on("roomJoined", handleRoomJoined);


  return () => {

    meeting.self.off("roomJoined", handleRoomJoined);

  };

}, [meeting]);


```

Flutter SDK uses a different event model. Monitor `roomJoined` property changes or use listeners for state changes.

### Room left

Fires when the local user leaves the meeting:

JavaScript

```

meeting.self.on("roomLeft", ({ state }) => {

  console.log("Left the meeting with state:", state);


  // Handle different leave states

  if (state === "left") {

    console.log("User voluntarily left");

  } else if (state === "kicked") {

    console.log("User was kicked from the meeting");

  } else if (state === "ended") {

    console.log("Meeting has ended");

  } else if (state === "disconnected") {

    console.log("Lost connection to meeting");

  }

});


```

**Possible state values:** `'left'`, `'kicked'`, `'ended'`, `'rejected'`, `'disconnected'`, `'failed'`

```

const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);


useEffect(() => {

  if (!roomJoined) {

    console.log("Left the meeting");

  }

}, [roomJoined]);


```

Or use event listener for detailed state:

```

meeting.self.on("roomLeft", ({ state }) => {

  if (state === "left") {

    console.log("User voluntarily left");

  } else if (state === "kicked") {

    console.log("User was kicked");

  }

});


```

Use `RtkSelfEventListener` to monitor when the local user is removed from the meeting:

Kotlin

```

meeting.addSelfEventListener(object : RtkSelfEventListener {

    override fun onRemovedFromMeeting() {

        // display alert that user is no longer in the meeting

    }

})


```

iOS SDK uses a different event model. Monitor `roomJoined` property changes or use listeners for state changes.

```

const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);


useEffect(() => {

  if (!roomJoined) {

    console.log("Left the meeting");

  }

}, [roomJoined]);


```

Or use event listener for detailed state:

```

meeting.self.on("roomLeft", ({ state }) => {

  if (state === "left") {

    console.log("User voluntarily left");

  } else if (state === "kicked") {

    console.log("User was kicked");

  }

});


```

Dart

```

class MeetingSelfListener extends RtkSelfEventListener {

  @override

  void onRemovedFromMeeting() {

    // User was removed from the meeting (kicked or meeting ended)

    // Display alert or navigate to exit screen

  }

}


// Add the listener

meeting.addSelfEventListener(MeetingSelfListener());


```

### Video update

Fires when video is enabled or disabled:

JavaScript

```

meeting.self.on("videoUpdate", ({ videoEnabled, videoTrack }) => {

  console.log("Video state:", videoEnabled);


  if (videoEnabled) {

    // Video track is available, can display it

    const videoElement = document.getElementById("my-video");

    const stream = new MediaStream();

    stream.addTrack(videoTrack);

    videoElement.srcObject = stream;

    videoElement.play();

  }

});


```

```

const videoEnabled = useRealtimeKitSelector((m) => m.self.videoEnabled);

const videoTrack = useRealtimeKitSelector((m) => m.self.videoTrack);


useEffect(() => {

  if (videoEnabled && videoTrack) {

    console.log("Video is enabled");

    // Handle video track

  }

}, [videoEnabled, videoTrack]);


```

Kotlin

```

meeting.addSelfEventListener(object : RtkSelfEventListener {

    override fun onVideoUpdate(isEnabled: Boolean) {

        if (isEnabled) {

            // video is enabled, other participants can see local user

        } else {

            // video is disabled, other participants cannot see local user

        }

    }

})


```

Swift

```

extension MeetingViewModel: RtkSelfEventListener {

    func onVideoUpdate(isEnabled: Bool) {

        if (isEnabled) {

            // video is enabled, other participants can see local user

        } else {

            // video is disabled, other participants cannot see local user

        }

    }

}


```

```

const videoEnabled = useRealtimeKitSelector((m) => m.self.videoEnabled);

const videoTrack = useRealtimeKitSelector((m) => m.self.videoTrack);


useEffect(() => {

  if (videoEnabled && videoTrack) {

    console.log("Video is enabled");

    // Handle video track

  }

}, [videoEnabled, videoTrack]);


```

Flutter SDK uses a different event model. Monitor `videoEnabled` property changes.

### Audio update

Fires when audio is enabled or disabled:

JavaScript

```

meeting.self.on("audioUpdate", ({ audioEnabled, audioTrack }) => {

  console.log("Audio state:", audioEnabled);


  if (audioEnabled) {

    // Audio track is available

    console.log("Microphone is on");

  }

});


```

```

const audioEnabled = useRealtimeKitSelector((m) => m.self.audioEnabled);

const audioTrack = useRealtimeKitSelector((m) => m.self.audioTrack);


useEffect(() => {

  if (audioEnabled && audioTrack) {

    console.log("Audio is enabled");

    // Handle audio track

  }

}, [audioEnabled, audioTrack]);


```

Kotlin

```

meeting.addSelfEventListener(object : RtkSelfEventListener {

    override fun onAudioUpdate(isEnabled: Boolean) {

        if (isEnabled) {

            // audio is enabled, other participants can hear local user

        } else {

            // audio is disabled, other participants cannot hear local user

        }

    }

})


```

Swift

```

extension MeetingViewModel: RtkSelfEventListener {

    func onAudioUpdate(isEnabled: Bool) {

        if (isEnabled) {

            // audio is enabled, other participants can hear local user

        } else {

            // audio is disabled, other participants cannot hear local user

        }

    }

}


```

```

const audioEnabled = useRealtimeKitSelector((m) => m.self.audioEnabled);

const audioTrack = useRealtimeKitSelector((m) => m.self.audioTrack);


useEffect(() => {

  if (audioEnabled && audioTrack) {

    console.log("Audio is enabled");

    // Handle audio track

  }

}, [audioEnabled, audioTrack]);


```

Flutter SDK uses a different event model. Monitor `audioEnabled` property changes.

### Screen share update

Fires when screen sharing starts or stops:

JavaScript

```

meeting.self.on(

  "screenShareUpdate",

  ({ screenShareEnabled, screenShareTracks }) => {

    console.log("Screen share state:", screenShareEnabled);


    if (screenShareEnabled) {

      // Screen share tracks are available

      const screenElement = document.getElementById("my-screen-share");

      const stream = new MediaStream();

      stream.addTrack(screenShareTracks.video);

      if (screenShareTracks.audio) {

        stream.addTrack(screenShareTracks.audio);

      }

      screenElement.srcObject = stream;

      screenElement.play();

    }

  },

);


```

```

const screenShareEnabled = useRealtimeKitSelector(

  (m) => m.self.screenShareEnabled,

);

const screenShareTracks = useRealtimeKitSelector(

  (m) => m.self.screenShareTracks,

);


useEffect(() => {

  if (screenShareEnabled && screenShareTracks) {

    console.log("Screen sharing is active");

    // Handle screen share tracks

  }

}, [screenShareEnabled, screenShareTracks]);


```

Kotlin

```

meeting.addSelfEventListener(object : RtkSelfEventListener {

    override fun onScreenShareStartFailed(reason: String) {

        // screen share failed to start

    }


    override fun onScreenShareUpdate(isEnabled: Boolean) {

        if (isEnabled) {

            // screen share is enabled

        } else {

            // screen share is disabled

        }

    }

})


```

Swift

```

meeting.addSelfEventListener(self)


extension MeetingViewModel: RtkSelfEventListener {

    func onRemovedFromMeeting() {

        // User was removed from the meeting (kicked or meeting ended)

        // Display alert or navigate to exit screen

    }


    func onMeetingRoomDisconnected() {

        // Lost connection to the meeting room

        // Display reconnection UI or error message

    }

}


```

You can also monitor the `roomJoined` property for state changes:

Swift

```

let isInMeeting = meeting.localUser.roomJoined


```

```

const screenShareEnabled = useRealtimeKitSelector(

  (m) => m.self.screenShareEnabled,

);

const screenShareTracks = useRealtimeKitSelector(

  (m) => m.self.screenShareTracks,

);


useEffect(() => {

  if (screenShareEnabled && screenShareTracks) {

    console.log("Screen sharing is active");

    // Handle screen share tracks

  }

}, [screenShareEnabled, screenShareTracks]);


```

Flutter SDK uses a different event model. Monitor `screenShareEnabled` property changes.

### Device update

Fires when the active device changes:

JavaScript

```

meeting.self.on("deviceUpdate", ({ device }) => {

  // Handle device change

  if (device.kind === "audioinput") {

    console.log("Microphone changed:", device.label);

  } else if (device.kind === "videoinput") {

    console.log("Camera changed:", device.label);

  } else if (device.kind === "audiooutput") {

    console.log("Speaker changed:", device.label);

  }

});


```

```

useEffect(() => {

  if (!meeting) return;


  const handleDeviceUpdate = ({ device }) => {

    if (device.kind === "audioinput") {

      console.log("Microphone changed:", device.label);

    } else if (device.kind === "videoinput") {

      console.log("Camera changed:", device.label);

    }

  };


  meeting.self.on("deviceUpdate", handleDeviceUpdate);


  return () => {

    meeting.self.off("deviceUpdate", handleDeviceUpdate);

  };

}, [meeting]);


```

Kotlin

```

meeting.self.addSelfEventListener(object : RtkSelfEventListener() {

    override fun onAudioDeviceChanged(device: AudioDevice) {

        // Handle audio device change

        println("Audio device changed: ${device.label}")

    }


    override fun onVideoDeviceChanged(device: VideoDevice) {

        // Handle video device change

        println("Video device changed: ${device.label}")

    }

})


```

Swift

```

meeting.self.addSelfEventListener(self)


// RtkSelfEventListener implementation

func onAudioDeviceChanged(device: AudioDevice) {

    // Handle audio device change

    print("Audio device changed: \(device.label)")

}


func onVideoDeviceChanged(device: VideoDevice) {

    // Handle video device change

    print("Video device changed: \(device.label)")

}


```

```

useEffect(() => {

  if (!meeting) return;


  const handleDeviceUpdate = ({ device }) => {

    if (device.kind === "audioinput") {

      console.log("Microphone changed:", device.label);

    } else if (device.kind === "videoinput") {

      console.log("Camera changed:", device.label);

    }

  };


  meeting.self.on("deviceUpdate", handleDeviceUpdate);


  return () => {

    meeting.self.off("deviceUpdate", handleDeviceUpdate);

  };

}, [meeting]);


```

Dart

```

class DeviceChangeListener extends RtkSelfEventListener {

  @override

  void onAudioDeviceChanged(AudioDevice audioDevice) {

    // Handle audio device change

    print('Audio device changed: ${audioDevice.label}');

  }


  @override

  void onVideoDeviceChanged(VideoDevice videoDevice) {

    // Handle video device change

    print('Video device changed: ${videoDevice.label}');

  }

}


// Add the listener

meeting.addSelfEventListener(DeviceChangeListener());


```

### Device List Update

Triggered when the list of available devices changes (device plugged in or out):

JavaScript

```

meeting.self.on("deviceListUpdate", ({ added, removed, devices }) => {

  console.log("Device list updated");

  console.log("Added devices:", added);

  console.log("Removed devices:", removed);

  console.log("All devices:", devices);

});


```

```

useEffect(() => {

  if (!meeting) return;


  const handleDeviceListUpdate = ({ added, removed, devices }) => {

    console.log("Device list updated");

    console.log("Added devices:", added);

    console.log("Removed devices:", removed);

    console.log("All devices:", devices);

  };


  meeting.self.on("deviceListUpdate", handleDeviceListUpdate);


  return () => {

    meeting.self.off("deviceListUpdate", handleDeviceListUpdate);

  };

}, [meeting]);


```

Kotlin

```

meeting.addSelfEventListener(object : RtkSelfEventListener {

    // Triggered when audio devices are added or removed

    override fun onAudioDevicesUpdated() {

        val audioDevices = meeting.localUser.getAudioDevices()

        // Update UI with new audio device list

    }

})


```

Swift

```

meeting.addSelfEventListener(object: RtkSelfEventListener {

    // Triggered when audio devices are added or removed

    func onAudioDevicesUpdated() {

        let audioDevices = meeting.localUser.getAudioDevices()

        // Update UI with new audio device list

    }

})


```

```

useEffect(() => {

  if (!meeting) return;


  const handleDeviceListUpdate = ({ added, removed, devices }) => {

    console.log("Device list updated");

    console.log("Added devices:", added);

    console.log("Removed devices:", removed);

    console.log("All devices:", devices);

  };


  meeting.self.on("deviceListUpdate", handleDeviceListUpdate);


  return () => {

    meeting.self.off("deviceListUpdate", handleDeviceListUpdate);

  };

}, [meeting]);


```

Dart

```

class DeviceListListener extends RtkSelfEventListener {

  final RealtimekitClient meeting;


  DeviceListListener(this.meeting);


  @override

  void onAudioDevicesUpdated(List<AudioDevice> devices) {

    // Triggered when audio devices are added or removed

    // Update UI with new audio device list

  }


  @override

  void onVideoDeviceChanged(VideoDevice videoDevice) {

    // Handle video device change

    print('Video device changed to: ${videoDevice.label}');

  }

}


// Add the listener

meeting.addSelfEventListener(DeviceListListener(meeting));


```

### Network Quality Score

Monitor your own network quality:

JavaScript

```

meeting.self.on(

  "mediaScoreUpdate",

  ({ kind, isScreenshare, score, scoreStats }) => {

    if (kind === "video") {

      console.log(

        `Your ${isScreenshare ? "screenshare" : "video"} quality score is`,

        score,

      );

    }


    if (kind === "audio") {

      console.log("Your audio quality score is", score);

    }


    if (score < 5) {

      console.log("Your media quality is poor");

    }

  },

);


```

The `scoreStats` object provides detailed statistics:

JavaScript

```

// Audio Producer

{

  "kind": "audio",

  "isScreenshare": false,

  "score": 10,

  "participantId": "meeting.self.id",

  "scoreStats": {

    "score": 10,

    "bitrate": 22452,

    "packetsLostPercentage": 0,

    "jitter": 0,

    "isScreenShare": false

  }

}


// Video Producer

{

  "kind": "video",

  "isScreenshare": false,

  "score": 10,

  "participantId": "meeting.self.id",

  "scoreStats": {

    "score": 10,

    "frameWidth": 640,

    "frameHeight": 480,

    "framesPerSecond": 24,

    "jitter": 0,

    "isScreenShare": false,

    "packetsLostPercentage": 0,

    "bitrate": 576195,

    "cpuLimitations": false,

    "bandwidthLimitations": false

  }

}


```

```

useEffect(() => {

  if (!meeting) return;


  const handleMediaScoreUpdate = ({

    kind,

    isScreenshare,

    score,

    scoreStats,

  }) => {

    if (kind === "video") {

      console.log(

        `Your ${isScreenshare ? "screenshare" : "video"} quality score is`,

        score,

      );

    }


    if (score < 5) {

      console.log("Your media quality is poor");

    }

  };


  meeting.self.on("mediaScoreUpdate", handleMediaScoreUpdate);


  return () => {

    meeting.self.off("mediaScoreUpdate", handleMediaScoreUpdate);

  };

}, [meeting]);


```

Android SDK does not currently expose network quality scores.

iOS SDK does not currently expose network quality scores.

```

useEffect(() => {

  if (!meeting) return;


  const handleMediaScoreUpdate = ({

    kind,

    isScreenshare,

    score,

    scoreStats,

  }) => {

    if (kind === "video") {

      console.log(

        `Your ${isScreenshare ? "screenshare" : "video"} quality score is`,

        score,

      );

    }


    if (score < 5) {

      console.log("Your media quality is poor");

    }

  };


  meeting.self.on("mediaScoreUpdate", handleMediaScoreUpdate);


  return () => {

    meeting.self.off("mediaScoreUpdate", handleMediaScoreUpdate);

  };

}, [meeting]);


```

Flutter SDK does not currently expose network quality scores.

### Permission Updates

Triggered when permissions are updated dynamically:

JavaScript

```

// Listen to specific permission updates

meeting.self.permissions.on("chatUpdate", () => {

  console.log("Chat permissions updated");

  // Check meeting.self.permissions for updated permissions

});


meeting.self.permissions.on("pollsUpdate", () => {

  console.log("Polls permissions updated");

});


meeting.self.permissions.on("pluginsUpdate", () => {

  console.log("Plugins permissions updated");

});


// Listen to all permission updates

meeting.self.permissions.on("*", () => {

  console.log("Permissions updated");

});


```

Monitor permissions using selectors:

```

const permissions = useRealtimeKitSelector((m) => m.self.permissions);


useEffect(() => {

  console.log("Permissions updated:", permissions);

}, [permissions]);


```

Android SDK uses a different permissions model. Refer to the Android-specific documentation.

iOS SDK uses a different permissions model. Refer to the iOS-specific documentation.

Monitor permissions using selectors:

```

const permissions = useRealtimeKitSelector((m) => m.self.permissions);


useEffect(() => {

  console.log("Permissions updated:", permissions);

}, [permissions]);


```

Flutter SDK uses a different permissions model. Refer to the Flutter-specific documentation.

### Media Permission Errors

Triggered when media permissions are denied or media capture fails:

JavaScript

```

meeting.self.on("mediaPermissionError", ({ message, kind }) => {

  console.log(`Failed to capture ${kind}: ${message}`);


  // Handle different error types

  if (message === "DENIED") {

    console.log("User denied permission");

  } else if (message === "SYSTEM_DENIED") {

    console.log("System denied permission");

  } else if (message === "COULD_NOT_START") {

    console.log("Failed to start media stream");

  }

});


```

**Possible values:**

* `message`: `'DENIED'`, `'SYSTEM_DENIED'`, `'COULD_NOT_START'`
* `kind`: `'audio'`, `'video'`, `'screenshare'`

```

useEffect(() => {

  if (!meeting) return;


  const handlePermissionError = ({ message, kind }) => {

    console.log(`Failed to capture ${kind}: ${message}`);


    if (message === "DENIED") {

      // Show UI to guide user to grant permissions

    }

  };


  meeting.self.on("mediaPermissionError", handlePermissionError);


  return () => {

    meeting.self.off("mediaPermissionError", handlePermissionError);

  };

}, [meeting]);


```

Kotlin

```

meeting.addSelfEventListener(object : RtkSelfEventListener {

    override fun onMeetingRoomJoinedWithoutCameraPermission() {

        // meeting joined without camera permission

    }


    override fun onMeetingRoomJoinedWithoutMicPermission() {

        // meeting joined without microphone permission

    }

})


```

Swift

```

meeting.addSelfEventListener(self)


extension MeetingViewModel: RtkSelfEventListener {

    func onMeetingRoomJoinedWithoutCameraPermission() {

        // meeting joined without camera permission

    }


    func onMeetingRoomJoinedWithoutMicPermission() {

        // meeting joined without microphone permission

    }

}


```

You can also check permission status using properties:

Swift

```

let hasCameraPermission = meeting.localUser.isCameraPermissionGranted

let hasMicPermission = meeting.localUser.isMicrophonePermissionGranted


```

```

useEffect(() => {

  if (!meeting) return;


  const handlePermissionError = ({ message, kind }) => {

    console.log(`Failed to capture ${kind}: ${message}`);


    if (message === "DENIED") {

      // Show UI to guide user to grant permissions

    }

  };


  meeting.self.on("mediaPermissionError", handlePermissionError);


  return () => {

    meeting.self.off("mediaPermissionError", handlePermissionError);

  };

}, [meeting]);


```

Dart

```

class PermissionListener extends RtkSelfEventListener {

  @override

  void onMeetingRoomJoinedWithoutCameraPermission() {

    // Meeting joined without camera permission

  }


  @override

  void onMeetingRoomJoinedWithoutMicPermission() {

    // Meeting joined without microphone permission

  }

}


// Add the listener

meeting.addSelfEventListener(PermissionListener());


```

You can also check permission status using properties:

Dart

```

final hasCameraPermission = meeting.localUser.isCameraPermissionGranted;

final hasMicPermission = meeting.localUser.isMicrophonePermissionGranted;


```

### Waitlist Status

For meetings with waiting room enabled:

Monitor the `roomState` property for waitlist status. The value `'waitlisted'` indicates the user is in the waiting room.

```

const roomState = useRealtimeKitSelector((m) => m.self.roomState);


useEffect(() => {

  if (roomState === "waitlisted") {

    console.log("Waiting for host to admit you");

  }

}, [roomState]);


```

Kotlin

```

// Get current waitlist status

val waitListStatus = meeting.localUser.waitListStatus


// Listen to waitlist status changes

meeting.addSelfEventListener(object : RtkSelfEventListener {

    override fun onWaitListStatusUpdate(waitListStatus: WaitListStatus) {

        // handle waitlist status here

    }

})


```

Swift

```

// Get current waitlist status

let waitListStatus = meeting.localUser.waitListStatus


// Listen to waitlist status changes

extension MeetingViewModel: RtkSelfEventListener {

    func onWaitlistedUpdate() {

        // handle waitlist update

    }

}


```

```

const roomState = useRealtimeKitSelector((m) => m.self.roomState);


useEffect(() => {

  if (roomState === "waitlisted") {

    console.log("Waiting for host to admit you");

  }

}, [roomState]);


```

Flutter SDK uses a different event model. Monitor `stageStatus` or relevant properties for waitlist status.

### iOS-Specific Events

The iOS SDK provides additional platform-specific events:

#### Proximity Sensor

Triggered when the proximity sensor detects a change (useful for earpiece detection):

Swift

```

extension MeetingViewModel: RtkSelfEventListener {

    func onProximityChanged() {

        // Handle proximity sensor change

        // Useful for detecting when device is near user's ear

    }

}


```

#### Webinar Events

For webinar-specific functionality:

Swift

```

extension MeetingViewModel: RtkSelfEventListener {

    func onWebinarPresentRequestReceived() {

        // Handle request to present in webinar

    }


    func onStoppedPresenting() {

        // Handle stopped presenting in webinar

    }

}


```

#### Room Messages

Listen to broadcast messages in the room:

Swift

```

extension MeetingViewModel: RtkSelfEventListener {

    func onRoomMessage() {

        // Handle room broadcast message

    }

}


```

## Pin and Unpin

Pin or unpin yourself in the meeting (requires appropriate permissions):

Web SDK does not currently support pinning the local participant.

Web SDK does not currently support pinning the local participant.

Android SDK does not currently support pinning the local participant.

Swift

```

// Pin yourself

meeting.localUser.pin()


// Unpin yourself

meeting.localUser.unpin()


// Check if pinned

let isPinned = meeting.localUser.isPinned


```

```

// Pin yourself

await meeting.self.pin();


// Unpin yourself

await meeting.self.unpin();


// Check if pinned

const isPinned = meeting.self.isPinned;


```

Flutter SDK does not currently support pinning the local participant.

## Update Media Constraints

Update video or screenshare resolution at runtime:

Web SDK does not currently expose runtime constraint updates for local participant.

Web SDK does not currently expose runtime constraint updates for local participant.

Android SDK does not currently expose runtime constraint updates.

iOS SDK does not currently expose runtime constraint updates.

### Update Video Constraints

Update camera resolution while already streaming:

```

meeting.self.updateVideoConstraints({

  width: { ideal: 1920 },

  height: { ideal: 1080 },

});


```

### Update Screenshare Constraints

Update screenshare resolution while already streaming:

```

meeting.self.updateScreenshareConstraints({

  width: { ideal: 1920 },

  height: { ideal: 1080 },

});


```

Flutter SDK does not currently expose runtime constraint updates.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/local-participant/","name":"Local Participant"}}]}
```

---

---
title: Manage Participants in a Session
description: Use RealtimeKit host controls to manage other participants in a live session. You can mute audio or video, pin a participant, or remove participants from the session.
These actions require specific host control permissions enabled in the local participant's Preset.
Before you show UI controls or call these methods, verify that the local participant has the necessary permissions.
In this guide, the local participant refers to the user performing the actions.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/manage-participants-in-a-session.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Manage Participants in a Session

Prerequisites

The local participant (for example, a host or moderator) must have the required **Host Controls** permissions enabled in their preset. For details, refer to [Preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/).

Use RealtimeKit host controls to manage other participants in a live session. You can mute audio or video, pin a participant, or remove participants from the session. These actions require specific host control permissions enabled in the local participant's [Preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/). Before you show UI controls or call these methods, verify that the local participant has the necessary permissions. In this guide, the **local participant** refers to the user performing the actions.

WebMobile

ReactWeb ComponentsAngular

### Select a remote participant

To perform actions on a specific participant, you first need to retrieve their participant object. Remote participants (other participants) are available in `meeting.participants`. The local participant is available in `meeting.self`. Refer to [Meeting Object Explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) for details.

TypeScript

```

const joinedParticipants = meeting.participants.joined.toArray();

const participant = joinedParticipants[0];

if (!participant) {

  // No remote participants are currently joined.

}


```

To perform actions on a specific participant, you first need to retrieve their participant object. Remote participants (other participants) are available in `meeting.participants`. The local participant is available in `meeting.self`. Refer to [Meeting Object Explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) for details.

TypeScript

```

const joinedParticipants = meeting.participants.joined.toArray();

const participant = joinedParticipants[0];

if (!participant) {

  // No remote participants are currently joined.

}


```

To perform actions on a specific participant, you first need to retrieve their participant object. Remote participants (other participants) are available in `meeting.participants`. The local participant is available in `meeting.self`. Refer to [Meeting Object Explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) for details.

TypeScript

```

const joinedParticipants = meeting.participants.joined.toArray();

const participant = joinedParticipants[0];

if (!participant) {

  // No remote participants are currently joined.

}


```

To perform actions on a specific participant, retrieve their participant object from the `participants` property. Remote participants are available in `meeting.participants.joined`. The local participant is available in `meeting.localUser`.

Kotlin

```

val joinedParticipants = meeting.participants.joined

val participant = joinedParticipants.firstOrNull()

if (participant == null) {

  // No remote participants are currently joined.

}


```

To perform actions on a specific participant, retrieve their participant object from the `participants` property. Remote participants are available in `meeting.participants.joined`. The local participant is available in `meeting.localUser`.

Swift

```

let joinedParticipants = meeting.participants.joined

guard let participant = joinedParticipants.first else {

  // No remote participants are currently joined.

  return

}


```

To perform actions on a specific participant, retrieve their participant object from the `participants` property. Remote participants are available in `meeting.participants.joined`. The local participant is available in `meeting.localUser`.

Dart

```

final joinedParticipants = meeting.participants.joined;

final participant = joinedParticipants.firstOrNull;

if (participant == null) {

  // No remote participants are currently joined.

}


```

To perform actions on a specific participant, retrieve their participant object from the `participants` property. Remote participants are available in `meeting.participants.joined`. The local participant is available in `meeting.self`.

```

const joinedParticipants = meeting.participants.joined;

const participant = joinedParticipants.toArray()[0];

if (!participant) {

  // No remote participants are currently joined.

}


```

Or use the `useRealtimeKitSelector` hook:

```

import { useRealtimeKitSelector } from '@cloudflare/realtimekit-react-native';


const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);


```

## Mute audio

Mute audio of participants when you need to manage background noise, moderate a classroom or webinar, or prevent interruptions during a session. This action requires the **Mute Audio** (`disable_participant_audio`) host control permission enabled in the local participant's preset.

### Mute a participant

To mute a specific participant's audio:

1. Check that the local participant has permission to mute other participants' audio.  
TypeScript  
```  
const canMuteAudio =  
  meeting.self.permissions.canDisableParticipantAudio === true;  
if (!canMuteAudio) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableAudio()` on the target participant.  
If the local participant does not have the required permission, `disableAudio()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.disableAudio();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to mute other participants’ audio.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, the target participant's `audioEnabled` becomes `false`, and the SDK emits an `audioUpdate` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("audioUpdate", ({ audioEnabled, audioTrack }) => {  
  // audioEnabled is false  
  // Update UI for the participant  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on(  
  "audioUpdate",  
  (participant, { audioEnabled, audioTrack }) => {  
    if (participant.id === targetParticipantId) {  
      // audioEnabled is false  
      // Update UI for the participant  
    }  
  },  
);  
```

1. Check that the local participant has permission to mute other participants' audio.  
TypeScript  
```  
const canMuteAudio =  
  meeting.self.permissions.canDisableParticipantAudio === true;  
if (!canMuteAudio) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableAudio()` on the target participant.  
If the local participant does not have the required permission, `disableAudio()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.disableAudio();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to mute other participants’ audio.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, the target participant's `audioEnabled` becomes `false`, and the SDK emits an `audioUpdate` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("audioUpdate", ({ audioEnabled, audioTrack }) => {  
  // audioEnabled is false  
  // Update UI for the participant  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on(  
  "audioUpdate",  
  (participant, { audioEnabled, audioTrack }) => {  
    if (participant.id === targetParticipantId) {  
      // audioEnabled is false  
      // Update UI for the participant  
    }  
  },  
);  
```

1. Check that the local participant has permission to mute other participants' audio.  
TypeScript  
```  
const canMuteAudio =  
  meeting.self.permissions.canDisableParticipantAudio === true;  
if (!canMuteAudio) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableAudio()` on the target participant.  
If the local participant does not have the required permission, `disableAudio()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.disableAudio();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to mute other participants’ audio.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, the target participant's `audioEnabled` becomes `false`, and the SDK emits an `audioUpdate` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("audioUpdate", ({ audioEnabled, audioTrack }) => {  
  // audioEnabled is false  
  // Update UI for the participant  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on(  
  "audioUpdate",  
  (participant, { audioEnabled, audioTrack }) => {  
    if (participant.id === targetParticipantId) {  
      // audioEnabled is false  
      // Update UI for the participant  
    }  
  },  
);  
```

1. Check that the local participant has permission to mute other participants' audio.

Kotlin

```

val canMuteAudio = meeting.localUser.permissions.host.canMuteAudio

if (!canMuteAudio) {

  // Disable the control in your UI.

}


```

1. Call `disableAudio()` on the target participant. If the local participant does not have the required permission, `disableAudio()` returns a `HostError`.

Kotlin

```

val error = participant.disableAudio()

if (error != null) {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `audioEnabled` becomes `false`.

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onAudioUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    // audioEnabled is false

    // Update UI for the participant

  }

})


```

1. Check that the local participant has permission to mute other participants' audio.

Swift

```

let canMuteAudio = meeting.localUser.permissions.host.canMuteAudio

if !canMuteAudio {

  // Disable the control in your UI.

}


```

1. Call `disableAudio()` on the target participant. If the local participant does not have the required permission, `disableAudio()` returns a `HostError`.

Swift

```

if let error = participant.disableAudio() {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `audioEnabled` becomes `false`.

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onAudioUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    // audioEnabled is false

    // Update UI for the participant

  }

}


// Register the listener

meeting.addParticipantsEventListener(participantsEventListener: self)


```

1. Check that the local participant has permission to mute other participants' audio.

Dart

```

final canMuteAudio = meeting.localUser.permissions.host.canMuteAudio;

if (!canMuteAudio) {

  // Disable the control in your UI.

}


```

1. Call `disableAudio()` on the target participant.

Dart

```

participant.disableAudio(

  onResult: (error) {

    if (error != null) {

      // Handle error - permission denied or other issue.

      return;

    }

    // Audio disabled successfully.

  },

);


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `audioEnabled` becomes `false`.

Dart

```

class ParticipantsEventsListener extends RtkParticipantsEventListener {

  @override

  void onAudioUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    // audioEnabled is false

    // Update UI for the participant

  }

}


// Register the listener

meeting.addParticipantsEventListener(ParticipantsEventsListener());


```

1. Check that the local participant has permission to mute other participants' audio.

```

const canDisableParticipantAudio = meeting.self.permissions.canDisableParticipantAudio;

if (!canDisableParticipantAudio) {

  // Disable the control in your UI.

}


```

1. Call `disableAudio()` on the target participant.

```

participant

  .disableAudio()

  .catch((err) => {

    // Handle error - permission denied or other issue.

    console.log(err);

  });


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `audioEnabled` becomes `false`.

```

meeting.participants.joined.on('audioUpdate', (participant) => {

  // participant.audioEnabled is false

  // Update UI for the participant

});


```

### Mute all participants

This affects all participants, including the local participant. To mute audio for all participants in the session:

1. Check that the local participant has permission to mute other participants' audio.  
TypeScript  
```  
const canMuteAudio =  
  meeting.self.permissions.canDisableParticipantAudio === true;  
if (!canMuteAudio) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableAllAudio()`.  
If the local participant does not have the required permission, `disableAllAudio()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.disableAllAudio();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to mute other participants’ audio.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, each participant’s `audioEnabled` becomes `false`, and the SDK emits an `audioUpdate` event. The local participant also receives `audioUpdate` on `meeting.self`.  
Listen to remote participant updates on the `joined` map:  
TypeScript  
```  
meeting.participants.joined.on(  
  "audioUpdate",  
  (participant, { audioEnabled, audioTrack }) => {  
    // audioEnabled is false  
    // Update UI for the participant  
  },  
);  
```  
Listen to the local participant update on `meeting.self`:  
TypeScript  
```  
meeting.self.on("audioUpdate", ({ audioEnabled, audioTrack }) => {  
  // audioEnabled is false  
  // Update UI for the local participant  
});  
```

1. Check that the local participant has permission to mute other participants' audio.  
TypeScript  
```  
const canMuteAudio =  
  meeting.self.permissions.canDisableParticipantAudio === true;  
if (!canMuteAudio) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableAllAudio()`.  
If the local participant does not have the required permission, `disableAllAudio()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.disableAllAudio();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to mute other participants’ audio.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, each participant’s `audioEnabled` becomes `false`, and the SDK emits an `audioUpdate` event. The local participant also receives `audioUpdate` on `meeting.self`.  
Listen to remote participant updates on the `joined` map:  
TypeScript  
```  
meeting.participants.joined.on(  
  "audioUpdate",  
  (participant, { audioEnabled, audioTrack }) => {  
    // audioEnabled is false  
    // Update UI for the participant  
  },  
);  
```  
Listen to the local participant update on `meeting.self`:  
TypeScript  
```  
meeting.self.on("audioUpdate", ({ audioEnabled, audioTrack }) => {  
  // audioEnabled is false  
  // Update UI for the local participant  
});  
```

1. Check that the local participant has permission to mute other participants' audio.  
TypeScript  
```  
const canMuteAudio =  
  meeting.self.permissions.canDisableParticipantAudio === true;  
if (!canMuteAudio) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableAllAudio()`.  
If the local participant does not have the required permission, `disableAllAudio()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.disableAllAudio();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to mute other participants’ audio.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, each participant’s `audioEnabled` becomes `false`, and the SDK emits an `audioUpdate` event. The local participant also receives `audioUpdate` on `meeting.self`.  
Listen to remote participant updates on the `joined` map:  
TypeScript  
```  
meeting.participants.joined.on(  
  "audioUpdate",  
  (participant, { audioEnabled, audioTrack }) => {  
    // audioEnabled is false  
    // Update UI for the participant  
  },  
);  
```  
Listen to the local participant update on `meeting.self`:  
TypeScript  
```  
meeting.self.on("audioUpdate", ({ audioEnabled, audioTrack }) => {  
  // audioEnabled is false  
  // Update UI for the local participant  
});  
```

1. Check that the local participant has permission to mute other participants' audio.

Kotlin

```

val canMuteAudio = meeting.localUser.permissions.host.canMuteAudio

if (!canMuteAudio) {

  // Disable the control in your UI.

}


```

1. Call `disableAllAudio()` on the participants object. If the local participant does not have the required permission, `disableAllAudio()` returns a `HostError`.

Kotlin

```

val error = meeting.participants.disableAllAudio()

if (error != null) {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, each participant's `audioEnabled` becomes `false`.

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onAudioUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    // audioEnabled is false

    // Update UI for the participant

  }

})


```

1. Check that the local participant has permission to mute other participants' audio.

Swift

```

let canMuteAudio = meeting.localUser.permissions.host.canMuteAudio

if !canMuteAudio {

  // Disable the control in your UI.

}


```

1. Call `disableAllAudio()` on the participants object. If the local participant does not have the required permission, `disableAllAudio()` returns a `HostError`.

Swift

```

if let error = meeting.participants.disableAllAudio() {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, each participant's `audioEnabled` becomes `false`.

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onAudioUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    // audioEnabled is false

    // Update UI for the participant

  }

}


// Register the listener

meeting.addParticipantsEventListener(participantsEventListener: self)


```

1. Check that the local participant has permission to mute other participants' audio.

Dart

```

final canMuteAudio = meeting.localUser.permissions.host.canMuteAudio;

if (!canMuteAudio) {

  // Disable the control in your UI.

}


```

1. Call `disableAllAudio()` on the participants object.

Dart

```

meeting.participants.disableAllAudio(

  onResult: (error) {

    if (error != null) {

      // Handle error - permission denied or other issue.

      return;

    }

    // All audio disabled successfully.

  },

);


```

1. Handle the result by listening for updates. After the call succeeds, each participant's `audioEnabled` becomes `false`.

Dart

```

class ParticipantsEventsListener extends RtkParticipantsEventListener {

  @override

  void onAudioUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    // audioEnabled is false

    // Update UI for the participant

  }

}


// Register the listener

meeting.addParticipantsEventListener(ParticipantsEventsListener());


```

1. Check that the local participant has permission to mute other participants' audio.

```

const canDisableParticipantAudio = meeting.self.permissions.canDisableParticipantAudio;

if (!canDisableParticipantAudio) {

  // Disable the control in your UI.

}


```

1. Call `disableAllAudio()` on the participants object.

```

meeting.participants

  .disableAllAudio(true)

  .catch((err) => {

    // Handle error - permission denied or other issue.

    console.log(err);

  });


```

1. Handle the result by listening for updates. After the call succeeds, each participant's `audioEnabled` becomes `false`.

```

meeting.participants.joined.on('audioUpdate', (participant) => {

  // participant.audioEnabled is false

  // Update UI for the participant

});


```

## Disable video

Disable video of participants when you need to moderate a session, enforce privacy, or prevent unwanted video during a classroom or webinar. This action requires the **Mute Video** (`disable_participant_video`) host control permission enabled in the local participant's preset.

### Disable video for a participant

To disable a specific participant's video:

1. Check that the local participant has permission to disable other participants' video.  
TypeScript  
```  
const canDisableVideo =  
  meeting.self.permissions.canDisableParticipantVideo === true;  
if (!canDisableVideo) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableVideo()` on the target participant.  
If the local participant does not have the required permission, `disableVideo()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.disableVideo();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to disable other participants’ video.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, the target participant's `videoEnabled` becomes `false`, and the SDK emits a `videoUpdate` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("videoUpdate", ({ videoEnabled, videoTrack }) => {  
  // videoEnabled is false  
  // Update UI for the participant  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on(  
  "videoUpdate",  
  (participant, { videoEnabled, videoTrack }) => {  
    // videoEnabled is false  
    // Update UI for the participant  
  },  
);  
```

1. Check that the local participant has permission to disable other participants' video.  
TypeScript  
```  
const canDisableVideo =  
  meeting.self.permissions.canDisableParticipantVideo === true;  
if (!canDisableVideo) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableVideo()` on the target participant.  
If the local participant does not have the required permission, `disableVideo()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.disableVideo();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to disable other participants’ video.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, the target participant's `videoEnabled` becomes `false`, and the SDK emits a `videoUpdate` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("videoUpdate", ({ videoEnabled, videoTrack }) => {  
  // videoEnabled is false  
  // Update UI for the participant  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on(  
  "videoUpdate",  
  (participant, { videoEnabled, videoTrack }) => {  
    // videoEnabled is false  
    // Update UI for the participant  
  },  
);  
```

1. Check that the local participant has permission to disable other participants' video.  
TypeScript  
```  
const canDisableVideo =  
  meeting.self.permissions.canDisableParticipantVideo === true;  
if (!canDisableVideo) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableVideo()` on the target participant.  
If the local participant does not have the required permission, `disableVideo()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.disableVideo();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to disable other participants’ video.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, the target participant's `videoEnabled` becomes `false`, and the SDK emits a `videoUpdate` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("videoUpdate", ({ videoEnabled, videoTrack }) => {  
  // videoEnabled is false  
  // Update UI for the participant  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on(  
  "videoUpdate",  
  (participant, { videoEnabled, videoTrack }) => {  
    // videoEnabled is false  
    // Update UI for the participant  
  },  
);  
```

1. Check that the local participant has permission to disable other participants' video.

Kotlin

```

val canMuteVideo = meeting.localUser.permissions.host.canMuteVideo

if (!canMuteVideo) {

  // Disable the control in your UI.

}


```

1. Call `disableVideo()` on the target participant. If the local participant does not have the required permission, `disableVideo()` returns a `HostError`.

Kotlin

```

val error = participant.disableVideo()

if (error != null) {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `videoEnabled` becomes `false`.

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onVideoUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    // videoEnabled is false

    // Update UI for the participant

  }

})


```

1. Check that the local participant has permission to disable other participants' video.

Swift

```

let canMuteVideo = meeting.localUser.permissions.host.canMuteVideo

if !canMuteVideo {

  // Disable the control in your UI.

}


```

1. Call `disableVideo()` on the target participant. If the local participant does not have the required permission, `disableVideo()` returns a `HostError`.

Swift

```

if let error = participant.disableVideo() {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `videoEnabled` becomes `false`.

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onVideoUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    // videoEnabled is false

    // Update UI for the participant

  }

}


// Register the listener

meeting.addParticipantsEventListener(participantsEventListener: self)


```

1. Check that the local participant has permission to disable other participants' video.

Dart

```

final canMuteVideo = meeting.localUser.permissions.host.canMuteVideo;

if (!canMuteVideo) {

  // Disable the control in your UI.

}


```

1. Call `disableVideo()` on the target participant.

Dart

```

participant.disableVideo(

  onResult: (error) {

    if (error != null) {

      // Handle error - permission denied or other issue.

      return;

    }

    // Video disabled successfully.

  },

);


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `videoEnabled` becomes `false`.

Dart

```

class ParticipantsEventsListener extends RtkParticipantsEventListener {

  @override

  void onVideoUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    // videoEnabled is false

    // Update UI for the participant

  }

}


// Register the listener

meeting.addParticipantsEventListener(ParticipantsEventsListener());


```

1. Check that the local participant has permission to disable other participants' video.

```

const canDisableParticipantVideo = meeting.self.permissions.canDisableParticipantVideo;

if (!canDisableParticipantVideo) {

  // Disable the control in your UI.

}


```

1. Call `disableVideo()` on the target participant.

```

participant

  .disableVideo()

  .catch((err) => {

    // Handle error - permission denied or other issue.

    console.log(err);

  });


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `videoEnabled` becomes `false`.

```

meeting.participants.joined.on('videoUpdate', (participant) => {

  // participant.videoEnabled is false

  // Update UI for the participant

});


```

### Disable video for all participants

This affects all participants, including the local participant. To disable video for all participants in the session:

1. Check that the local participant has permission to disable other participants' video.  
TypeScript  
```  
const canDisableVideo =  
  meeting.self.permissions.canDisableParticipantVideo === true;  
if (!canDisableVideo) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableAllVideo()`.  
If the local participant does not have the required permission, `disableAllVideo()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.disableAllVideo();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to disable other participants’ video.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, each participant’s `videoEnabled` becomes `false`, and the SDK emits a `videoUpdate` event. The local participant also receives `videoUpdate` on `meeting.self`.  
Listen to remote participant updates on the `joined` map:  
TypeScript  
```  
meeting.participants.joined.on(  
  "videoUpdate",  
  (participant, { videoEnabled, videoTrack }) => {  
    // videoEnabled is false  
    // Update UI for the participant  
  },  
);  
```  
Listen to local participant update on `meeting.self`:  
TypeScript  
```  
meeting.self.on("videoUpdate", ({ videoEnabled, videoTrack }) => {  
  // videoEnabled is false  
  // Update UI for the local participant  
});  
```

1. Check that the local participant has permission to disable other participants' video.  
TypeScript  
```  
const canDisableVideo =  
  meeting.self.permissions.canDisableParticipantVideo === true;  
if (!canDisableVideo) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableAllVideo()`.  
If the local participant does not have the required permission, `disableAllVideo()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.disableAllVideo();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to disable other participants’ video.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, each participant’s `videoEnabled` becomes `false`, and the SDK emits a `videoUpdate` event. The local participant also receives `videoUpdate` on `meeting.self`.  
Listen to remote participant updates on the `joined` map:  
TypeScript  
```  
meeting.participants.joined.on(  
  "videoUpdate",  
  (participant, { videoEnabled, videoTrack }) => {  
    // videoEnabled is false  
    // Update UI for the participant  
  },  
);  
```  
Listen to local participant update on `meeting.self`:  
TypeScript  
```  
meeting.self.on("videoUpdate", ({ videoEnabled, videoTrack }) => {  
  // videoEnabled is false  
  // Update UI for the local participant  
});  
```

1. Check that the local participant has permission to disable other participants' video.  
TypeScript  
```  
const canDisableVideo =  
  meeting.self.permissions.canDisableParticipantVideo === true;  
if (!canDisableVideo) {  
  // Disable the control in your UI.  
}  
```
2. Call `disableAllVideo()`.  
If the local participant does not have the required permission, `disableAllVideo()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.disableAllVideo();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to disable other participants’ video.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, each participant’s `videoEnabled` becomes `false`, and the SDK emits a `videoUpdate` event. The local participant also receives `videoUpdate` on `meeting.self`.  
Listen to remote participant updates on the `joined` map:  
TypeScript  
```  
meeting.participants.joined.on(  
  "videoUpdate",  
  (participant, { videoEnabled, videoTrack }) => {  
    // videoEnabled is false  
    // Update UI for the participant  
  },  
);  
```  
Listen to local participant update on `meeting.self`:  
TypeScript  
```  
meeting.self.on("videoUpdate", ({ videoEnabled, videoTrack }) => {  
  // videoEnabled is false  
  // Update UI for the local participant  
});  
```

1. Check that the local participant has permission to disable other participants' video.

Kotlin

```

val canMuteVideo = meeting.localUser.permissions.host.canMuteVideo

if (!canMuteVideo) {

  // Disable the control in your UI.

}


```

1. Call `disableAllVideo()` on the participants object. If the local participant does not have the required permission, `disableAllVideo()` returns a `HostError`.

Kotlin

```

val error = meeting.participants.disableAllVideo()

if (error != null) {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, each participant's `videoEnabled` becomes `false`.

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onVideoUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    // videoEnabled is false

    // Update UI for the participant

  }

})


```

1. Check that the local participant has permission to disable other participants' video.

Swift

```

let canMuteVideo = meeting.localUser.permissions.host.canMuteVideo

if !canMuteVideo {

  // Disable the control in your UI.

}


```

1. Call `disableAllVideo()` on the participants object. If the local participant does not have the required permission, `disableAllVideo()` returns a `HostError`.

Swift

```

if let error = meeting.participants.disableAllVideo() {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, each participant's `videoEnabled` becomes `false`.

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onVideoUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    // videoEnabled is false

    // Update UI for the participant

  }

}


// Register the listener

meeting.addParticipantsEventListener(participantsEventListener: self)


```

1. Check that the local participant has permission to disable other participants' video.

Dart

```

final canMuteVideo = meeting.localUser.permissions.host.canMuteVideo;

if (!canMuteVideo) {

  // Disable the control in your UI.

}


```

1. Call `disableAllVideo()` on the participants object.

Dart

```

meeting.participants.disableAllVideo(

  onResult: (error) {

    if (error != null) {

      // Handle error - permission denied or other issue.

      return;

    }

    // All video disabled successfully.

  },

);


```

1. Handle the result by listening for updates. After the call succeeds, each participant's `videoEnabled` becomes `false`.

Dart

```

class ParticipantsEventsListener extends RtkParticipantsEventListener {

  @override

  void onVideoUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    // videoEnabled is false

    // Update UI for the participant

  }

}


// Register the listener

meeting.addParticipantsEventListener(ParticipantsEventsListener());


```

1. Check that the local participant has permission to disable other participants' video.

```

const canDisableParticipantVideo = meeting.self.permissions.canDisableParticipantVideo;

if (!canDisableParticipantVideo) {

  // Disable the control in your UI.

}


```

1. Call `disableAllVideo()` on the participants object.

```

meeting.participants

  .disableAllVideo(true)

  .catch((err) => {

    // Handle error - permission denied or other issue.

    console.log(err);

  });


```

1. Handle the result by listening for updates. After the call succeeds, each participant's `videoEnabled` becomes `false`.

```

meeting.participants.joined.on('videoUpdate', (participant) => {

  // participant.videoEnabled is false

  // Update UI for the participant

});


```

## Pin participants

Pin a participant to highlight them, such as a webinar presenter or classroom teacher. This is a session-wide action. All participants will see the pinned participant as the focus. This action requires the **Pin Participant** (`pin_participant`) host control permission enabled in the local participant's preset.

Note

Only one participant can be pinned at a time. Pinning a new participant automatically unpins the previous one.

### Pin a participant

To pin a participant in a session:

1. Check that the local participant has permission to pin participants.  
TypeScript  
```  
const canPinParticipant = meeting.self.permissions.pinParticipant === true;  
if (!canPinParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `pin()` on the target participant.  
If the local participant does not have the required permission, `pin()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.pin();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to pin participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds:  
   * The target participant's `isPinned` becomes true.  
   * The participant is added to `meeting.participants.pinned`.  
   * The SDK emits a `pinned` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("pinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is true  
  // Update your UI.  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on("pinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is true  
  // Update your UI.  
});  
```  
If there was an existing pinned participant before, then the SDK emits an `unpinned` event for that participant.
4. On the target pinned participant's side, `meeting.self.isPinned` becomes `true` and `meeting.self` emits `pinned`:  
TypeScript  
```  
meeting.self.on("pinned", (selfParticipant) => {  
  // Update the local UI to indicate the participant is pinned.  
});  
```

1. Check that the local participant has permission to pin participants.  
TypeScript  
```  
const canPinParticipant = meeting.self.permissions.pinParticipant === true;  
if (!canPinParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `pin()` on the target participant.  
If the local participant does not have the required permission, `pin()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.pin();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to pin participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds:  
   * The target participant's `isPinned` becomes true.  
   * The participant is added to `meeting.participants.pinned`.  
   * The SDK emits a `pinned` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("pinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is true  
  // Update your UI.  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on("pinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is true  
  // Update your UI.  
});  
```  
If there was an existing pinned participant before, then the SDK emits an `unpinned` event for that participant.
4. On the target pinned participant's side, `meeting.self.isPinned` becomes `true` and `meeting.self` emits `pinned`:  
TypeScript  
```  
meeting.self.on("pinned", (selfParticipant) => {  
  // Update the local UI to indicate the participant is pinned.  
});  
```

1. Check that the local participant has permission to pin participants.  
TypeScript  
```  
const canPinParticipant = meeting.self.permissions.pinParticipant === true;  
if (!canPinParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `pin()` on the target participant.  
If the local participant does not have the required permission, `pin()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.pin();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to pin participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds:  
   * The target participant's `isPinned` becomes true.  
   * The participant is added to `meeting.participants.pinned`.  
   * The SDK emits a `pinned` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("pinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is true  
  // Update your UI.  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on("pinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is true  
  // Update your UI.  
});  
```  
If there was an existing pinned participant before, then the SDK emits an `unpinned` event for that participant.
4. On the target pinned participant's side, `meeting.self.isPinned` becomes `true` and `meeting.self` emits `pinned`:  
TypeScript  
```  
meeting.self.on("pinned", (selfParticipant) => {  
  // Update the local UI to indicate the participant is pinned.  
});  
```

1. Check that the local participant has permission to pin participants.

Kotlin

```

val canPinParticipant = meeting.localUser.permissions.host.canPinParticipant

if (!canPinParticipant) {

  // Disable the control in your UI.

}


```

1. Call `pin()` on the target participant. If the local participant does not have the required permission, `pin()` returns a `HostError`.

Kotlin

```

val error = participant.pin()

if (error != null) {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `isPinned` becomes `true` and the participant is available in `meeting.participants.pinned`.

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onParticipantPinned(participant: RtkRemoteParticipant) {

    // participant.isPinned is true

    // Update your UI.

  }

})


```

1. Check that the local participant has permission to pin participants.

Swift

```

let canPinParticipant = meeting.localUser.permissions.host.canPinParticipant

if !canPinParticipant {

  // Disable the control in your UI.

}


```

1. Call `pin()` on the target participant. If the local participant does not have the required permission, `pin()` returns a `HostError`.

Swift

```

if let error = participant.pin() {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `isPinned` becomes `true` and the participant is available in `meeting.participants.pinned`.

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onParticipantPinned(participant: RtkRemoteParticipant) {

    // participant.isPinned is true

    // Update your UI.

  }

}


// Register the listener

meeting.addParticipantsEventListener(participantsEventListener: self)


```

1. Check that the local participant has permission to pin participants.

Dart

```

final canPinParticipant = meeting.localUser.permissions.host.canPinParticipant;

if (!canPinParticipant) {

  // Disable the control in your UI.

}


```

1. Call `pin()` on the target participant.

Dart

```

participant.pin();


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `isPinned` becomes `true` and the participant is available in `meeting.participants.pinned`.

Dart

```

class ParticipantsEventsListener extends RtkParticipantsEventListener {

  @override

  void onParticipantPinned(RtkRemoteParticipant participant) {

    // participant.isPinned is true

    // Update your UI.

  }

}


// Register the listener

meeting.addParticipantsEventListener(ParticipantsEventsListener());


```

1. Check that the local participant has permission to pin participants.

```

const canPinParticipant = meeting.self.permissions.pinParticipant;

if (!canPinParticipant) {

  // Disable the control in your UI.

}


```

1. Call `pin()` on the target participant.

```

participant.pin();


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `isPinned` becomes `true` and the participant is available in `meeting.participants.pinned`.

```

meeting.participants.pinned.on('participantPinned', (participant) => {

  // participant.isPinned is true

  // Update your UI.

});


```

### Unpin a participant

Unpin a participant when you need to undo the highlight and return the session to a standard grid or active speaker view. To unpin a pinned participant in a session:

1. Check that the local participant has permission to unpin participants.  
TypeScript  
```  
const canUnpinParticipant = meeting.self.permissions.pinParticipant === true;  
if (!canUnpinParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `unpin()` on the target participant.  
If the local participant does not have the required permission, `unpin()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.unpin();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to unpin participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds:  
   * The target participant's `isPinned` becomes `false`.  
   * The participant is removed from `meeting.participants.pinned`.  
   * The SDK emits an `unpinned` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("unpinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is false  
  // Update your UI.  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on("unpinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is false  
  // Update your UI.  
});  
```
4. On the target unpinned participant's side, `meeting.self.isPinned` becomes `false` and `meeting.self` emits `unpinned`:  
TypeScript  
```  
meeting.self.on("unpinned", (selfParticipant) => {  
  // Update the local UI to indicate the participant is no longer pinned.  
});  
```

1. Check that the local participant has permission to unpin participants.  
TypeScript  
```  
const canUnpinParticipant = meeting.self.permissions.pinParticipant === true;  
if (!canUnpinParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `unpin()` on the target participant.  
If the local participant does not have the required permission, `unpin()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.unpin();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to unpin participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds:  
   * The target participant's `isPinned` becomes `false`.  
   * The participant is removed from `meeting.participants.pinned`.  
   * The SDK emits an `unpinned` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("unpinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is false  
  // Update your UI.  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on("unpinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is false  
  // Update your UI.  
});  
```
4. On the target unpinned participant's side, `meeting.self.isPinned` becomes `false` and `meeting.self` emits `unpinned`:  
TypeScript  
```  
meeting.self.on("unpinned", (selfParticipant) => {  
  // Update the local UI to indicate the participant is no longer pinned.  
});  
```

1. Check that the local participant has permission to unpin participants.  
TypeScript  
```  
const canUnpinParticipant = meeting.self.permissions.pinParticipant === true;  
if (!canUnpinParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `unpin()` on the target participant.  
If the local participant does not have the required permission, `unpin()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.unpin();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to unpin participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds:  
   * The target participant's `isPinned` becomes `false`.  
   * The participant is removed from `meeting.participants.pinned`.  
   * The SDK emits an `unpinned` event.  
**Option A**: Listen on the participant object  
TypeScript  
```  
participant.on("unpinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is false  
  // Update your UI.  
});  
```  
**Option B**: Listen on the `joined` map  
TypeScript  
```  
meeting.participants.joined.on("unpinned", (updatedParticipant) => {  
  // updatedParticipant.isPinned is false  
  // Update your UI.  
});  
```
4. On the target unpinned participant's side, `meeting.self.isPinned` becomes `false` and `meeting.self` emits `unpinned`:  
TypeScript  
```  
meeting.self.on("unpinned", (selfParticipant) => {  
  // Update the local UI to indicate the participant is no longer pinned.  
});  
```

1. Check that the local participant has permission to unpin participants.

Kotlin

```

val canPinParticipant = meeting.localUser.permissions.host.canPinParticipant

if (!canPinParticipant) {

  // Disable the control in your UI.

}


```

1. Call `unpin()` on the target participant. If the local participant does not have the required permission, `unpin()` returns a `HostError`.

Kotlin

```

val error = participant.unpin()

if (error != null) {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `isPinned` becomes `false`.

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onParticipantUnpinned(participant: RtkRemoteParticipant) {

    // participant.isPinned is false

    // Update your UI.

  }

})


```

1. Check that the local participant has permission to unpin participants.

Swift

```

let canPinParticipant = meeting.localUser.permissions.host.canPinParticipant

if !canPinParticipant {

  // Disable the control in your UI.

}


```

1. Call `unpin()` on the target participant. If the local participant does not have the required permission, `unpin()` returns a `HostError`.

Swift

```

if let error = participant.unpin() {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `isPinned` becomes `false`.

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onParticipantUnpinned(participant: RtkRemoteParticipant) {

    // participant.isPinned is false

    // Update your UI.

  }

}


// Register the listener

meeting.addParticipantsEventListener(participantsEventListener: self)


```

1. Check that the local participant has permission to unpin participants.

Dart

```

final canPinParticipant = meeting.localUser.permissions.host.canPinParticipant;

if (!canPinParticipant) {

  // Disable the control in your UI.

}


```

1. Call `unpin()` on the target participant.

Dart

```

participant.unpin();


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `isPinned` becomes `false`.

Dart

```

class ParticipantsEventsListener extends RtkParticipantsEventListener {

  @override

  void onParticipantUnpinned(RtkRemoteParticipant participant) {

    // participant.isPinned is false

    // Update your UI.

  }

}


// Register the listener

meeting.addParticipantsEventListener(ParticipantsEventsListener());


```

1. Check that the local participant has permission to unpin participants.

```

const canPinParticipant = meeting.self.permissions.pinParticipant;

if (!canPinParticipant) {

  // Disable the control in your UI.

}


```

1. Call `unpin()` on the target participant.

```

participant.unpin();


```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `isPinned` becomes `false`.

```

meeting.participants.pinned.on('unpinned', (participant) => {

  // participant.isPinned is false

  // Update your UI.

});


```

## Remove participants

Remove participants from the session when you need to moderate disruptive behavior or enforce session rules. This action requires the **Kick Participants** (`kick_participant`) host control permission enabled in the local participant's preset.

### Remove a participant

To remove a specific participant from the session:

1. Check that the local participant has permission to remove participants.  
TypeScript  
```  
const canKickParticipant = meeting.self.permissions.kickParticipant === true;  
if (!canKickParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `kick()` on the target participant.  
If the local participant does not have the required permission, `kick()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.kick();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to remove participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds:  
   * The kicked participant is removed from `meeting.participants.joined`.  
   * The participant is removed from other participant maps they were in (for example, `meeting.participants.pinned`).  
   * The SDK emits `participantLeft` on `meeting.participants.joined`.  
TypeScript  
```  
meeting.participants.joined.on("participantLeft", (participant) => {  
  // Remove the participant tile from the UI.  
});  
```  
Other participants in the session also observe the participant leaving through `participantLeft`.
4. On the removed participant's side, the session disconnects and `meeting.self` emits `roomLeft` event with state set to `kicked`.  
TypeScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "kicked") {  
    // Show a message and navigate the user out of the meeting UI.  
  }  
});  
```

1. Check that the local participant has permission to remove participants.  
TypeScript  
```  
const canKickParticipant = meeting.self.permissions.kickParticipant === true;  
if (!canKickParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `kick()` on the target participant.  
If the local participant does not have the required permission, `kick()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.kick();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to remove participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds:  
   * The kicked participant is removed from `meeting.participants.joined`.  
   * The participant is removed from other participant maps they were in (for example, `meeting.participants.pinned`).  
   * The SDK emits `participantLeft` on `meeting.participants.joined`.  
TypeScript  
```  
meeting.participants.joined.on("participantLeft", (participant) => {  
  // Remove the participant tile from the UI.  
});  
```  
Other participants in the session also observe the participant leaving through `participantLeft`.
4. On the removed participant's side, the session disconnects and `meeting.self` emits `roomLeft` event with state set to `kicked`.  
TypeScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "kicked") {  
    // Show a message and navigate the user out of the meeting UI.  
  }  
});  
```

1. Check that the local participant has permission to remove participants.  
TypeScript  
```  
const canKickParticipant = meeting.self.permissions.kickParticipant === true;  
if (!canKickParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `kick()` on the target participant.  
If the local participant does not have the required permission, `kick()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await participant.kick();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to remove participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds:  
   * The kicked participant is removed from `meeting.participants.joined`.  
   * The participant is removed from other participant maps they were in (for example, `meeting.participants.pinned`).  
   * The SDK emits `participantLeft` on `meeting.participants.joined`.  
TypeScript  
```  
meeting.participants.joined.on("participantLeft", (participant) => {  
  // Remove the participant tile from the UI.  
});  
```  
Other participants in the session also observe the participant leaving through `participantLeft`.
4. On the removed participant's side, the session disconnects and `meeting.self` emits `roomLeft` event with state set to `kicked`.  
TypeScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "kicked") {  
    // Show a message and navigate the user out of the meeting UI.  
  }  
});  
```

1. Check that the local participant has permission to remove participants.

Kotlin

```

val canKickParticipant = meeting.localUser.permissions.host.canKickParticipant

if (!canKickParticipant) {

  // Disable the control in your UI.

}


```

1. Call `kick()` on the target participant. If the local participant does not have the required permission, `kick()` returns a `HostError`.

Kotlin

```

val error = participant.kick()

if (error != null) {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the kicked participant is removed from `meeting.participants.joined`.

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onParticipantLeave(participant: RtkRemoteParticipant) {

    // Remove the participant tile from the UI.

  }

})


```

1. Check that the local participant has permission to remove participants.

Swift

```

let canKickParticipant = meeting.localUser.permissions.host.canKickParticipant

if !canKickParticipant {

  // Disable the control in your UI.

}


```

1. Call `kick()` on the target participant. If the local participant does not have the required permission, `kick()` returns a `HostError`.

Swift

```

if let error = participant.kick() {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, the kicked participant is removed from `meeting.participants.joined`.

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onParticipantLeave(participant: RtkRemoteParticipant) {

    // Remove the participant tile from the UI.

  }

}


// Register the listener

meeting.addParticipantsEventListener(participantsEventListener: self)


```

1. Check that the local participant has permission to remove participants.

Dart

```

final canKickParticipant = meeting.localUser.permissions.host.canKickParticipant;

if (!canKickParticipant) {

  // Disable the control in your UI.

}


```

1. Call `kick()` on the target participant.

Dart

```

participant.kick(

  onResult: (error) {

    if (error != null) {

      // Handle error - permission denied or other issue.

      return;

    }

    // Participant removed successfully.

  },

);


```

1. Handle the result by listening for updates. After the call succeeds, the kicked participant is removed from `meeting.participants.joined`.

Dart

```

class ParticipantsEventsListener extends RtkParticipantsEventListener {

  @override

  void onParticipantLeave(RtkRemoteParticipant participant) {

    // Remove the participant tile from the UI.

  }

}


// Register the listener

meeting.addParticipantsEventListener(ParticipantsEventsListener());


```

1. Check that the local participant has permission to remove participants.

```

const canKickParticipant = meeting.self.permissions.kickParticipant;

if (!canKickParticipant) {

  // Disable the control in your UI.

}


```

1. Call `kick()` on the target participant.

```

participant

  .kick()

  .catch((err) => {

    // Handle error - permission denied or other issue.

    console.log(err);

  });


```

1. Handle the result by listening for updates. After the call succeeds, the kicked participant is removed from `meeting.participants.joined`.

```

meeting.participants.joined.on('participantLeft', (participant) => {

  // Remove the participant tile from the UI.

});


```

### Remove all participants

This removes everyone from the session, including the local participant. This ends the session for everyone.

For a complete end-a-session flow, refer to [End a session](https://developers.cloudflare.com/realtime/realtimekit/core/end-a-session/).

To remove all participants from the session:

1. Check that the local participant has permission to remove participants.  
TypeScript  
```  
const canKickParticipant = meeting.self.permissions.kickParticipant === true;  
if (!canKickParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `kickAll()`.  
If the local participant does not have the required permission, `kickAll()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.kickAll();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to remove participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, all participants exit the session. On each client, `meeting.self` emits `roomLeft` with state set to `ended`.  
TypeScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "ended") {  
    // Show a message and navigate the user out of the meeting UI.  
  }  
});  
```

1. Check that the local participant has permission to remove participants.  
TypeScript  
```  
const canKickParticipant = meeting.self.permissions.kickParticipant === true;  
if (!canKickParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `kickAll()`.  
If the local participant does not have the required permission, `kickAll()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.kickAll();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to remove participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, all participants exit the session. On each client, `meeting.self` emits `roomLeft` with state set to `ended`.  
TypeScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "ended") {  
    // Show a message and navigate the user out of the meeting UI.  
  }  
});  
```

1. Check that the local participant has permission to remove participants.  
TypeScript  
```  
const canKickParticipant = meeting.self.permissions.kickParticipant === true;  
if (!canKickParticipant) {  
  // Disable the control in your UI.  
}  
```
2. Call `kickAll()`.  
If the local participant does not have the required permission, `kickAll()` throws a `ClientError` with code `1201`.  
TypeScript  
```  
try {  
  await meeting.participants.kickAll();  
} catch (err: any) {  
  if (err?.code === 1201) {  
    // The local participant does not have permission to remove participants.  
    return;  
  }  
  throw err;  
}  
```
3. Handle the result by listening for updates.  
After the call succeeds, all participants exit the session. On each client, `meeting.self` emits `roomLeft` with state set to `ended`.  
TypeScript  
```  
meeting.self.on("roomLeft", ({ state }) => {  
  if (state === "ended") {  
    // Show a message and navigate the user out of the meeting UI.  
  }  
});  
```

1. Check that the local participant has permission to remove participants.

Kotlin

```

val canKickParticipant = meeting.localUser.permissions.host.canKickParticipant

if (!canKickParticipant) {

  // Disable the control in your UI.

}


```

1. Call `kickAll()` on the participants object. If the local participant does not have the required permission, `kickAll()` returns a `HostError`.

Kotlin

```

val error = meeting.participants.kickAll()

if (error != null) {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, all participants exit the session.

Kotlin

```

meeting.addMeetingRoomEventListener(object : RtkMeetingRoomEventListener {

  override fun onMeetingEnded() {

    // Show a message and navigate the user out of the meeting UI.

  }

})


```

1. Check that the local participant has permission to remove participants.

Swift

```

let canKickParticipant = meeting.localUser.permissions.host.canKickParticipant

if !canKickParticipant {

  // Disable the control in your UI.

}


```

1. Call `kickAll()` on the participants object. If the local participant does not have the required permission, `kickAll()` returns a `HostError`.

Swift

```

if let error = meeting.participants.kickAll() {

  // Handle error - permission denied.

}


```

1. Handle the result by listening for updates. After the call succeeds, all participants exit the session.

Swift

```

extension MeetingViewModel: RtkMeetingRoomEventListener {

  func onMeetingEnded() {

    // Show a message and navigate the user out of the meeting UI.

  }

}


// Register the listener

meeting.addMeetingRoomEventListener(meetingRoomEventListener: self)


```

1. Check that the local participant has permission to remove participants.

Dart

```

final canKickParticipant = meeting.localUser.permissions.host.canKickParticipant;

if (!canKickParticipant) {

  // Disable the control in your UI.

}


```

1. Call `kickAll()` on the participants object.

Dart

```

meeting.participants.kickAll(

  onResult: (error) {

    if (error != null) {

      // Handle error - permission denied or other issue.

      return;

    }

    // All participants removed successfully.

  },

);


```

1. Handle the result by listening for updates. After the call succeeds, all participants exit the session.

Dart

```

class MeetingRoomEventsListener extends RtkMeetingRoomEventListener {

  @override

  void onMeetingEnded() {

    // Show a message and navigate the user out of the meeting UI.

  }

}


// Register the listener

meeting.addMeetingRoomEventListener(MeetingRoomEventsListener());


```

1. Check that the local participant has permission to remove participants.

```

const canKickParticipant = meeting.self.permissions.kickParticipant;

if (!canKickParticipant) {

  // Disable the control in your UI.

}


```

1. Call `kickAll()` on the participants object.

```

meeting.participants

  .kickAll()

  .catch((err) => {

    // Handle error - permission denied or other issue.

    console.log(err);

  });


```

1. Handle the result by listening for updates. After the call succeeds, all participants exit the session.

```

meeting.self.on('roomLeft', ({ state }) => {

  if (state === 'kicked') {

    // Show a message and navigate the user out of the meeting UI.

  }

});


```

## Next steps

* Review how presets control permissions in [Preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/).
* Review error handling details in [Error Codes](https://developers.cloudflare.com/realtime/realtimekit/core/error-codes/).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/manage-participants-in-a-session/","name":"Manage Participants in a Session"}}]}
```

---

---
title: Media Acquisition Approaches
description: RealtimeKit provides flexible approaches for acquiring and managing participant media (audio and video tracks). By default, the SDK handles media acquisition automatically when you initialize it. However, certain use cases require accessing media tracks before or independently of SDK initialization.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/media-acquisition-approaches.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Media Acquisition Approaches

Note

This guide assumes that you are already familiar with [initializing the RealtimeKit SDK](https://developers.cloudflare.com/realtime/realtimekit/core/).

RealtimeKit provides flexible approaches for acquiring and managing participant media (audio and video tracks). By default, the SDK handles media acquisition automatically when you initialize it. However, certain use cases require accessing media tracks before or independently of SDK initialization.

WebMobile

ReactWeb ComponentsAngular

Manual track handling is not available on this platform.

## When to use custom media acquisition

Custom media acquisition is useful when you need to:

* **Validate participants before joining**: Pass audio and video through verification services (for example, proctoring systems in EdTech assessments).
* **Pre-process media streams**: Apply filters, transformations, or quality checks before the session starts.
* **Integrate with external services**: Send media to third-party APIs for analysis or compliance checks.
* **Reuse existing tracks**: Use media tracks acquired elsewhere in your application.

Warning

Most applications do not need custom media acquisition. If you are unsure whether your use case requires this feature, use the standard SDK initialization approach. Custom media management adds complexity and requires careful handling of browser media APIs.

## Approach 1: SDK-first (recommended)

Initialize the SDK first, then access media tracks from the meeting object. This is the simplest approach and suitable for most use cases.

**When to use**: You need to access media tracks after SDK initialization for logging, analysis, or integration with other services.

TypeScript

```

import { useEffect } from 'react';

import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';


export default function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();


    useEffect(() => {

      initMeeting({ authToken: "<auth-token>" });

    }, []);


    useEffect(() => {

        if(meeting){

            console.log('audioTrack:: ', meeting.self.audioTrack);

            console.log('videoTrack:: ', meeting.self.videoTrack);

        }


    }, [meeting])


    return <div>Your meeting component comes here</div>;


}


```

JavaScript

```

const authToken = "<auth-token>";

const meeting = await RealtimeKitClient.init({

  authToken,

});


console.log("audioTrack:: ", meeting.self.audioTrack);

console.log("videoTrack:: ", meeting.self.videoTrack);


```

TypeScript

```

class AppComponent {

  title = "MyProject";

  @ViewChild("myid") meetingComponent: RtkMeeting;

  rtkMeeting: RealtimeKitClient;


  async ngAfterViewInit() {

    const meeting = await RealtimeKitClient.init({

      authToken: "<auth-token>",

    });


    console.log("audioTrack:: ", meeting.self.audioTrack);

    console.log("videoTrack:: ", meeting.self.videoTrack);

  }

}


```

## Approach 2: Media-first

Initialize the media handler first using `RealtimeKitClient.initMedia()`, then pass it to the SDK during initialization. The SDK reuses the acquired media tracks without requesting permissions again.

**When to use**: You need to acquire media tracks minutes in advance before joining a session. This is particularly useful for EdTech assessment platforms where you want to enable proctoring or tracking systems early without managing WebSocket connections or handling media disconnects that come with full SDK initialization.

**Benefits**:

* SDK manages media acquisition and browser compatibility.
* Participants are not prompted for permissions twice.
* Media tracks are automatically synchronized between your validation service and the SDK.
* Acquire media early without the complexity of managing SDK connection state.

TypeScript

```

import { useEffect, useState } from 'react';

import RealtimeKitClient from '@cloudflare/realtimekit';

import type { RTKSelfMedia } from '@cloudflare/realtimekit';

import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';


export default function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

    const [media, setMedia] = useState<RTKSelfMedia>();

    const [readyToInitializeSDK, setReadyToInitializeSDK] = useState(false);


    useEffect(() => {

        async function initMediaWithoutSDKInitialization(){

            const mediaFromSDK = await RealtimeKitClient.initMedia({

              video : true,

              audio: true,

            });


            setMedia(mediaFromSDK);


            console.log('audioTrack', mediaFromSDK.audioTrack);

            console.log('videoTrack', mediaFromSDK.videoTrack);


            setTimeout(() => {

                // Once you are ready to initialize the SDK, set this to true

                // To mimic a real world scenario, we are setting it to true after 5 seconds

                setReadyToInitializeSDK(true);

            }, 5000);

        }

        if(!media){

            initMediaWithoutSDKInitialization();

        }

    }, [media]);


    useEffect(() => {

        if(meeting){

            return;

        }

        if(!readyToInitializeSDK){

            return;

        }

        if(!media){

            return;

        }

      initMeeting({ authToken: "<auth-token>", defaults: { mediaHandler: media } });

    }, [meeting, readyToInitializeSDK, media]);


    return <div>Your meeting component comes here</div>;

}


```

Initialize the media handler first using `RealtimeKitClient.initMedia()`, then pass it to the SDK during initialization. The SDK reuses the acquired media tracks without requesting permissions again.

**When to use**: You need to acquire media tracks minutes in advance before joining a session. This is particularly useful for EdTech assessment platforms where you want to enable proctoring or tracking systems early without managing WebSocket connections or handling media disconnects that come with full SDK initialization.

**Benefits**:

* SDK manages media acquisition and browser compatibility.
* Participants are not prompted for permissions twice.
* Media tracks are automatically synchronized between your validation service and the SDK.
* Acquire media early without the complexity of managing SDK connection state.

JavaScript

```

const mediaFromSDK = await RealtimeKitClient.initMedia({

  video: true,

  audio: true,

});


setTimeout(() => {

  const authToken = "<auth-token>";

  RealtimeKitClient.init({

    authToken,

    defaults: {

      mediaHandler: mediaFromSDK,

    },

  }).then((meeting) => {

    // next - meeting.join();

  });

}, 5000);


```

Initialize the media handler first using `RealtimeKitClient.initMedia()`, then pass it to the SDK during initialization. The SDK reuses the acquired media tracks without requesting permissions again.

**When to use**: You need to acquire media tracks minutes in advance before joining a session. This is particularly useful for EdTech assessment platforms where you want to enable proctoring or tracking systems early without managing WebSocket connections or handling media disconnects that come with full SDK initialization.

**Benefits**:

* SDK manages media acquisition and browser compatibility.
* Participants are not prompted for permissions twice.
* Media tracks are automatically synchronized between your validation service and the SDK.
* Acquire media early without the complexity of managing SDK connection state.

TypeScript

```

class AppComponent {

  title = "MyProject";

  @ViewChild("myid") meetingComponent: RtkMeeting;

  rtkMeeting: RealtimeKitClient;


  async ngAfterViewInit() {

    const mediaFromSDK = await RealtimeKitClient.initMedia({

      video: true,

      audio: true,

    });


    setTimeout(() => {

      const authToken = "<auth-token>";

      RealtimeKitClient.init({

        authToken,

        defaults: {

          mediaHandler: mediaFromSDK,

        },

      }).then((meeting) => {

        // next - meeting.join();

      });

    }, 5000);

  }

}


```

## Approach 3: Self-managed (advanced)

Acquire and manage media tracks independently using browser APIs, then pass them to the SDK when enabling audio and video.

**When to use**: You have existing media management infrastructure or need complete control over media acquisition.

**Considerations**:

* You are responsible for handling browser compatibility and API changes.
* SDK updates will not automatically fix media acquisition issues in your code.
* Requires deeper knowledge of WebRTC and browser media APIs.

Initialize the SDK with audio and video disabled, then enable them with your custom tracks:

TypeScript

```

import { useEffect } from 'react';

import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';


export default function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();


    useEffect(() => {

      initMeeting({ authToken: "<auth-token>" });

    }, []);


    useEffect(() => {

        async function setupMediaTracks(){

            if (meeting) {

                let audioTrack; // Put the audioTrack that you acquired from browser here

                let videoTrack; // Put the videoTrack that you acquired from browser here

                await meeting.self.enableAudio(audioTrack);

                await meeting.self.enableVideo(videoTrack);

                // await meeting.self.join();

            }

        }

        setupMediaTracks();


    }, [meeting])


    return <div>Your meeting component comes here</div>;


}


```

JavaScript

```

const authToken = "<auth-token>";

const meeting = await RealtimeKitClient.init({

  authToken,

});


let audioTrack; // Put the audioTrack that you acquired from browser here

let videoTrack; // Put the videoTrack that you acquired from browser here

await meeting.self.enableAudio(audioTrack);

await meeting.self.enableVideo(videoTrack);


```

TypeScript

```

class AppComponent {

  title = "MyProject";

  @ViewChild("myid") meetingComponent: RtkMeeting;

  rtkMeeting: RealtimeKitClient;


  async ngAfterViewInit() {

    const meeting = await RealtimeKitClient.init({

      authToken: "<auth-token>",

    });


    let audioTrack; // Put the audioTrack that you acquired from browser here

    let videoTrack; // Put the videoTrack that you acquired from browser here

    await meeting.self.enableAudio(audioTrack);

    await meeting.self.enableVideo(videoTrack);

  }

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/media-acquisition-approaches/","name":"Media Acquisition Approaches"}}]}
```

---

---
title: Meeting Metadata
description: All metadata pertaining to a meeting is stored in meeting.meta. This includes important information about the meeting state, type, and connections.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/meeting-metadata.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Meeting Metadata

All metadata pertaining to a meeting is stored in `meeting.meta`. This includes important information about the meeting state, type, and connections.

WebMobile

ReactWeb ComponentsAngular

## Available metadata

Select a framework based on the platform you are building for.

The `meeting.meta` object contains the following properties:

* **`viewType`** \- Indicates the type of the meeting. Possible values are `WEBINAR`, `GROUP_CALL`
* **`roomType`** \- Indicates whether the meeting is a group-call or a webinar
* **`meetingTitle`** \- The title of the meeting
* **`meetingStartedTimestamp`** \- The timestamp when the meeting started
* **`mediaState`** \- Media connection state
* **`socketState`** \- Socket connection state

The `meeting.meta` object contains the following properties:

* **`viewType`** \- Indicates the type of the meeting. Possible values are `WEBINAR`, `GROUP_CALL`
* **`roomType`** \- Indicates whether the meeting is a group-call or a webinar
* **`meetingTitle`** \- The title of the meeting
* **`meetingStartedTimestamp`** \- The timestamp when the meeting started
* **`mediaState`** \- Media connection state
* **`socketState`** \- Socket connection state

The `meeting.meta` object contains the following properties:

* **`meetingId`** \- The unique identifier of the meeting
* **`meetingTitle`** \- The title of the meeting
* **`meetingStartedTimestamp`** \- The timestamp when the meeting started
* **`meetingType`** \- Indicates the meeting type, which can be one of `GROUP_CALL`, `WEBINAR`, `AUDIO_ROOM`, or `LIVESTREAM` from the `RtkMeetingType` enum
* **`meetingConfig`** \- The configuration of the meeting containing audio and video settings
* **`meetingState`** \- The state of the meeting of type `RtkMeetingState`
* **`authToken`** \- User's authentication token for the meeting
* **`selfActiveTab`** \- Information about the currently active tab for the local participant
* **`mediaConnectionState`** \- The current state of the media connection
* **`socketConnectionState`** \- The current state of the socket connection

The `meeting.meta` object contains the following properties:

* **`meetingId`** \- The unique identifier of the meeting
* **`meetingTitle`** \- The title of the meeting
* **`meetingStartedTimestamp`** \- The timestamp when the meeting started
* **`meetingType`** \- Indicates the meeting type, which can be one of `.groupCall`, `.webinar`, `.audioRoom`, or `.livestream` from the `RtkMeetingType` enum
* **`meetingConfig`** \- The configuration of the meeting containing audio and video settings
* **`meetingState`** \- The state of the meeting of type `RtkMeetingState`
* **`authToken`** \- User's authentication token for the meeting
* **`selfActiveTab`** \- Information about the currently active tab for the local participant
* **`mediaConnectionState`** \- The current state of the media connection
* **`socketConnectionState`** \- The current state of the socket connection

The `meeting.meta` object contains the following properties:

* **`meetingId`** \- The unique identifier of the meeting
* **`meetingTitle`** \- The title of the meeting
* **`meetingStartedTimestamp`** \- The timestamp when the meeting started
* **`meetingType`** \- Indicates the meeting type, which can be one of `groupCall`, `webinar`, or `livestream` from the `RtkMeetingType` enum
* **`activeTab`** \- Information about the currently active tab for the local participant

The `meeting.meta` object contains the following properties:

* **`viewType`** \- Indicates the type of the meeting. Possible values are `WEBINAR`, `GROUP_CALL`
* **`roomType`** \- Indicates whether the meeting is a group-call or a webinar
* **`meetingTitle`** \- The title of the meeting
* **`meetingStartedTimestamp`** \- The timestamp when the meeting started
* **`mediaState`** \- Media connection state
* **`socketState`** \- Socket connection state

## Access meeting metadata

To access meeting metadata, use the `meeting.meta` object.

JavaScript

```

// Destructure the metadata to get meetingTitle

const { meetingTitle } = meeting.meta;


if (meeting.self.roomJoined) {

  console.log(

    `The local user has joined a meeting with title ${meetingTitle}.`,

  );

}


```

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";

import { useEffect } from "react";


function MeetingInfo() {

  const [meetingTitle, roomJoined] = useRealtimeKitSelector((m) => [

    m.meta.meetingTitle,

    m.self.roomJoined,

  ]);


  useEffect(() => {

    if (roomJoined) {

      console.log(

        `The local user has joined a meeting with title ${meetingTitle}.`,

      );

    }

  }, [roomJoined, meetingTitle]);


  return null;

}


```

Kotlin

```

val meetingTitle = meeting.meta.meetingTitle


```

Swift

```

let meetingTitle = meeting.meta.meetingTitle


```

Dart

```

final meetingTitle = meeting.meta.meetingTitle;

print("The local user has joined ${meetingTitle}.");


```

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";

import { useEffect } from "react";


const [meetingTitle, roomJoined] = useRealtimeKitSelector((m) => [

  m.meta.meetingTitle,

  m.self.roomJoined,

]);


useEffect(() => {

  if (roomJoined) {

    console.log(

      `The local user has joined a meeting with title ${meetingTitle}.`,

    );

  }

}, [roomJoined, meetingTitle]);


```

## Connection events

The `meta` object also emits events for indicating changes in the connection state of the meeting.

### Media connection updates

Updates to the media connection (WebRTC connection used for the transfer of actual media) are sent via the `mediaConnectionUpdate` event.

JavaScript

```

meeting.meta.on("mediaConnectionUpdate", ({ transport, state }) => {

  // transport - 'consuming' | 'producing'

  // state - 'new' | 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'failed'


  console.log(`Media connection ${transport} is now ${state}`);

});


```

The `mediaConnectionUpdate` event provides:

* **`transport`** \- Either `'consuming'` (receiving media) or `'producing'` (sending media)
* **`state`** \- Connection state: `'new'`, `'connecting'`, `'connected'`, `'disconnected'`, `'reconnecting'`, or `'failed'`

Updates to the media connection (WebRTC connection used for the transfer of actual media) are sent via the `mediaConnectionUpdate` event.

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";

import { useEffect } from "react";


function MediaConnectionMonitor() {

  const [meeting] = useRealtimeKitClient();


  useEffect(() => {

    if (meeting) {

      const handleMediaConnection = ({ transport, state }) => {

        // transport - 'consuming' | 'producing'

        // state - 'new' | 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'failed'


        console.log(`Media connection ${transport} is now ${state}`);

      };


      meeting.meta.on("mediaConnectionUpdate", handleMediaConnection);


      return () => {

        meeting.meta.off("mediaConnectionUpdate", handleMediaConnection);

      };

    }

  }, [meeting]);


  return null;

}


```

The `mediaConnectionUpdate` event provides:

* **`transport`** \- Either `'consuming'` (receiving media) or `'producing'` (sending media)
* **`state`** \- Connection state: `'new'`, `'connecting'`, `'connected'`, `'disconnected'`, `'reconnecting'`, or `'failed'`

You can access the current media connection state directly from the metadata.

Kotlin

```

val mediaConnectionState = meeting.meta.mediaConnectionState


```

You can access the current media connection state directly from the metadata.

Swift

```

let mediaConnectionState = meeting.meta.mediaConnectionState


```

Media connection events are not available in Flutter. Monitor the connection state through the meeting state changes.

Updates to the media connection (WebRTC connection used for the transfer of actual media) are sent via the `mediaConnectionUpdate` event.

```

meeting.meta.on("mediaConnectionUpdate", ({ transport, state }) => {

  // transport - 'consuming' | 'producing'

  // state - 'new' | 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'failed'


  console.log(`Media connection ${transport} is now ${state}`);

});


```

The `mediaConnectionUpdate` event provides:

* **`transport`** \- Either `'consuming'` (receiving media) or `'producing'` (sending media)
* **`state`** \- Connection state: `'new'`, `'connecting'`, `'connected'`, `'disconnected'`, `'reconnecting'`, or `'failed'`

### Socket connection updates

Updates to the WebSocket connection (used for chat, polls, and other basic signaling) are sent via the `socketConnectionUpdate` event.

JavaScript

```

meeting.meta.on(

  "socketConnectionUpdate",

  ({ state, reconnectionAttempt, reconnected }) => {

    // state - 'connected' | 'disconnected' | 'reconnecting' | 'failed'


    console.log(`Socket connection is now ${state}`);


    if (reconnectionAttempt) {

      console.log(`Reconnection attempt: ${reconnectionAttempt}`);

    }


    if (reconnected) {

      console.log("Successfully reconnected");

    }

  },

);


```

The `socketConnectionUpdate` event provides:

* **`state`** \- Connection state: `'connected'`, `'disconnected'`, `'reconnecting'`, or `'failed'`
* **`reconnectionAttempt`** \- The number of reconnection attempts made (if reconnecting)
* **`reconnected`** \- Boolean indicating if the connection was successfully reestablished

Updates to the WebSocket connection (used for chat, polls, and other basic signaling) are sent via the `socketConnectionUpdate` event.

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";

import { useEffect } from "react";


function SocketConnectionMonitor() {

  const [meeting] = useRealtimeKitClient();


  useEffect(() => {

    if (meeting) {

      const handleSocketConnection = ({

        state,

        reconnectionAttempt,

        reconnected,

      }) => {

        // state - 'connected' | 'disconnected' | 'reconnecting' | 'failed'


        console.log(`Socket connection is now ${state}`);


        if (reconnectionAttempt) {

          console.log(`Reconnection attempt: ${reconnectionAttempt}`);

        }


        if (reconnected) {

          console.log("Successfully reconnected");

        }

      };


      meeting.meta.on("socketConnectionUpdate", handleSocketConnection);


      return () => {

        meeting.meta.off("socketConnectionUpdate", handleSocketConnection);

      };

    }

  }, [meeting]);


  return null;

}


```

The `socketConnectionUpdate` event provides:

* **`state`** \- Connection state: `'connected'`, `'disconnected'`, `'reconnecting'`, or `'failed'`
* **`reconnectionAttempt`** \- The number of reconnection attempts made (if reconnecting)
* **`reconnected`** \- Boolean indicating if the connection was successfully reestablished

You can access the current socket connection state directly from the metadata.

Kotlin

```

val socketConnectionState = meeting.meta.socketConnectionState


```

You can access the current socket connection state directly from the metadata.

Swift

```

let socketConnectionState = meeting.meta.socketConnectionState


```

Socket connection events are not available in Flutter. Monitor the connection state through the meeting state changes.

Updates to the WebSocket connection (used for chat, polls, and other basic signaling) are sent via the `socketConnectionUpdate` event.

```

meeting.meta.on(

  "socketConnectionUpdate",

  ({ state, reconnectionAttempt, reconnected }) => {

    // state - 'connected' | 'disconnected' | 'reconnecting' | 'failed'


    console.log(`Socket connection is now ${state}`);


    if (reconnectionAttempt) {

      console.log(`Reconnection attempt: ${reconnectionAttempt}`);

    }


    if (reconnected) {

      console.log("Successfully reconnected");

    }

  },

);


```

The `socketConnectionUpdate` event provides:

* **`state`** \- Connection state: `'connected'`, `'disconnected'`, `'reconnecting'`, or `'failed'`
* **`reconnectionAttempt`** \- The number of reconnection attempts made (if reconnecting)
* **`reconnected`** \- Boolean indicating if the connection was successfully reestablished

## Next steps

Explore related topics:

* [Meeting Object Explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) \- Comprehensive meeting object reference
* [Session Lifecycle](https://developers.cloudflare.com/realtime/realtimekit/concepts/session-lifecycle/) \- Understanding meeting states and transitions

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/meeting-metadata/","name":"Meeting Metadata"}}]}
```

---

---
title: Meeting Object Explained
description: The meeting object is the core interface for interacting with a RealtimeKit session. It provides access to participants, local user controls, chat, polls, plugins, and more. This object is returned when you initialize the SDK.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/meeting-object-explained.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Meeting Object Explained

The meeting object is the core interface for interacting with a RealtimeKit session. It provides access to participants, local user controls, chat, polls, plugins, and more. This object is returned when you initialize the SDK.

Prerequisites

This page assumes you've already initialized the SDK as described in the [Initialize SDK](https://developers.cloudflare.com/realtime/realtimekit/core/) guide.

This guide covers the core namespaces on the meeting object along with the most commonly used properties, methods, and events. Individual namespace references have been linked for more details.

WebMobile

ReactWeb ComponentsAngular

## Meeting Object Structure

The meeting object contains several properties that organize different aspects of the meeting:

### Self/Local Participant

The [meeting.self ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKSelf) represents the local user (you) in the meeting. It provides properties and methods to control your own audio, video, and screen sharing.

**Key Properties:**

JavaScript

```

// Participant identifiers

meeting.self.id; // Peer ID (unique per session)

meeting.self.userId; // Participant ID (persistent across sessions)

meeting.self.name; // Participant display name


// Media state

meeting.self.audioEnabled; // Boolean: Is audio enabled?

meeting.self.videoEnabled; // Boolean: Is video enabled?

meeting.self.screenShareEnabled; // Boolean: Is screen share active?


// Media tracks

meeting.self.audioTrack; // Audio MediaStreamTrack, if audio is enabled

meeting.self.videoTrack; // Video MediaStreamTrack, if video is enabled

meeting.self.screenShareTracks; // Structure: { audio: MediaStreamTrack, video: MediaStreamTrack }, if screen share is enabled


// Room state

meeting.self.roomJoined; // Boolean: Has joined the meeting?

meeting.self.roomState; // Current room state


```

**Common Methods:**

JavaScript

```

// Media controls

await meeting.self.enableAudio(); // Emits a `audioUpdate` event on `meeting.self` when successful.

await meeting.self.disableAudio(); // Emits a `audioUpdate` event on `meeting.self` when successful.

await meeting.self.enableVideo(); // Emits a `videoUpdate` event on `meeting.self` when successful.

await meeting.self.disableVideo(); // Emits a `videoUpdate` event on `meeting.self` when successful.

await meeting.self.enableScreenShare(); // Emits a `screenShareUpdate` event on `meeting.self` when successful.

await meeting.self.disableScreenShare(); // Emits a `screenShareUpdate` event on `meeting.self` when successful.


// Update Name

await meeting.self.setName("New Name"); // setName works only works before joining the meeting


// List Devices

await meeting.self.getAllDevices(); // Returns all available devices

await meeting.self.getAudioDevices(); // Returns all available audio devices

await meeting.self.getVideoDevices(); // Returns all available video devices

await meeting.self.getSpeakerDevices(); // Returns all available speaker devices

await meeting.self.getCurrentDevices(); // {audio: MediaDevice, video: MediaDevice, speaker: MediaDevice} Returns the current device configuration


// Change a device

await meeting.self.setDevice((await meeting.self.getAllDevices())[0]);


```

The [meeting.self ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKSelf) represents the local user (you) in the meeting. It provides properties and methods to control your own audio, video, and screen sharing.

**Key Properties:**

JavaScript

```

// Participant identifiers

meeting.self.id; // Peer ID (unique per session)

meeting.self.userId; // Participant ID (persistent across sessions)

meeting.self.name; // Participant display name


// Media state

meeting.self.audioEnabled; // Boolean: Is audio enabled?

meeting.self.videoEnabled; // Boolean: Is video enabled?

meeting.self.screenShareEnabled; // Boolean: Is screen share active?


// Media tracks

meeting.self.audioTrack; // Audio MediaStreamTrack, if audio is enabled

meeting.self.videoTrack; // Video MediaStreamTrack, if video is enabled

meeting.self.screenShareTracks; // Structure: { audio: MediaStreamTrack, video: MediaStreamTrack }, if screen share is enabled


// Room state

meeting.self.roomJoined; // Boolean: Has joined the meeting?

meeting.self.roomState; // Current room state


```

**Common Methods:**

JavaScript

```

// Media controls

await meeting.self.enableAudio(); // Emits a `audioUpdate` event on `meeting.self` when successful.

await meeting.self.disableAudio(); // Emits a `audioUpdate` event on `meeting.self` when successful.

await meeting.self.enableVideo(); // Emits a `videoUpdate` event on `meeting.self` when successful.

await meeting.self.disableVideo(); // Emits a `videoUpdate` event on `meeting.self` when successful.

await meeting.self.enableScreenShare(); // Emits a `screenShareUpdate` event on `meeting.self` when successful.

await meeting.self.disableScreenShare(); // Emits a `screenShareUpdate` event on `meeting.self` when successful.


// Update Name

await meeting.self.setName("New Name"); // setName works only works before joining the meeting


// List Devices

await meeting.self.getAllDevices(); // Returns all available devices

await meeting.self.getAudioDevices(); // Returns all available audio devices

await meeting.self.getVideoDevices(); // Returns all available video devices

await meeting.self.getSpeakerDevices(); // Returns all available speaker devices

await meeting.self.getCurrentDevices(); // {audio: MediaDevice, video: MediaDevice, speaker: MediaDevice} Returns the current device configuration


// Change a device

await meeting.self.setDevice((await meeting.self.getAllDevices())[0]);


```

The [meeting.self ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKSelf) represents the local user (you) in the meeting. It provides properties and methods to control your own audio, video, and screen sharing.

**Key Properties:**

JavaScript

```

// Participant identifiers

meeting.self.id; // Peer ID (unique per session)

meeting.self.userId; // Participant ID (persistent across sessions)

meeting.self.name; // Participant display name


// Media state

meeting.self.audioEnabled; // Boolean: Is audio enabled?

meeting.self.videoEnabled; // Boolean: Is video enabled?

meeting.self.screenShareEnabled; // Boolean: Is screen share active?


// Media tracks

meeting.self.audioTrack; // Audio MediaStreamTrack, if audio is enabled

meeting.self.videoTrack; // Video MediaStreamTrack, if video is enabled

meeting.self.screenShareTracks; // Structure: { audio: MediaStreamTrack, video: MediaStreamTrack }, if screen share is enabled


// Room state

meeting.self.roomJoined; // Boolean: Has joined the meeting?

meeting.self.roomState; // Current room state


```

**Common Methods:**

JavaScript

```

// Media controls

await meeting.self.enableAudio(); // Emits a `audioUpdate` event on `meeting.self` when successful.

await meeting.self.disableAudio(); // Emits a `audioUpdate` event on `meeting.self` when successful.

await meeting.self.enableVideo(); // Emits a `videoUpdate` event on `meeting.self` when successful.

await meeting.self.disableVideo(); // Emits a `videoUpdate` event on `meeting.self` when successful.

await meeting.self.enableScreenShare(); // Emits a `screenShareUpdate` event on `meeting.self` when successful.

await meeting.self.disableScreenShare(); // Emits a `screenShareUpdate` event on `meeting.self` when successful.


// Update Name

await meeting.self.setName("New Name"); // setName works only works before joining the meeting


// List Devices

await meeting.self.getAllDevices(); // Returns all available devices

await meeting.self.getAudioDevices(); // Returns all available audio devices

await meeting.self.getVideoDevices(); // Returns all available video devices

await meeting.self.getSpeakerDevices(); // Returns all available speaker devices

await meeting.self.getCurrentDevices(); // {audio: MediaDevice, video: MediaDevice, speaker: MediaDevice} Returns the current device configuration


// Change a device

await meeting.self.setDevice((await meeting.self.getAllDevices())[0]);


```

The `meeting.localUser` represents the local user (you) in the meeting. It provides properties and methods to control your own audio, video, and screen sharing.

**Key Properties:**

Kotlin

```

// Participant identifiers

meeting.localUser.id // ID of the local user participant

meeting.localUser.userId // Persistent user ID across sessions

meeting.localUser.name // Name of the local user

meeting.localUser.picture // URL to the picture of the local user (optional)

meeting.localUser.customParticipantId // User provided participant ID (optional)

meeting.localUser.permissions // Permissions related to various capabilities within a meeting context for the local user


// Media state

meeting.localUser.audioEnabled // Boolean: Is audio currently enabled for the local user

meeting.localUser.videoEnabled // Boolean: Is video currently enabled for the local user

meeting.localUser.screenShareEnabled // Boolean: Is screenshare currently enabled for the local user

meeting.localUser.isCameraPermissionGranted // Boolean: Does local user have access to device Camera permission

meeting.localUser.isMicrophonePermissionGranted // Boolean: Does local user have access to device Microphone permission


// Participant metadata

meeting.localUser.isHost // Boolean: Is the local user the host

meeting.localUser.isPinned // Boolean: Is the local user pinned

meeting.localUser.flags // Participant flags (recorder, hiddenParticipant, webinarHiddenParticipant)


// Preset Info

meeting.localUser.presetName // String value representing name of preset for local user

meeting.localUser.presetInfo // Typed object representing the preset information for local user

meeting.localUser.designToken // Design token for UI customization


// Stage and room state

meeting.localUser.stageStatus // Stage status of the local user

meeting.localUser.roomJoined // Boolean: Has local user joined the room

meeting.localUser.waitListStatus // Waitlist status of the local user (NONE, WAITING, ACCEPTED, or REJECTED)


```

**Common Methods:**

Kotlin

```

// Get local user video view

meeting.localUser.getSelfPreview() // Returns a VideoView that can be added to any ViewGroup in Android


// Update Name

meeting.localUser.setDisplayName("New Name") // Name change is visible only if it occurs before joinRoom() and after init()


// Mute/Unmute Audio

meeting.localUser.disableAudio { error: AudioError? -> }

meeting.localUser.enableAudio { error: AudioError? -> }


// Enable/Disable Video

meeting.localUser.disableVideo { error: VideoError? -> }

meeting.localUser.enableVideo { error: VideoError? -> }


// Enable/Disable Screenshare

meeting.localUser.canEnableScreenShare() // Check if screenshare can be enabled

val error: ScreenShareError? = meeting.localUser.enableScreenShare() // Returns error if fails, null if successful

meeting.localUser.disableScreenShare()


// Device management

val audioDevices = meeting.localUser.getAudioDevices() // Get all available audio devices

val videoDevices = meeting.localUser.getVideoDevices() // Get all available video devices


meeting.localUser.setAudioDevice(audioDevices[0]) // Switch audio device

meeting.localUser.setVideoDevice(videoDevices[0]) // Switch video device


val selectedAudio = meeting.localUser.getSelectedAudioDevice() // Get currently selected audio device

val selectedVideo = meeting.localUser.getSelectedVideoDevice() // Get currently selected video device


meeting.localUser.switchCamera() // Switch between front and back camera


// Stage permissions

meeting.localUser.canJoinStage() // Check if local user can join stage

meeting.localUser.canRequestToJoinStage() // Check if local user can request to join stage


// Host controls

meeting.localUser.canDoParticipantHostControls() // Check if local user can perform host controls


// Setup screen

meeting.localUser.shouldShowSetupScreen() // Check if setup screen should be shown

meeting.localUser.shouldJoinMediaRoom() // Check if local user should join media room


```

The `meeting.localUser` represents the local user (you) in the meeting. It provides properties and methods to control your own audio, video, and screen sharing.

**Key Properties:**

Swift

```

// Participant identifiers

meeting.localUser.id // ID of the local user participant

meeting.localUser.userId // Persistent user ID across sessions

meeting.localUser.name // Name of the local user

meeting.localUser.picture // URL to the picture of the local user (optional)

meeting.localUser.customParticipantId // User provided participant ID (optional)

meeting.localUser.permissions // Permissions related to various capabilities within a meeting context for the local user


// Media state

meeting.localUser.audioEnabled // Boolean: Is audio currently enabled for the local user

meeting.localUser.videoEnabled // Boolean: Is video currently enabled for the local user

meeting.localUser.screenShareEnabled // Boolean: Is screenshare currently enabled for the local user

meeting.localUser.isCameraPermissionGranted // Boolean: Does local user have access to device Camera permission

meeting.localUser.isMicrophonePermissionGranted // Boolean: Does local user have access to device Microphone permission


// Participant metadata

meeting.localUser.isHost // Boolean: Is the local user the host

meeting.localUser.isPinned // Boolean: Is the local user pinned

meeting.localUser.flags // Participant flags (recorder, hiddenParticipant, webinarHiddenParticipant)


// Preset Info

meeting.localUser.presetName // String value representing name of preset for local user

meeting.localUser.presetInfo // Typed object representing the preset information for local user

meeting.localUser.designToken // Design token for UI customization


// Stage and room state

meeting.localUser.stageStatus // Stage status of the local user

meeting.localUser.roomJoined // Boolean: Has local user joined the room

meeting.localUser.waitListStatus // Waitlist status of the local user (.none, .waiting, .accepted, or .rejected)


```

**Common Methods:**

Swift

```

// Get local user video view

meeting.localUser.getSelfPreview() // Returns a VideoView (UIView) for iOS


// Update Name

meeting.localUser.setDisplayName("New Name") // Name change is visible only if it occurs before joinRoom() and after init()


// Mute/Unmute Audio

meeting.localUser.disableAudio { error in }

meeting.localUser.enableAudio { error in }


// Enable/Disable Video

meeting.localUser.disableVideo { error in }

meeting.localUser.enableVideo { error in }


// Enable/Disable Screenshare

meeting.localUser.canEnableScreenShare() // Check if screenshare can be enabled

let error: ScreenShareError? = meeting.localUser.enableScreenShare() // Returns error if fails, nil if successful

meeting.localUser.disableScreenShare()


// Device management

let audioDevices = meeting.localUser.getAudioDevices() // Get all available audio devices

let videoDevices = meeting.localUser.getVideoDevices() // Get all available video devices


meeting.localUser.setAudioDevice(audioDevices[0]) // Switch audio device

meeting.localUser.setVideoDevice(videoDevices[0]) // Switch video device


let selectedAudio = meeting.localUser.getSelectedAudioDevice() // Get currently selected audio device

let selectedVideo = meeting.localUser.getSelectedVideoDevice() // Get currently selected video device


meeting.localUser.switchCamera() // Switch between front and back camera


// Stage permissions

meeting.localUser.canJoinStage() // Check if local user can join stage

meeting.localUser.canRequestToJoinStage() // Check if local user can request to join stage


// Host controls

meeting.localUser.canDoParticipantHostControls() // Check if local user can perform host controls


// Setup screen

meeting.localUser.shouldShowSetupScreen() // Check if setup screen should be shown

meeting.localUser.shouldJoinMediaRoom() // Check if local user should join media room


```

The `meeting.localUser` represents the local user (you) in the meeting. It provides properties and methods to control your own audio, video, and screen sharing.

**Key Properties:**

Dart

```

// Participant identifiers

meeting.localUser.id; // ID of the local user participant

meeting.localUser.userId; // Persistent user ID across sessions

meeting.localUser.name; // Name of the local user

meeting.localUser.picture; // URL to the picture of the local user (optional)

meeting.localUser.customParticipantId; // User provided participant ID (optional)

meeting.localUser.permissions; // Permissions related to various capabilities within a meeting context for the local user


// Media state

meeting.localUser.audioEnabled; // Boolean: Is audio currently enabled for the local user

meeting.localUser.videoEnabled; // Boolean: Is video currently enabled for the local user

meeting.localUser.screenShareEnabled; // Boolean: Is screenshare currently enabled for the local user

meeting.localUser.isCameraPermissionGranted; // Boolean: Does local user have access to device Camera permission

meeting.localUser.isMicrophonePermissionGranted; // Boolean: Does local user have access to device Microphone permission


// Participant metadata

meeting.localUser.isHost; // Boolean: Is the local user the host

meeting.localUser.isPinned; // Boolean: Is the local user pinned

meeting.localUser.flags; // Participant flags (recorder, hiddenParticipant, webinarHiddenParticipant)


// Preset Info

meeting.localUser.presetName; // String value representing name of preset for local user

meeting.localUser.presetInfo; // Typed object representing the preset information for local user


// Stage and room state

meeting.localUser.stageStatus; // Stage status of the local user

meeting.localUser.roomJoined; // Boolean: Has local user joined the room

meeting.localUser.waitListStatus; // Waitlist status of the local user (None, Waiting, Accepted, or Rejected)


```

**Common Methods:**

Dart

```

// Update Name

await meeting.localUser.setDisplayName("New Name"); // Name change is visible only if it occurs before joinRoom() and after init()


// Mute/Unmute Audio

meeting.localUser.disableAudio(onResult: (error) {});

meeting.localUser.enableAudio(onResult: (error) {});


// Enable/Disable Video

meeting.localUser.disableVideo(onResult: (error) {});

meeting.localUser.enableVideo(onResult: (error) {});


// Enable/Disable Screenshare

meeting.localUser.enableScreenShare();

meeting.localUser.disableScreenShare();


// Device management

final audioDevices = await meeting.localUser.getAudioDevices(); // Get all available audio devices

final videoDevices = await meeting.localUser.getVideoDevices(); // Get all available video devices


await meeting.localUser.setAudioDevice(audioDevices[0]); // Switch audio device

await meeting.localUser.setVideoDevice(videoDevices[0]); // Switch video device


final selectedAudio = await meeting.localUser.getSelectedAudioDevice(); // Get currently selected audio device

final selectedVideo = await meeting.localUser.getSelectedVideoDevice(); // Get currently selected video device


meeting.localUser.switchCamera(); // Switch between front and back camera


```

The [meeting.self ↗](https://docs.realtime.cloudflare.com/mobile-core/reference/RTKSelf) represents the local user (you) in the meeting. It provides properties and methods to control your own audio, video, and screen sharing.

**Key Properties:**

JavaScript

```

// Participant identifiers

meeting.self.id; // Peer ID (unique per session)

meeting.self.userId; // Participant ID (persistent across sessions)

meeting.self.name; // Participant display name


// Media state

meeting.self.audioEnabled; // Boolean: Is audio enabled?

meeting.self.videoEnabled; // Boolean: Is video enabled?

meeting.self.screenShareEnabled; // Boolean: Is screen share active?


// Media tracks

meeting.self.audioTrack; // Audio MediaStreamTrack, if audio is enabled

meeting.self.videoTrack; // Video MediaStreamTrack, if video is enabled

meeting.self.screenShareTracks; // Structure: { audio: MediaStreamTrack, video: MediaStreamTrack }, if screen share is enabled


// Room state

meeting.self.roomJoined; // Boolean: Has joined the meeting?

meeting.self.roomState; // Current room state


```

**Common Methods:**

JavaScript

```

// Media controls

await meeting.self.enableAudio(); // Emits a `audioUpdate` event on `meeting.self` when successful.

await meeting.self.disableAudio(); // Emits a `audioUpdate` event on `meeting.self` when successful.

await meeting.self.enableVideo(); // Emits a `videoUpdate` event on `meeting.self` when successful.

await meeting.self.disableVideo(); // Emits a `videoUpdate` event on `meeting.self` when successful.

await meeting.self.enableScreenShare(); // Emits a `screenShareUpdate` event on `meeting.self` when successful.

await meeting.self.disableScreenShare(); // Emits a `screenShareUpdate` event on `meeting.self` when successful.


// Update Name

await meeting.self.setName("New Name"); // setName works only works before joining the meeting


// List Devices

await meeting.self.getAllDevices(); // Returns all available devices

await meeting.self.getAudioDevices(); // Returns all available audio devices

await meeting.self.getVideoDevices(); // Returns all available video devices

await meeting.self.getSpeakerDevices(); // Returns all available speaker devices

await meeting.self.getCurrentDevices(); // {audio: MediaDevice, video: MediaDevice, speaker: MediaDevice} Returns the current device configuration


// Change a device

await meeting.self.setDevice((await meeting.self.getAllDevices())[0]);


```

## Remote participants

### `meeting.participants` \- All Remote Participants

The [meeting.participants ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKParticipants) contains maps of all remote participants in the meeting, organized by their state.

Note

`meeting.participants` only contains remote participants. It does not include the local participant. Local participant is available in `meeting.self`.

**Participant Maps:**

JavaScript

```

// All participants who have joined

meeting.participants.joined; // Map of joined participants

meeting.participants.joined.toArray(); // Array of joined participants


// Participants with active media

meeting.participants.active; // Map of participants with active audio/video

meeting.participants.active.toArray(); // Array of participants with active audio/video


// Participants in waiting room

meeting.participants.waitlisted; // Map of waitlisted participants

meeting.participants.waitlisted.toArray(); // Array of waitlisted participants


// Pinned participants

meeting.participants.pinned; // Map of pinned participants

meeting.participants.pinned.toArray(); // Array of pinned participants


```

**Accessing Participant Data:**

JavaScript

```

// Get all joined participants as an array

const joinedParticipants = meeting.participants.joined.toArray();


// Access first participant's IDs

const firstParticipant = joinedParticipants[0];

console.log("First Participant Peer ID:", firstParticipant?.id); // Peer ID (unique per session)

console.log("First Participant User ID:", firstParticipant?.userId); // Participant ID (persistent)

console.log("First Participant Name:", firstParticipant?.name); // Display name

console.log("First Participant Audio Enabled:", firstParticipant?.audioEnabled); // Audio state

console.log("First Participant Video Enabled:", firstParticipant?.videoEnabled); // Video state

console.log(

  "First Participant Screen Share Enabled:",

  firstParticipant?.screenShareEnabled,

); // Screen share state

console.log("First Participant Audio Track:", firstParticipant?.audioTrack); // Audio MediaStreamTrack

console.log("First Participant Video Track:", firstParticipant?.videoTrack); // Video MediaStreamTrack

console.log(

  "First Participant Screen Share Track:",

  firstParticipant?.screenShareTracks,

); // Screen share MediaStreamTrack


// Access participant by peer ID

const participant = meeting.participants.joined.get("peer-id");


// Get count of joined participants

const count = meeting.participants.joined.size();


```

**Participant Properties:**

Each participant object has similar properties to `meeting.self`:

JavaScript

```

participant.id; // Peer ID

participant.userId; // Participant ID

participant.name; // Display name

participant.audioEnabled; // Audio state

participant.videoEnabled; // Video state

participant.screenShareEnabled; // Screen share state

participant.audioTrack; // Audio MediaStreamTrack

participant.videoTrack; // Video MediaStreamTrack

participant.screenShareTrack; // Screen share MediaStreamTrack


```

The `meeting.participants` contains maps of all remote participants in the meeting, organized by their state.

Note

`meeting.participants` only contains remote participants. It does not include the local participant. Local participant is available in `meeting.self`.

**Participant Maps:**

JavaScript

```

// All participants who have joined

meeting.participants.joined; // Map of joined participants

meeting.participants.joined.toArray(); // Array of joined participants


// Participants with active media

meeting.participants.active; // Map of participants with active audio/video

meeting.participants.active.toArray(); // Array of participants with active audio/video


// Participants in waiting room

meeting.participants.waitlisted; // Map of waitlisted participants

meeting.participants.waitlisted.toArray(); // Array of waitlisted participants


// Pinned participants

meeting.participants.pinned; // Map of pinned participants

meeting.participants.pinned.toArray(); // Array of pinned participants


```

**Accessing Participant Data:**

JavaScript

```

// Get all joined participants as an array

const joinedParticipants = meeting.participants.joined.toArray();


// Access first participant's IDs

const firstParticipant = joinedParticipants[0];

console.log("First Participant Peer ID:", firstParticipant?.id); // Peer ID (unique per session)

console.log("First Participant User ID:", firstParticipant?.userId); // Participant ID (persistent)

console.log("First Participant Name:", firstParticipant?.name); // Display name

console.log("First Participant Audio Enabled:", firstParticipant?.audioEnabled); // Audio state

console.log("First Participant Video Enabled:", firstParticipant?.videoEnabled); // Video state

console.log(

  "First Participant Screen Share Enabled:",

  firstParticipant?.screenShareEnabled,

); // Screen share state

console.log("First Participant Audio Track:", firstParticipant?.audioTrack); // Audio MediaStreamTrack

console.log("First Participant Video Track:", firstParticipant?.videoTrack); // Video MediaStreamTrack

console.log(

  "First Participant Screen Share Track:",

  firstParticipant?.screenShareTracks,

); // Screen share MediaStreamTrack


// Access participant by peer ID

const participant = meeting.participants.joined.get("peer-id");


// Get count of joined participants

const count = meeting.participants.joined.size();


```

**Participant Properties:**

Each participant object has similar properties to `meeting.self`:

JavaScript

```

participant.id; // Peer ID

participant.userId; // Participant ID

participant.name; // Display name

participant.audioEnabled; // Audio state

participant.videoEnabled; // Video state

participant.screenShareEnabled; // Screen share state

participant.audioTrack; // Audio MediaStreamTrack

participant.videoTrack; // Video MediaStreamTrack

participant.screenShareTrack; // Screen share MediaStreamTrack


```

The `meeting.participants` contains maps of all remote participants in the meeting, organized by their state.

Note

`meeting.participants` only contains remote participants. It does not include the local participant. Local participant is available in `meeting.self`.

**Participant Maps:**

JavaScript

```

// All participants who have joined

meeting.participants.joined; // Map of joined participants

meeting.participants.joined.toArray(); // Array of joined participants


// Participants with active media

meeting.participants.active; // Map of participants with active audio/video

meeting.participants.active.toArray(); // Array of participants with active audio/video


// Participants in waiting room

meeting.participants.waitlisted; // Map of waitlisted participants

meeting.participants.waitlisted.toArray(); // Array of waitlisted participants


// Pinned participants

meeting.participants.pinned; // Map of pinned participants

meeting.participants.pinned.toArray(); // Array of pinned participants


```

**Accessing Participant Data:**

JavaScript

```

// Get all joined participants as an array

const joinedParticipants = meeting.participants.joined.toArray();


// Access first participant's IDs

const firstParticipant = joinedParticipants[0];

console.log("First Participant Peer ID:", firstParticipant?.id); // Peer ID (unique per session)

console.log("First Participant User ID:", firstParticipant?.userId); // Participant ID (persistent)

console.log("First Participant Name:", firstParticipant?.name); // Display name

console.log("First Participant Audio Enabled:", firstParticipant?.audioEnabled); // Audio state

console.log("First Participant Video Enabled:", firstParticipant?.videoEnabled); // Video state

console.log(

  "First Participant Screen Share Enabled:",

  firstParticipant?.screenShareEnabled,

); // Screen share state

console.log("First Participant Audio Track:", firstParticipant?.audioTrack); // Audio MediaStreamTrack

console.log("First Participant Video Track:", firstParticipant?.videoTrack); // Video MediaStreamTrack

console.log(

  "First Participant Screen Share Track:",

  firstParticipant?.screenShareTracks,

); // Screen share MediaStreamTrack


// Access participant by peer ID

const participant = meeting.participants.joined.get("peer-id");


// Get count of joined participants

const count = meeting.participants.joined.size();


```

**Participant Properties:**

Each participant object has similar properties to `meeting.self`:

JavaScript

```

participant.id; // Peer ID

participant.userId; // Participant ID

participant.name; // Display name

participant.audioEnabled; // Audio state

participant.videoEnabled; // Video state

participant.screenShareEnabled; // Screen share state

participant.audioTrack; // Audio MediaStreamTrack

participant.videoTrack; // Video MediaStreamTrack

participant.screenShareTrack; // Screen share MediaStreamTrack


```

The `meeting.participants` contains lists of all remote participants in the meeting, organized by their state.

**Participant Lists:**

Kotlin

```

// All participants who have joined

val joined: List<RtkRemoteParticipant> = meeting.participants.joined


// Participants with active media

val active: List<RtkRemoteParticipant> = meeting.participants.active


// Participants in waiting room

val waitlisted: List<RtkRemoteParticipant> = meeting.participants.waitlisted


// Pinned participant

val pinned: RtkRemoteParticipant? = meeting.participants.pinned


// Participants sharing screen

val screenShares: List<RtkRemoteParticipant> = meeting.participants.screenShares


// Active speaker

val activeSpeaker: RtkRemoteParticipant? = meeting.participants.activeSpeaker


// Total count of participants (including local user if joined)

val totalCount: Int = meeting.participants.totalCount


```

**Accessing Participant Data:**

Kotlin

```

// Get all joined participants

val joinedParticipants = meeting.participants.joined


// Access first participant

val firstParticipant = joinedParticipants.firstOrNull()

firstParticipant?.id // Participant ID (aka peerId)

firstParticipant?.userId // User ID

firstParticipant?.name // Display name

firstParticipant?.picture // Participant picture (if any)

firstParticipant?.customParticipantId // Custom participant ID

firstParticipant?.audioEnabled // Audio state

firstParticipant?.videoEnabled // Video state

firstParticipant?.screenShareEnabled // Screen share state

firstParticipant?.isPinned // Pin state

firstParticipant?.isHost // Host state

firstParticipant?.presetName // Preset name

firstParticipant?.stageStatus // Stage status

firstParticipant?.flags // Participant flags (recorder, hiddenParticipant, webinarHiddenParticipant)


// Get participant video view

firstParticipant?.getVideoView() // Returns a View that renders video stream

firstParticipant?.getScreenShareVideoView() // Returns a View that renders screenshare stream


// Access pagination

val maxNumberOnScreen = meeting.participants.maxNumberOnScreen // Max participants per page

val currentPageNumber = meeting.participants.currentPageNumber // Current page number

val pageCount = meeting.participants.pageCount // Total number of pages

val canGoNextPage = meeting.participants.canGoNextPage // Can navigate to next page

val canGoPreviousPage = meeting.participants.canGoPreviousPage // Can navigate to previous page

meeting.participants.setPage(1) // Switch to specific page


```

**Participant Control Methods:**

Kotlin

```

// Individual participant controls (host only)

firstParticipant?.disableAudio { error -> } // Disable participant's audio

firstParticipant?.disableVideo { error -> } // Disable participant's video

firstParticipant?.kick { error -> } // Remove participant from meeting


// Pin/Unpin participants

val error: HostError? = firstParticipant?.pin() // Pin participant

val error: HostError? = firstParticipant?.unpin() // Unpin participant


// Waiting room management

meeting.participants.acceptWaitingRoomRequest(participantId) // Accept from waiting room

meeting.participants.rejectWaitingRoomRequest(participantId) // Reject from waiting room

meeting.participants.acceptAllWaitingRoomRequests() // Accept all waiting participants


// Bulk operations (host only)

val error: HostError? = meeting.participants.disableAllAudio() // Disable all participants' audio

val error: HostError? = meeting.participants.disableAllVideo() // Disable all participants' video

val error: HostError? = meeting.participants.kickAll() // Remove all participants


// Broadcast custom message

meeting.participants.broadcastMessage("custom-event", mapOf("key" to "value"))


// Cache management

meeting.participants.enableCache() // Enable participant caching

meeting.participants.disableCache() // Disable participant caching


```

**Participant Properties:**

Kotlin

```

participant.id // Participant ID (aka peerId, unique per session)

participant.userId // User ID (persistent across sessions)

participant.name // Display name

participant.picture // Participant picture URL

participant.customParticipantId // Custom participant ID

participant.audioEnabled // Audio state

participant.videoEnabled // Video state

participant.screenShareEnabled // Screen share state

participant.isPinned // Pin state

participant.isHost // Host state

participant.presetName // Preset name

participant.stageStatus // Stage status

participant.flags // Participant flags (recorder, hiddenParticipant, webinarHiddenParticipant)


```

The `meeting.participants` contains lists of all remote participants in the meeting, organized by their state.

**Participant Lists:**

Swift

```

// All participants who have joined

let joined: [RtkRemoteParticipant] = meeting.participants.joined


// Participants with active media

let active: [RtkRemoteParticipant] = meeting.participants.active


// Participants in waiting room

let waitlisted: [RtkRemoteParticipant] = meeting.participants.waitlisted


// Pinned participant

let pinned: RtkRemoteParticipant? = meeting.participants.pinned


// Participants sharing screen

let screenShares: [RtkRemoteParticipant] = meeting.participants.screenShares


// Active speaker

let activeSpeaker: RtkRemoteParticipant? = meeting.participants.activeSpeaker


// Total count of participants (including local user if joined)

let totalCount: Int = meeting.participants.totalCount


```

**Accessing Participant Data:**

Swift

```

// Get all joined participants

let joinedParticipants = meeting.participants.joined


// Access first participant

let firstParticipant = joinedParticipants.first

firstParticipant?.id // Participant ID (aka peerId)

firstParticipant?.userId // User ID

firstParticipant?.name // Display name

firstParticipant?.picture // Participant picture (if any)

firstParticipant?.customParticipantId // Custom participant ID

firstParticipant?.audioEnabled // Audio state

firstParticipant?.videoEnabled // Video state

firstParticipant?.screenShareEnabled // Screen share state

firstParticipant?.isPinned // Pin state

firstParticipant?.isHost // Host state

firstParticipant?.presetName // Preset name

firstParticipant?.stageStatus // Stage status

firstParticipant?.flags // Participant flags (recorder, hiddenParticipant, webinarHiddenParticipant)


// Get participant video view

firstParticipant?.getVideoView() // Returns a UIView that renders video stream

firstParticipant?.getScreenShareVideoView() // Returns a UIView that renders screenshare stream


// Access pagination

let maxNumberOnScreen = meeting.participants.maxNumberOnScreen // Max participants per page

let currentPageNumber = meeting.participants.currentPageNumber // Current page number

let pageCount = meeting.participants.pageCount // Total number of pages

let canGoNextPage = meeting.participants.canGoNextPage // Can navigate to next page

let canGoPreviousPage = meeting.participants.canGoPreviousPage // Can navigate to previous page

meeting.participants.setPage(1) // Switch to specific page


```

**Participant Control Methods:**

Swift

```

// Individual participant controls (host only)

firstParticipant?.disableAudio { error in } // Disable participant's audio

firstParticipant?.disableVideo { error in } // Disable participant's video

firstParticipant?.kick { error in } // Remove participant from meeting


// Pin/Unpin participants

let error: HostError? = firstParticipant?.pin() // Pin participant

let error: HostError? = firstParticipant?.unpin() // Unpin participant


// Waiting room management

meeting.participants.acceptWaitingRoomRequest(participantId) // Accept from waiting room

meeting.participants.rejectWaitingRoomRequest(participantId) // Reject from waiting room

meeting.participants.acceptAllWaitingRoomRequests() // Accept all waiting participants


// Bulk operations (host only)

let error: HostError? = meeting.participants.disableAllAudio() // Disable all participants' audio

let error: HostError? = meeting.participants.disableAllVideo() // Disable all participants' video

let error: HostError? = meeting.participants.kickAll() // Remove all participants


// Broadcast custom message

meeting.participants.broadcastMessage("custom-event", ["key": "value"])


// Cache management

meeting.participants.enableCache() // Enable participant caching

meeting.participants.disableCache() // Disable participant caching


```

**Participant Properties:**

Swift

```

participant.id // Participant ID (aka peerId, unique per session)

participant.userId // User ID (persistent across sessions)

participant.name // Display name

participant.picture // Participant picture URL

participant.customParticipantId // Custom participant ID

participant.audioEnabled // Audio state

participant.videoEnabled // Video state

participant.screenShareEnabled // Screen share state

participant.isPinned // Pin state

participant.isHost // Host state

participant.presetName // Preset name

participant.stageStatus // Stage status

participant.flags // Participant flags (recorder, hiddenParticipant, webinarHiddenParticipant)


```

The `meeting.participants` contains lists of all remote participants in the meeting, organized by their state.

**Participant Lists:**

Dart

```

// All participants who have joined

final joined = meeting.participants.joined; // List<RtkRemoteParticipant>


// Participants with active media

final active = meeting.participants.active; // List<RtkRemoteParticipant>


// Participants in waiting room

final waitlisted = meeting.participants.waitlisted; // List<RtkRemoteParticipant>


// Pinned participant

final pinned = meeting.participants.pinned; // RtkRemoteParticipant?


// Participants sharing screen

final screenshares = meeting.participants.screenshares; // List<RtkRemoteParticipant>


```

**Accessing Participant Data:**

Dart

```

// Get all joined participants

final joinedParticipants = meeting.participants.joined;


// Access first participant

final firstParticipant = joinedParticipants.firstOrNull;

firstParticipant?.id; // Participant ID (aka peerId)

firstParticipant?.userId; // User ID

firstParticipant?.name; // Display name

firstParticipant?.picture; // Participant picture (if any)

firstParticipant?.customParticipantId; // Custom participant ID

firstParticipant?.audioEnabled; // Audio state

firstParticipant?.videoEnabled; // Video state

firstParticipant?.screenShareEnabled; // Screen share state

firstParticipant?.isPinned; // Pin state

firstParticipant?.isHost; // Host state

firstParticipant?.presetName; // Preset name

firstParticipant?.stageStatus; // Stage status

firstParticipant?.flags; // Participant flags (recorder, hiddenParticipant, webinarHiddenParticipant)


// Get participant video view

firstParticipant?.videoView; // Returns a Widget that renders video stream


// Access pagination info

final grid = meeting.participants.grid;

grid.pageCount; // Total number of pages

grid.currentPageNumber; // Current page number

grid.shouldShowPaginator; // Whether to show paginator

grid.isNextPagePossible; // Can navigate to next page

grid.isPreviousPagePossible; // Can navigate to previous page

meeting.participants.setPage(1); // Switch to specific page


```

**Participant Control Methods:**

Dart

```

// Individual participant controls (host only)

firstParticipant?.disableAudio(onResult: (error) {}); // Disable participant's audio

firstParticipant?.disableVideo(onResult: (error) {}); // Disable participant's video

firstParticipant?.kick(onResult: (error) {}); // Remove participant from meeting


// Pin/Unpin participants

final error: HostError? = firstParticipant?.pin(); // Pin participant

final error: HostError? = firstParticipant?.unpin(); // Unpin participant


// Waiting room management

firstParticipant?.acceptWaitListedRequest(participantId); // Accept from waiting room

firstParticipant?.rejectWaitListedRequest(participantId); // Reject from waiting room


// Bulk operations (host only)

meeting.participants.disableAllAudio(onResult: (error) {}); // Disable all participants' audio

meeting.participants.disableAllVideo(onResult: (error) {}); // Disable all participants' video

meeting.participants.kickAll(onResult: (error) {}); // Remove all participants


// Waiting room bulk operations

meeting.participants.acceptWaitlistedParticipant(participant); // Accept specific participant

meeting.participants.rejectWaitlistedParticipant(participant); // Reject specific participant

meeting.participants.acceptAllWaitingRoomRequests(); // Accept all waiting participants


// Broadcast custom message

meeting.participants.broadcastMessage("custom-event", {"key": "value"});


```

**Participant Properties:**

Dart

```

participant.id; // Participant ID (aka peerId, unique per session)

participant.userId; // User ID (persistent across sessions)

participant.name; // Display name

participant.picture; // Participant picture URL

participant.customParticipantId; // Custom participant ID

participant.audioEnabled; // Audio state

participant.videoEnabled; // Video state

participant.screenShareEnabled; // Screen share state

participant.isPinned; // Pin state

participant.isHost; // Host state

participant.presetName; // Preset name

participant.stageStatus; // Stage status

participant.flags; // Participant flags (recorder, hiddenParticipant, webinarHiddenParticipant)


```

The [meeting.participants ↗](https://docs.realtime.cloudflare.com/mobile-core/reference/RTKParticipants) contains maps of all remote participants in the meeting, organized by their state.

Note

`meeting.participants` only contains remote participants. It does not include the local participant. Local participant is available in `meeting.self`.

**Participant Maps:**

JavaScript

```

// All participants who have joined

meeting.participants.joined; // Map of joined participants

meeting.participants.joined.toArray(); // Array of joined participants


// Participants with active media

meeting.participants.active; // Map of participants with active audio/video

meeting.participants.active.toArray(); // Array of participants with active audio/video


// Participants in waiting room

meeting.participants.waitlisted; // Map of waitlisted participants

meeting.participants.waitlisted.toArray(); // Array of waitlisted participants


// Pinned participants

meeting.participants.pinned; // Map of pinned participants

meeting.participants.pinned.toArray(); // Array of pinned participants


```

**Accessing Participant Data:**

JavaScript

```

// Get all joined participants as an array

const joinedParticipants = meeting.participants.joined.toArray();


// Access first participant's IDs

const firstParticipant = joinedParticipants[0];

console.log("First Participant Peer ID:", firstParticipant?.id); // Peer ID (unique per session)

console.log("First Participant User ID:", firstParticipant?.userId); // Participant ID (persistent)

console.log("First Participant Name:", firstParticipant?.name); // Display name

console.log("First Participant Audio Enabled:", firstParticipant?.audioEnabled); // Audio state

console.log("First Participant Video Enabled:", firstParticipant?.videoEnabled); // Video state

console.log(

  "First Participant Screen Share Enabled:",

  firstParticipant?.screenShareEnabled,

); // Screen share state

console.log("First Participant Audio Track:", firstParticipant?.audioTrack); // Audio MediaStreamTrack

console.log("First Participant Video Track:", firstParticipant?.videoTrack); // Video MediaStreamTrack

console.log(

  "First Participant Screen Share Track:",

  firstParticipant?.screenShareTracks,

); // Screen share MediaStreamTrack


// Access participant by peer ID

const participant = meeting.participants.joined.get("peer-id");


// Get count of joined participants

const count = meeting.participants.joined.size();


```

**Participant Properties:**

Each participant object has similar properties to `meeting.self`:

JavaScript

```

participant.id; // Peer ID

participant.userId; // Participant ID

participant.name; // Display name

participant.audioEnabled; // Audio state

participant.videoEnabled; // Video state

participant.screenShareEnabled; // Screen share state

participant.audioTrack; // Audio MediaStreamTrack

participant.videoTrack; // Video MediaStreamTrack

participant.screenShareTrack; // Screen share MediaStreamTrack


```

## Meeting metadata

### `meeting.meta` \- Meeting Metadata

The [meeting.meta ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKMeta) contains information about the meeting room itself.

JavaScript

```

meeting.meta.meetingId; // Meeting identifier

meeting.meta.meetingTitle; // Meeting Title

meeting.meta.meetingStartedTimestamp; // Meeting start time


```

The [meeting.meta ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKMeta) contains information about the meeting room itself.

JavaScript

```

meeting.meta.meetingId; // Meeting identifier

meeting.meta.meetingTitle; // Meeting Title

meeting.meta.meetingStartedTimestamp; // Meeting start time


```

The [meeting.meta ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKMeta) contains information about the meeting room itself.

JavaScript

```

meeting.meta.meetingId; // Meeting identifier

meeting.meta.meetingTitle; // Meeting Title

meeting.meta.meetingStartedTimestamp; // Meeting start time


```

The `meeting.meta` contains information about the meeting room itself.

**Properties:**

Kotlin

```

meeting.meta.meetingId // Meeting identifier

meeting.meta.meetingTitle // Meeting title

meeting.meta.meetingStartedTimestamp // Meeting start time

meeting.meta.meetingType // Meeting type (GROUP_CALL, WEBINAR, or LIVESTREAM)

meeting.meta.meetingConfig // Meeting configuration containing audio and video settings

meeting.meta.meetingState // State of the meeting (RtkMeetingState)

meeting.meta.authToken // User's authentication token for the meeting

meeting.meta.selfActiveTab // Currently active tab for the local participant (ActiveTab?)

meeting.meta.mediaConnectionState // Current state of the media connection (MediaConnectionState)

meeting.meta.socketConnectionState // Current state of the socket connection (SocketConnectionState)


```

**Methods:**

Kotlin

```

// Sync active tab (for plugins or screen share)

meeting.meta.syncTab(

  id = "plugin-id-or-screenshare-id", // Identifier for unique plugin/screen share

  tabType = ActiveTabType.PLUGIN // or ActiveTabType.SCREENSHARE

)


```

The `meeting.meta` contains information about the meeting room itself.

**Properties:**

Swift

```

meeting.meta.meetingId // Meeting identifier

meeting.meta.meetingTitle // Meeting title

meeting.meta.meetingStartedTimestamp // Meeting start time

meeting.meta.meetingType // Meeting type (.groupCall, .webinar, or .livestream)

meeting.meta.meetingConfig // Meeting configuration containing audio and video settings

meeting.meta.meetingState // State of the meeting (RtkMeetingState)

meeting.meta.authToken // User's authentication token for the meeting

meeting.meta.selfActiveTab // Currently active tab for the local participant (ActiveTab?)

meeting.meta.mediaConnectionState // Current state of the media connection (MediaConnectionState)

meeting.meta.socketConnectionState // Current state of the socket connection (SocketConnectionState)


```

**Methods:**

Swift

```

// Sync active tab (for plugins or screen share)

meeting.meta.syncTab(

  id: "plugin-id-or-screenshare-id", // Identifier for unique plugin/screen share

  tabType: .plugin // or .screenshare

)


```

The `meeting.meta` contains information about the meeting room itself.

**Properties:**

Dart

```

meeting.meta.meetingId; // Meeting identifier

meeting.meta.meetingTitle; // Meeting title

meeting.meta.meetingStartedTimeStamp; // Meeting start time

meeting.meta.meetingType; // Meeting type (groupCall, webinar, or livestream)

meeting.meta.activeTab; // Currently active tab for the local participant (ActiveTab?)

meeting.meta.designToken; // Design tokens for UI customization (RtkDesignTokens)


```

**Methods:**

Dart

```

// Sync active tab (for plugins or screen share)

meeting.meta.syncTab(

  "plugin-id-or-screenshare-id", // Identifier for unique plugin/screen share

  RtkActiveTabType.plugin // or RtkActiveTabType.screenshare

);


```

The [meeting.meta ↗](https://docs.realtime.cloudflare.com/mobile-core/reference/RTKMeta) contains information about the meeting room itself.

JavaScript

```

meeting.meta.meetingId; // Meeting identifier

meeting.meta.meetingTitle; // Meeting Title

meeting.meta.meetingStartedTimestamp; // Meeting start time


```

## Chat

### `meeting.chat` \- Chat Messages

The [meeting.chat ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKChat) manages text messages, images, and files shared in the meeting.

JavaScript

```

// Get all chat messages

const messages = meeting.chat.messages;


// Send a text message

await meeting.chat.sendTextMessage("Hello everyone!");


// Send an image

await meeting.chat.sendImageMessage(imageFile);


// Listen to chat messages

console.log("First message:", meeting.chat.messages[0]);


meeting.chat.on("chatUpdate", ({ message, messages }) => {

  console.log(`Received message ${message}`);

  console.log(`All messages in chat: ${messages.join(", ")}`);

});


```

The [meeting.chat ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKChat) manages text messages, images, and files shared in the meeting.

JavaScript

```

// Get all chat messages

const messages = meeting.chat.messages;


// Send a text message

await meeting.chat.sendTextMessage("Hello everyone!");


// Send an image

await meeting.chat.sendImageMessage(imageFile);


// Listen to chat messages

console.log("First message:", meeting.chat.messages[0]);


meeting.chat.on("chatUpdate", ({ message, messages }) => {

  console.log(`Received message ${message}`);

  console.log(`All messages in chat: ${messages.join(", ")}`);

});


```

The [meeting.chat ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKChat) manages text messages, images, and files shared in the meeting.

JavaScript

```

// Get all chat messages

const messages = meeting.chat.messages;


// Send a text message

await meeting.chat.sendTextMessage("Hello everyone!");


// Send an image

await meeting.chat.sendImageMessage(imageFile);


// Listen to chat messages

console.log("First message:", meeting.chat.messages[0]);


meeting.chat.on("chatUpdate", ({ message, messages }) => {

  console.log(`Received message ${message}`);

  console.log(`All messages in chat: ${messages.join(", ")}`);

});


```

The `meeting.chat` manages text messages, images, and files shared in the meeting.

Kotlin

```

// Get all chat messages

val messages = meeting.chat.messages


// Send a text message

val message = "Hello everyone!"

meeting.chat.sendTextMessage(message) // Returns ChatTextError if fails, null if successful


// Send an image

meeting.chat.sendImageMessage(imageUri) { err ->

  // Handle ChatFileError if any

}


// Send a file

meeting.chat.sendFileMessage(fileUri) { err ->

  // Handle ChatFileError if any

}


// Listen to chat messages

meeting.addChatEventListener(object : RtkChatEventListener {

    override fun onChatUpdates(messages: List<ChatMessage>) {

      // Called whenever there is a change in chat messages

    }


    override fun onNewChatMessage(message: ChatMessage) {

      // Called when a new chat message is shared

    }


    override fun onMessageRateLimitReset() {

      // Called when rate limit for sending messages is reset

    }

})


// Handle errors

when (err) {

  is ChatFileError.FileFormatNotAllowed -> {} // File format not allowed

  is ChatFileError.PermissionDenied -> {} // No permission to send file

  is ChatFileError.RateLimitBreached -> {} // Rate limit breached

  is ChatFileError.ReadFailed -> {} // File could not be read

  is ChatFileError.UploadFailed -> {} // File could not be uploaded

  else -> {}

}


```

The `meeting.chat` manages text messages, images, and files shared in the meeting.

Swift

```

// Get all chat messages

let messages = meeting.chat.messages


// Send a text message

let message = "Hello everyone!"

meeting.chat.sendTextMessage(message) // Returns ChatTextError if fails, nil if successful


// Send an image

meeting.chat.sendImageMessage(imageUri) { err in

  // Handle ChatFileError if any

}


// Send a file

meeting.chat.sendFileMessage(fileUri) { err in

  // Handle ChatFileError if any

}


// Listen to chat messages

extension MeetingViewModel: RtkChatEventListener {

    func onChatUpdates(messages: [ChatMessage]) {

        // Called whenever there is a change in chat messages

    }


    func onNewChatMessage(message: ChatMessage) {

        // Called when a new chat message is shared

    }


    func onMessageRateLimitReset() {

        // Called when rate limit for sending messages is reset

    }

}


// Add listener

meeting.addChatEventListener(self)


// Handle errors

switch err {

case .fileFormatNotAllowed:

    // File format not allowed

case .permissionDenied:

    // No permission to send file

case .rateLimitBreached:

    // Rate limit breached

case .readFailed:

    // File could not be read

case .uploadFailed:

    // File could not be uploaded

default:

    break

}


```

The `meeting.chat` manages text messages, images, and files shared in the meeting.

Dart

```

// Get all chat messages

final messages = meeting.chat.messages;


// Send a text message

final message = "Hello everyone!";

meeting.chat.sendTextMessage(message); // Returns ChatTextError if fails, null if successful


// Send an image

meeting.chat.sendImageMessage(imageUri, (err) {

  // Handle ChatFileError if any

});


// Send a file

meeting.chat.sendFileMessage(fileUri, (err) {

  // Handle ChatFileError if any

});


// Listen to chat messages

class ChatListener extends RtkChatEventListener {

  @override

  void onChatUpdates(List<ChatMessage> messages) {

    // Called whenever there is a change in chat messages

  }


  @override

  void onNewChatMessage(ChatMessage message) {

    // Called when a new chat message is shared

  }


  @override

  void onMessageRateLimitReset() {

    // Called when rate limit for sending messages is reset

  }

}


// Add listener

final chatListener = ChatListener();

meeting.addChatEventListener(chatListener);


// Handle errors

switch (err.runtimeType) {

  case ChatFileError.FileFormatNotAllowed:

    // File format not allowed

    break;

  case ChatFileError.PermissionDenied:

    // No permission to send file

    break;

  case ChatFileError.RateLimitBreached:

    // Rate limit breached

    break;

  case ChatFileError.ReadFailed:

    // File could not be read

    break;

  case ChatFileError.UploadFailed:

    // File could not be uploaded

    break;

  default:

    break;

}


```

The [meeting.chat ↗](https://docs.realtime.cloudflare.com/mobile-core/reference/RTKChat) manages text messages, images, and files shared in the meeting.

JavaScript

```

// Get all chat messages

const messages = meeting.chat.messages;


// Send a text message

await meeting.chat.sendTextMessage("Hello everyone!");


// Send an image

await meeting.chat.sendImageMessage(imageFile);


// Listen to chat messages

console.log("First message:", meeting.chat.messages[0]);


meeting.chat.on("chatUpdate", ({ message, messages }) => {

  console.log(`Received message ${message}`);

  console.log(`All messages in chat: ${messages.join(", ")}`);

});


```

## Polls

### `meeting.polls` \- Polls

The [meeting.polls ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKPolls) manages polls in the meeting.

JavaScript

```

// Get all polls

const polls = meeting.polls.items;


// Create a poll

await meeting.polls.create(

  "What time works best?", //question

  ["9 AM", "2 PM", "5 PM"], // options

  false, // anonymous

  false, // hideVotes

);


// Vote on a poll

await meeting.polls.vote(pollId, optionIndex); // Retrieve pollId from meeting.polls.items


```

The [meeting.polls ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKPolls) manages polls in the meeting.

JavaScript

```

// Get all polls

const polls = meeting.polls.items;


// Create a poll

await meeting.polls.create(

  "What time works best?", //question

  ["9 AM", "2 PM", "5 PM"], // options

  false, // anonymous

  false, // hideVotes

);


// Vote on a poll

await meeting.polls.vote(pollId, optionIndex); // Retrieve pollId from meeting.polls.items


```

The [meeting.polls ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKPolls) manages polls in the meeting.

JavaScript

```

// Get all polls

const polls = meeting.polls.items;


// Create a poll

await meeting.polls.create(

  "What time works best?", //question

  ["9 AM", "2 PM", "5 PM"], // options

  false, // anonymous

  false, // hideVotes

);


// Vote on a poll

await meeting.polls.vote(pollId, optionIndex); // Retrieve pollId from meeting.polls.items


```

The `meeting.polls` manages polls in the meeting.

Kotlin

```

// Get all polls

val polls = meeting.polls.items


// Create a poll

val pollsCreateError: PollsError? = meeting.polls.create(

  question = "What time works best?",

  options = listOf("9 AM", "2 PM", "5 PM"),

  anonymous = false,

  hideVotes = false

)


// Vote on a poll

val poll: Poll = meeting.polls.items.first()

val selectedPollOption: PollOption = poll.options.first()

val pollsError: PollsError? = meeting.polls.vote(poll.id, selectedPollOption)


// Listen to poll updates

meeting.addPollsEventListener(object : RtkPollsEventListener {

    override fun onNewPoll(poll: Poll) {

      // Called when a new poll is created

    }


    override fun onPollUpdate(poll: Poll) {

      // Called when a poll is updated (votes, details changed)

    }


    override fun onPollUpdates(pollItems: List<Poll>) {

      // Called when there are updates to the list of polls

    }

})


```

The `meeting.polls` manages polls in the meeting.

Swift

```

// Get all polls

let polls = meeting.polls.items


// Create a poll

let pollsCreateError: PollsError? = meeting.polls.create(

  question: "What time works best?",

  options: ["9 AM", "2 PM", "5 PM"],

  anonymous: false,

  hideVotes: false

)


// Vote on a poll

let poll: Poll = meeting.polls.items.first

let selectedPollOption: PollOption = poll.options.first

let pollsError: PollsError? = meeting.polls.vote(poll.id, selectedPollOption)


// Listen to poll updates

extension MeetingViewModel: RtkPollsEventListener {

    func onNewPoll(poll: Poll) {

        // Called when a new poll is created

    }


    func onPollUpdate(poll: Poll) {

        // Called when a poll is updated (votes, details changed)

    }


    func onPollUpdates(pollItems: [Poll]) {

        // Called when there are updates to the list of polls

    }

}


// Add listener

meeting.addPollsEventListener(self)


```

The `meeting.polls` manages polls in the meeting.

Dart

```

// Get all polls

final polls = meeting.polls.items;


// Create a poll

final pollsCreateError = meeting.polls.create(

  question: "What time works best?",

  options: ["9 AM", "2 PM", "5 PM"],

  anonymous: false,

  hideVotes: false

);


// Vote on a poll

final poll = meeting.polls.items.first;

final selectedPollOption = poll.options.first;

final pollsError = meeting.polls.vote(poll.id, selectedPollOption);


// Listen to poll updates

class PollsListener extends RtkPollsEventListener {

  @override

  void onNewPoll(Poll poll) {

    // Called when a new poll is created

  }


  @override

  void onPollUpdate(Poll poll) {

    // Called when a poll is updated (votes, details changed)

  }


  @override

  void onPollUpdates(List<Poll> pollItems) {

    // Called when there are updates to the list of polls

  }

}


// Add listener

final pollsListener = PollsListener();

meeting.addPollsEventListener(pollsListener);


```

The [meeting.polls ↗](https://docs.realtime.cloudflare.com/mobile-core/reference/RTKPolls) manages polls in the meeting.

JavaScript

```

// Get all polls

const polls = meeting.polls.items;


// Create a poll

await meeting.polls.create(

  "What time works best?", //question

  ["9 AM", "2 PM", "5 PM"], // options

  false, // anonymous

  false, // hideVotes

);


// Vote on a poll

await meeting.polls.vote(pollId, optionIndex); // Retrieve pollId from meeting.polls.items


```

## Plugins

### `meeting.plugins` \- Plugins

The [meeting.plugins ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKPlugins) manages meeting plugins (collaborative apps).

JavaScript

```

// Get all available plugins

const plugins = meeting.plugins.all;


// Activate a plugin

await meeting.plugins.activate(pluginId);


// Deactivate a plugin

await meeting.plugins.deactivate();


```

The [meeting.plugins ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKPlugins) manages meeting plugins (collaborative apps).

JavaScript

```

// Get all available plugins

const plugins = meeting.plugins.all;


// Activate a plugin

await meeting.plugins.activate(pluginId);


// Deactivate a plugin

await meeting.plugins.deactivate();


```

The [meeting.plugins ↗](https://docs.realtime.cloudflare.com/web-core/reference/RTKPlugins) manages meeting plugins (collaborative apps).

JavaScript

```

// Get all available plugins

const plugins = meeting.plugins.all;


// Activate a plugin

await meeting.plugins.activate(pluginId);


// Deactivate a plugin

await meeting.plugins.deactivate();


```

The `meeting.plugins` manages meeting plugins (collaborative apps).

Kotlin

```

// Get all available plugins

val plugins = meeting.plugins.all


// Get active plugins

val activePlugins = meeting.plugins.active


// Activate a plugin

meeting.plugins.all.first().activate()


// Deactivate a plugin

meeting.plugins.active.first().deactivate()


// Get plugin view

val pluginView = meeting.plugins.active.first().getPluginView() // Returns a WebView


// Send data to a plugin

val pluginId = ""

val plugin = meeting.plugins.active.firstOrNull { it.id == pluginId }

plugin?.sendData(

  eventName = "my-custom-event",

  data = "Hello world"

)


// Upload file to a plugin

plugin?.uploadFile(

  RtkPluginFile(

    resultCode = <activity-resultCode>,

    data = Intent() // Intent with the file data

  )

)


// Listen to plugin events

val pluginsEventListener = object : RtkPluginsEventListener {

  override fun onPluginActivated(plugin: RtkPlugin) {

    // Called when a plugin is activated

  }


  override fun onPluginDeactivated(plugin: RtkPlugin) {

    // Called when a plugin is deactivated

  }


  override fun onPluginMessage(plugin: RtkPlugin, eventName: String, data: Any?) {

    // Called when a plugin sends a message

  }


  override fun onPluginFileRequest(plugin: RtkPlugin) {

    // Called when a plugin requests a file

  }

}


meeting.addPluginsEventListener(pluginsEventListener)


```

The `meeting.plugins` manages meeting plugins (collaborative apps).

Swift

```

// Get all available plugins

let plugins = meeting.plugins.all


// Get active plugins

let activePlugins = meeting.plugins.active


// Activate a plugin

meeting.plugins.all.first?.activate()


// Deactivate a plugin

meeting.plugins.active.first?.deactivate()


// Get plugin view

let pluginView = meeting.plugins.active.first?.getPluginView() // Returns a WKWebView


// Send data to a plugin

let pluginId = ""

let plugin = meeting.plugins.active.first { $0.id == pluginId }

plugin?.sendData(

  eventName: "my-custom-event",

  data: "Hello world"

)


// Listen to plugin events

extension MeetingViewModel: RtkPluginsEventListener {

    func onPluginActivated(plugin: RtkPlugin) {

        // Called when a plugin is activated

    }


    func onPluginDeactivated(plugin: RtkPlugin) {

        // Called when a plugin is deactivated

    }


    func onPluginMessage(plugin: RtkPlugin, eventName: String, data: Any?) {

        // Called when a plugin sends a message

    }


    func onPluginFileRequest(plugin: RtkPlugin) {

        // Called when a plugin requests a file

    }

}


// Add listener

meeting.addPluginsEventListener(self)


```

The `meeting.plugins` manages meeting plugins (collaborative apps).

Dart

```

// Get all available plugins

final plugins = meeting.plugins.all;


// Get active plugins

final activePlugins = meeting.plugins.active;


// Activate a plugin

meeting.plugins.all.first.activate();


// Deactivate a plugin

meeting.plugins.active.first.deactivate();


// Get plugin view

final pluginView = meeting.plugins.active.first.getPluginView(); // Returns a Widget


// Send data to a plugin

final pluginId = "";

final plugin = meeting.plugins.active.firstWhere((p) => p.id == pluginId, orElse: () => null);

plugin?.sendData(

  eventName: "my-custom-event",

  data: "Hello world"

);


// Listen to plugin events

class PluginsListener extends RtkPluginsEventListener {

  @override

  void onPluginActivated(RtkPlugin plugin) {

    // Called when a plugin is activated

  }


  @override

  void onPluginDeactivated(RtkPlugin plugin) {

    // Called when a plugin is deactivated

  }


  @override

  void onPluginMessage(RtkPlugin plugin, String eventName, dynamic data) {

    // Called when a plugin sends a message

  }


  @override

  void onPluginFileRequest(RtkPlugin plugin) {

    // Called when a plugin requests a file

  }

}


// Add listener

final pluginsListener = PluginsListener();

meeting.addPluginsEventListener(pluginsListener);


```

The [meeting.plugins ↗](https://docs.realtime.cloudflare.com/mobile-core/reference/RTKPlugins) manages meeting plugins (collaborative apps).

JavaScript

```

// Get all available plugins

const plugins = meeting.plugins.all;


// Activate a plugin

await meeting.plugins.activate(pluginId);


// Deactivate a plugin

await meeting.plugins.deactivate();


```

## AI features

### `meeting.ai` \- AI Features

The `meeting.ai` provides access to AI-powered features like live transcription.

JavaScript

```

// Access live transcriptions

meeting.ai.transcripts; // Shows only when transcription is enabled in Preset


```

The `meeting.ai` provides access to AI-powered features like live transcription.

JavaScript

```

// Access live transcriptions

meeting.ai.transcripts; // Shows only when transcription is enabled in Preset


```

The `meeting.ai` provides access to AI-powered features like live transcription.

JavaScript

```

// Access live transcriptions

meeting.ai.transcripts; // Shows only when transcription is enabled in Preset


```

The `meeting.ai` provides access to AI-powered features like live transcription.

JavaScript

```

// Access live transcriptions

meeting.ai.transcripts; // Shows only when transcription is enabled in Preset


```

`meeting.ai` is not supported on this mobile platform.

`meeting.ai` is not supported on this mobile platform.

`meeting.ai` is not supported on this mobile platform.

## Methods

Join or leave a meeting room:

JavaScript

```

// Join the meeting room

await meeting.join(); // Emits a `roomJoined` event on `meeting.self` when successful


// Leave the meeting room

await meeting.leave();


```

JavaScript

```

// Join the meeting room

await meeting.join(); // Emits a `roomJoined` event on `meeting.self` when successful


// Leave the meeting room

await meeting.leave();


```

JavaScript

```

// Join the meeting room

await meeting.join(); // Emits a `roomJoined` event on `meeting.self` when successful


// Leave the meeting room

await meeting.leave();


```

Kotlin

```

// Join the meeting room

meeting.joinRoom(

  onSuccess = {

    // Room Joined

  },

  onFailure = { err ->

    // Handle error

  }

)


// Leave the meeting room

meeting.leave(

  onSuccess = {

    // Room Left

  },

  onFailure = { err ->

    // Handle error

  }

)


```

Swift

```

// Join the meeting room

meeting.joinRoom(

  onSuccess: {

    // Room Joined

  },

  onFailure: { err in

    // Handle error

  }

)


// Leave the meeting room

meeting.leave(

  onSuccess: {

    // Room Left

  },

  onFailure: { err in

    // Handle error

  }

)


```

Dart

```

// Join the meeting room

meeting.joinRoom(

  onSuccess: () {

    // Room Joined

  },

  onFailure: (err) {

    // Handle error

  }

);


// Leave the meeting room

meeting.leave(

  onSuccess: () {

    // Room Left

  },

  onFailure: (err) {

    // Handle error

  }

);


```

JavaScript

```

// Join the meeting room

await meeting.join(); // Emits a `roomJoined` event on `meeting.self` when successful


// Leave the meeting room

await meeting.leave();


```

## Understanding IDs

RealtimeKit uses two types of identifiers for participants:

* **Session ID (`id`)**: Unique identifier for each connection to a meeting. Changes every time a participant joins a new session. On Web platforms, this is called "Peer ID" and stored in `meeting.self.id` or `participant.id`. On mobile platforms, this is called "Participant ID" and stored in `meeting.localUser.id` or `participant.id`.
* **User ID (`userId`)**: Persistent identifier for a participant across multiple sessions. Remains the same when a user reconnects. This is stored in `meeting.self.userId` (Web) or `meeting.localUser.userId` (Mobile), and `participant.userId` for remote participants.

**When to use each:**

* Use `userId` when you need to track the same user across different sessions or reconnections (for example, saving user preferences or permissions)
* Use `id` when working with the current session's connections (for example, managing active video streams or real-time participant states)

## Best Practices

* **Listen to events instead of polling**: The meeting object emits events when state changes occur. Subscribe to these events rather than continuously checking property values.
* **Work with participant collections**: On Web platforms, use `toArray()` to convert participant maps to arrays. On mobile platforms, participant collections are already lists that you can iterate through directly.
* **Check connection state**: Always check `roomJoined` (or `meeting.localUser.roomJoined` on mobile) before accessing properties or calling methods that require an active session.
* **Handle errors gracefully**: Many methods accept error callbacks. Always implement proper error handling to provide a good user experience.

## Next Steps

Now that you understand the meeting object structure, you can use it to build custom meeting experiences. The UI Kit components internally use this same meeting object to provide ready-to-use interfaces. In the next guide, we'll show you how to combine UI Kit components with direct meeting object access to create your own custom UI.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/meeting-object-explained/","name":"Meeting Object Explained"}}]}
```

---

---
title: Polls
description: This guide explains how to create, vote on, and interact with polls in a meeting using Cloudflare RealtimeKit.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/polls.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Polls

This guide explains how to create, vote on, and interact with polls in a meeting using Cloudflare RealtimeKit.

WebMobile

ReactWeb ComponentsAngular

## Introduction

The meetings polls object can be accessed using `meeting.polls`. It provides methods to create polls, vote, and more.

JavaScript

```

console.log("Polls object:", meeting.polls);


```

The `meeting.polls.items` property returns an array of all polls created in a meeting, where each element is an object of type `Poll`.

JavaScript

```

console.log("All polls:", meeting.polls.items);


```

The meetings polls object can be accessed using `meeting.polls`. It provides methods to create polls, vote, and more.

```

console.log("Polls object:", meeting.polls);


```

The `meeting.polls.items` property returns an array of all polls created in a meeting, where each element is an object of type `Poll`.

```

console.log("All polls:", meeting.polls.items);


```

You can access the polls functionality in a meeting using the `meeting.polls` object. This object provides methods to create polls, vote, and perform other poll-related actions.

To retrieve all polls created during a meeting, use `meeting.polls.items`. This returns an array where each element is an object of type `com.cloudflare.realtimekit.polls.Poll`.

The meetings polls object can be accessed using `meeting.polls`. It provides methods to create polls, vote, and more.

`meeting.polls.items` returns an array of all polls created in a meeting, where each element is an object of type `Poll`.

The meetings polls object can be accessed using `meeting.polls`. It provides methods to create polls, vote, and more.

`meeting.polls.items` returns an array of all polls created in a meeting, where each element is an object of type `Poll`.

The meetings polls object can be accessed using `meeting.polls`. It provides methods to create polls, vote, and more.

`meeting.polls.items` returns an array of all polls created in a meeting, where each element is an object of type `Poll`.

### Poll Type

The `Poll` type is defined as follows:

TypeScript

```

interface Poll {

  id: string;

  question: string;

  options: PollOption[];

  anonymous: boolean;

  hideVotes: boolean;

  createdBy: string;

  createdByUserId: string;

  voted: string[]; // stores participant ID

}


interface PollOption {

  text: string;

  votes: {

    id: string; // stores participant ID

    name: string;

  }[];

  count: number;

}


```

The `Poll` type is defined as follows:

TypeScript

```

interface Poll {

  id: string;

  question: string;

  options: PollOption[];

  anonymous: boolean;

  hideVotes: boolean;

  createdBy: string;

  createdByUserId: string;

  voted: string[]; // stores participant ID

}


interface PollOption {

  text: string;

  votes: {

    id: string; // stores participant ID

    name: string;

  }[];

  count: number;

}


```

The `Poll` type represents a poll within a meeting:

Kotlin

```

class Poll(

  val id: String,

  val question: String,

  val anonymous: Boolean,

  val hideVotes: Boolean,

  val createdBy: String,

  val options: List<PollOption>,

  val voted: List<String>,

)


```

Each poll contains a list of `PollOption` objects, representing the available options for that poll.

Every `PollOption` includes a list of `PollVote` objects, where each vote contains the voter's `id` and `name`.

Kotlin

```

class PollOption(

  val text: String,

  val votes: List<PollVote>,

  val count: Int

)


```

Kotlin

```

class PollVote(

  val id: String,

  val name: String

)


```

The `Poll` type is defined as follows:

Swift

```

class Poll {

  let id: String

  let question: String

  let anonymous: Bool

  let hideVotes: Bool

  let createdBy: String

  let options: [PollOption]

  let voted: [String]

}


```

The type `Poll` is the main class for any poll in RealtimeKit. It also contains list of `PollOption` which are options for a given poll. And every `PollOption` has list of votes inside of it. Votes are objects of class `PollVote` which internally has id and name of the vote.

Swift

```

class PollOption {

  let text: String

  let votes: [PollVote]

  let count: Int

}


class PollVote {

  let id: String

  let name: String

}


```

The `Poll` type is defined as follows:

Dart

```

class Poll {

  final String id;

  final String question;

  final bool anonymous;

  final bool hideVotes;

  final String createdBy;

  final List<PollOption> options;

  final List<String> voted;

}


```

The `Poll` class has the following properties:

* `id`: Unique ID assigned to each poll.
* `question`: Question of the poll.
* `anonymous`: To hide the votes of each user even after completion. (false by default)
* `hideVotes`: Hide votes until the voting is complete. (enabled if anonymous is enabled)
* `createdBy`: Name of creator the poll.
* `options`: Array of `PollOption` object, contains all the options to the poll question.
* `voted`: Array of String which contains User IDs that have voted.

The type `Poll` represents a poll in a RealtimeKit meeting. It also contains list of `PollOption` which are options for a given poll. And every `PollOption` has list of votes inside of it. Votes are objects of class `PollVote` which internally has id and name of the vote.

Dart

```

class PollOption(

  final String text;   // Option text.

  final List<PollVote> votes;   // List of votes.

  final int count;    // Number of votes.

);


class PollVote {

  final String id;    // ID of the voter.

  final String name;  // Name of the voter.

}


```

The `Poll` type is defined as follows:

TypeScript

```

interface Poll {

  id: string;

  question: string;

  options: PollOption[];

  anonymous: boolean;

  hideVotes: boolean;

  createdBy: string;

  createdByUserId: string;

  voted: string[]; // stores participant ID

}


interface PollOption {

  text: string;

  votes: {

    id: string; // stores participant ID

    name: string;

  }[];

  count: number;

}


```

## Creating a Poll

A new poll can be created using the `create` method from the `meeting.polls` object. The `meeting.polls.create()` method accepts the following parameters:

* `question` (string) - The poll question
* `options` (string\[\]) - Array of poll options
* `anonymous` (boolean) - Whether votes are anonymous
* `hideVotes` (boolean, optional) - Whether to hide vote counts

The following snippet creates a poll where votes are anonymous:

JavaScript

```

await meeting.polls.create(

  "Are you an early bird or a night owl?",

  ["Early bird", "Night owl"],

  true,

);


```

A new poll can be created using the `create` method from the `meeting.polls` object. The `meeting.polls.create()` method accepts the following parameters:

* `question` (string) - The poll question
* `options` (string\[\]) - Array of poll options
* `anonymous` (boolean) - Whether votes are anonymous
* `hideVotes` (boolean, optional) - Whether to hide vote counts

The following snippet creates a poll where votes are anonymous:

```

await meeting.polls.create(

  "Are you an early bird or a night owl?",

  ["Early bird", "Night owl"],

  true,

);


```

To create a new poll, use the `create` method available on the `meeting.polls` object. The `meeting.polls.create()` function requires the following parameters:

| Param     | Type         | Required | Description                                |
| --------- | ------------ | -------- | ------------------------------------------ |
| question  | String       | yes      | The question that is to be voted for.      |
| options   | List<String> | yes      | The options of the poll.                   |
| anonymous | Boolean      | yes      | If true, the poll votes are anonymous.     |
| hideVotes | Boolean      | yes      | If true, the votes on the poll are hidden. |

The following snippet creates a poll where votes are anonymous.

Kotlin

```

val pollsCreateError: PollsError? = meeting.polls.create(

  question = "Are you an early bird or a night owl?",

  options = listOf("Early bird", "Night owl"),

  anonymous = true,

  hideVotes = false

)


```

A new poll can be created using the `create` method from the `meeting.polls` object. The `meeting.polls.createPoll()` method accepts the following parameters:

| Param     | Type       | Default Value | Required | Description                                |
| --------- | ---------- | ------------- | -------- | ------------------------------------------ |
| question  | string     | \-            | yes      | The question that is to be voted for.      |
| options   | string\[\] | \-            | yes      | The options of the poll.                   |
| anonymous | boolean    | \-            | no       | If true, the poll votes are anonymous.     |
| hideVotes | boolean    | \-            | no       | If true, the votes on the poll are hidden. |

The following snippet creates a poll where votes are anonymous.

Swift

```

let pollsCreateError: PollsError? = meeting.polls.createPoll(

    question: "Are you an early bird or a night owl?",

    options: ["Early bird", "Night owl"],

    anonymous: true,

    hideVotes: false

)


```

A new poll can be created using the `create` method from the `meeting.polls` object. The `meeting.polls.create(...)` method accepts the following parameters:

| Param     | Type         | Default Value | Required | Description                                |
| --------- | ------------ | ------------- | -------- | ------------------------------------------ |
| question  | String       | \-            | yes      | The question that is to be voted for.      |
| options   | List<String> | \-            | yes      | The options of the poll.                   |
| anonymous | bool         | \-            | yes      | If true, the poll votes are anonymous.     |
| hideVotes | bool         | \-            | yes      | If true, the votes on the poll are hidden. |

The following snippet creates a poll where votes are anonymous.

Dart

```

meeting.polls.create(

    question: "Are you an early bird or a night owl?",

    options: ["Early bird", "Night owl"],

    anonymous: true,

    hideVotes: false,

);


```

A new poll can be created using the `create` method from the `meeting.polls` object. The `meeting.polls.create()` method accepts the following parameters:

| Param     | Type       | Default Value | Required | Description                                |
| --------- | ---------- | ------------- | -------- | ------------------------------------------ |
| question  | string     | \-            | yes      | The question that is to be voted for.      |
| options   | string\[\] | \-            | yes      | The options of the poll.                   |
| anonymous | boolean    | false         | no       | If true, the poll votes are anonymous.     |
| hideVotes | boolean    | false         | no       | If true, the votes on the poll are hidden. |

The following snippet creates a poll where votes are anonymous.

TypeScript

```

await meeting.poll.create(

  "Are you an early bird or a night owl?",

  ["Early bird", "Night owl"],

  true,

);


```

## Voting on a Poll

The `meeting.polls.vote()` method can be used to register a vote on a poll. It accepts the following parameters:

* `pollId` (string) - The ID of the poll
* `optionIndex` (number) - The index of the selected option

The following snippet votes for the first option on the first poll created in the meeting:

JavaScript

```

const poll = meeting.polls.items[0];

await meeting.polls.vote(poll.id, 0);


```

The `meeting.polls.vote()` method can be used to register a vote on a poll. It accepts the following parameters:

* `pollId` (string) - The ID of the poll
* `optionIndex` (number) - The index of the selected option

The following snippet votes for the first option on the first poll created in the meeting:

```

const poll = meeting.polls.items[0];

await meeting.polls.vote(poll.id, 0);


```

To register a vote on a poll, use the `meeting.polls.vote()` method. This method requires the following parameters:

| Param       | Type       | Default Value | Required | Description                  |
| ----------- | ---------- | ------------- | -------- | ---------------------------- |
| pollMessage | Poll       | \-            | yes      | The poll message to vote on. |
| pollOption  | PollOption | \-            | yes      | The option to vote for.      |

The following snippet votes for the first option on the first poll created in the meeting.

Kotlin

```

val poll: Poll = meeting.polls.items.first()

val selectedPollOption: PollOption = poll.options.first()


val pollsError: PollsError? = meeting.polls.vote(poll.id, selectedPollOption)


```

The `meeting.polls.vote()` method can be used to register a vote on a poll. It accepts the following parameters:

| Param       | Type       | Default Value | Required | Description                  |
| ----------- | ---------- | ------------- | -------- | ---------------------------- |
| pollMessage | Poll       | \-            | yes      | The poll message to vote on. |
| pollOption  | PollOption | \-            | yes      | The option to vote for.      |

The following snippet votes for the first option on the first poll created in the meeting.

Swift

```

let poll: Poll = meeting.polls.items[0]

let selectedPollOption: PollOption = poll.options[0]


meeting.poll.vote(poll, selectedPollOption)


```

The `meeting.polls.vote()` method can be used to register a vote on a poll. It accepts the following parameters:

| Param       | Type       | Default Value | Required | Description                                                |
| ----------- | ---------- | ------------- | -------- | ---------------------------------------------------------- |
| pollMessage | Poll       | \-            | yes      | Contains all the poll properties (question, options, etc.) |
| pollOption  | PollOption | yes           | yes      | Option on which the user voted                             |

The following snippet votes for the first option on the first poll created in the meeting.

Dart

```

final poll = meeting.polls.items[0];

final selectedPollOption = poll.options[0];


meeting.polls.vote(poll: poll, pollOption: selectedPollOption);


```

The `meeting.polls.vote()` method can be used to register a vote on a poll. It accepts the following parameters:

| Param | Type   | Default Value | Required | Description                                |
| ----- | ------ | ------------- | -------- | ------------------------------------------ |
| id    | string | \-            | yes      | The ID of the poll that is to be voted on. |
| index | number | \-            | yes      | The index of the option.                   |

The following snippet votes for the first option on the first poll created in the meeting.

TypeScript

```

const poll = meeting.polls.items[0];

await meeting.poll.vote(poll.id, 0);


```

## Other Poll Functions

### View Poll Results

The total votes on a poll can be accessed in the following manner:

JavaScript

```

const poll = meeting.polls.items[0];

const votes = poll.voted;


```

`votes` is an array of participant IDs (`meeting.participant.id`).

The total votes on a poll option can be accessed in the following manner:

JavaScript

```

const poll = meeting.polls.items[0];

const options = poll.options;


```

`options` returns an array of objects, where each object is of type `PollOption`.

The total votes on a poll can be accessed in the following manner:

```

const poll = meeting.polls.items[0];

const votes = poll.voted;


```

`votes` is an array of participant IDs (`meeting.participant.id`).

The total votes on a poll option can be accessed in the following manner:

```

const poll = meeting.polls.items[0];

const options = poll.options;


```

`options` returns an array of objects, where each object is of type `PollOption`.

The total votes on a poll can be accessed in the following manner:

Kotlin

```

val poll = meeting.polls.items[0]

val votes = poll.voted


```

`votes` is an array of participant IDs (`meeting.participant.id`).

The total votes on a poll option can be accessed in the following manner:

Kotlin

```

val poll = meeting.polls.items[0]

val options = poll.options


```

`options` returns an array of objects, where each object is of type `PollOption`.

The total votes on a poll can be accessed in the following manner:

Swift

```

let poll = meeting.polls.items[0]

let votes = poll.voted


```

`votes` is an array of participant IDs (`meeting.participant.id`).

The total votes on a poll option can be accessed in the following manner:

Swift

```

let poll = meeting.polls.items[0]

let options = poll.options


```

`options` returns an array of objects, where each object is of type `PollOption`.

The total votes on a poll can be accessed in the following manner:

Dart

```

final poll = meeting.polls.items.first;

final votes = poll.voted;


```

`votes` is an array of participant IDs (`meeting.participant.id`).

The total votes on a poll option can be accessed in the following manner:

Dart

```

final poll = meeting.polls.items.first;

final options = poll.options;


```

`options` returns an array of objects, where each object is of type `PollOption`.

The total votes on a poll can be accessed in the following manner:

TypeScript

```

const poll = meeting.polls.items[0];

const votes = poll.voted;


```

`votes` is an array of participant IDs (`meeting.participant.id`).

The total votes on a poll option can be accessed in the following manner:

TypeScript

```

const poll = meeting.polls.items[0];

const options = poll.options;


```

`options` returns an array of objects, where each object is of type `PollOption`.

### Get Notified When a Poll is Created or Updated

An event is fired each time `meeting.polls.items` is updated or created. You can listen for this to get the updated list of polls. The response object contains the following properties:

* `polls` \- List of all polls
* `newPoll` \- A boolean variable which is `true` when a new poll has been created

JavaScript

```

meeting.polls.on("pollsUpdate", ({ polls, newPoll }) => {

  console.log("Polls updated:", polls);

  console.log("Is new poll:", newPoll);

});


```

An event is fired each time `meeting.polls.items` is updated or created. You can listen for this to get the updated list of polls. The response object contains the following properties:

* `polls` \- List of all polls
* `newPoll` \- A boolean variable which is `true` when a new poll has been created

```

meeting.polls.on("pollsUpdate", ({ polls, newPoll }) => {

  console.log("Polls updated:", polls);

  console.log("Is new poll:", newPoll);

});


```

Alternatively, you can use React hooks to listen for poll updates:

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";


// useRealtimeKitSelector hook only works when `RealtimeKitProvider` is used.

const polls = useRealtimeKitSelector((m) => m.polls.items);


```

An event is fired each time `meeting.polls.items` is updated or created. You can listen for this to get the updated list of polls. The response object contains the following properties:

* `polls` \- List of all polls
* `newPoll` \- A boolean variable which is `true` when a new poll has been created

TypeScript

```

meeting.polls.on("pollsUpdate", ({ polls, newPoll }) => {

  console.log(polls, newPoll);

});


```

To receive updates about new polls or poll changes during a meeting, implement the `RtkPollsEventListener` interface. Register your listener using `meeting.addPollsEventListener(rtkPollsEventListener)`.

The `onNewPoll()` method is called whenever a new poll is created in the meeting.

The `onPollUpdate()` method is invoked when a specific poll is updated, such as when participants vote or poll details change. The `onPollUpdates()` method is called when there are updates to the list of polls, including new polls being created or multiple polls being updated at once. Use these callbacks to keep your poll UI in sync with the latest poll data.

Kotlin

```

meeting.addPollsEventListener(object : RtkPollsEventListener {

    override fun onNewPoll(poll: Poll) {

    }


    override fun onPollUpdate(poll: Poll) {

    }


    override fun onPollUpdates(pollItems: List<Poll>) {

    }

  }

)


```

To be able to receive new poll messages you need to implement a method `onPollUpdates()` method from callback `RtkPollsEventListener`. You can subscribe to this events by calling `meeting.addPollsEventListener(meetingViewModel)`

Swift

```

extension MeetingViewModel: RtkPollsEventListener {

  func onNewPoll(poll: Poll) {

    // code to handle new poll

  }


  func onPollUpdates(pollItems: [Poll]) {

    // code to handle polls and their vote updates.

  }


  func onPollUpdate(poll: Poll) {}

}


```

To be able to receive new poll messages you need to implement a method `onPollUpdates()` method from callback `RtkPollsEventListener`:

To get poll updates, listen to `onPollUpdates()` callback:

Dart

```

class PollEventsListener extends RtkPollsEventListener {

  @override

  void onPollUpdates(List<Poll> pollItems) {

    /// code to handle polls

  }


  @override

  void onNewPoll(Poll poll) {

    /// code to handle new poll

  }

}


```

You can subscribe to these events as follows:

Dart

```

meeting.addPollsEventListener(PollEventsListener());


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/polls/","name":"Polls"}}]}
```

---

---
title: Remote Participants
description: This guide explains how to access participant data, display videos, handle events, and manage participant permissions in your RealtimeKit meetings.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/remote-participants/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Remote Participants

This guide explains how to access participant data, display videos, handle events, and manage participant permissions in your RealtimeKit meetings.

Prerequisites

This page assumes you've already initialized the SDK and understand the meeting object structure. Refer to [Initialize SDK](https://developers.cloudflare.com/realtime/realtimekit/core/) and [Meeting Object Explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) if needed.

WebMobile

ReactWeb ComponentsAngular

The participant object contains all information related to a particular participants, including information about the grid and each participants media streams, name, and state variables. It is accessible via `meeting.participants`.

### Properties

#### Metadata properties

* `id` \- The `participantId` of the participant (aka `peerId`)
* `userId` \- The `userId` of the participant
* `name` \- The participant's name
* `picture` \- The participant's picture (if any)
* `customParticipantId` \- An arbitrary ID that can be set to identify the participant
* `isPinned` \- Set to `true` if the participant is pinned
* `presetName` \- Name of the preset associated with the participant

#### Metadata properties

* `id` \- Session-specific identifier generated when the participant joins meeting session (also known as `peerId`)
* `userId` \- Permanent identifier of the participant generated when adding the participant to a meeting
* `name` \- Display name of the participant
* `picture` \- String URL to the participant's display picture (if any)
* `customParticipantId` \- Custom identifier that can be set while adding participant to a meeting by customer
* `isHost` \- Boolean value whether this participant has host privileges
* `isPinned` \- Whether this participant is currently pinned in the meeting
* `presetName` \- Name of the preset applied to this participant while adding to meeting
* `stageStatus` \- Indicates the participant's current stage status (applicable only in stage-enabled meetings)

#### Metadata properties

* `id` \- Session-specific identifier generated when the participant joins meeting session (also known as `peerId`)
* `userId` \- Permanent identifier of the participant generated when adding the participant to a meeting
* `name` \- Display name of the participant
* `picture` \- String URL to the participant's display picture (if any)
* `customParticipantId` \- Custom identifier that can be set while adding participant to a meeting by customer
* `isHost` \- Boolean value whether this participant has host privileges
* `isPinned` \- Whether this participant is currently pinned in the meeting
* `presetName` \- Name of the preset applied to this participant while adding to meeting
* `stageStatus` \- Indicates the participant's current stage status (applicable only in stage-enabled meetings)

#### Metadata properties

* `id` \- Session-specific identifier generated when the participant joins meeting session (also known as `peerId`)
* `userId` \- Permanent identifier of the participant generated when adding the participant to a meeting
* `name` \- Display name of the participant
* `picture` \- String URL to the participant's display picture (if any)
* `isHost` \- Boolean value whether this participant has host privileges
* `customParticipantId` \- Custom identifier that can be set while adding participant to a meeting by customer
* `stageStatus` \- Indicates the participant's current stage status (applicable only in stage-enabled meetings)
* `isPinned` \- Whether this participant is currently pinned in the meeting
* `presetName` \- Name of the preset applied to this participant while adding to meeting

#### Media properties

* `videoEnabled` \- Set to `true` if the participant's camera is on
* `audioEnabled` \- Set to `true` if the participant is unmuted
* `screenShareEnabled` \- Set to `true` if the participant is sharing their screen
* `videoTrack` \- The video track of the participant
* `audioTrack` \- The audio track of the participant
* `screenShareTracks` \- The video and audio tracks of the participant's screen share

#### Media properties

* `videoEnabled` \- Whether the participant's camera is currently enabled
* `audioEnabled` \- Whether the participant's microphone is currently unmuted
* `screenshareEnabled` \- Whether the participant is currently sharing their screen

### Access participant properties

JavaScript

```

// 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);


```

Use the `useRealtimeKitSelector` hook to access properties:

```

// 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,

);


```

Kotlin

```

// 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


```

Swift

```

// 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


```

Dart

```

// Number of participants joined in the meeting

final participantCount = meeting.participants.joined.length;


// Access pagination properties

final currentPageNumber = meeting.participants.currentPageNumber;

final pageCount = meeting.participants.pageCount;

final canGoNextPage = meeting.participants.isNextPagePossible;

final canGoPreviousPage = meeting.participants.isPreviousPagePossible;


```

Use the `useRealtimeKitSelector` hook to access properties:

```

// 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,

);


```

### Access participant object

You can fetch a participant from the [participant maps](#participant-maps).

JavaScript

```

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;


```

Kotlin

```

// 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}")

}


```

Swift

```

// 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)")

}


```

Dart

```

// Find a participant by peer ID

final participant = meeting.participants.joined

  .where((p) => p.id == "<peerId>")

  .firstOrNull;


// Access participant properties

if (participant != null) {

  print('Participant: ${participant.name} (ID: ${participant.id})');

  print('Audio: ${participant.audioEnabled ? "On" : "Off"}');

  print('Video: ${participant.videoEnabled ? "On" : "Off"}');

}


```

```

// 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;


```

## Participant Maps

All participants are stored under `meeting.participants`. These do not include the local user.

The `meeting.participants` object contains the following maps:

* **`joined`** \- All participants currently in the meeting (excluding the local user)
* **`waitlisted`** \- All participants waiting to join the meeting
* **`active`** \- All participants whose media is subscribed to (participants that should be displayed on screen)
* **`pinned`** \- All pinned participants in the meeting

If you are building a video/audio grid, use the `active` map. To display a list of all participants, use the `joined` map.

Each participant in these maps is of type `RTKParticipant`.

All participants are stored under `meeting.participants`. These do not include the local user.

The `meeting.participants` object contains the following lists:

* **`joined`** \- All participants currently in the meeting (excluding the local user)
* **`waitlisted`** \- All participants waiting to join the meeting
* **`active`** \- All participants whose media is subscribed to (participants that should be displayed on screen)
* **`pinned`** \- All pinned participants in the meeting
* **`screenShares`** \- All participants who are sharing their screen

If you are building a video/audio grid, use the `active` list. To display a list of all participants, use the `joined` list.

All participants are stored under `meeting.participants`. These do not include the local user.

The `meeting.participants` object contains the following lists:

* **`joined`** \- All participants currently in the meeting (excluding the local user)
* **`waitlisted`** \- All participants waiting to join the meeting
* **`active`** \- All participants whose media is subscribed to (participants that should be displayed on screen)
* **`pinned`** \- All pinned participants in the meeting

If you are building a video/audio grid, use the `active` list. To display a list of all participants, use the `joined` list.

Each participant in these lists is of type `RtkRemoteParticipant`.

JavaScript

```

// 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;


```

Use the `useRealtimeKitSelector` hook to access participant maps:

```

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,

);


```

Kotlin

```

// 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


```

Swift

```

// 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


```

Dart

```

// Get all joined participants

final joinedParticipants = meeting.participants.joined;


// Get active participants (those on screen)

final activeParticipants = meeting.participants.active;


// Get pinned participants

final pinnedParticipants = meeting.participants.pinned;


// Get waitlisted participants

final waitlistedParticipants = meeting.participants.waitlisted;


```

Use the `useRealtimeKitSelector` hook to access participant maps:

```

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,

);


```

## View Modes

The view mode indicates whether participants are populated in `ACTIVE_GRID` mode or `PAGINATED` mode.

* **`ACTIVE_GRID` mode** \- Participants are automatically replaced in `meeting.participants.active` based on who is speaking or who has their video turned on
* **`PAGINATED` mode** \- Participants in `meeting.participants.active` are fixed. Use `setPage()` to change the active participants

### Set view mode

JavaScript

```

// Set the view mode to paginated

await meeting.participants.setViewMode("PAGINATED");


// Set the view mode to active grid

await meeting.participants.setViewMode("ACTIVE_GRID");


```

Use the `useRealtimeKitClient` hook to access the meeting object:

```

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 uses active grid mode by default on page 0\. If you switch to the next page, it automatically switches to paginated mode.

iOS SDK uses active grid mode by default on page 0\. If you switch to the next page, it automatically switches to paginated mode.

Flutter SDK uses active grid mode by default on page 0\. If you switch to the next page, it automatically switches to paginated mode.

```

// Set the view mode to paginated

await meeting.participants.setViewMode("PAGINATED");


// Set the view mode to active grid

await meeting.participants.setViewMode("ACTIVE_GRID");


```

### Set page in paginated mode

JavaScript

```

// 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);


```

Kotlin

```

// Switch to first page

meeting.participants.setPage(1)


```

Swift

```

// Switch to first page

meeting.participants.setPage(1)


```

Flutter SDK automatically manages participant pagination.

```

// Switch to second page

await meeting.participants.setPage(2);


```

### Monitor view mode

JavaScript

```

const viewMode = meeting.participants.viewMode;

const currentPage = meeting.participants.currentPage;


```

```

const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);

const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);


```

Monitoring view mode is not available on this platform.

```

const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);

const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);


```

## Host Controls

The participant object allows the host several controls. These can be selected while creating the host [preset](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/presets/methods/create/).

### Media controls

With the correct permissions, the host can disable media for remote participants.

JavaScript

```

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();


```

Kotlin

```

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()

}


```

Swift

```

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()

}


```

Dart

```

// Disable a remote participant's video

participant.disableVideo(onResult: (e) {

  // handle error if any

});


// Disable a remote participant's audio

participant.disableAudio(onResult: (e) {

  // handle error if any

});


// Remove the participant from the meeting

participant.kick();


```

**Required Permission**: `permissions.host.canDisableVideo`, `permissions.host.canDisableAudio` must be `true`

```

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();


```

### Waiting room controls

The waiting room allows the host to control which users can join your meeting and when. They can either choose to accept or reject the request.

You can also automate this flow so that users join the meeting automatically when the host joins the meeting, using [presets](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/presets/methods/create/).

#### Accept waiting room request

JavaScript

```

await meeting.participants.acceptWaitingRoomRequest(participantId);


```

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";


const [meeting] = useRealtimeKitClient();


await meeting.participants.acceptWaitingRoomRequest(participantId);


```

Kotlin

```

meeting.participants.acceptWaitingRoomRequest(participantId)


```

Swift

```

meeting.participants.acceptWaitingRoomRequest(id: participantId)


```

Dart

```

final participant = meeting.participants.waitlisted[0];

meeting.participants.acceptWaitlistedParticipant(participant);


```

```

await meeting.participants.acceptWaitingRoomRequest(participantId);


```

#### Reject waiting room request

JavaScript

```

await meeting.participants.rejectWaitingRoomRequest(participantId);


```

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";


const [meeting] = useRealtimeKitClient();


await meeting.participants.rejectWaitingRoomRequest(participantId);


```

Kotlin

```

meeting.participants.rejectWaitingRoomRequest(participantId)


```

Swift

```

meeting.participants.rejectWaitingRoomRequest(participantId)


```

Dart

```

final participant = meeting.participants.waitlisted[0];

meeting.participants.rejectWaitlistedParticipant(participant);


```

```

await meeting.participants.rejectWaitingRoomRequest(participantId);


```

### Pin participants

The host can choose to pin or unpin participants to the grid.

JavaScript

```

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();


```

Kotlin

```

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()

}


```

Swift

```

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()

}


```

Dart

```

// Pin a remote participant

participant.pin();


// Unpin a previously pinned participant

participant.unpin();


```

**Required Permission**: `permissions.host.canPinParticipant` must be `true`

```

const participant = meeting.participants.joined.get(participantId);


// Pin a participant

await participant.pin();


// Unpin a participant

await participant.unpin();


```

### Update participant permissions

The host can modify the permissions for a participant. Permissions for a participant are defined by their preset.

Note

When the host updates the permissions for a participant, the preset is not modified and the permission changes are limited to the duration of the meeting.

Updating participant permissions is not available on this platform.

First, find the participant(s) you want to update.

JavaScript

```

const participantIds = meeting.participants.joined

  .toArray()

  .filter((e) => e.name.startsWith("John"))

  .map((p) => p.id);


```

Use the `updatePermissions` method to modify the permissions for the participant.

JavaScript

```

// Allow file upload permissions in public chat

const newPermissions = {

  chat: {

    public: {

      files: true,

    },

  },

};


meeting.participants.updatePermissions(participantIds, newPermissions);


```

The following permissions can be modified:

TypeScript

```

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;

    };

  };

}


```

## Display participant videos

To play a participant's video track on a `<video>` element:

```

<video class="participant-video" id="participant-video"></video>


```

JavaScript

```

// 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);


```

For local user preview (video not sent to other users):

JavaScript

```

meeting.self.registerVideoElement(videoElement, true);


```

Clean up when the video element is no longer needed:

JavaScript

```

participant.deregisterVideoElement(videoElement);


```

To play a participant's video track on a `<video>` element:

```

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);


```

For local user preview (video not sent to other users):

```

meeting.self.registerVideoElement(videoElement, true);


```

Call `participant.getVideoView()` which returns a `View` that renders the participant's video stream:

Kotlin

```

// Get video view of a given participant

val videoView = participant.getVideoView()


// Get screen share video view

val screenShareView = participant.getScreenShareVideoView()


```

Call `participant.getVideoView()` which returns a `UIView` that renders the participant's video stream:

Swift

```

// Get video view of a given participant

let videoView = participant.getVideoView()


// Get screen share video view

let screenShareView = participant.getScreenShareVideoView()


```

Use the video view methods which return a `Widget` that you can place directly in your UI hierarchy:

Dart

```

// Create a widget to display the participant's camera video

final cameraView = VideoView(meetingParticipant: participant);


// Create a widget to display the participant's screen share

final screenShareView = ScreenshareView(meetingParticipant: participant);


```

Use `useRealtimeKitSelector` to get the video track and render it with `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}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/remote-participants/","name":"Remote Participants"}}]}
```

---

---
title: Events
description: This page provides an overview of the events emitted by meeting.participants and related participant maps, which you can use to keep your UI in sync with changes such as participants joining or leaving, pinning updates, active speaker changes, and grid view mode or page changes.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/remote-participants/events.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Events

This page provides an overview of the events emitted by `meeting.participants` and related participant maps, which you can use to keep your UI in sync with changes such as participants joining or leaving, pinning updates, active speaker changes, and grid view mode or page changes.

Prerequisites

This page assumes you have already initialized the SDK and understand the meeting object structure. Refer to [Initialize SDK](https://developers.cloudflare.com/realtime/realtimekit/core/) and [Meeting Object Explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) if needed.

WebMobile

ReactWeb ComponentsAngular

## Grid events

These events allow you to monitor changes to the grid.

### View mode change

Triggered when the view mode changes between `ACTIVE_GRID` and `PAGINATED`.

JavaScript

```

meeting.participants.on(

  "viewModeChanged",

  ({ viewMode, currentPage, pageCount }) => {

    console.log("view mode changed", viewMode);

  },

);


```

Triggered when the view mode changes between `ACTIVE_GRID` and `PAGINATED`.

```

const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);


```

Or use event listener:

```

meeting.participants.on(

  "viewModeChanged",

  ({ viewMode, currentPage, pageCount }) => {

    console.log("view mode changed", viewMode);

  },

);


```

This event is not available on this platform.

Triggered when the view mode changes between `ACTIVE_GRID` and `PAGINATED`.

```

const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);


```

Or use event listener:

```

meeting.participants.on(

  "viewModeChanged",

  ({ viewMode, currentPage, pageCount }) => {

    console.log("view mode changed", viewMode);

  },

);


```

### Page change

Triggered when the page changes in paginated mode.

JavaScript

```

meeting.participants.on(

  "pageChanged",

  ({ viewMode, currentPage, pageCount }) => {

    console.log("page changed", currentPage);

  },

);


```

Triggered when the page changes in paginated mode.

```

const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);

const pageCount = useRealtimeKitSelector((m) => m.participants.pageCount);


```

This event is not available on this platform.

Triggered when the page changes in paginated mode.

```

const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);

const pageCount = useRealtimeKitSelector((m) => m.participants.pageCount);


```

### Active speaker

Triggered when a participant starts speaking.

JavaScript

```

meeting.participants.on("activeSpeaker", (participant) => {

  console.log(`${participant.id} is currently speaking`);

});


```

```

const activeSpeaker = useRealtimeKitSelector(

  (m) => m.participants.lastActiveSpeaker,

);


```

Or use event listener:

```

meeting.participants.on("activeSpeaker", (participant) => {

  console.log(`${participant.id} is currently speaking`);

});


```

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onActiveSpeakerChanged(participant: RtkRemoteParticipant?) {

    participant?.let {

      println("${it.id} is currently speaking")

    }

  }

})


```

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onActiveSpeakerChanged(participant: RtkRemoteParticipant?) {

    if let participant = participant {

      print("\(participant.id) is currently speaking")

    }

  }

}


meeting.addParticipantsEventListener(self)


```

Dart

```

class ParticipantsNotifier extends RtkParticipantsEventListener {

  @override

  void onActiveSpeakerChanged(RtkRemoteParticipant? participant) {

    if (participant != null) {

      print('${participant.id} is currently speaking');

    }

  }

}


meeting.addParticipantsEventListener(ParticipantsNotifier());


```

```

const activeSpeaker = useRealtimeKitSelector(

  (m) => m.participants.lastActiveSpeaker,

);


```

Or use event listener:

```

meeting.participants.on("activeSpeaker", (participant) => {

  console.log(`${participant.id} is currently speaking`);

});


```

## Participant map events

These events allow you to monitor changes to remote participant maps. Use them to get notified when a participant joins or leaves the meeting, is pinned, or moves out of the grid.

### Participant joined

Triggered when any participant joins the meeting.

JavaScript

```

meeting.participants.joined.on("participantJoined", (participant) => {

  console.log(`A participant with id "${participant.id}" has joined`);

});


```

```

const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);


```

Or use event listener:

```

meeting.participants.joined.on("participantJoined", (participant) => {

  console.log(`A participant with id "${participant.id}" has joined`);

});


```

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onParticipantJoin(participant: RtkRemoteParticipant) {

    println("A participant with id ${participant.id} has joined")

  }

})


```

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onParticipantJoin(participant: RtkRemoteParticipant) {

    print("A participant with id \(participant.id) has joined")

  }

}


meeting.addParticipantsEventListener(self)


```

Dart

```

class ParticipantsNotifier extends RtkParticipantsEventListener {

  @override

  void onParticipantJoin(RtkRemoteParticipant participant) {

    print('A participant with id ${participant.id} has joined');

  }

}


meeting.addParticipantsEventListener(ParticipantsNotifier());


```

```

const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);


```

Or use event listener:

```

meeting.participants.joined.on("participantJoined", (participant) => {

  console.log(`A participant with id "${participant.id}" has joined`);

});


```

### Participant left

Triggered when any participant leaves the meeting.

JavaScript

```

meeting.participants.joined.on("participantLeft", (participant) => {

  console.log(`A participant with id "${participant.id}" has left the meeting`);

});


```

```

const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);


```

Or use event listener:

```

meeting.participants.joined.on("participantLeft", (participant) => {

  console.log(`A participant with id "${participant.id}" has left the meeting`);

});


```

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onParticipantLeave(participant: RtkRemoteParticipant) {

    println("A participant with id ${participant.id} has left the meeting")

  }

})


```

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onParticipantLeave(participant: RtkRemoteParticipant) {

    print("A participant with id \(participant.id) has left the meeting")

  }

}


meeting.addParticipantsEventListener(self)


```

Dart

```

class ParticipantsNotifier extends RtkParticipantsEventListener {

  @override

  void onParticipantLeave(RtkRemoteParticipant participant) {

    print('A participant with id ${participant.id} has left the meeting');

  }

}


meeting.addParticipantsEventListener(ParticipantsNotifier());


```

```

const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);


```

Or use event listener:

```

meeting.participants.joined.on("participantLeft", (participant) => {

  console.log(`A participant with id "${participant.id}" has left the meeting`);

});


```

### Active participants changed

Each participant map emits `participantJoined` and `participantLeft` events:

JavaScript

```

// Listen for when a participant gets pinned

meeting.participants.pinned.on("participantJoined", (participant) => {

  console.log(`Participant ${participant.name} got pinned`);

});


// Listen for when a participant gets unpinned

meeting.participants.pinned.on("participantLeft", (participant) => {

  console.log(`Participant ${participant.name} got unpinned`);

});


```

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onActiveParticipantsChanged(active: List<RtkRemoteParticipant>) {

    // Called when active participants change

  }

})


```

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onActiveParticipantsChanged(active: [RtkRemoteParticipant]) {

    // Called when active participants change

  }

}


meeting.addParticipantsEventListener(self)


```

Dart

```

class ParticipantsNotifier extends RtkParticipantsEventListener {

  @override

  void onActiveParticipantsChanged(List<RtkRemoteParticipant> active) {

    // Called when active participants change

  }

}


meeting.addParticipantsEventListener(ParticipantsNotifier());


```

### Participant pinned

Triggered when a participant is pinned.

JavaScript

```

meeting.participants.joined.on("pinned", (participant) => {

  console.log(`Participant with id "${participant.id}" was pinned`);

});


```

```

const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);


```

Or use event listener:

```

meeting.participants.joined.on("pinned", (participant) => {

  console.log(`Participant with id "${participant.id}" was pinned`);

});


```

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onParticipantPinned(participant: RtkRemoteParticipant) {

    println("Participant with id ${participant.id} was pinned")

  }

})


```

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onParticipantPinned(participant: RtkRemoteParticipant) {

    print("Participant with id \(participant.id) was pinned")

  }

}


meeting.addParticipantsEventListener(self)


```

Dart

```

class ParticipantsNotifier extends RtkParticipantsEventListener {

  @override

  void onParticipantPinned(RtkRemoteParticipant participant) {

    print('Participant with id ${participant.id} was pinned');

  }

}


meeting.addParticipantsEventListener(ParticipantsNotifier());


```

```

const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);


```

Or use event listener:

```

meeting.participants.joined.on("pinned", (participant) => {

  console.log(`Participant with id "${participant.id}" was pinned`);

});


```

### Participant unpinned

Triggered when a participant is unpinned.

JavaScript

```

meeting.participants.joined.on("unpinned", (participant) => {

  console.log(`Participant with id "${participant.id}" was unpinned`);

});


```

```

const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);


```

Or use event listener:

```

meeting.participants.joined.on("unpinned", (participant) => {

  console.log(`Participant with id "${participant.id}" was unpinned`);

});


```

Kotlin

```

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {

  override fun onParticipantUnpinned(participant: RtkRemoteParticipant) {

    println("Participant with id ${participant.id} was unpinned")

  }

})


```

Swift

```

extension MeetingViewModel: RtkParticipantsEventListener {

  func onParticipantUnpinned(participant: RtkRemoteParticipant) {

    print("Participant with id \(participant.id) was unpinned")

  }

}


meeting.addParticipantsEventListener(self)


```

Dart

```

class ParticipantsNotifier extends RtkParticipantsEventListener {

  @override

  void onParticipantUnpinned(RtkRemoteParticipant participant) {

    print('Participant with id ${participant.id} was unpinned');

  }

}


meeting.addParticipantsEventListener(ParticipantsNotifier());


```

```

const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);


```

Or use event listener:

```

meeting.participants.joined.on("unpinned", (participant) => {

  console.log(`Participant with id "${participant.id}" was unpinned`);

});


```

## Participant events

You can monitor changes to a specific participant using the following events.

### Video update

Triggered when any participant starts or stops video.

JavaScript

```

meeting.participants.joined.on("videoUpdate", (participant) => {

  console.log(

    `A participant with id "${participant.id}" updated their video track`,

  );


  if (participant.videoEnabled) {

    // Use participant.videoTrack

  } else {

    // Handle stop video

  }

});


```

```

// Check for one participant

const videoEnabled = useRealtimeKitSelector(

  (m) => m.participants.joined.get(participantId)?.videoEnabled,

);


// All video enabled participants

const videoEnabledParticipants = useRealtimeKitSelector((m) =>

  m.participants.joined.toArray().filter((p) => p.videoEnabled),

);


```

Kotlin

```

meeting.addParticipantEventListener(object : RtkParticipantEventListener {

  override fun onVideoUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    println("Participant ${participant.id} video is now ${if (isEnabled) "enabled" else "disabled"}")

  }

})


```

Swift

```

extension MeetingViewModel: RtkParticipantEventListener {

  func onVideoUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    print("Participant \(participant.id) video is now \(isEnabled ? "enabled" : "disabled")")

  }

}


meeting.addParticipantEventListener(self)


```

Dart

```

class ParticipantUpdateHandler extends RtkParticipantUpdateListener {

  @override

  void onVideoUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    print('Participant ${participant.id} video is now ${isEnabled ? "enabled" : "disabled"}');

  }

}


participant.addParticipantUpdateListener(ParticipantUpdateHandler());


```

```

// Check for one participant

const videoEnabled = useRealtimeKitSelector(

  (m) => m.participants.joined.get(participantId)?.videoEnabled,

);


// All video enabled participants

const videoEnabledParticipants = useRealtimeKitSelector((m) =>

  m.participants.joined.toArray().filter((p) => p.videoEnabled),

);


```

### Audio update

Triggered when any participant starts or stops audio.

JavaScript

```

meeting.participants.joined.on("audioUpdate", (participant) => {

  console.log(

    `A participant with id "${participant.id}" updated their audio track`,

  );


  if (participant.audioEnabled) {

    // Use participant.audioTrack

  } else {

    // Handle stop audio

  }

});


```

```

// Check for one participant

const audioEnabled = useRealtimeKitSelector(

  (m) => m.participants.joined.get(participantId)?.audioEnabled,

);


// All audio enabled participants

const audioEnabledParticipants = useRealtimeKitSelector((m) =>

  m.participants.joined.toArray().filter((p) => p.audioEnabled),

);


```

Kotlin

```

meeting.addParticipantEventListener(object : RtkParticipantEventListener {

  override fun onAudioUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    println("Participant ${participant.id} audio is now ${if (isEnabled) "enabled" else "disabled"}")

  }

})


```

Swift

```

extension MeetingViewModel: RtkParticipantEventListener {

  func onAudioUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    print("Participant \(participant.id) audio is now \(isEnabled ? "enabled" : "disabled")")

  }

}


meeting.addParticipantEventListener(self)


```

Dart

```

class ParticipantUpdateHandler extends RtkParticipantUpdateListener {

  @override

  void onAudioUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    print('Participant ${participant.id} audio is now ${isEnabled ? "enabled" : "disabled"}');

  }

}


participant.addParticipantUpdateListener(ParticipantUpdateHandler());


```

```

// Check for one participant

const audioEnabled = useRealtimeKitSelector(

  (m) => m.participants.joined.get(participantId)?.audioEnabled,

);


// All audio enabled participants

const audioEnabledParticipants = useRealtimeKitSelector((m) =>

  m.participants.joined.toArray().filter((p) => p.audioEnabled),

);


```

### Screen share update

Triggered when any participant starts or stops screen share.

JavaScript

```

meeting.participants.joined.on("screenShareUpdate", (participant) => {

  console.log(

    `A participant with id "${participant.id}" updated their screen share`,

  );


  if (participant.screenShareEnabled) {

    // Use participant.screenShareTracks

  } else {

    // Handle stop screen share

  }

});


```

```

// Check for one participant

const screensharingParticipant = useRealtimeKitSelector((m) =>

  m.participants.joined.toArray().find((p) => p.screenShareEnabled),

);


// All screen sharing participants

const screenSharingParticipants = useRealtimeKitSelector((m) =>

  m.participants.joined.toArray().filter((p) => p.screenShareEnabled),

);


```

Kotlin

```

meeting.addParticipantEventListener(object : RtkParticipantEventListener {

  override fun onScreenShareUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    println("Participant ${participant.id} screen share is now ${if (isEnabled) "enabled" else "disabled"}")

  }

})


```

Swift

```

extension MeetingViewModel: RtkParticipantEventListener {

  func onScreenShareUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    print("Participant \(participant.id) screen share is now \(isEnabled ? "enabled" : "disabled")")

  }

}


meeting.addParticipantEventListener(self)


```

Dart

```

class ParticipantUpdateHandler extends RtkParticipantUpdateListener {

  @override

  void onScreenShareUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    print('Participant ${participant.id} screen share is now ${isEnabled ? "enabled" : "disabled"}');

  }

}


participant.addParticipantUpdateListener(ParticipantUpdateHandler());


```

```

// Check for one participant

const screensharingParticipant = useRealtimeKitSelector((m) =>

  m.participants.joined.toArray().find((p) => p.screenShareEnabled),

);


// All screen sharing participants

const screenSharingParticipants = useRealtimeKitSelector((m) =>

  m.participants.joined.toArray().filter((p) => p.screenShareEnabled),

);


```

### Network quality score

Monitor participant network quality using the `mediaScoreUpdate` event.

JavaScript

```

meeting.participants.joined.on(

  "mediaScoreUpdate",

  ({ participantId, kind, isScreenshare, score, scoreStats }) => {

    if (kind === "video") {

      console.log(

        `Participant ${participantId}'s ${isScreenshare ? "screenshare" : "video"} quality score is`,

        score,

      );

    }


    if (kind === "audio") {

      console.log(

        `Participant ${participantId}'s audio quality score is`,

        score,

      );

    }


    if (score < 5) {

      console.log(`Participant ${participantId}'s media quality is poor`);

    }

  },

);


```

Monitor participant network quality using the `mediaScoreUpdate` event.

```

import { useEffect } from "react";


// Use event listener for media score updates

useEffect(() => {

  if (!meeting) return;


  const handleMediaScoreUpdate = ({

    participantId,

    kind,

    isScreenshare,

    score,

    scoreStats,

  }) => {

    if (kind === "video") {

      console.log(

        `Participant ${participantId}'s ${isScreenshare ? "screenshare" : "video"} quality score is`,

        score,

      );

    }


    if (score < 5) {

      console.log(`Participant ${participantId}'s media quality is poor`);

    }

  };


  meeting.participants.joined.on("mediaScoreUpdate", handleMediaScoreUpdate);


  return () => {

    meeting.participants.joined.off("mediaScoreUpdate", handleMediaScoreUpdate);

  };

}, [meeting]);


```

This event is not available on this platform.

Monitor participant network quality using the `mediaScoreUpdate` event.

```

import { useEffect } from "react";


// Use event listener for media score updates

useEffect(() => {

  if (!meeting) return;


  const handleMediaScoreUpdate = ({

    participantId,

    kind,

    isScreenshare,

    score,

    scoreStats,

  }) => {

    if (kind === "video") {

      console.log(

        `Participant ${participantId}'s ${isScreenshare ? "screenshare" : "video"} quality score is`,

        score,

      );

    }


    if (score < 5) {

      console.log(`Participant ${participantId}'s media quality is poor`);

    }

  };


  meeting.participants.joined.on("mediaScoreUpdate", handleMediaScoreUpdate);


  return () => {

    meeting.participants.joined.off("mediaScoreUpdate", handleMediaScoreUpdate);

  };

}, [meeting]);


```

## Listen to participant events

Each participant object is an event emitter:

JavaScript

```

meeting.participants.joined

  .get(participantId)

  .on("audioUpdate", ({ audioEnabled, audioTrack }) => {

    console.log(

      "The participant with id",

      participantId,

      "has toggled their mic to",

      audioEnabled,

    );

  });


```

Alternatively, listen on the participant map for all participants:

JavaScript

```

meeting.participants.joined.on(

  "audioUpdate",

  (participant, { audioEnabled, audioTrack }) => {

    console.log(

      "The participant with id",

      participant.id,

      "has toggled their mic to",

      audioEnabled,

    );

  },

);


```

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";

import { useEffect } from "react";


function ParticipantAudioListener({ participantId }) {

  const [meeting] = useRealtimeKitClient();


  useEffect(() => {

    if (!meeting) return;


    const handleAudioUpdate = ({ audioEnabled, audioTrack }) => {

      console.log(

        "The participant with id",

        participantId,

        "has toggled their mic to",

        audioEnabled,

      );

    };


    const participant = meeting.participants.joined.get(participantId);

    participant.on("audioUpdate", handleAudioUpdate);


    return () => {

      participant.off("audioUpdate", handleAudioUpdate);

    };

  }, [meeting, participantId]);

}


```

Or use the selector for specific properties:

```

const audioEnabled = useRealtimeKitSelector(

  (m) => m.participants.joined.get(participantId)?.audioEnabled,

);


```

Implement the `RtkParticipantEventListener` interface to receive participant event updates:

Kotlin

```

meeting.addParticipantEventListener(object : RtkParticipantEventListener {

  override fun onVideoUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    // Called when participant's video state changes

  }


  override fun onAudioUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    // Called when participant's audio state changes

  }


  override fun onScreenShareUpdate(participant: RtkRemoteParticipant, isEnabled: Boolean) {

    // Called when participant's screen share state changes

  }

})


```

Implement the `RtkParticipantEventListener` protocol to receive participant event updates:

Swift

```

extension MeetingViewModel: RtkParticipantEventListener {

  func onVideoUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    // Called when participant's video state changes

  }


  func onAudioUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    // Called when participant's audio state changes

  }


  func onScreenShareUpdate(participant: RtkRemoteParticipant, isEnabled: Bool) {

    // Called when participant's screen share state changes

  }

}


meeting.addParticipantEventListener(self)


```

Implement the `RtkParticipantUpdateListener` interface and add the listener on a participant:

Dart

```

class ParticipantUpdateHandler extends RtkParticipantUpdateListener {

  @override

  void onVideoUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    print("${participant.name}'s video is now ${isEnabled ? 'on' : 'off'}");

  }


  @override

  void onAudioUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    print("${participant.name}'s audio is now ${isEnabled ? 'on' : 'off'}");

  }


  @override

  void onPinned(RtkRemoteParticipant participant) {

    print("${participant.name} was pinned");

  }


  @override

  void onUnpinned(RtkRemoteParticipant participant) {

    print("${participant.name} was unpinned");

  }


  @override

  void onScreenShareUpdate(RtkRemoteParticipant participant, bool isEnabled) {

    print("${participant.name}'s screen-share is now ${isEnabled ? 'on' : 'off'}");

  }


  @override

  void onUpdate(RtkRemoteParticipant participant) {

    print("${participant.name} was updated");

  }

}


// Register the listener with a specific participant

final listener = ParticipantUpdateHandler();

participant.addParticipantUpdateListener(listener);


// When done listening, remove the listener

participant.removeParticipantUpdateListener(listener);


```

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react-native";

import { useEffect } from "react";


function ParticipantAudioListener({ participantId }) {

  const [meeting] = useRealtimeKitClient();


  useEffect(() => {

    if (!meeting) return;


    const handleAudioUpdate = ({ audioEnabled, audioTrack }) => {

      console.log(

        "The participant with id",

        participantId,

        "has toggled their mic to",

        audioEnabled,

      );

    };


    const participant = meeting.participants.joined.get(participantId);

    participant.on("audioUpdate", handleAudioUpdate);


    return () => {

      participant.off("audioUpdate", handleAudioUpdate);

    };

  }, [meeting, participantId]);

}


```

Or use the selector for specific properties:

```

const audioEnabled = useRealtimeKitSelector(

  (m) => m.participants.joined.get(participantId)?.audioEnabled,

);


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/remote-participants/","name":"Remote Participants"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/remote-participants/events/","name":"Events"}}]}
```

---

---
title: Picture in Picture
description: Picture-in-Picture API allows you to render meeting.participants.active participant's video as a floating tile outside of the current webpage's context.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/remote-participants/pip.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Picture in Picture

Picture-in-Picture API allows you to render `meeting.participants.active` participant's video as a floating tile outside of the current webpage's context.

Note

Supported in Chrome, Edge, and Chromium-based browsers only.

WebMobile

ReactWeb ComponentsAngular

Picture-in-Picture is not available on this platform.

## Check support

Picture-in-Picture API might not be supported in your browser. Always check for support before using the API.

JavaScript

```

const isSupported = meeting.participants.pip.isSupported();


```

## Enable Picture-in-Picture

JavaScript

```

await meeting.participants.pip.enable();


```

## Disable Picture-in-Picture

JavaScript

```

await meeting.participants.pip.disable();


```

## Check support

Picture-in-Picture API might not be supported in your browser. Always check for support before using the API.

```

const isSupported = meeting.participants.pip.isSupported();


```

## Enable Picture-in-Picture

```

await meeting.participants.pip.enable();


```

## Disable Picture-in-Picture

```

await meeting.participants.pip.disable();


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/remote-participants/","name":"Remote Participants"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/core/remote-participants/pip/","name":"Picture in Picture"}}]}
```

---

---
title: Stage Management
description: This guide explains how to use stage management APIs for Webinar (WebRTC) use cases in Cloudflare RealtimeKit.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/stage-management.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Stage Management

This guide explains how to use stage management APIs for Webinar (WebRTC) use cases in Cloudflare RealtimeKit.

WebMobile

ReactWeb ComponentsAngular

Instead of a traditional publish-subscribe model, where a user can publish their media and others can choose to subscribe, RealtimeKit comes with an optional managed configuration. In this managed configuration, a less privileged user can be configured with a default behavior to not publish media. The user can then request permission to be allowed to publish their media, where a privileged user can choose to grant or deny access.

Using RealtimeKit's stage management APIs, a user can perform actions such as:

* Leave and join stage
* Manage stage requests and permissions
* Kick participants

## Access the Stage APIs

The stage module can be accessed under the `meeting.stage` namespace.

```

console.log("Stage object:", meeting.stage);


```

TypeScript

```

console.log("Stage object:", meeting.stage);


```

JavaScript

```

console.log("Stage object:", meeting.stage);


```

Kotlin

```

Log.d("Stage", "Stage object: ${meeting.stage}")


```

Swift

```

print("Stage object: \(meeting.stage)")


```

Dart

```

print("Stage object: ${meeting.stage}");


```

```

console.log("Stage object:", meeting.stage);


```

## Properties

### Status

The `meeting.stage.status` property returns the current stage status of the local user.

```

console.log("Stage status:", meeting.stage.status);


```

TypeScript

```

console.log("Stage status:", meeting.stage.status);


```

JavaScript

```

console.log("Stage status:", meeting.stage.status);


```

Kotlin

```

Log.d("Stage", "Stage status: ${meeting.stage.stageStatus}")


```

Swift

```

print("Stage status: \(meeting.stage.stageStatus)")


```

Dart

```

print("Stage status: ${meeting.stage.status}");


```

```

console.log("Stage status:", meeting.stage.status);


```

**Possible status values:**

* **`ON_STAGE`** \- The user is currently on the stage and sharing audio and video.
* **`OFF_STAGE`** \- The user is viewing the session but is not on the stage and is not sharing audio or video.
* **`REQUESTED_TO_JOIN_STAGE`** \- The user has a pending request to join the stage and share audio and video. This status remains until the host accepts or rejects the request.
* **`ACCEPTED_TO_JOIN_STAGE`** \- The host has accepted the user's request to join the stage.

Note

A user with permission to join stage directly can only assume `ON_STAGE` and `ACCEPTED_TO_JOIN_STAGE` status values.

## Host Controls

RealtimeKit's stage management APIs allow hosts to receive and manage stage requests as well as leave and join the stage.

### Join Stage

This method connects the user to the media room, enabling them to interact with other peers in the meeting.

```

await meeting.stage.join();


```

TypeScript

```

await meeting.stage.join();


```

JavaScript

```

await meeting.stage.join();


```

Kotlin

```

meeting.stage.join()


```

Swift

```

meeting.stage.join()


```

Dart

```

meeting.stage.join();


```

```

await meeting.stage.join();


```

### Leave Stage

By employing this method, the user will be disconnected from the media room and subsequently unable to communicate with their peers. Additionally, their audio and video will no longer be visible to others in the room.

```

await meeting.stage.leave();


```

TypeScript

```

await meeting.stage.leave();


```

JavaScript

```

await meeting.stage.leave();


```

Kotlin

```

meeting.stage.leave()


```

Swift

```

meeting.stage.leave()


```

Dart

```

meeting.stage.leave();


```

```

await meeting.stage.leave();


```

### Grant Access

A privileged user can grant access to stage for a set of users with the `grantAccess` method.

```

await meeting.stage.grantAccess(userIds);


```

TypeScript

```

await meeting.stage.grantAccess(userIds);


```

JavaScript

```

await meeting.stage.grantAccess(userIds);


```

Kotlin

```

meeting.stage.grantAccess(userIds)


```

Swift

```

meeting.stage.grantAccess(userIds: userIds)


```

Dart

```

meeting.stage.grantAccess(userIds);


```

```

await meeting.stage.grantAccess(userIds);


```

**Parameters:**

* `userIds` (`string[]`) - Array of user IDs to grant stage access. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

* `userIds` (`string[]`) - Array of user IDs to grant stage access. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

* `userIds` (`string[]`) - Array of user IDs to grant stage access. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

* `userIds` (`List<String>`) - List of user IDs to grant stage access. You can retrieve user IDs using `meeting.participants.map { it.userId }`

* `userIds` (`[String]`) - Array of user IDs to grant stage access. You can retrieve user IDs using `meeting.participants.map { $0.userId }`

* `userIds` (`List<String>`) - List of user IDs to grant stage access. You can retrieve user IDs using `meeting.participants.map((p) => p.userId).toList()`

* `userIds` (`string[]`) - Array of user IDs to grant stage access. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

### Deny Access

A privileged user can deny access to stage for a set of users with the `denyAccess` method.

```

await meeting.stage.denyAccess(userIds);


```

TypeScript

```

await meeting.stage.denyAccess(userIds);


```

JavaScript

```

await meeting.stage.denyAccess(userIds);


```

Kotlin

```

meeting.stage.denyAccess(userIds)


```

Swift

```

meeting.stage.denyAccess(userIds: userIds)


```

Dart

```

meeting.stage.denyAccess(userIds);


```

```

await meeting.stage.denyAccess(userIds);


```

**Parameters:**

* `userIds` (`string[]`) - Array of user IDs to deny stage access. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

* `userIds` (`string[]`) - Array of user IDs to deny stage access. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

* `userIds` (`string[]`) - Array of user IDs to deny stage access. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

* `userIds` (`List<String>`) - List of user IDs to deny stage access. You can retrieve user IDs using `meeting.participants.map { it.userId }`

* `userIds` (`[String]`) - Array of user IDs to deny stage access. You can retrieve user IDs using `meeting.participants.map { $0.userId }`

* `userIds` (`List<String>`) - List of user IDs to deny stage access. You can retrieve user IDs using `meeting.participants.map((p) => p.userId).toList()`

* `userIds` (`string[]`) - Array of user IDs to deny stage access. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

### Kick Users

A privileged user can remove a set of users from stage using the `kick` method.

```

await meeting.stage.kick(userIds);


```

TypeScript

```

await meeting.stage.kick(userIds);


```

JavaScript

```

await meeting.stage.kick(userIds);


```

Kotlin

```

meeting.stage.kick(userIds)


```

Swift

```

meeting.stage.kick(userIds: userIds)


```

Dart

```

meeting.stage.kick(userIds);


```

```

await meeting.stage.kick(userIds);


```

**Parameters:**

* `userIds` (`string[]`) - Array of user IDs to remove from stage. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

* `userIds` (`string[]`) - Array of user IDs to remove from stage. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

* `userIds` (`string[]`) - Array of user IDs to remove from stage. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

* `userIds` (`List<String>`) - List of user IDs to remove from stage. You can retrieve user IDs using `meeting.participants.map { it.userId }`

* `userIds` (`[String]`) - Array of user IDs to remove from stage. You can retrieve user IDs using `meeting.participants.map { $0.userId }`

* `userIds` (`List<String>`) - List of user IDs to remove from stage. You can retrieve user IDs using `meeting.participants.map((p) => p.userId).toList()`

* `userIds` (`string[]`) - Array of user IDs to remove from stage. You can retrieve user IDs using `meeting.participants.toArray().map(p => p.userId)`

## Participant Controls

RealtimeKit's stage management APIs allow participants to request and manage stage access.

### Request Access

This method is used to create a new stage request which can be approved by the host. Each user (viewer or host) must call this method in order to join the stage.

When the host calls this method, their status will be updated to `ACCEPTED_TO_JOIN_STAGE`.

```

await meeting.stage.requestAccess();


```

TypeScript

```

await meeting.stage.requestAccess();


```

JavaScript

```

await meeting.stage.requestAccess();


```

Kotlin

```

meeting.stage.requestAccess()


```

Swift

```

meeting.stage.requestAccess()


```

Dart

```

meeting.stage.requestAccess();


```

```

await meeting.stage.requestAccess();


```

### Cancel Access Request

You can call this method to cancel your stage request.

```

await meeting.stage.cancelRequestAccess();


```

TypeScript

```

await meeting.stage.cancelRequestAccess();


```

JavaScript

```

await meeting.stage.cancelRequestAccess();


```

Kotlin

```

meeting.stage.cancelRequestAccess()


```

Swift

```

meeting.stage.cancelRequestAccess()


```

Dart

```

meeting.stage.cancelRequestAccess();


```

```

await meeting.stage.cancelRequestAccess();


```

## Events

The `meeting.stage` module emits the following events:

### Stage Access Requests Updated

Emitted when there is an update to stage access requests.

```

meeting.stage.on("stageAccessRequestUpdate", (data) => {

  console.log("Stage access request updated:", data);

});


```

Alternatively, you can use React hooks to listen for stage updates:

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";


// useRealtimeKitSelector hook only works when `RealtimeKitProvider` is used.

const stageStatus = useRealtimeKitSelector((m) => m.stage.status);


```

TypeScript

```

meeting.stage.on("stageAccessRequestUpdate", (data) => {

  console.log("Stage access request updated:", data);

});


```

JavaScript

```

meeting.stage.on("stageAccessRequestUpdate", (data) => {

  console.log("Stage access request updated:", data);

});


```

Kotlin

```

meeting.addStageEventListener(object : RtkStageEventListener {

  override fun onStageAccessRequestsUpdated(accessRequests: List<RtkRemoteParticipant>) {

    // Stage access requests list updated

    Log.d("Stage", "Access requests updated: ${accessRequests.size}")

  }

})


```

Swift

```

extension WebinarViewModel: RtkStageEventListener {

  func onStageAccessRequestsUpdated(accessRequests: [RtkRemoteParticipant]) {

    // Stage access requests list updated

    print("Access requests updated: \(accessRequests.count)")

  }

}


```

Dart

```

class StageEventListener extends RtkStageEventListener {

  @override

  void onStageAccessRequestsUpdated(List<RtkRemoteParticipant> accessRequests) {

    // Stage access requests list updated

    print("Access requests updated: ${accessRequests.length}");

  }

}


meeting.addStageEventListener(StageEventListener());


```

```

meeting.stage.on("stageAccessRequestUpdate", (data) => {

  console.log("Stage access request updated:", data);

});


```

Alternatively, you can use React hooks to listen for stage updates:

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";


// useRealtimeKitSelector hook only works when `RealtimeKitProvider` is used.

const stageStatus = useRealtimeKitSelector((m) => m.stage.status);


```

### Stage Access Request Accepted

Emitted when the host accepts the join stage request or invites a user directly to stage.

```

meeting.stage.on("acceptPresentRequests", (data) => {

  console.log("Present requests accepted:", data);

});


```

TypeScript

```

meeting.stage.on("acceptPresentRequests", (data) => {

  console.log("Present requests accepted:", data);

});


```

JavaScript

```

meeting.stage.on("acceptPresentRequests", (data) => {

  console.log("Present requests accepted:", data);

});


```

Kotlin

```

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")

  }

})


```

Swift

```

extension WebinarViewModel: RtkStageEventListener {

  func onStageAccessRequestAccepted() {

    // Host accepted the join stage request or invited user directly to stage

    print("Access request accepted")

  }

}


```

Dart

```

class StageEventListener extends RtkStageEventListener {

  @override

  void onStageAccessRequestAccepted() {

    // Host accepted the join stage request or invited user directly to stage

    print("Access request accepted");

  }

}


meeting.addStageEventListener(StageEventListener());


```

```

meeting.stage.on("acceptPresentRequests", (data) => {

  console.log("Present requests accepted:", data);

});


```

### Stage Status Updated

Emitted when the local user's stage status changes.

```

meeting.stage.on("stageStatusUpdate", (status) => {

  console.log("Stage status updated:", status);

});


```

TypeScript

```

meeting.stage.on("stageStatusUpdate", (status) => {

  console.log("Stage status updated:", status);

});


```

JavaScript

```

meeting.stage.on("stageStatusUpdate", (status) => {

  console.log("Stage status updated:", status);

});


```

Kotlin

```

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")

  }

})


```

Swift

```

extension WebinarViewModel: RtkStageEventListener {

  func onStageStatusUpdated(oldStatus: StageStatus, newStatus: StageStatus) {

    // Local user's stage status changed

    print("Status updated from \(oldStatus) to \(newStatus)")

  }

}


```

Dart

```

class StageEventListener extends RtkStageEventListener {

  @override

  void onStageStatusUpdated(StageStatus oldStatus, StageStatus newStatus) {

    // Local user's stage status changed

    print("Status updated from $oldStatus to $newStatus");

  }

}


meeting.addStageEventListener(StageEventListener());


```

```

meeting.stage.on("stageStatusUpdate", (status) => {

  console.log("Stage status updated:", status);

});


```

### New Stage Request

Emitted when a new participant requests to join the stage.

```

meeting.stage.on("newStageRequest", (request) => {

  console.log("New stage request:", request);

});


```

TypeScript

```

meeting.stage.on("newStageRequest", (request) => {

  console.log("New stage request:", request);

});


```

JavaScript

```

meeting.stage.on("newStageRequest", (request) => {

  console.log("New stage request:", request);

});


```

Kotlin

```

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}")

  }

})


```

Swift

```

extension WebinarViewModel: RtkStageEventListener {

  func onNewStageAccessRequest(participant: RtkRemoteParticipant) {

    // New participant requested to join the stage

    print("New stage request from: \(participant.name)")

  }

}


```

Dart

```

class StageEventListener extends RtkStageEventListener {

  @override

  void onNewStageAccessRequest(RtkRemoteParticipant participant) {

    // New participant requested to join the stage

    print("New stage request from: ${participant.name}");

  }

}


meeting.addStageEventListener(StageEventListener());


```

```

meeting.stage.on("newStageRequest", (request) => {

  console.log("New stage request:", request);

});


```

### Stage Request Approved

Emitted when a stage request is approved by the host.

```

meeting.stage.on("stageRequestApproved", (data) => {

  console.log("Stage request approved:", data);

});


```

TypeScript

```

meeting.stage.on("stageRequestApproved", (data) => {

  console.log("Stage request approved:", data);

});


```

JavaScript

```

meeting.stage.on("stageRequestApproved", (data) => {

  console.log("Stage request approved:", data);

});


```

Kotlin

```

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")

  }

})


```

Swift

```

extension WebinarViewModel: RtkStageEventListener {

  func onStageAccessRequestAccepted() {

    // Host accepted the join stage request or invited user directly to stage

    print("Stage request approved")

  }

}


```

Dart

```

class StageEventListener extends RtkStageEventListener {

  @override

  void onStageAccessRequestAccepted() {

    // Host accepted the join stage request or invited user directly to stage

    print("Stage request approved");

  }

}


meeting.addStageEventListener(StageEventListener());


```

```

meeting.stage.on("stageRequestApproved", (data) => {

  console.log("Stage request approved:", data);

});


```

### Stage Request Rejected

Emitted when the host rejects a stage request.

```

meeting.stage.on("stageRequestRejected", (data) => {

  console.log("Stage request rejected:", data);

});


```

TypeScript

```

meeting.stage.on("stageRequestRejected", (data) => {

  console.log("Stage request rejected:", data);

});


```

JavaScript

```

meeting.stage.on("stageRequestRejected", (data) => {

  console.log("Stage request rejected:", data);

});


```

Kotlin

```

meeting.addStageEventListener(object : RtkStageEventListener {

  override fun onStageAccessRequestRejected() {

    // Host rejected the join stage request

    Log.d("Stage", "Stage request rejected")

  }

})


```

Swift

```

extension WebinarViewModel: RtkStageEventListener {

  func onStageAccessRequestRejected() {

    // Host rejected the join stage request

    print("Stage request rejected")

  }

}


```

Dart

```

class StageEventListener extends RtkStageEventListener {

  @override

  void onStageAccessRequestRejected() {

    // Host rejected the join stage request

    print("Stage request rejected");

  }

}


meeting.addStageEventListener(StageEventListener());


```

```

meeting.stage.on("stageRequestRejected", (data) => {

  console.log("Stage request rejected:", data);

});


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/stage-management/","name":"Stage Management"}}]}
```

---

---
title: Video Effects
description: Add video background effects and blur to participant video feeds in your RealtimeKit meetings using the Core SDK.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/video-effects.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Video Effects

Add video background effects and blur to participant video feeds in your RealtimeKit meetings using the Core SDK.

Note

If you are using the `rtk-meeting` component with UI Kit and prefer a higher-level abstraction, refer to [UI Kit Addons](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/addons/) instead.

WebMobile

ReactWeb ComponentsAngular

## Installation

 npm  yarn  pnpm  bun 

```
npm i @cloudflare/realtimekit-virtual-background
```

```
yarn add @cloudflare/realtimekit-virtual-background
```

```
pnpm add @cloudflare/realtimekit-virtual-background
```

```
bun add @cloudflare/realtimekit-virtual-background
```

## Usage

### 1\. Disable default per frame rendering

Disable the default per frame rendering of video middleware to improve speed and quality by letting this middleware control it on its own:

JavaScript

```

await meeting.self.setVideoMiddlewareGlobalConfig({

  disablePerFrameCanvasRendering: true,

});


```

### 2\. Initialize the transformer

Create a video background transformer object:

JavaScript

```

import RealtimeKitVideoBackgroundTransformer from "@cloudflare/realtimekit-virtual-background";


const videoBackgroundTransformer =

  await RealtimeKitVideoBackgroundTransformer.init({

    meeting,

  });


```

### 3\. Apply background effects

The `videoBackgroundTransformer` exposes two types of middlewares:

#### Static background image

Use `createStaticBackgroundVideoMiddleware` to set an image as the background:

JavaScript

```

const imageUrl = "https://images.unsplash.com/photo-1487088678257-3a541e6e3922";


meeting.self.addVideoMiddleware(

  await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(

    imageUrl,

  ),

);


```

#### Background blur

Use `createBackgroundBlurVideoMiddleware` to blur the background. Pass `blurStrength` (0-100) as a parameter (50% by default):

JavaScript

```

meeting.self.addVideoMiddleware(

  await videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(50),

);


```

## Browser support

Check browser support before initializing:

JavaScript

```

if (RealtimeKitVideoBackgroundTransformer.isSupported()) {

  const videoBackgroundTransformer =

    await RealtimeKitVideoBackgroundTransformer.init({

      meeting: meeting,

    });


  meeting.self.addVideoMiddleware(

    await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(

      imageUrl,

    ),

  );

}


```

Image CORS requirements

Image URLs must allow CORS to avoid tainting the canvas. You can find CORS-enabled images on [Unsplash ↗](https://unsplash.com/) and [Imgur ↗](https://imgur.com).

## Advanced configuration

For better, sharper results, pass a custom segmentation configuration:

JavaScript

```

const videoBackgroundTransformer =

  await RealtimeKitVideoBackgroundTransformer.init({

    meeting,

    segmentationConfig: {

      model: "mlkit", // 'meet' | 'mlkit'

      backend: "wasmSimd",

      inputResolution: "256x256", // '256x144' for meet

      pipeline: "webgl2", // 'webgl2' | 'canvas2dCpu'

      // canvas2dCpu gives sharper blur, webgl2 is faster

      targetFps: 35,

    },

  });


```

## Installation

 npm  yarn  pnpm  bun 

```
npm i @cloudflare/realtimekit-virtual-background
```

```
yarn add @cloudflare/realtimekit-virtual-background
```

```
pnpm add @cloudflare/realtimekit-virtual-background
```

```
bun add @cloudflare/realtimekit-virtual-background
```

## Usage

```

import { useState, useEffect } from "react";

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";

import RealtimeKitVideoBackgroundTransformer from "@cloudflare/realtimekit-virtual-background";


function App() {

  const [meeting] = useRealtimeKitClient();

  const [videoBackgroundTransformer, setVideoBackgroundTransformer] =

    useState(null);


  useEffect(() => {

    const initializeTransformer = async () => {

      if (!meeting) return;


      // Check browser support

      if (!RealtimeKitVideoBackgroundTransformer.isSupported()) {

        console.warn("Video background not supported in this browser");

        return;

      }


      // Disable default per frame rendering

      await meeting.self.setVideoMiddlewareGlobalConfig({

        disablePerFrameCanvasRendering: true,

      });


      // Initialize transformer

      const transformer = await RealtimeKitVideoBackgroundTransformer.init({

        meeting,

      });


      setVideoBackgroundTransformer(transformer);

    };


    initializeTransformer();

  }, [meeting]);


  const applyStaticBackground = async (imageUrl) => {

    if (!videoBackgroundTransformer) return;


    meeting.self.addVideoMiddleware(

      await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(

        imageUrl,

      ),

    );

  };


  const applyBlur = async (blurStrength = 50) => {

    if (!videoBackgroundTransformer) return;


    meeting.self.addVideoMiddleware(

      await videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(

        blurStrength,

      ),

    );

  };


  const removeBackground = () => {

    // Remove all video middlewares

    meeting.self.removeVideoMiddleware();

  };


  return (

    <div>

      <button

        onClick={() =>

          applyStaticBackground(

            "https://images.unsplash.com/photo-1487088678257-3a541e6e3922",

          )

        }

      >

        Apply Background

      </button>

      <button onClick={() => applyBlur(50)}>Apply Blur</button>

      <button onClick={removeBackground}>Remove Background</button>

    </div>

  );

}


```

Image CORS requirements

Image URLs must allow CORS to avoid tainting the canvas. You can find CORS-enabled images on [Unsplash ↗](https://unsplash.com/) and [Imgur ↗](https://imgur.com).

## Advanced configuration

For better, sharper results, pass a custom segmentation configuration:

```

const transformer = await RealtimeKitVideoBackgroundTransformer.init({

  meeting,

  segmentationConfig: {

    model: "mlkit", // 'meet' | 'mlkit'

    backend: "wasmSimd",

    inputResolution: "256x256", // '256x144' for meet

    pipeline: "webgl2", // 'webgl2' | 'canvas2dCpu'

    // canvas2dCpu gives sharper blur, webgl2 is faster

    targetFps: 35,

  },

});


```

## Installation

 npm  yarn  pnpm  bun 

```
npm i @cloudflare/realtimekit-virtual-background
```

```
yarn add @cloudflare/realtimekit-virtual-background
```

```
pnpm add @cloudflare/realtimekit-virtual-background
```

```
bun add @cloudflare/realtimekit-virtual-background
```

## Usage

In your component TypeScript file:

TypeScript

```

import { Component, OnInit } from "@angular/core";

import RealtimeKitClient from "@cloudflare/realtimekit";

import RealtimeKitVideoBackgroundTransformer from "@cloudflare/realtimekit-virtual-background";


@Component({

  selector: "app-meeting",

  templateUrl: "./meeting.component.html",

})

export class MeetingComponent implements OnInit {

  meeting: any;

  videoBackgroundTransformer: any;


  async ngOnInit() {

    // Initialize meeting

    this.meeting = await RealtimeKitClient.init({

      authToken: "<participant_auth_token>",

    });


    await this.meeting.join();


    // Check browser support

    if (!RealtimeKitVideoBackgroundTransformer.isSupported()) {

      console.warn("Video background not supported in this browser");

      return;

    }


    // Disable default per frame rendering

    await this.meeting.self.setVideoMiddlewareGlobalConfig({

      disablePerFrameCanvasRendering: true,

    });


    // Initialize transformer

    this.videoBackgroundTransformer =

      await RealtimeKitVideoBackgroundTransformer.init({

        meeting: this.meeting,

      });

  }


  async applyStaticBackground(imageUrl: string) {

    if (!this.videoBackgroundTransformer) return;


    this.meeting.self.addVideoMiddleware(

      await this.videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(

        imageUrl,

      ),

    );

  }


  async applyBlur(blurStrength: number = 50) {

    if (!this.videoBackgroundTransformer) return;


    this.meeting.self.addVideoMiddleware(

      await this.videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(

        blurStrength,

      ),

    );

  }


  removeBackground() {

    // Remove all video middlewares

    this.meeting.self.removeVideoMiddleware();

  }

}


```

In your component template:

```

<button

  (click)="applyStaticBackground('https://images.unsplash.com/photo-1487088678257-3a541e6e3922')"

>

  Apply Background

</button>

<button (click)="applyBlur(50)">Apply Blur</button>

<button (click)="removeBackground()">Remove Background</button>


```

Image CORS requirements

Image URLs must allow CORS to avoid tainting the canvas. You can find CORS-enabled images on [Unsplash ↗](https://unsplash.com/) and [Imgur ↗](https://imgur.com).

## Advanced configuration

For better, sharper results, pass a custom segmentation configuration:

TypeScript

```

this.videoBackgroundTransformer =

  await RealtimeKitVideoBackgroundTransformer.init({

    meeting: this.meeting,

    segmentationConfig: {

      model: "mlkit", // 'meet' | 'mlkit'

      backend: "wasmSimd",

      inputResolution: "256x256", // '256x144' for meet

      pipeline: "webgl2", // 'webgl2' | 'canvas2dCpu'

      // canvas2dCpu gives sharper blur, webgl2 is faster

      targetFps: 35,

    },

  });


```

## Installation

You can add the pre-packaged filters to your project by adding the following dependency to your `build.gradle` file:

```

dependencies {

    // (other dependencies)

    implementation 'com.cloudflare.realtimekit:filters:0.1.0'

}


```

## Usage

This package currently exposes `VirtualBackgroundVideoFilter` which can be used with `FilterVideoProcessor`:

Kotlin

```

// Create a virtual background filter with a custom background image.

val bgFilter = VirtualBackgroundVideoFilter(context, R.drawable.background)


// Initialize the video processor with the filter.

val processor = FilterVideoProcessor(eglBase, bgFilter)


// // Set the video processor on the meeting builder.

val meeting = RealtimeKitMeetingBuilder

  .setVideoProcessor(eglBase, processor)

  .build(activity)


```

## Advanced configuration

You can also create your own custom filters to apply effects, filters, or analytics directly to a live video stream. Our **VideoProcessor APIs** provide flexible and powerful ways to manipulate video frames.

### Types of Video Processors

We provide three types of video processors:

* **NoDropVideoProcessor**: Allows custom video processing without dropping frames.
* **ChainVideoProcessor**: Chains multiple frame processors together, useful for applying multiple effects or filters to a video stream.
* **FilterVideoProcessor**: Simpler and more efficient way to apply a single effect or filter to a video stream.

Nonetheless, you can also create your own custom video processors by implementing the `VideoProcessor` interface directly:

Kotlin

```

import realtimekit.org.webrtc.VideoFrame

import realtimekit.org.webrtc.VideoProcessor

import realtimekit.org.webrtc.VideoSink


class CustomVideoProcessor : VideoProcessor {

  override fun onCapturerStarted(started: Boolean) {}


  override fun onCapturerStopped() {}


  override fun onFrameCaptured(frame: VideoFrame?) {}


  override fun setSink(sink: VideoSink?) {}

}


```

### Usage example

Once you have created and configured your `VideoProcessor`, pass it to the `RealtimeKitMeetingBuilder` object. This will process video frames captured by the camera before they are sent to other participants or rendered locally:

Kotlin

```

// Assuming 'myCustomProcessor' is an instance of any VideoProcessor implementation

// (for example, ChainVideoProcessor, FilterVideoProcessor, and more).


val myCustomProcessor = CustomProcessor()


// Set the video processor on the meeting builder.

val meeting = RealtimeKitMeetingBuilder

  .setVideoProcessor(processor = myCustomProcessor)

  .build(activity)


// You can also pass an EglBase to the builder

// This is useful when using FilterVideoProcessor

val eglBase = EglBase.create()

val meeting = RealtimeKitMeetingBuilder

  .setVideoProcessor(eglBase = eglBase, processor = myCustomProcessor)

  .build(activity)


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/video-effects/","name":"Video Effects"}}]}
```

---

---
title: Waiting Room
description: The waiting room feature allows hosts to control who can join a meeting. When enabled, participants must wait for approval before entering the meeting.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/core/waiting-room.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Waiting Room

Prerequisites

This page assumes you've already initialized the SDK and understand the meeting object structure. Refer to [Initialize SDK](https://developers.cloudflare.com/realtime/realtimekit/core/) and [Meeting Object Explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) if needed.

The waiting room feature allows hosts to control who can join a meeting. When enabled, participants must wait for approval before entering the meeting.

WebMobile

ReactWeb ComponentsAngular

## How the Waiting Room Works

After you call `meeting.join()`, one of two events will occur:

* **`roomJoined`** \- You are allowed to join the meeting immediately
* **`waitlisted`** \- You are placed in the waiting room and must wait for host approval

Use `meeting.self.roomState` to track the user's state in the meeting.

Note

The diagram below represents only waiting room-related states. The `roomState` property also transitions through other states like `'disconnected'`, `'left'`, `'kicked'`, and `'ended'`.

## Waiting Room States

### State Flow

```

        join()

          ↓

    [waitlisted]  ←------ (host rejects)

          ↓                     ↓

   (host accepts)           [rejected]

          ↓

      [joined]


```

## Listening to State Changes

### Joined Event

Triggered when the local user successfully joins the meeting.

Monitor when the local user joins the meeting:

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";

import { useEffect } from "react";


function MeetingStatus() {

  const roomState = useRealtimeKitSelector((m) => m.self.roomState);

  const joined = roomState === "joined";


  useEffect(() => {

    if (joined) {

      console.log("Successfully joined the meeting");

    }

  }, [joined]);


  return joined ? <div>You are in the meeting</div> : null;

}


```

Alternatively, use event listeners:

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";


useEffect(() => {

  if (!meeting) return;


  const handleRoomJoined = () => {

    console.log("Successfully joined the meeting");

  };


  meeting.self.on("roomJoined", handleRoomJoined);


  return () => {

    meeting.self.off("roomJoined", handleRoomJoined);

  };

}, [meeting]);


```

JavaScript

```

meeting.self.on("roomJoined", () => {

  // Local user is in the meeting

  console.log("Successfully joined the meeting");

});


```

Kotlin

```

meeting.addMeetingRoomEventListener(object : RtkMeetingRoomEventListener {

  override fun onMeetingRoomJoinCompleted(meeting: RealtimeKitClient) {

    // Local user is in the meeting

  }

})


```

Swift

```

extension MeetingViewModel: RtkMeetingRoomEventListener {

  func onMeetingRoomJoinCompleted(meeting: RealtimeKitClient) {

    // Local user is in the meeting

  }

}


```

Dart

```

class MeetingRoomNotifier extends RtkMeetingRoomEventListener {

  @override

  void onMeetingRoomJoinCompleted() {

    // Local user is in the meeting

  }

}


meeting.addMeetingRoomEventListener(MeetingRoomNotifier());


```

Monitor when the local user joins the meeting:

```

import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";

import { useEffect } from "react";


function MeetingStatus() {

  const roomState = useRealtimeKitSelector((m) => m.self.roomState);

  const joined = roomState === "joined";


  useEffect(() => {

    if (joined) {

      console.log("Successfully joined the meeting");

    }

  }, [joined]);


  return joined ? <Text>You are in the meeting</Text> : null;

}


```

Alternatively, use event listeners:

```

import { useRealtimeKitClient } from "@cloudflare/realtimekit-react-native";


useEffect(() => {

  if (!meeting) return;


  const handleRoomJoined = () => {

    console.log("Successfully joined the meeting");

  };


  meeting.self.on("roomJoined", handleRoomJoined);


  return () => {

    meeting.self.off("roomJoined", handleRoomJoined);

  };

}, [meeting]);


```

### Waitlisted Event

Triggered when the local user is placed in the waiting room.

Monitor when the local user is in the waiting room:

```

function WaitingRoomStatus() {

  const roomState = useRealtimeKitSelector((m) => m.self.roomState);

  const isWaitlisted = roomState === "waitlisted";


  useEffect(() => {

    if (isWaitlisted) {

      console.log("You are in the waiting room");

    }

  }, [isWaitlisted]);


  return isWaitlisted ? <div>Waiting for host approval...</div> : null;

}


```

Alternatively, use event listeners:

```

useEffect(() => {

  if (!meeting) return;


  const handleWaitlisted = () => {

    console.log("You are in the waiting room");

  };


  meeting.self.on("waitlisted", handleWaitlisted);


  return () => {

    meeting.self.off("waitlisted", handleWaitlisted);

  };

}, [meeting]);


```

JavaScript

```

meeting.self.on("waitlisted", () => {

  // Local user is waitlisted

  console.log("You are in the waiting room. Waiting for host approval...");

});


```

Kotlin

```

meeting.addSelfEventListener(object : RtkSelfEventListener {

  override fun onWaitListStatusUpdate(waitListStatus: WaitListStatus) {

    when (waitListStatus) {

      WAITING -> {

        // Local user is in the waiting room

      }

      REJECTED -> {

        // Local user's join room request was rejected by the host

      }

      NONE, ACCEPTED -> {

        // Local user is not in the wait list or was already accepted

      }

    }

  }

})


```

Swift

```

extension MeetingViewModel: RtkSelfEventListener {

  func onWaitListStatusUpdate(waitListStatus: WaitListStatus) {

    switch waitListStatus {

    case .accepted:

      // Local user's join room request was accepted by the host

    case .waiting:

      // Local user is in the waiting room

    case .rejected:

      // Local user's join room request was rejected by the host

    default:

      return .none

    }

  }

}


```

Dart

```

class WaitingRoomNotifier extends RtkSelfEventListener {

  @override

  void onWaitListStatusUpdate(WaitlistStatus waitListStatus) {

    switch (waitListStatus) {

      case WaitlistStatus.waiting:

      // Local user is in the waiting room

      case WaitlistStatus.rejected:

      // Local user's join room request was rejected by the host

      case WaitlistStatus.accepted:

      // Local user's join room request was accepted by the host

      default:

        break;

    }

  }

}


meeting.addSelfEventListener(WaitingRoomNotifier());


```

Monitor when the local user is in the waiting room:

```

function WaitingRoomStatus() {

  const roomState = useRealtimeKitSelector((m) => m.self.roomState);

  const isWaitlisted = roomState === "waitlisted";


  useEffect(() => {

    if (isWaitlisted) {

      console.log("You are in the waiting room");

    }

  }, [isWaitlisted]);


  return isWaitlisted ? <Text>Waiting for host approval...</Text> : null;

}


```

Alternatively, use event listeners:

```

useEffect(() => {

  if (!meeting) return;


  const handleWaitlisted = () => {

    console.log("You are in the waiting room");

  };


  meeting.self.on("waitlisted", handleWaitlisted);


  return () => {

    meeting.self.off("waitlisted", handleWaitlisted);

  };

}, [meeting]);


```

### Rejected Event

Triggered when the host rejects the entry request.

Monitor when the host rejects the entry request:

```

function RejectionStatus() {

  const roomState = useRealtimeKitSelector((m) => m.self.roomState);

  const rejected = roomState === "rejected";


  useEffect(() => {

    if (rejected) {

      console.log("Your entry request was rejected");

    }

  }, [rejected]);


  return rejected ? <div>Your entry was rejected by the host</div> : null;

}


```

Alternatively, use event listeners:

```

useEffect(() => {

  if (!meeting) return;


  const handleRoomLeft = ({ state }) => {

    if (state === "rejected") {

      console.log("Your entry request was rejected");

    }

  };


  meeting.self.on("roomLeft", handleRoomLeft);


  return () => {

    meeting.self.off("roomLeft", handleRoomLeft);

  };

}, [meeting]);


```

JavaScript

```

meeting.self.on("roomLeft", ({ state }) => {

  if (state === "rejected") {

    // Host rejected the entry

    console.log("Your entry request was rejected");

  }

});


```

When the host rejects the entry request, the `onWaitListStatusUpdate` callback is triggered with `WaitListStatus.REJECTED`:

Kotlin

```

meeting.addSelfEventListener(object : RtkSelfEventListener {

  override fun onWaitListStatusUpdate(waitListStatus: WaitListStatus) {

    when (waitListStatus) {

      WaitListStatus.REJECTED -> {

        // Local user's join room request was rejected by the host

        Log.d("WaitingRoom", "Your entry request was rejected")

      }

      WaitListStatus.WAITING -> {

        // Local user is in the waiting room

      }

      WaitListStatus.ACCEPTED, WaitListStatus.NONE -> {

        // Local user was accepted or not in waitlist

      }

    }

  }

})


```

When the host rejects the entry request, the `onWaitListStatusUpdate` callback is triggered with `WaitListStatus.rejected`:

Swift

```

extension MeetingViewModel: RtkSelfEventListener {

  func onWaitListStatusUpdate(waitListStatus: WaitListStatus) {

    switch waitListStatus {

    case .rejected:

      // Local user's join room request was rejected by the host

      print("Your entry request was rejected")

    case .waiting:

      // Local user is in the waiting room

      break

    case .accepted:

      // Local user's join room request was accepted by the host

      break

    default:

      break

    }

  }

}


```

When the host rejects the entry request, the `onWaitListStatusUpdate` callback is triggered with `WaitlistStatus.rejected`:

Dart

```

class WaitingRoomNotifier extends RtkSelfEventListener {

  @override

  void onWaitListStatusUpdate(WaitlistStatus waitListStatus) {

    switch (waitListStatus) {

      case WaitlistStatus.rejected:

        // Local user's join room request was rejected by the host

        print("Your entry request was rejected");

      case WaitlistStatus.waiting:

        // Local user is in the waiting room

        break;

      case WaitlistStatus.accepted:

        // Local user's join room request was accepted by the host

        break;

      default:

        break;

    }

  }

}


meeting.addSelfEventListener(WaitingRoomNotifier());


```

Monitor when the host rejects the entry request:

```

function RejectionStatus() {

  const roomState = useRealtimeKitSelector((m) => m.self.roomState);

  const rejected = roomState === "rejected";


  useEffect(() => {

    if (rejected) {

      console.log("Your entry request was rejected");

    }

  }, [rejected]);


  return rejected ? <Text>Your entry was rejected by the host</Text> : null;

}


```

Alternatively, use event listeners:

```

useEffect(() => {

  if (!meeting) return;


  const handleRoomLeft = ({ state }) => {

    if (state === "rejected") {

      console.log("Your entry request was rejected");

    }

  };


  meeting.self.on("roomLeft", handleRoomLeft);


  return () => {

    meeting.self.off("roomLeft", handleRoomLeft);

  };

}, [meeting]);


```

### Monitor State with roomState

You can also directly check the current room state.

Handle all waiting room states in one component:

```

function WaitingRoomManager() {

  const roomState = useRealtimeKitSelector((m) => m.self.roomState);


  switch (roomState) {

    case "init":

      return <div>Connecting...</div>;

    case "waitlisted":

      return <div>Waiting for host approval...</div>;

    case "joined":

      return <div>You are in the meeting</div>;

    case "rejected":

      return <div>Your entry was rejected</div>;

    case "left":

      return <div>You left the meeting</div>;

    case "kicked":

      return <div>You were removed from the meeting</div>;

    case "ended":

      return <div>The meeting has ended</div>;

    case "disconnected":

      return <div>Connection lost</div>;

    default:

      return null;

  }

}


```

JavaScript

```

const currentState = meeting.self.roomState;


if (currentState === "waitlisted") {

  console.log("Waiting for approval");

} else if (currentState === "joined") {

  console.log("In the meeting");

} else if (currentState === "rejected") {

  console.log("Entry was rejected");

}


```

Use the event listeners shown above to monitor state changes.

Use the event listeners shown above to monitor state changes.

Use the event listeners shown above to monitor state changes.

Handle all waiting room states in one component:

```

function WaitingRoomManager() {

  const roomState = useRealtimeKitSelector((m) => m.self.roomState);


  switch (roomState) {

    case "init":

      return <Text>Connecting...</Text>;

    case "waitlisted":

      return <Text>Waiting for host approval...</Text>;

    case "joined":

      return <Text>You are in the meeting</Text>;

    case "rejected":

      return <Text>Your entry was rejected</Text>;

    case "left":

      return <Text>You left the meeting</Text>;

    case "kicked":

      return <Text>You were removed from the meeting</Text>;

    case "ended":

      return <Text>The meeting has ended</Text>;

    case "disconnected":

      return <Text>Connection lost</Text>;

    default:

      return null;

  }

}


```

## Host Actions

Hosts can manage waiting room requests using participant management methods. See [Remote Participants](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/) for details on:

* **`acceptWaitingRoomRequest(participantId)`** \- Accept a participant from the waiting room
* **`rejectWaitingRoomRequest(participantId)`** \- Reject a participant's entry request

### Example: Host Accepting Participants

```

import {

  useRealtimeKitClient,

  useRealtimeKitSelector,

} from "@cloudflare/realtimekit-react";


function WaitingRoomHost() {

  const [meeting] = useRealtimeKitClient();

  const waitlistedParticipants = useRealtimeKitSelector((m) =>

    m.participants.waitlisted.toArray(),

  );


  const acceptParticipant = async (participantId) => {

    await meeting.participants.acceptWaitingRoomRequest(participantId);

  };


  const rejectParticipant = async (participantId) => {

    await meeting.participants.rejectWaitingRoomRequest(participantId);

  };


  return (

    <div>

      <h3>Waiting Room ({waitlistedParticipants.length})</h3>

      {waitlistedParticipants.map((participant) => (

        <div key={participant.id}>

          <span>{participant.name}</span>

          <button onClick={() => acceptParticipant(participant.id)}>

            Accept

          </button>

          <button onClick={() => rejectParticipant(participant.id)}>

            Reject

          </button>

        </div>

      ))}

    </div>

  );

}


```

JavaScript

```

// Get waitlisted participants

const waitlistedParticipants = meeting.participants.waitlisted.toArray();


// Accept the first waitlisted participant

if (waitlistedParticipants.length > 0) {

  const participantId = waitlistedParticipants[0].id;

  await meeting.participants.acceptWaitingRoomRequest(participantId);

}


```

Kotlin

```

// Get waitlisted participants

val waitlistedParticipants = meeting.participants.waitlisted


// Accept a participant from the waiting room

if (waitlistedParticipants.isNotEmpty()) {

  val participant = waitlistedParticipants[0]

  meeting.participants.acceptWaitingRoomRequest(participant.id)

}


// Reject a participant's entry request

if (waitlistedParticipants.isNotEmpty()) {

  val participant = waitlistedParticipants[0]

  meeting.participants.rejectWaitingRoomRequest(participant.id)

}


// Listen for waiting room events

meeting.addWaitlistEventListener(object : RtkWaitlistEventListener {

  override fun onWaitListParticipantJoined(participant: RtkRemoteParticipant) {

    // Called when a new participant joins the waiting room

  }


  override fun onWaitListParticipantAccepted(participant: RtkRemoteParticipant) {

    // Called when a waitlisted participant is accepted into the meeting

  }


  override fun onWaitListParticipantRejected(participant: RtkRemoteParticipant) {

    // Called when a waitlisted participant is denied entry

  }


  override fun onWaitListParticipantClosed(participant: RtkRemoteParticipant) {

    // Called when a waitlisted participant leaves the waiting room

  }

})


```

Swift

```

// Get waitlisted participants

let waitlistedParticipants = meeting.participants.waitlisted


// Accept a participant from the waiting room

if let participant = waitlistedParticipants.first {

  meeting.participants.acceptWaitingRoomRequest(id: participant.id)

}


// Reject a participant's entry request

if let participant = waitlistedParticipants.first {

  meeting.participants.rejectWaitingRoomRequest(participant.id)

}


// Listen for waiting room events

extension MeetingViewModel: RtkWaitlistEventListener {

  func onWaitListParticipantJoined(participant: RtkRemoteParticipant) {

    // Called when a new participant joins the waiting room

  }


  func onWaitListParticipantAccepted(participant: RtkRemoteParticipant) {

    // Called when a waitlisted participant is accepted into the meeting

  }


  func onWaitListParticipantRejected(participant: RtkRemoteParticipant) {

    // Called when a waitlisted participant is denied entry

  }


  func onWaitListParticipantClosed(participant: RtkRemoteParticipant) {

    // Called when a waitlisted participant leaves the waiting room

  }

}


```

Dart

```

// Get waitlisted participants

final waitlistedParticipants = meeting.participants.waitlisted;


// Accept a participant from the waiting room

if (waitlistedParticipants.isNotEmpty) {

  final participant = waitlistedParticipants[0];

  meeting.participants.acceptWaitlistedParticipant(participant);

}


// Reject a participant's entry request

if (waitlistedParticipants.isNotEmpty) {

  final participant = waitlistedParticipants[0];

  meeting.participants.rejectWaitlistedParticipant(participant);

}


// Accept all waitlisted participants at once

meeting.participants.acceptAllWaitingRoomRequests();


// Listen for waiting room events

class WaitlistStatusNotifier extends RtkWaitlistEventListener {

  @override

  void onWaitListParticipantJoined(RtkRemoteParticipant participant) {

    // Called when a new participant joins the waiting room

  }


  @override

  void onWaitListParticipantAccepted(RtkRemoteParticipant participant) {

    // Called when a waitlisted participant is accepted into the meeting

  }


  @override

  void onWaitListParticipantRejected(RtkRemoteParticipant participant) {

    // Called when a waitlisted participant is denied entry

  }


  @override

  void onWaitListParticipantClosed(RtkRemoteParticipant participant) {

    // Called when a waitlisted participant leaves the waiting room

  }

}


meeting.addWaitlistEventListener(WaitlistStatusNotifier());


```

```

import {

  useRealtimeKitClient,

  useRealtimeKitSelector,

} from "@cloudflare/realtimekit-react-native";

import { View, Text, Button } from "react-native";


function WaitingRoomHost() {

  const [meeting] = useRealtimeKitClient();

  const waitlistedParticipants = useRealtimeKitSelector((m) =>

    m.participants.waitlisted.toArray(),

  );


  const acceptParticipant = async (participantId) => {

    await meeting.participants.acceptWaitingRoomRequest(participantId);

  };


  const rejectParticipant = async (participantId) => {

    await meeting.participants.rejectWaitingRoomRequest(participantId);

  };


  return (

    <View>

      <Text>Waiting Room ({waitlistedParticipants.length})</Text>

      {waitlistedParticipants.map((participant) => (

        <View key={participant.id}>

          <Text>{participant.name}</Text>

          <Button

            title="Accept"

            onPress={() => acceptParticipant(participant.id)}

          />

          <Button

            title="Reject"

            onPress={() => rejectParticipant(participant.id)}

          />

        </View>

      ))}

    </View>

  );

}


```

## Best Practices

* **Provide Clear Feedback** \- Show users when they're in the waiting room and that they're waiting for approval
* **Set Expectations** \- Let users know their request is being reviewed
* **Handle Rejection Gracefully** \- Provide a friendly message if entry is rejected
* **Monitor State Changes** \- Subscribe to room state changes to update your UI accordingly
* **Check Permissions** \- Ensure your app has appropriate permissions configured in the preset to use waiting room features

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/core/","name":"Build using Core SDK"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/core/waiting-room/","name":"Waiting Room"}}]}
```

---

---
title: FAQ
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/faq.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# FAQ

How can I generate the Cloudflare API Token?

To use RealtimeKit APIs, you must have a [Cloudflare account ↗](https://dash.cloudflare.com).

Follow the [Create API token guide](https://developers.cloudflare.com/fundamentals/api/get-started/create-token/) to create a new token via the [Cloudflare dashboard ↗](https://dash.cloudflare.com/profile/api-tokens). When configuring permissions, ensure that **Realtime** / **Realtime Admin** permissions are selected. Configure any additional [access policies and restrictions](https://developers.cloudflare.com/fundamentals/api/reference/permissions/) as needed for your use case.

### Meetings

Can I schedule meetings in advance with RealtimeKit?

While RealtimeKit does not include a built-in scheduling system, you can implement the scheduling experience on top of it in your application. RealtimeKit meetings do not have start or end time, so your backend must store the schedule and enforce when users are allowed to join. A common approach is:

* When a user schedules a meeting, your backend creates a meeting in RealtimeKit and stores the meeting `id` together with the start and end times.
* When a user tries to join the meeting in your application, your backend checks whether the current time is within the allowed window.
* If the checks pass, your backend [adds the participant](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to the meeting, returns the participant auth token to the frontend and the frontend passes that token to the RealtimeKit SDK so the user can join.

How do I prevent participants from joining a meeting after a specific date or time?

You can disable the meeting at the required time by setting its status to `INACTIVE` using a `PATCH` request to the[Update Meeting](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/update%5Fmeeting%5Fby%5Fid/) endpoint.

This prevents participants from joining the meeting and prevents any new Sessions from starting.

Terminal window

```

curl https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/realtime/kit/{APP_ID}/meetings/{MEETING_ID} \

--request PATCH \

--header "Authorization: Bearer <CLOUDFLARE_API_TOKEN>" \

--header "Content-Type: application/json" \

--data '{ "status": "INACTIVE" }'


```

### Participants

How do I generate an auth token for a participant?

Your backend generates an authentication token by adding the user as a participant to a meeting with the [Add Participant](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/)API endpoint. The API response includes a `token` field, which is the authentication token for that participant in that meeting. If you need a new token for an existing participant after the previous token has expired, use the [Refresh Participant Token](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/refresh%5Fparticipant%5Ftoken/)endpoint. For more details, see [Participant tokens](https://developers.cloudflare.com/realtime/realtimekit/concepts/participant/#participant-tokens).

Can the same user join from multiple devices or browser tabs?

Yes. A single participant can be represented by multiple peers if the user joins the same meeting from different devices or tabs. Each connection becomes a separate peer, but they all map back to the same participant.

How can I prevent a user from joining a meeting again?

Delete that user's participant for the meeting using the [Delete Participant](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/delete%5Fmeeting%5Fparticipant/)API endpoint. Once the participant is deleted and you stop issuing new tokens for them, they will no longer be able to join that meeting.

Can the same participant join multiple sessions of a meeting?

Yes. As long as the participant exists for that meeting and has a valid authentication token, that participant can join multiple live sessions of the same meeting over time.

Do I need to create a new participant for every session?

In most cases, no. You typically create a participant once for a given user and meeting, and then reuse that participant across sessions of that meeting. You may need to refresh the participant’s authentication token over time, but you do not need to recreate the participant.

What should I use for custom\_participant\_id?

Use a stable internal identifier from your own system, such as a numeric user id or UUID. Do not use personal data such as email addresses, phone numbers, or other personally identifiable information.

### Presets

Do I need a new preset for every meeting or participant?

Presets are **re-usable** set of rules and configurations that are defined at the App level. You can use the same preset for multiple participants.

Read more about presets [here](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/).

### Client Side SDKs

How do I decide which SDK to select?

RealtimeKit support all the popular frameworks for web and mobile platforms.

We **recommend using our UI Kits** For most use cases.

Please Note: When you use our UI Kit, you also get the core SDK with it, which can be used to build additional features based on your needs.

For more information please refer to our [SDK Selection Guide](https://developers.cloudflare.com/realtime/realtimekit/sdk-selection/)

### Camera

How can I set an end user's camera quality to 1080p?

When initializing RealtimeKit, you can set the media configurations for camera quality.

Refer to the media configurations [here](https://developers.cloudflare.com/realtime/realtimekit/core/#advanced-options) for more details.

Higher camera quality increases bandwidth usage and may impact meeting performance on lower-end devices if the end user's device is not powerful enough to handle 1080p from multiple peers.

How can I set a custom frame rate for an end user's camera feed?

When initializing RealtimeKit, you can set the media configurations for camera.

Refer to the media configurations [here](https://developers.cloudflare.com/realtime/realtimekit/core/#advanced-options) for more details.

Higher video frame rates increase bandwidth usage and may impact the video feed quality of other peers in the meeting if there are bandwidth issues with the end user's device. Set the video frame rate to a lower value (for example, <= 30) in group calls. The current default is 24/30 FPS based on the simulcast layer.

### Microphone

Why is my microphone not auto-selected when plugged in?

RealtimeKit SDK attempts to provide the best experience by auto-selecting the microphone. It prefers Bluetooth devices over wired devices. However, if the device was already plugged in before joining a RealtimeKit meeting and the device does not have `bluetooth`, `headset`, or `earphone` in its label, it may be missed.

We support auto-selection of microphones with the label `bluetooth`, `headset`, `earphone`, or `microphone`, and USB devices with labels such as `usb` and `wired`. Some commonly used devices such as AirPods or Airdopes are also supported. We do not auto-select virtual devices.

If auto-selection fails, end users can manually select the microphone from the Settings button in the meeting and the SDK will remember the selection for future sessions. If you have a device that you believe is commonly used, please contact support to request first-hand auto-selection support for it.

### Screen Share

How can I set a custom frame rate for screen share?

When initializing RealtimeKit, you can set the media configurations for screen share.

Refer to the media configurations [here](https://developers.cloudflare.com/realtime/realtimekit/core/#advanced-options) for more details.

Higher screen share frame rates increase bandwidth usage and may impact the video feed quality of other peers in the meeting if there are bandwidth issues with the end user's device. Set the screen share frame rate to a lower value (for example, <= 30) in group calls. In most use cases, 5 FPS (default) is sufficient for screen share.

### Chat

I cannot send a chat message

There could be multiple reasons for this.

First, try a sample meeting on the [demo app ↗](https://demo.realtime.cloudflare.com/). If you cannot send a message in the demo app, contact support. If you can send a message in the demo app, the issue is on the integration side.

To troubleshoot integration issues, first check if the user has joined the meeting successfully. If the user has [joined](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) the meeting successfully, check if the user's [preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/) has permissions to send messages. If you are using a custom UI, check if the core [Chat APIs](https://developers.cloudflare.com/realtime/realtimekit/core/chat/) are working to eliminate the Core SDK from the usual suspects.

If this does not solve the issue, check if your framework is blocking the UI. Frameworks like Material UI can block input focus using focus traps in Drawer component. There is usually a prop to disable the focus trap. Material UI has a `disableEnforceFocus` prop for this purpose.

If you are still unable to send a message, please contact support.

### Demo App

Can I use the Cloudflare hosted demo app or examples in my website as an iframe?

We strongly recommend against embedding the Cloudflare hosted demo app or examples as an iframe in your website, even if you pass authentication tokens via URL parameters.

Instead, set up the default meeting UI in your own website by following the [UI Kit setup guide](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/) or deploy the [RealtimeKit web examples ↗](https://github.com/cloudflare/realtimekit-web-examples/) under your own domain. The effort required for either approach is minimal and provides significant benefits:

* **Control**: You maintain full control over the user experience, structure, and interface.
* **Stability**: Your implementation remains consistent and will not change overnight, protecting your product from sudden disruptions.
* **Reliability**: You control when and how to upgrade, ensuring a stable experience for your users.

The demo app and example applications may be updated at any time without prior notice.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/faq/","name":"FAQ"}}]}
```

---

---
title: Legal
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/legal/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Legal

* [Privacy Policy ↗](https://www.cloudflare.com/application/privacypolicy/)
* [Application Terms of Service ↗](https://www.cloudflare.com/application/terms/)
* [Third party licenses](https://developers.cloudflare.com/realtime/realtimekit/legal/3rdparty/)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/legal/","name":"Legal"}}]}
```

---

---
title: Pricing
description: Cloudflare RealtimeKit is currently in Beta and is available at no cost during this period.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/pricing.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Pricing

Cloudflare RealtimeKit is currently in Beta and is available at no cost during this period.

When RealtimeKit reaches general availability (GA), usage will be charged according to the pricing model below:

| Feature                                               | Price                                 |
| ----------------------------------------------------- | ------------------------------------- |
| Audio/Video Participant                               | $0.002 / minute                       |
| Audio-Only Participant                                | $0.0005 / minute                      |
| Export (recording, RTMP or HLS streaming)             | $0.010 / minute                       |
| Export (recording, RTMP or HLS streaming, audio only) | $0.003 / minute                       |
| Export (Raw RTP) into R2                              | $0.0005 / minute                      |
| Transcription (Real-time)                             | Standard model pricing via Workers AI |

Whether a participant is an audio-only participant or an audio/video participant is determined by the `Meeting Type` of their [preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/pricing/","name":"Pricing"}}]}
```

---

---
title: Quickstart
description: To integrate RealtimeKit in your application, you must have a Cloudflare account.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/quickstart.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Quickstart

### Prerequisites

To integrate RealtimeKit in your application, you must have a [Cloudflare account ↗](https://dash.cloudflare.com).

1. Follow the [Create API token guide](https://developers.cloudflare.com/fundamentals/api/get-started/create-token/) to create a new token via the [Cloudflare dashboard ↗](https://dash.cloudflare.com/profile/api-tokens).
2. When configuring permissions, ensure that **Realtime** / **Realtime Admin** permissions are selected.
3. Configure any additional [access policies and restrictions](https://developers.cloudflare.com/fundamentals/api/reference/permissions/) as needed for your use case.

_Optional:_ Alternatively, [create tokens programmatically via the API](https://developers.cloudflare.com/fundamentals/api/how-to/create-via-api/). Please ensure your access policy includes the **Realtime** permission.

### Installation

Select a framework based on the platform you are building for.

WebMobile

ReactWeb ComponentsAngular

Please install the following dependencies into your project repository:

Terminal window

```

npm i @cloudflare/realtimekit-react @cloudflare/realtimekit-react-ui


```

_Optional:_ You can also build on top of our ready-made template:

Terminal window

```

git clone https://github.com/cloudflare/realtimekit-web-examples.git

cd realtimekit-web-examples/react-examples/examples/default-meeting-ui


```

Please install the following dependencies into your project repository:

Terminal window

```

npm i @cloudflare/realtimekit-web @cloudflare/realtimekit-ui


```

_Optional:_ You can also build on top of our ready-made template:

Terminal window

```

git clone https://github.com/cloudflare/realtimekit-web-examples.git

cd realtimekit-web-examples/html-examples/examples/default-meeting-ui


```

Please install the following dependencies into your project repository:

Terminal window

```

npm i @cloudflare/realtimekit-angular @cloudflare/realtimekit-angular-ui


```

_Optional:_ You can also build on top of our ready-made template:

Terminal window

```

git clone https://github.com/cloudflare/realtimekit-web-examples.git

cd realtimekit-web-examples/angular-examples/examples/default-meeting-ui


```

Add the following dependency to your `build.gradle` file:

```

dependencies {

  implementation 'com.cloudflare.realtimekit:ui-android:0.3.0'

}


```

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/RealtimeKitUI`.
3. Select the version and add the package to your project.

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.

```

<key>NSBluetoothPeripheralUsageDescription</key>

<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>

<key>NSBluetoothAlwaysUsageDescription</key>

<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>

<key>NSCameraUsageDescription</key>

<string>Access camera to enable video during meetings.</string>

<key>NSMicrophoneUsageDescription</key>

<string>Access microphone to enable audio during meetings.</string>

<key>NSPhotoLibraryUsageDescription</key>

<string>Access photos to share images during meetings.</string>

<key>UIBackgroundModes</key>

<array>

  <string>audio</string>

  <string>voip</string>

  <string>fetch</string>

  <string>remote-notification</string>

</array>


```

The `UIBackgroundModes` key is used in the `Info.plist` file of an iOS app to declare the app's supported background execution modes. This key is an array of strings that specifies the types of background tasks that the app supports. By declaring the background modes, the app can continue to run in the background and perform specific tasks even when it is not in the foreground.

Note

The use of background modes should be justified and comply with Apple's App Store Review Guidelines. Apps that misuse background modes or unnecessarily run in the background may be rejected during the app review process.

Source: [Apple Developer Documentation: Declaring Your App's Supported Background Tasks ↗](https://developer.apple.com/documentation/xcode/configuring-background-execution-modes)

Install the RealtimeKit UI Kit by adding the dependency to your `pubspec.yaml` file:

Terminal window

```

flutter pub add realtimekit_ui


```

Then import the package into your project:

Dart

```

import 'package:realtimekit_ui/realtimekit_ui.dart';


```

* [ Android ](#tab-panel-5965)
* [ iOS ](#tab-panel-5966)

Set `compileSdkVersion 36` and `minSdkVersion 24` in your `build.gradle` file at `<project root>/android/app/build.gradle`:

```

defaultConfig {

  ...

  compileSdkVersion 36

  minSdkVersion 24

  ...

}


```

Change the Kotlin version to `1.9.0`:

```

ext.kotlin_version = '1.9.0'


```

Set your platform to iOS 13.0 or above in your `Podfile`:

```

platform :ios, '13.0'


```

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.

```

<key>NSBluetoothPeripheralUsageDescription</key>

<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>

<key>NSBluetoothAlwaysUsageDescription</key>

<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>

<key>NSCameraUsageDescription</key>

<string>Access camera to enable video during meetings.</string>

<key>NSMicrophoneUsageDescription</key>

<string>Access microphone to enable audio during meetings.</string>

<key>NSPhotoLibraryUsageDescription</key>

<string>Access photos to share images during meetings.</string>

<key>UIBackgroundModes</key>

<array>

  <string>audio</string>

  <string>voip</string>

  <string>fetch</string>

  <string>remote-notification</string>

</array>


```

**Optional:** If you are allowing users to download attachments in chat, add the following permissions to your `Info.plist`:

```

<key>LSSupportsOpeningDocumentsInPlace</key>

<true/>

<key>UIFileSharingEnabled</key>

<true/>


```

* [ React Native ](#tab-panel-5967)
* [ Expo ](#tab-panel-5968)

Install the dependencies:

Terminal window

```

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:

* React Native 0.64 - 0.74: `npm install react-native-safe-area-context@^4.0.0`
* React Native >= 0.74: `npm install react-native-safe-area-context@^5.0.0`

Refer to the [react-native-svg installation guide ↗](https://github.com/software-mansion/react-native-svg) for setup.

Install the dependencies:

Terminal window

```

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


```

Install `react-native-safe-area-context` based on your React Native version:

* React Native 0.64 - 0.74: `npm install react-native-safe-area-context@^4.0.0`
* React Native >= 0.74: `npm install react-native-safe-area-context@^5.0.0`

Install Expo config plugins:

Terminal window

```

npx expo install @expo/config-plugins


```

Add the plugins to your `app.json`:

```

{

  "expo": {

    "plugins": [

      "@cloudflare/realtimekit-react-native",

      "@cloudflare/react-native-webrtc"

    ]

  }

}


```

Run `prebuild` to set up native modules:

Terminal window

```

npx expo prebuild


```

* [ Android ](#tab-panel-5969)
* [ iOS ](#tab-panel-5970)

The following instructions are for release builds. Debug builds should work without additional steps.

Edit your `android/gradle.properties` and add the following lines:

```

newArchEnabled=false

android.useFullClasspathForDexingTransform=true


```

**Note:** Starting from version `>=0.2.0`, add a required `blob_provider_authority` string resource in the `strings.xml` file:

```

<resources>

  ...

  <string name="blob_provider_authority">YOUR_APP_RESOURCE_NAME</string>

  ...

</resources>


```

Create or append to the file `android/app/proguard-rules.pro`:

```

-keep class realtimekit.org.webrtc.** { *; }

-dontwarn org.chromium.build.BuildHooksAndroid


```

In your `android/app/build.gradle`, edit the release configuration and add the following line importing the ProGuard configuration:

```

buildTypes {

  release {

    ...

    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

  }

}


```

**Note:** The minimum supported iOS version is **14.0**.

Open your `Podfile` and set the platform to iOS 14:

```

platform :ios, '14.0'


```

Add the following permission entries to your `Info.plist` file:

```

<key>NSCameraUsageDescription</key>

<string>Access camera to enable video during meetings.</string>

<key>NSMicrophoneUsageDescription</key>

<string>Access microphone to enable audio during meetings.</string>

<key>NSPhotoLibraryUsageDescription</key>

<string>Access photos to share images during meetings.</string>

<key>UIViewControllerBasedStatusBarAppearance</key>

<false/>


```

### Create a RealtimeKit App

You can create an application from the [Cloudflare Dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/kit), by clicking on Create App.

_Optional:_ You can also use our [API reference](https://developers.cloudflare.com/api/resources/realtime%5Fkit/) for creating an application:

Terminal window

```

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/apps' \

--header 'Content-Type: application/json' \

--header 'Authorization: Bearer <api_token>' \

--data '{"name": "My First Cloudflare RealtimeKit app"}'


```

> **Note:** We recommend creating different apps for staging and production environments.

### Create a Meeting

Use our [Meetings API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/) to create a meeting. We will use the **ID from the response** in subsequent steps.

Terminal window

```

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings' \

--header 'Content-Type: application/json' \

--header 'Authorization: Bearer <api_token>' \

--data '{"title": "My First Cloudflare RealtimeKit meeting"}'


```

### Add Participants

#### Create a Preset

Presets define what permissions a user should have. Learn more in the Concepts guide. You can create new presets using the [Presets API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/presets/methods/create/) or via the [RealtimeKit dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/kit).

> **Note:** Skip this step if you created the app in the dashboard—default presets are already set up for you.

> **Note:** Presets can be reused across multiple meetings. Define a role (for example, admin or viewer) once and apply it to participants in any number of meetings.

#### Add a Participant

A participant is added to a meeting using the `Meeting ID` created above and selecting a `Preset Name` from the available options.

The response includes an `authToken` which the **Client SDK uses to add this participant to the meeting** room.

Terminal window

```

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings/<meeting_id>/participants' \

--header 'Content-Type: application/json' \

--header 'Authorization: Bearer <api_token>' \

--data '{

  "name": "Mary Sue",

  "preset_name": "<preset_name>",

  "custom_participant_id": "<uuid_of_the_user_in_your_system>"

}'


```

Learn more about adding participants in the [API reference](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/).

### Frontend Integration

You can now add the RealtimeKit Client SDK to your application.

Inside your react application, add the following code:

TypeScript

```

import { useEffect } from "react";

import {

  useRealtimeKitClient,

  useRealtimeKitMeeting,

  RealtimeKitProvider,

} from "@cloudflare/realtimekit-react";

import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";


export default function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();


useEffect(() => {

initMeeting({ authToken: '<auth-token>' });

}, []);


return (


<RealtimeKitProvider value={meeting}>

  <MyMeetingUI />

</RealtimeKitProvider>

); }


export default function MyMeetingUI() {

  const { meeting } = useRealtimeKitMeeting();

  return (

    <RtkMeeting mode="fill" meeting={meeting} showSetupScreen={true} />

  );


}


```

Replace `<auth-token>` with the authToken obtained from the previous step.

Run the application and navigate to the meeting page to see the RealtimeKit Client SDK in action.

Terminal window

```

npm run dev


```

_Optional:_ If you are using our ready-made template, run the following command to start the application:

Terminal window

```

npm i -g vite && npm run dev


```

Open the app in your browser. To join the meeting, append your auth token to the preview URL:

Terminal window

```

http://localhost:5173?authToken=<auth_token>


```

Inside your html application, add the following code:

```

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Default Meeting UI | RealtimeKit</title>


    <!-- Import helper to load UI Kit components -->

    <script type="module">

      import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js';

      defineCustomElements();

    </script>


    <!-- Import RealtimeKit Core via CDN -->

    <script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>


  </head>

  <body>

    <rtk-meeting id="my-meeting" show-setup-screen="true" />


    <script>

      const searchParams = new URL(window.location.href).searchParams;


      const authToken = searchParams.get('authToken');


      if (!authToken) {

        alert(

          "An authToken wasn't passed, please pass an authToken in the URL query to join a meeting."

        );

      }


      // Initialize a meeting

      RealtimeKitClient.init({

        authToken,

      }).then((meeting) => {

        document.getElementById('my-meeting').meeting = meeting;

      });

    </script>


  </body>

</html>


```

Replace `<auth-token>` with the authToken obtained from the previous step.

Run the application and navigate to the meeting page to see the RealtimeKit Client SDK in action.

Terminal window

```

npm run dev


```

_Optional:_ If you are using our ready-made template, run the following command to start the application:

Terminal window

```

npm i -g vite && npm run dev


```

Open the app in your browser. To join the meeting, append your auth token to the preview URL:

Terminal window

```

http://localhost:5173?authToken=<auth_token>


```

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.

TypeScript

```

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { RTKComponentsModule } from '@cloudflare/realtimekit-angular';

import { AppComponent } from './app.component';


@NgModule({

declarations: [AppComponent],

imports: [BrowserModule, RTKComponentsModule],

providers: [],

bootstrap: [AppComponent],

})

export class AppModule {};


```

_Optional:_ If you are using TypeScript, set allowSyntheticDefaultImports as true in your tsconfig.json.

TypeScript

```

{

  "compilerOptions": {

    "allowSyntheticDefaultImports": true

  }

}


```

Load the RtkMeeting component to your template file (component.html).

```

<rtk-meeting #myid></rtk-meeting>


```

Initialise the Meeting

TypeScript

```

  class AppComponent {

  title = 'MyProject';

  @ViewChild('myid') meetingComponent: RtkMeeting;

  rtkMeeting: RealtimeKitClient;


  async ngAfterViewInit() {

    const meeting = await RealtimeKitClient.init({

    authToken: '<auth-token>',

    });

    meeting.join();

    this.rtkMeeting = meeting;

    if (this.meetingComponent) this.meetingComponent.meeting = meeting;

  }

  }


```

Replace `<auth-token>` with the authToken obtained from the previous step.

Run the application and navigate to the meeting page to see the RealtimeKit Client SDK in action.

Terminal window

```

npm run dev


```

_Optional:_ If you are using our ready-made template, run the following command to start the application:

Terminal window

```

npm i -g vite && npm run dev


```

Open the app in your browser. To join the meeting, append your auth token to the preview URL:

Terminal window

```

http://localhost:5173?authToken=<auth_token>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/quickstart/","name":"Quickstart"}}]}
```

---

---
title: Recording
description: Learn how RealtimeKit records the audio and video of multiple users in a meeting, as well as interacts with RealtimeKit plugins, in a single file using composite recording mode.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Recording

Learn how RealtimeKit records the audio and video of multiple users in a meeting, as well as interacts with RealtimeKit plugins, in a single file using composite recording mode.

Visit the following pages to learn more about recording meetings:

* [ Configure Video Settings ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-codecs/)
* [ Set Audio Configurations ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-audio-codec/)
* [ Add Watermark ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/add-watermark/)
* [ Disable Upload to RealtimeKit Bucket ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-realtimekit-bucket-config/)
* [ Create Custom Recording App Using Recording SDKs ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/create-record-app-using-sdks/)
* [ Interactive Recordings with Timed Metadata ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/interactive-recording/)
* [ Manage Recording Config Precedence Order ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/manage-recording-config-hierarchy/)
* [ Upload Recording to Your Cloud ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/custom-cloud-storage/)
* [ Start Recording ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/start-recording/)
* [ Stop Recording ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/stop-recording/)
* [ Monitor Recording Status ](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/monitor-status/)

RealtimeKit records the audio and video of multiple users in a meeting, as well as interactions with RealtimeKit plugins, in a single file using composite recording mode.

## How does RealtimeKit recording work?

RealtimeKit recordings are powered by anonymous virtual bot users who join your meeting, record it, and then upload it to RealtimeKit's Cloudflare R2 bucket. For video files, we currently support the[H.264 ↗](https://en.wikipedia.org/wiki/Advanced%5FVideo%5FCoding) and[VP8 ↗](https://en.wikipedia.org/wiki/VP8) codecs.

1. When the recording is finished, it is stored in RealtimeKit's Cloudflare R2 bucket.
2. RealtimeKit generates a downloadable link from which the recording can be downloaded. You can get the download URL using the[Fetch details of a recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/get%5Fone%5Frecording/)or from the Developer Portal.  
You can receive notifications of recording status in any of the following ways:  
   * Using the `recording.statusUpdate` webhook. RealtimeKit uses webhooks to notify your application when an event happens.  
   * Using the [Fetch active recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/get%5Factive%5Frecordings/).  
   * You can also view the states of recording from the Developer Portal.
3. Download the recording from the download url and store it to your cloud storage. The file is kept on RealtimeKit's server for seven days before being deleted.  
You can get the download URL using the[Fetch active recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/get%5Factive%5Frecordings/) or from the Developer Portal.  
We support transferring recordings to AWS, Azure, and DigitalOcean storage buckets. You can also choose to preconfigure the storage configurations using the Developer Portal or the[Start recording a meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/).

## Workflow

A typical workflow for recording a meeting involves the following steps:

1. Start a recording using the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/) or client side SDK.
2. Manage the recording using the [Pause, resume, or stop recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/pause%5Fresume%5Fstop%5Frecording/) or client side SDK.
3. Fetch the download URL for downloading the recording using the [Fetch details of a recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/get%5Fone%5Frecording/), webhook, or from the Developer Portal.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}}]}
```

---

---
title: Add Watermark
description: RealtimeKit's watermark feature enables you to include an image as a watermark in your recording. To add watermark, configure the following parameters to video_config in the Start Recording API.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/add-watermark.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Add Watermark

RealtimeKit's watermark feature enables you to include an image as a watermark in your recording. To add watermark, configure the following parameters to video\_config in the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/).

| **Parameter** | **Description**                                                                                                                                                                |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| URL           | Specify the URL of the watermark image                                                                                                                                         |
| Position      | Specify the placement of the watermark, you have the flexibility to choose between left top, right top, left bottom, or right bottom. The default position is set to left top. |
| Size          | Specify the height and width of the watermark in pixels.                                                                                                                       |

```

{

  "video_config": {

    "watermark": {

      "url": "https://test.io/images/client-logos-6.webp",

      "position": "left top",

      "size": {

        "height": 20,

        "width": 100

      }

    }

  }

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/add-watermark/","name":"Add Watermark"}}]}
```

---

---
title: Set Audio Configurations
description: Recording audio requires configuring the codec and channel parameters to guarantee optimal quality and compatibility with your application's demands.
The codec determines the encoding format for the audio, and the channel specifies the number of audio channels for the recording.
You can modify the following audio_config used for recording the audio:
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/configure-audio-codec.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Set Audio Configurations

Recording audio requires configuring the **codec** and **channel** parameters to guarantee optimal quality and compatibility with your application's demands. The codec determines the encoding format for the audio, and the channel specifies the number of audio channels for the recording. You can modify the following `audio_config` used for recording the audio:

## Codec

Codec determines the audio encoding format for recording, with MP3 and AAC being the supported formats.

* AAC (default)
* MP3

Note

If [VP8](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-codecs/) is selected for `video_config`, changing `audio_config` is not allowed. In this case, the codec in the `audio_config` is automatically set to `vorbis`.

## Channel

Audio signal pathway within an audio file that carries a specific sound source. The following channels are supported:

* stereo (default)
* mono

You can modify the configs by specifying it in the `audio_config` field in the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/), for example:

```

{

  "audio_config": {

    "codec": "AAC"

    "channel": "stereo"

  }

}


```

## Download Audio Files

The audio file for your recording is generated only if you passed the `audio_config` parameters in the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/).

When the recording is completed, you can use the `audio_download_url` provided in the response body of the [Fetch details of a recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/get%5Fone%5Frecording/) to download and export the audio file.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/configure-audio-codec/","name":"Set Audio Configurations"}}]}
```

---

---
title: Configure Video Settings
description: Video codecs are software programs that compress and decompress digital video data for transmission, storage, or playback. Configuring the appropriate video codec can help reduce file size, enhance video quality, and ensure compatibility with different playback devices.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/configure-codecs.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Configure Video Settings

Video codecs are software programs that compress and decompress digital video data for transmission, storage, or playback. Configuring the appropriate video codec can help reduce file size, enhance video quality, and ensure compatibility with different playback devices.

## Configure Codecs

You can modify the codec which is used for recording the videos. We currently support the following codecs:

* **H264 (default)**: Records video using the H.264 codec with 1280px × 720px resolution, and 384 kbps AAC audio in MP4 container.
* **VP8**: Records video using the VP8 codec with 1280px × 720px resolution, and Vorbis codec audio in WebM container.

You can change the codec by specifying the codec in the `video_config` field in the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/), for example:

```

{

  "video_config": {

    "codec": "H264"

  }

}


```

## Download Video Files

The video file for your recording is generated only if you passed the `video_config` parameters in the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/).

When the recording is completed, you can use the `downloadUrl` provided in the response body of the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/) to download and export the video file.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/configure-codecs/","name":"Configure Video Settings"}}]}
```

---

---
title: Disable Upload to RealtimeKit Bucket
description: Once the recording is complete, by default, RealtimeKit uploads all recordings to RealtimeKit's Cloudflare R2 bucket. Additionally, a presigned URL is generated with a 7-day expiry. The recording can be accessed using the downloadUrl associated with each recording.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/configure-realtimekit-bucket-config.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Disable Upload to RealtimeKit Bucket

Once the recording is complete, by default, RealtimeKit uploads all recordings to RealtimeKit's Cloudflare R2 bucket. Additionally, a presigned URL is generated with a 7-day expiry. The recording can be accessed using the `downloadUrl` associated with each recording.

However, RealtimeKit provides users with the flexibility to choose whether or not to upload their recordings to RealtimeKit's R2 bucket. If you wish to disable uploads to RealtimeKit's bucket, you can set the `realtimekit_bucket_config` parameter to false in the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/).

For example:

```

{

  "realtimekit_bucket_config": {

    "enabled": false

  }

}


```

Note

If you haven't specified an external storage configuration and also disabled uploads to RealtimeKit's bucket, then the recording will not be uploaded to any location. It is considered as an invalid recording.

For more information on how to set your external storage configuration, see [Publish Recorded File to Your Cloud Provider](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/custom-cloud-storage/).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/configure-realtimekit-bucket-config/","name":"Disable Upload to RealtimeKit Bucket"}}]}
```

---

---
title: Create Custom Recording App Using Recording SDKs
description: Learn how to create a recording app using RealtimeKit's SDKs. Follow our guide for effective app creation and integration.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/create-record-app-using-sdks.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Create Custom Recording App Using Recording SDKs

When you join a RealtimeKit meeting, the meeting layout is automatically designed to optimize your experience. This includes focusing on shared content and highlighting active speakers, while participants are shown in small thumbnail views. When you start recording the meeting, it is recorded with the same layout using the default UI kit component called [RtkGrid ↗](https://docs.realtime.cloudflare.com/react-ui-kit/components/rtk-grid).

If you wish to have a customized layout for your recording application, RealtimeKit's custom recording SDKs provide the flexibility to tailor the appearance of your recordings according to your preferences. You can choose from options like:

* Show only active speaker view
* Shared screen with thumbnail gallery view
* Shared screen with large active speaker thumbnail
* Shared screen without active speaker or gallery view
* Customized background for your recording
* Portrait layout, and so on and so forth

Let's dive in to understand the steps involved in creating a custom appearance for your RealtimeKit recording app.

The custom recording SDKs are used on top of the [UI Kit](https://developers.cloudflare.com/realtime/realtimekit/ui-kit) or [Core SDK](https://developers.cloudflare.com/realtime/realtimekit/core). The `RealtimeKitRecording` class is used for managing the recording functionality within the SDK.

## Constructor

`constructor(options)`

Creates an instance of the `RealtimeKitRecording` class.

### Parameters

`options (object)`: The options object.

| **options (object)**          | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| options.waitTimeMs (number)   | The time (in milliseconds) to wait after all peers have left before leaving the meeting. This option is ignored if autoStop is set to true.                                                                                                                                                                                                                                                                                                                                                                                              |
| options.autoStart (boolean)   | Set to true if you want to manually call the startRecording function. By default, the autoStart parameter is set to true. If you wish to delay the start of the recording, you can set the value of this parameter to false. In that case, you can manually call the startRecording() function later. Note that there is a timeout of 2 minutes associated with the startRecording() method. If this method is not called within 2 minutes of the WebSocket connection being established, the recording process will encounter an error. |
| options.autoStop (boolean)    | Set to true if you want to disable automatic peer leave and manually call the stopRecording function.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| options.scanInterval (number) | The interval (in milliseconds) between scans for automatic peer leave.                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| options.devMode (boolean)     | Set to true to enable development mode, which enables logs and disables certain functionality. Also you must ensure that this is set this to true when testing your recording-app locally.                                                                                                                                                                                                                                                                                                                                               |

### Methods

JavaScript

```

init(client: RealtimeKitClient)


```

Initiates the SDK by providing a `RealtimeKitClient` object. Call this after creating the meeting object and before calling `meeting.joinRoom()`.

JavaScript

```

startRecording();


```

Manually starts the recording. Ensure that `autoStart` is passed as true in the constructor options.

JavaScript

```

stopRecording();


```

Manually stops the recording. Ensure that `autoStop` is passed as true in the constructor options.

JavaScript

```

cleanup();


```

Performs cleanup tasks after leaving the meeting, such as clearing added listeners and closing WebSocket connections.

## Usage Example

Perform the following steps to create the recording app for your RealtimeKit meetings.

### Step 1: Install the SDK

JavaScript

```

npm i @cloudflare/realtimekit-recording-sdk


```

### Step 2: Import the `RealtimeKitRecording` object

JavaScript

```

import { RealtimeKitRecording } from '@cloudflare/realtimekit-recording-sdk';


```

### Step 3: Create the `RealtimeKitRecording` object

JavaScript

```

const recordingSdk = new RealtimeKitRecording(options);


```

### Step 4: Initialize the recording SDK

Call `init` after creating the meeting object and before `joinRoom` is called.

JavaScript

```

// Call this after you have called initMeeting

await recordingSdk.init();


```

### (Optional) Step 5: Manually start the recording

To manually start the recording, call the `startRecording()` function. For example, you want to start a recording after you have loaded your UI content in the app and `autoStart` is not set to true. In such cases, you can manually call the `startRecording()` function when you are ready to begin the recording.

JavaScript

```

// This throws an exception if autoStart is set to false.

await recordingSdk.startRecording();


```

### (Optional) Step 6: Manually stop the recording

To manually stop the recording, use `stopRecording`.

JavaScript

```

// This throws an exception if autoStop is set to false.

await recordingSdk.stopRecording();


```

Once `stopRecording` is called, the recorder in your recording app will exit after a few seconds. After this point, you won't be able to perform any further actions within your recording app.

### Step 7: Deploy the recording app

Once you've created the app, deploy it using a platform like [Cloudflare Workers ↗](https://cloudflare.com/workers). Make sure to note the URL where you have deployed the app, as you will have to enter this URL in RealtimeKit's recording API.

### Step 8: Specify the custom URL

In the [Start Recording a Meeting](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/) API, provide the custom URL (obtained from the previous step) to indicate the location of your deployed app.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/create-record-app-using-sdks/","name":"Create Custom Recording App Using Recording SDKs"}}]}
```

---

---
title: Upload Recording to Your Cloud
description: Explore how to set up custom cloud storage for RealtimeKit's recording. Follow our guide for effective configuration and integration.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/custom-cloud-storage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Upload Recording to Your Cloud

You can pass an optional object `storage_config` in the start recording request to publish the recording directly to your cloud provider. If a `path` is specified, the recorded video will be stored there, otherwise the default is the root of the directory.

The filename for recording will be the same as given in `output_file_name`.

Note

Ensure that the cloud keys you provide to RealtimeKit APIs have only limited access.

## Set storage configuration

You can configure storage configs for RealtimeKit Recordings in the following ways:

### Set Storage Configuration Details Using RealtimeKit Dashboard

You can specify storage configuration details using RealtimeKit Dashboard for all meetings.

1. In the Cloudflare [RealtimeKit Dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/kit), go to Recordings tab.
2. Click **Setup Storage**.
3. Specify the details for your cloud provider. We support transferring recordings to Cloudflare R2, AWS S3, Azure, DigitalOcean, and Google Cloud Storage (GCS) buckets.
![Recording Storage Screenshot](https://developers.cloudflare.com/_astro/setup-recording-storage.BToYYU30_Z24vSoi.webp)   

Note

If you specify storage configuration in the [Start Recording](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/) API request, that configuration takes precedence over the storage details configured in the RealtimeKit Dashboard.

To familiarize yourself with the RealtimeKit REST APIs, we recommend exploring the [RealtimeKit REST API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/).

### Using the `storage_config` option in the Start Recording API

This allows for the most granular level of control, and lets you specify a storage\_config for a specific[recording started](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/) on a meeting.

Terminal window

```

curl --request POST \

  --url https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/recordings \

  --header 'Authorization: Bearer <api_authorization_token>' \

  --header 'Content-Type: application/json' \

  --data '{

  "meeting_id": "97440c6a-140b-40a9-9499-b23fd7a3868a",

  "storage_config": {

    "type": "cloudflare",

    "access_key": "your-access-key",

    "secret": "your-secret-key",

    "bucket": "your-bucket-name",

    "path": "/"

  }

}'


```

To familiarize yourself with the RealtimeKit REST APIs, we recommend exploring the [RealtimeKit REST API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/).

## Supported Cloud Providers

Currently, the following cloud providers are supported:

### Cloudflare R2

To transfer recordings to Cloudflare R2, set the following fields in the `storage_config` parameter:

* Type: Specify `cloudflare`.
* Access Key: Enter your R2 access key ID. For more information, see [Create API tokens](https://developers.cloudflare.com/r2/api/tokens/).
* Bucket: Enter the name of your R2 bucket.
* (Optional) Path: Specify the path to a sub-folder where recordings should be transferred. If this parameter is not passed, recordings will be transferred to the root folder of the bucket.
* Secret: Enter your R2 secret access key.
* Account ID: Enter your Cloudflare account ID.

### AWS S3

To transfer recordings to the AWS S3 bucket, set the following fields in the`storage_config` parameter:

* Type: Specify `aws`.
* Access Key: Enter your `aws_access_key_id`.
* Bucket: Enter your AWS S3 bucket name.
* (Optional) Path: Specify the path to a sub-folder where recordings should be transferred. If this parameter is not passed, recordings will be transferred to the root folder of the bucket.
* Secret: Enter your `aws_secret_access_key`.
* Region: Specify the region where your bucket is hosted, for example,`ap-south-1`.

### Azure Blob Storage

To transfer recordings to the Azure Blob Storage, set the following fields in the `storage_config` parameter:

* Type: Specify `azure`.
* Access key: Enter your azure connection string. For more information on how to get the access key, see[View account access key ↗](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-keys-manage?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&bc=%2Fazure%2Fstorage%2Fblobs%2Fbreadcrumb%2Ftoc.json&tabs=azure-portal#view-account-access-keys).
* Bucket: Enter the name of your container. The container should be in the same storage account as the connection string.
* (Optional) Path: Specify the path to a sub-folder where recordings should be transferred. If this parameter is not passed, recordings will be transferred to the root folder of the container.
* Secret: Set to a blank string "".
* Region: Set to a blank string "".

### DigitalOcean

To transfer recordings to the DigitalOcean Spaces, set the following fields in the `storage_config` parameter:

* Type: Specify `digitalocean`.
* Access key: Enter your digital ocean access key. For more information, see[Create DigitalOcean Space and API Key ↗](https://www.digitalocean.com/community/tutorials/how-to-create-a-digitalocean-space-and-api-key).
* Bucket: Enter the name of your Spaces bucket.
* (Optional) Path: Specify the path to a sub-folder where recordings should be transferred. If this parameter is not passed, recordings will be transferred to the root folder of the container.
* Secret: Enter your Spaces secret.
* Region: Specify the region where your Spaces bucket is hosted, for example,`SGP1`. For more information, see[Region Availability Matrix ↗](https://docs.digitalocean.com/products/platform/availability-matrix/).

### Google Cloud Storage (GCS)

To transfer recordings to GCS, set the following fields in the `storage_config` parameter:

* Type: Specify `gcs`.
* Bucket: Enter the name of your Cloud Storage bucket.
* (Optional) Path: Specify the path to a sub-folder where recordings should be transferred. If this parameter is not passed, recordings will be transferred to the root folder of the container.
* Secret: Enter your service account credentials. For more information, see [service account credentials ↗](https://developers.google.com/workspace/guides/create-credentials#service-account).
* Region: Specify the region where your Cloud Storage bucket is hosted, for example,`US multi-region`. For more information, see[Bucket locations ↗](https://cloud.google.com/storage/docs/locations).

## Update the Recording File Name

You can change the name of the recording file using the `file_name_prefix` field. The default format for recorded file name is `roomname_timestamp`, but you can add an alphanumeric and underscore prefix to the default file name.

It's important to note that you can only add a prefix to the default format; you can't change the entire file name. For example, if you teach an online physics class at 9 a.m. using RealtimeKit, you could add `Physics_9am` to the file name. `Physics_9am_roomname_timestamp` would be the new file name.

For more information, see [start recording a meeting](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/custom-cloud-storage/","name":"Upload Recording to Your Cloud"}}]}
```

---

---
title: Interactive Recordings with Timed Metadata
description: Learn how to enable interactive recording with RealtimeKit's capabilities. Follow our guide for effective configuration and management.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/interactive-recording.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Interactive Recordings with Timed Metadata

RealtimeKit's interactive recording feature allows you to add timed metadata to your video stream. Timed metadata serves as cue points for clients to display information and trigger time-aligned actions. The metadata is available to clients in the form of [ID3 ↗](https://en.wikipedia.org/wiki/ID3) tags on the playback timeline.

## What is interactive recording?

Ever wondered how Netflix displays small images on the seek bar or how additional content is shown while watching a cricket match on Hotstar? It's all metadata inserted at a specific time inside the video feed itself, which is called timed metadata.

Timed metadata is metadata with timestamps. It refers to digital markers added to a video file to provide additional context and information at specific points in the content range. These data points can be inserted into a stream programmatically, using the `interactive_config` in the [Start recording a meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/).

Once RealtimeKit processes the stream, the timed metadata gets synchronized with the audio and video frames. This metadata is available to all viewers during playback at the same time relative to the stream. The timecode acts as a cue point and can trigger specific actions based on the data. For example:

These features are made possible through the use of ID3 tags that are embedded in the video segments, making them available in the recorded video.

## Add interactivity to your RealtimeKit recordings

To add interactivity to your RealtimeKit recording, perform the following steps:

1. In the [Start recording a meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/), pass the `interactive_config` parameter.

This parameter enables you to add timed metadata to your recordings, which is made available to clients in HLS format via ID3 tags. The output files are packaged as a tar file.

1. In [RealtimeKitClient ↗](https://docs.realtime.cloudflare.com/web-core/reference/RealtimeKitClient), call the `broadcastMessage` method with the parameters, `ID3` (as a string) and `yourData` (the data you want to send as timed metadata) on the [participants ↗](https://docs.realtime.cloudflare.com/web-core/reference/RealtimeKitClient#module%5FRealtimeKitClient+participants) object.

TypeScript

```

meeting.participants.broadcastMessage(“ID3Data”, yourData);


```

Note

This action should only be performed after the recording has been initiated and the system is in the `RECORDING` state. If performed earlier, any associated ID3 tags may be lost.

The recommended time to perform this action is after the recording indicator has been displayed for 3 to 4 seconds.

1. To stop sending the data, call the following method. Once you make this call, you will no longer be able to send additional ID3 data.

TypeScript

```

meeting.participants.broadcastMessage(“ID3Data”,”CLOSE_TRANSPORT”)


```

If you do not pass this parameter, the ID3 metadata stream will automatically be closed when the recording is stopped.

1. Once the recording is completed, you can retrieve the tar file that contains video segments and a playlist file. The `download_url` provides the link to the tar file. Below is an example screenshot of a tar file:
![Recording Tar Format](https://developers.cloudflare.com/_astro/interactive-recording-tar-format.JbEcOmI6_ZGSWee.webp) 

It's also important to note that the length of each segment depends on the frames of the video. Therefore, each segment may not have the same length, although it is typically close to the specified segment length when the recording was started. By default, the segment length is set to 10 seconds.

1. You can play the stream using the [hls.js ↗](https://github.com/video-dev/hls.js/).

JavaScript

```

const onFragChanged = (_) => {

  // We first try to find the right metadata track.

  // https://developer.mozilla.org/en-US/docs/Web/API/TextTrack

  const textTrackListCount = videoEl.textTracks.length;

  let metaTextTrack;

  for (let trackIndex = 0; trackIndex < textTrackListCount; trackIndex++) {

    const textTrack = videoEl.textTracks[trackIndex];

    if (textTrack.kind !== 'metadata') {

      continue;

    }

    textTrack.mode = 'showing';

    metaTextTrack = textTrack;

    break;

  }

  if (!metaTextTrack) {

    return;

  }

  // Add an oncuechange listener on that track.

  metaTextTrack.oncuechange = (event) => {

    let cue = metaTextTrack.activeCues[metaTextTrack.activeCues.length - 1];

    console.log(cue.value.data);

  };

};

// listen on Hls.Events.FRAG_CHANGED from hls.js

hls.on(Hls.Events.FRAG_CHANGED, onFragChanged);


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/interactive-recording/","name":"Interactive Recordings with Timed Metadata"}}]}
```

---

---
title: Manage Recording Config Precedence Order
description: Learn how to manage recording configuration hierarchy with RealtimeKit's capabilities. Follow our guide for effective hierarchy management.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/manage-recording-config-hierarchy.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Manage Recording Config Precedence Order

This document provides an overview of the precedence structure for managing recording configurations within our system. It explains how various configuration levels interact and prioritize settings. The recording configuration can be defined at three different levels:

* [Start recording a meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/)
* [Create a meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/)
* Specified via [Cloudflare RealtimeKit Dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/kit)

## Understand Recording Configuration Precedence

To comprehend the precedence of recording configurations, it is important to delve into the following details. This understanding becomes crucial when dealing with multiple configurations set through APIs and the developer portal.

| Precedence | Config                                                                                                                                            | Description                                                                                                                                           |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1          | [Start recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/) configs | Highest priority in the system. Any settings defined here will take precedence over other configurations.                                             |
| 2          | [Create a meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/) configs              | Second level of priority in the system. Settings here will supersede Org level config but not Start recording a meeting API configs.                  |
| 3          | Specified via Dashboard                                                                                                                           | Lowest priority in the system. Settings defined here will be overridden by both Start recording a meeting API config and Create a meeting API config. |

## Example Scenario

To illustrate the precedence order in action, consider the following scenario for the same meeting:

1. Org Level Config specifies that recordings to be stored in the Cloudflare R2 bucket.
2. Create a Meeting API sets recordings to be stored in the AWS S3 storage bucket using the H264 codec.
3. Start recording a meeting API is configured to store recordings in the GCS bucket using the VP8 codec.

In this scenario, the Start recording a meeting API takes precedence over the Create a Meeting API Config and Org Level Config. As a result, the meeting's recording will be stored in the GCS bucket using VP8 codec, regardless of the defaults set at other levels.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/manage-recording-config-hierarchy/","name":"Manage Recording Config Precedence Order"}}]}
```

---

---
title: Monitor Recording Status
description: The recording of a meeting can have the following states:
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/monitor-status.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Monitor Recording Status

## Recording states

The recording of a meeting can have the following states:

| Name      | Description                                                                                                                                                                                                                                                |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| INVOKED   | Our backend servers have received the recording request, and the master is looking for a ready worker to assign the recording job.                                                                                                                         |
| RECORDING | The meeting is currently being recorded by a worker; note that this will also hold true if the meeting is being live streamed.                                                                                                                             |
| UPLOADING | The recording has been stopped and the file is being uploaded to the cloud storage. If you have not specified storage details, then the files will be uploaded only to RealtimeKit's server. Any RTMP and livestreaming link will also stop at this stage. |
| UPLOADED  | The recording file upload is complete and the status webhook is also triggered.                                                                                                                                                                            |
| ERRORED   | There was an irrecoverable error while recording the meeting and the file will not be available.                                                                                                                                                           |

## Fetching the state

There are two ways you can track what state a recording is in or view more details about a recording:

### Using the `recording.statusUpdate` webhook

RealtimeKit sends out a `recording.statusUpdate` webhook each time the recording transitions between states during its lifecycle. Configure webhooks in your RealtimeKit app to receive these notifications.

### By polling HTTP APIs

Alternatively, you can also use the following APIs:

* [List recordings](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/get%5Frecordings/): This endpoint gets all past and ongoing recordings linked to a meeting.
* [Fetch active recording](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/get%5Factive%5Frecordings/): This endpoint gets all ongoing recordings of a meeting.
* [Fetch details of a recording](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/get%5Fone%5Frecording/): This endpoint gets a specific recording using a recording ID.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/monitor-status/","name":"Monitor Recording Status"}}]}
```

---

---
title: Start Recording
description: This topic explains how to use RealtimeKit to implement composite recording.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/start-recording.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Start Recording

This topic explains how to use RealtimeKit to implement composite recording.

Before getting started with this guide, we recommend that you read[Get Started with RealtimeKit](https://developers.cloudflare.com/realtime/realtimekit/quickstart/) to familiarize yourself with RealtimeKit.

To familiarize yourself with the RealtimeKit REST APIs, we recommend exploring the [RealtimeKit REST API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/).

There are three ways to start recording a RealtimeKit meeting:

* Using the `record_on_start` flag when[creating a meeting](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/)
* Using the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/)
* Client side start recording methods on the SDK

RealtimeKit stores recordings for a period of 7 days, after which they will expire and no longer be accessible. It is important to either download a copy of your recording or [set up storage](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/custom-cloud-storage/) before the link expires.

Note

1. Our system does not currently support recordings of brief durations that are less than five seconds. In such cases, it is possible that the recording APIs may experience occasional failures. Due to limitations in encoding recordings of short duration, these failures may result in an ERRORED state.
2. Recording will stop if there are no participants in a meeting for 60 seconds.
3. The average file size for one hour of recording is approximately 300MB.
4. There can only be one active recording of a meeting at any given time, unless the `allow_multiple_recording` field is set in the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/).
5. Maximum recording time is 24 hours. Recording will automatically stop after 24 hours have elapsed since the recording's start time. This option can be configured to any value up to 24 hours by passing the `max_seconds` parameter in the [Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/) request.

## Using the `record_on_start` parameter

When [creating a meeting](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/), you can specify the `record_on_start` parameter to start the recording as soon as someone joins the meeting.

Specify storage config

If you're using this method to start the recording, you must specify the`storage-config` using the Developer Portal.

### Request

Specify the `record_on_start` parameter. If this flag is true, then a recording will be started as soon as a meeting starts on RealtimeKit, i.e, when the first participant joins the meeting.

Terminal window

```

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings' \

  --header 'Content-Type: application/json' \

  --header 'Authorization: Bearer <api_token>' \

  --data '{

  "title": "Lorem Ipsum",

  "record_on_start": true

}'


```

### Response

```

{

  "success": true,

  "data": {

    "id": "497f6eca-6276-4993-bfeb-53cbbbba6f08",

    "record_on_start": true,

    "created_at": "2025-08-24T14:15:22Z",

    "updated_at": "2025-08-24T14:15:22Z"

  }

}


```

## Using the Start Recording API

You can also start a recording using the[Start Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/).

Specify the `meeting ID` of the meeting that you want to record.

Use the [List meetings API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/get/) for an app or [Create a meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/) to get the meeting ID. The API returns a parameter called `id`, which is your meeting ID.

### Request

Calling Start Recording API

```

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/recordings' \

  --header 'Content-Type: application/json' \

  --header 'Authorization: Bearer <api_token>' \

  --data '{

  "meeting_id": "97440c6a-140b-40a9-9499-b23fd7a3868a"

}'


```

### Response

```

{

  "success": true,

  "data": {

    "id": "97440c6a-140b-40a9-9499-b23fd7a3868a",

    "download_url": "http://example.com",

    "download_url_expiry": "2025-08-24T14:15:22Z",

    "download_audio_url": "http://example1.com",

    "file_size": 0,

    "session_id": "1ffd059c-17ea-40a8-8aef-70fd0307db82",

    "output_file_name": "string",

    "status": "INVOKED",

    "invoked_time": "2025-08-24T14:15:22Z",

    "started_time": "2025-08-24T14:15:22Z",

    "stopped_time": "2025-08-24T14:15:22Z",

    "storage_config": {

      "type": "cloudflare",

      "secret_key": "string",

      "bucket": "string",

      "path": "string"

    }

  }

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/start-recording/","name":"Start Recording"}}]}
```

---

---
title: Stop Recording
description: RealtimeKit recordings can be stopped in any of the following ways:
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/recording-guide/stop-recording.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Stop Recording

RealtimeKit recordings can be stopped in any of the following ways:

1. **Automatic Stop (Empty meeting)**: A RealtimeKit recording will automatically stop if the meeting has no participants for a duration of 1 minute or more. This wait time can be customized by contacting RealtimeKit's support team to configure a custom value for your app.
2. **Automatic Stop (maxSeconds elapsed)**: A recording will automatically stop when it reaches the duration specified by the `max_seconds` parameter passed while starting the recording, regardless of whether participants are present in the meeting. If this parameter is not passed, it defaults to 24 hours (86400 seconds).
3. **Using Stop Recording API**: A recording can also be stopped by passing the recording ID and `stop` action to the [Stop Recording API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/).

When a recording is stopped, it transitions to the `UPLOADING` state and then to the `UPLOADED` state after it has been transferred to RealtimeKit's storage and any external storage that has been set up.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/recording-guide/","name":"Recording"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/recording-guide/stop-recording/","name":"Stop Recording"}}]}
```

---

---
title: Release Notes
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Release Notes

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/index.xml)

## 2026-03-31

**RealtimeKit Web Core 1.3.0**

**Features**

* Simulcast support is now available to all RealtimeKit clients. Configure it per participant in Preset via the [RealtimeKit dashboard](https://dash.cloudflare.com/?to=/:account/realtime/kit), [Preset API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/presets/methods/create) using the `config.media.video.simulcast` field, or while [initializing the SDK](https://developers.cloudflare.com/realtime/realtimekit/core/).
* Added 4K UHD video support in media production (configurable in Preset and API). Falls back to the maximum supported resolution if the camera does not support 4K.

## 2026-03-10

**RealtimeKit Web Core 1.2.5**

**Compatibility:** Works best with RealtimeKit Web UI Kit 1.1.1 or later.

**Enhancements**

* Implemented retry limits for ICE connection failures to prevent indefinite connection attempts and improve reliability.
* Improved error handling for room join operations to provide more descriptive and actionable error messages.
* Room join errors are now thrown consistently when network connectivity is blocked by firewalls or when TURN servers are unreachable.

**Fixes**

* Fixed an issue in Connected Meetings where peer IDs were not regenerated when switching between rooms. Peer IDs are now correctly assigned per room session.

## 2026-01-30

**RealtimeKit Web Core 1.2.4**

**Compatibility:** Works best with RealtimeKit Web UI Kit 1.1.0 or later.

**New APIs**

Added chat pagination support with the following methods:

* `meeting.chat.fetchPinnedMessages` \- Fetch pinned messages from server.
* `meeting.chat.fetchPublicMessages` \- Fetch public messages from server.
* `meeting.chat.fetchPrivateMessages` \- Fetch private messages from server.

**Enhancements**

* Added JSDoc comments to all public-facing methods and classes for improved developer suggestions.
* Chat message operations (edit, delete, pin) are now available to all RealtimeKit clients without additional configuration.
* `pinMessage` and `unpinMessage` events on `meeting.chat` now emit reliably.
* Message pinning (`meeting.chat.pin` and `meeting.chat.unpin`) is now available to all participants.

**Removed APIs**

Removed non-operational chat channel APIs to streamline the RealtimeKit SDK. Meeting chat (`meeting.chat`) remains fully operational.

* Removed `meeting.self.permissions.chatChannel`.
* Removed `meeting.self.permissions.chatMessage`. Use `meeting.self.permissions.chatPublic` and `meeting.self.permissions.chatPrivate` instead.
* Removed `meeting.chat.channels`.
* Removed `meeting.chat.sendMessageToChannel`.
* Removed `meeting.chat.markLastReadMessage`.
* Removed events: `channelMessageUpdate`, `channelCreate`, and `channelUpdate` from `meeting.chat`.

**API changes**

* The following methods no longer accept a third optional `channelId` parameter:  
   * `meeting.chat.editTextMessage(messageId, message)`  
   * `meeting.chat.editImageMessage(messageId, imageFile)`  
   * `meeting.chat.editFileMessage(messageId, file)`  
   * `meeting.chat.editMessage(messageId, messagePayload)`  
   * `meeting.chat.deleteMessage(messageId)`

**Deprecations**

The following methods are deprecated due to scalability limitations (limited to 1,000 recent messages):

* `meeting.chat.messages` \- Only fetches recent messages and new messages after joining.
* `meeting.chat.getMessagesByUser` \- Use new fetch methods for scalable message retrieval.
* `meeting.chat.getMessagesByType` \- Use new fetch methods for scalable message retrieval.
* `meeting.chat.getMessages` \- Use `meeting.chat.fetchPublicMessages` or `meeting.chat.fetchPrivateMessages` instead.
* `meeting.chat.pinned` \- Use `meeting.chat.fetchPinnedMessages` instead.
* `meeting.chat.searchMessages` \- Use `meeting.chat.fetchPublicMessages` or `meeting.chat.fetchPrivateMessages` instead.

**Known limitations**

* Pinned messages are not supported for private chats.

## 2026-01-05

**RealtimeKit Web Core 1.2.3**

**Fixes**

* Fixed an issue where users who joined a meeting with audio and video disabled and then initiated tab screen sharing would experience SDP corruption upon stopping the screen share, preventing subsequent actions such as enabling audio or video.  
Error thrown:  
```text  
InvalidAccessError: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Failed to set remote audio description send parameters for m-section with mid='<N>'  
```
* Fixed an issue where awaiting `RealtimeKitClient.initMedia` did not return media tracks  
Example usage:  
```ts  
const media = await RealtimeKitClient.initMedia({  
  video : true,  
  audio: true,  
});  
const { videoTrack, audioTrack } = media;  
```
* Fixed an issue where an undefined variable caused `TypeError: Cannot read properties of undefined (reading 'getValue')` in media retrieval due to a race condition.

## 2025-12-17

**RealtimeKit Web Core 1.2.2**

**Fixes**

* Fixed an issue where camera switching between front and rear cameras was not working on Android devices
* Fixed device selection logic to prioritize media devices more effectively
* Added PIP support for [Reactions](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/addons/#reactions-1)

## 2025-11-18

**RealtimeKit Web Core 1.2.1**

**Fixes**

* Resolved an issue preventing default media device selection.
* Fixed SDK bundle to include `browser.js` instead of incorrectly shipping `index.iife.js` in 1.2.0.

**Enhancements**

* External media devices are now prioritized over internal devices when no preferred device is set.

## 2025-10-30

**RealtimeKit Web Core 1.2.0**

**Features**

* Added support for configuring simulcast via `initMeeting`:  
```ts  
initMeeting({  
  overrides: {  
    simulcastConfig: {  
      disable: false,  
      encodings: [{ scaleResolutionDownBy: 2 }],  
    },  
  },  
});  
```

**Fixes**

* Resolved an issue where remote participants' video feeds were not visible during grid pagination in certain edge cases.
* Fixed a bug preventing participants from switching microphones if the first listed microphone was non-functional.

**Breaking changes**

* Legacy media engine support has been removed. If your organization was created before March 1, 2025 and you are upgrading to this SDK version or later, you may experience recording issues. Contact support to migrate to the new Cloudflare SFU media engine to ensure continued recording functionality.

## 2025-08-26

**RealtimeKit Web Core 1.1.7**

**Fixes**

* Prevented speaker change events from being emitted when the active speaker does not change.
* Addressed a behavioral change in microphone switching on recent versions of Google Chrome.
* Added `deviceInfo` logs to improve debugging capabilities for React Native.
* Fixed an issue that queued multiple media consumers for the same peer, optimizing resource usage.

## 2025-08-14

**RealtimeKit Web Core 1.1.6**

**Enhancements**

* Internal changes to make debugging of media consumption issues easier and faster.

## 2025-08-04

**RealtimeKit Web Core 1.1.5**

**Fixes**

* Improved React Native support for `AudioActivityReporter` with proper audio sampling.
* Resolved issue preventing users from creating polls.
* Fixed issue where leaving a meeting took more than 20 seconds.

## 2025-07-17

**RealtimeKit Web Core 1.1.4**

**Fixes**

* Livestream feature is now available to all beta users.
* Fixed Livestream stage functionality where hosts were not consuming peer videos upon participants' stage join.
* Resolved issues with viewer joins and leaves in Livestream stage.

## 2025-07-08

**RealtimeKit Web Core 1.1.3**

**Fixes**

* Fixed issue where users could not enable video mid-meeting if they joined without video initially.

## 2025-07-02

**RealtimeKit Web Core 1.1.2**

**Fixes**

* Fixed edge case in large meetings where existing participants could not hear or see newly joined users.

## 2025-06-30

**RealtimeKit Web Core 1.1.0–1.1.1**

**Features**

* Added methods to toggle self tile visibility.
* Introduced broadcast functionality across connected meetings (breakout rooms).

**New API**

* Broadcast messages across meetings:  
```ts  
meeting.participants.broadcastMessage("<message_type>", { message: "Hi" }, {  
  meetingIds: ["<connected_meeting_id>"],  
});  
```

**Enhancements**

* Reduced time to display videos of newly joined participants when joining in bulk.
* Added support for multiple meetings on the same page in RealtimeKit Core SDK.

## 2025-06-17

**RealtimeKit Web Core 1.0.2**

**Fixes**

* Enhanced error handling for media operations.
* Fixed issue where active participants with audio or video were not appearing in the active participant list.

## 2025-05-29

**RealtimeKit Web Core 1.0.1**

**Fixes**

* Resolved initial setup issues with Cloudflare RealtimeKit integration.
* Fixed meeting join and media connectivity issues.
* Enhanced media track handling.

## 2025-05-29

**RealtimeKit Web Core 1.0.0**

**Features**

* Initial release of Cloudflare RealtimeKit with support for group calls, webinars, livestreaming, polls, and chat.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}}]}
```

---

---
title: Android Core SDK
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/android-core.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Android Core SDK

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/index.xml)

## 2026-03-06

**RealtimeKit Android Core 1.6.2**

**Fixes**

* Avoid crash when using Ktor versions 3.4.0 and above

## 2026-02-06

**RealtimeKit Android Core 1.6.1**

**Fixes**

* Fixed media issues when connection took longer to establish

## 2026-01-14

**RealtimeKit Android Core 1.6.0**

**Fixes**

* Improved grid transitions by activating consumers in batches for better performance
* Moved consumer toggle requests off main thread to prevent UI blocking
* Improved video rendering stability with better lifecycle management
* Prevented race conditions by canceling reconnection attempts during initialization

## 2025-12-16

**RealtimeKit Android Core 1.5.7**

**Fixes**

* Fixed rare crash when toggling audio mute
* Off-stage webinar hosts no longer show up on the grid

## 2025-12-12

**RealtimeKit Android Core 1.5.6**

**Fixes**

* Fixed deadlocks in webinar join and screenshare enable flows
* Fixed an issue with camera not working when moving to settings screen and back
* Fixed a rare crash in voice activity detection

## 2025-12-04

**RealtimeKit Android Core 1.5.5**

**Fixes**

* Fixed participant tiles not being removed properly when peers left the meeting

## 2025-11-06

**RealtimeKit Android Core 1.5.4**

**Fixes**

* Internal fixes to reduce telemetry verbosity

## 2025-10-23

**RealtimeKit Android Core 1.5.3**

**Fixes**

* Fixed a regression that caused self video to not render if meeting was joined with camera disabled

## 2025-10-23

**RealtimeKit Android Core 1.5.2**

**Fixes**

* Fixed unreliable grid behavior with improved refresh logic

## 2025-10-06

**RealtimeKit Android Core 1.5.1**

**Fixes**

* Internal fixes to resolve issues for Flutter platform

## 2025-09-23

**RealtimeKit Android Core 1.5.0**

**Features**

* Added `RtkSelfEventListener#onAudioDeviceChanged` method that is invoked when the current audio route is updated

## 2025-09-18

**RealtimeKit Android Core 1.4.1**

**Fixes**

* Speakerphone is now preferred over earpiece as the default audio output

## 2025-09-18

**RealtimeKit Android Core 1.4.0**

**Breaking changes**

* Updated `RtkSelfEventListener#onAudioDevicesUpdated` method to provide the list of available devices

**Fixes**

* Fixed not being able to route audio to Bluetooth devices

## 2025-09-12

**RealtimeKit Android Core 1.3.4**

**Fixes**

* Fixed a rare crash during meeting joins in poor network scenarios

## 2025-09-12

**RealtimeKit Android Core 1.3.3**

**Fixes**

* Fixed pinned peers not being removed from the stage when kicked
* Media consumers are now created in parallel, which significantly improved the speed of when users start seeing other people's audio/video after joining a meeting
* Native libraries are now 16KB aligned to comply with [Google Play requirements](https://android-developers.googleblog.com/2025/05/prepare-play-apps-for-devices-with-16kb-page-size.html)
* Fixed "Ghost"/Invalid peers that would sometimes show up in long-running meetings
* Fixed an issue in webinar meetings where the SDK would fail to produce media after being removed from the stage once

## 2025-08-13

**RealtimeKit Android Core 1.3.2**

**Enhancements**

* Fixed microphone not working when joining the stage in a webinar

## 2025-08-13

**RealtimeKit Android Core 1.3.1**

**Enhancements**

* Fixed a potential crash in poor network scenarios

## 2025-08-12

**RealtimeKit Android Core 1.3.0**

**Features**

* Added `RtkSelfParticipant#canJoinStage` and `RtkSelfParticipant#canRequestToJoinStage` APIs

**Fixes**

* Fixed viewer unable to join stage in a Livestream
* Fixed user unable to see existing pinned participant after joining meeting

## 2025-08-05

**RealtimeKit Android Core 1.2.0**

**Breaking changes**

* Renamed `RtkLivestreamData.roomName` to `RtkLivestreamData.meetingId` to match existing API convention
* Removed obsolete `WaitingRoomPermissions` abstraction — all the relevant functionality here is available through `HostPermissions`
* VideoDevice gained a `cameraType: CameraType` parameter
* `VideoDeviceType#displayName` is now deprecated, and it's recommended to call `VideoDevice#toString` instead to get user-facing names for individual `VideoDevice` instances
* Existing APIs related to middlewares were removed and replaced with equivalent counterparts from WebRTC: `RtkSelfParticipant#addVideoMiddleware`, `RtkSelfParticipant#getVideoMiddlewares` and `RtkSelfParticipant#removeVideoMiddleware` were replaced with `RealtimeKitMeetingBuilder#setVideoProcessor`
* `RtkVideoFrame` was removed in favor of WebRTC's own `VideoFrame` class, available as `realtimekit.org.webrtc.VideoFrame`

**Features**

* Reimplemented middlewares using WebRTC-native primitives to resolve intermittent crashes and other issues, check out the new [Video Processing](https://docs.realtime.cloudflare.com/android-core/video-processing/introduction) docs section to learn more
* `VideoDevice` now properly labels multiple cameras based on their camera characteristics such as wide-angle and telephoto

**Fixes**

* Fixed screen share failing to stop
* Silenced log spam from our callstats library

## 2025-07-02

**RealtimeKit Android Core 1.1.0**

**Enhancements**

* Meeting initialization (`meeting.init()`) is now \~60% faster
* Switched to an updated and **RTK** namespaced WebRTC
* Improved Active speaker detection with the updated WebRTC

## 2025-06-20

**RealtimeKit Android Core 1.0.1**

**Breaking changes**

* Renamed RtkMessageType to ChatMessageType

**Fixes**

* Silenced logspam from audio activity reporter
* Improved speed of joining calls
* Auth tokens now automatically trim invalid spaces and newlines

## 2025-05-26

**RealtimeKit Android Core 1.0.0**

**Breaking changes**

* Removed deprecated `channelId` field from `TextMessage`
* Moved listener types to their respective feature package
* Moved public listeners to their respective feature packages
* Renamed plugin add-remove listener methods for RtkPluginsEventListener
* Moved chat extensions to the `chat` package
* Moved `RtkParticipant` to the root package
* Moved `RtkMeetingParticipant` to the root package
* Moved `RtkPluginFile` to the plugins package
* Moved middlewares to their own package
* Moved `VideoScaleType` to top level `media` package
* Dropped `Rtk` prefix from audio and video device types
* Moved device types to the top level `media` package
* Dropped `Rtk` prefix from polls types
* Replaced all LiveStream references with Livestream
* Moved `RtkMeetingParticipant` to root package
* Stripped `Rtk` prefix from `RtkRecordingState`
* Stripped `Rtk` prefix from chat message types
* Removed deprecated RtkLivestream#roomName field
* Moved `RtkMediaPermission` to media package and renamed to `MediaPermission`
* Redistributed `feat` package members
* Moved `StageStatus` class to stage package
* Renamed all event listeners to be of the singular `*EventListener` form

## 2025-05-16

**RealtimeKit Android Core 0.2.1**

**Fixes**

* Internal fixes to release pipeline

## 2025-05-16

**RealtimeKit Android Core 0.2.0**

**Fixes**

* Added audio activity detection for active speaker signaling

## 2025-05-14

**RealtimeKit Android Core 0.1.0**

**New APIs**

* Initial alpha release

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/android-core/","name":"Android Core SDK"}}]}
```

---

---
title: Android UI Kit SDK
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/android-ui-kit.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Android UI Kit SDK

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-ui-kit/index.xml)

## 2026-02-06

**RealtimeKit Android UI Kit 0.3.4**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.6.1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2026-02-06)

## 2026-01-14

**RealtimeKit Android UI Kit 0.3.3**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.6.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2026-01-14)

## 2025-12-16

**RealtimeKit Android UI Kit 0.3.2**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.7](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-12-16)

## 2025-12-12

**RealtimeKit Android UI Kit 0.3.1**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.6](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-12-12)

**Fixes**

* Fixed crash when screenshare is disabled for a participant
* Fixed screenshare disappearing when video is disabled for a screensharing participant

## 2025-12-04

**RealtimeKit Android UI Kit 0.3.0**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.5](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-12-04)

## 2025-11-06

**RealtimeKit Android UI Kit 0.2.12**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.4](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-11-06)

**Fixes**

* Fixed an issue with camera video not rendering in the settings UI

## 2025-10-23

**RealtimeKit Android UI Kit 0.2.11**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.3](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-10-23)

**Fixes**

* Fixed a regression that caused self video to not render if meeting was joined with camera disabled

## 2025-10-23

**RealtimeKit Android UI Kit 0.2.10**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.2](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-10-23)

**Fixes**

* Fixed an issue where pinning yourself in the participant view didn't update correctly

## 2025-10-08

**RealtimeKit Android UI Kit 0.2.9**

**Fixes**

* Fixed an issue where the last video frame remained stuck on participant tile

## 2025-10-06

**RealtimeKit Android UI Kit 0.2.8**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-10-06)

## 2025-09-23

**RealtimeKit Android UI Kit 0.2.7**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-09-23)

## 2025-09-18

**RealtimeKit Android UI Kit 0.2.6**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.4.1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-09-18)

**Fixes**

* Audio device selector now dynamically updates the options list when devices are removed or added
* Fixed crash when a host turns off video for an active screenshare user

## 2025-09-12

**RealtimeKit Android UI Kit 0.2.5**

**Fixes**

* Fixed pinned peers not being removed from the stage when kicked
* Media consumers are now created in parallel, which significantly improved the speed of when users start seeing other people's audio/video after joining a meeting
* Fixed "Ghost"/Invalid peers that would sometimes show up in long-running meetings
* Fixed an issue in webinar meetings where the SDK would fail to produce media after being removed from the stage once
* Fixed a rare crash during meeting joins in poor network scenarios

## 2025-08-13

**RealtimeKit Android UI Kit 0.2.4**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.3.2](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-08-13)

## 2025-08-13

**RealtimeKit Android UI Kit 0.2.3**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.3.1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-08-13)

## 2025-08-12

**RealtimeKit Android UI Kit 0.2.2**

**Breaking changes**

* `RtkParticipantTileView#activateForSelfPreview` was removed, you can now call `RtkParticipantTileView#activate` for all participants and we take care of the self preview case internally

**Features**

* Upgraded to [RealtimeKit Core v1.3.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-08-12)

## 2025-08-05

**RealtimeKit Android UI Kit 0.2.1**

**Features**

* Upgraded to [RealtimeKit Core v1.2.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-08-05)

## 2025-07-02

**RealtimeKit Android UI Kit 0.2.0**

**Features**

* Upgraded to [RealtimeKit Core v1.1.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2025-07-02)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/android-ui-kit/","name":"Android UI Kit SDK"}}]}
```

---

---
title: Flutter Core SDK
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/flutter-core.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Flutter Core SDK

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/index.xml)

## 2026-01-17

**RealtimeKit Flutter Core 0.1.5+1**

**Features**

* Updated internal version and dependencies

## 2025-12-18

**RealtimeKit Flutter Core 0.1.4+1**

**Features**

* Added `maxParticipantsPerPage` getter in client

**Fixes**

* Fixed hot-restart causing infinite loading screen
* Fixed video view flickering by using stable keys
* Fixed error code handling for iOS
* Fixed `rtkClient` not being reset after leaving a meeting
* Fixed a crash caused due to color parsing failure

## 2025-11-24

**RealtimeKit Flutter Core 0.1.4**

**Fixes**

* Fixed video views failing to be created for some participants
* Fixed participant pinning not working correctly

## 2025-11-03

**RealtimeKit Flutter Core 0.1.3**

**Features**

* Added `onAudioDeviceChanged(AudioDevice)` callback that is invoked when the current audio route changes
* Updated `onAudioDevicesUpdated(List<AudioDevice>)` callback to provide the list of available audio devices
* Added camera type to video device and a human-friendly label to show in UI

**Fixes**

* Updated iPhone deployment target to 18.0

## 2025-10-09

**RealtimeKit Flutter Core 0.1.2+1**

**Fixes**

* Reverted camera type changes that were causing a crash

## 2025-10-09

**RealtimeKit Flutter Core 0.1.2**

**Fixes**

* Screen now stays awake while participant is in a meeting
* Fixed stage status not being parsed correctly
* Fixed screen share view not displaying for local user
* Added camera type to video device and a human-friendly label to show in UI

## 2025-09-12

**RealtimeKit Flutter Core 0.1.1**

**Features**

* Added `onPollUpdate(List<Poll>)` callback in `RtkPollsEventListener` that is invoked when a poll is updated
* Added `acceptAllWaitingRoomRequests()` method to admit all waiting room participants at once

**Breaking changes**

* Moved `meeting.broadcastMessage` to `meeting.participants.broadcastMessage(...)`
* Renamed `disableAllAudios` and `disableAllVideos` to `disableAllAudio`/`disableAllVideo`
* Removed `RTK` prefix from `RtkVideoPermissions`

**Fixes**

* Fixed sending images and files in chat causing a crash

## 2025-08-26

**RealtimeKit Flutter Core 0.1.0+1**

**Fixes**

* Fixed event listener method names for self, plugin, polls, and recording events

## 2025-08-25

**RealtimeKit Flutter Core 0.1.0**

**New APIs**

* Initial release of RealtimeKit Flutter Core

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/flutter-core/","name":"Flutter Core SDK"}}]}
```

---

---
title: Flutter UI Kit
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/flutter-ui-kit.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Flutter UI Kit

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-ui-kit/index.xml)

## 2026-01-17

**RealtimeKit Flutter UI Kit 0.3.0**

**Enhancements**

* Upgraded to [RealtimeKit Flutter Core v0.1.5+1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/#2026-01-17)

**Fixes**

* Fixed compatibility with Android API 36
* Fixed file picker not working on newer Android versions

## 2025-12-19

**RealtimeKit Flutter UI Kit 0.2.0**

**Enhancements**

* Upgraded to [RealtimeKit Flutter Core v0.1.4+1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/#2025-12-18)

**Fixes**

* Fixed participant video tiles flickering during updates
* Hid audio/video icons for webinar viewers who don't have media permissions
* Fixed participants not appearing in grid when joining a meeting

## 2025-11-25

**RealtimeKit Flutter UI Kit 0.1.4**

**Enhancements**

* Upgraded to [RealtimeKit Flutter Core v0.1.4](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/#2025-11-24)

**Features**

* Added menu for webinar hosts to control viewers

## 2025-11-03

**RealtimeKit Flutter UI Kit 0.1.3**

**Enhancements**

* Upgraded to [RealtimeKit Flutter Core v0.1.3](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/#2025-11-03)

**Fixes**

* Camera device names now show human-friendly labels in UI
* All participants now appear in the list, not just those on stage
* Fixed stage host controls not working for some participants

## 2025-10-09

**RealtimeKit Flutter UI Kit 0.1.2+1**

**Fixes**

* Upgraded to [RealtimeKit Flutter Core v0.1.2+1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/#2025-10-09)

## 2025-10-09

**RealtimeKit Flutter UI Kit 0.1.2**

**Enhancements**

* Upgraded to [RealtimeKit Flutter Core v0.1.2](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/#2025-10-09)

**Features**

* Added stage event handling to update participant UI when stage status changes

**Fixes**

* Fixed incorrect status icons being displayed for webinar
* Fixed canceling stage join request not working
* Fixed back navigation handling on newer Flutter versions

## 2025-09-12

**RealtimeKit Flutter UI Kit 0.1.1**

**Enhancements**

* Upgraded to [RealtimeKit Flutter Core v0.1.1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/#2025-09-12)

## 2025-08-26

**RealtimeKit Flutter UI Kit 0.1.0**

**New APIs**

* Initial release of RealtimeKit Flutter UI Kit with [RealtimeKit Flutter Core v0.1.0+1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/#2025-08-26)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/flutter-ui-kit/","name":"Flutter UI Kit"}}]}
```

---

---
title: iOS Core SDK
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/ios-core.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# iOS Core SDK

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/index.xml)

## 2026-01-14

**RealtimeKit iOS Core 1.6.0**

**Fixes**

* Resolved crashes that occurred when uploading files
* Improved grid transitions by activating consumers in batches for better performance
* Moved consumer toggle requests off main thread to prevent UI blocking
* Prevented race conditions by canceling reconnection attempts during initialization

## 2025-12-16

**RealtimeKit iOS Core 1.5.7**

**Fixes**

* Fixed rare crash when toggling audio mute
* Off-stage webinar hosts no longer show up on the grid

## 2025-12-12

**RealtimeKit iOS Core 1.5.6**

**Fixes**

* Fixed deadlocks in webinar join and screenshare enable flows
* Fixed an issue with camera not working when moving to settings screen and back
* Fixed a rare crash in voice activity detection

## 2025-12-04

**RealtimeKit iOS Core 1.5.5**

**Fixes**

* Fixed participant tiles not being removed properly when peers left the meeting
* Resolved memory spikes when participants enable or toggle video
* Improved video buffer management to prevent memory buildup
* Enhanced iOS video rendering to match Android behavior

## 2025-11-06

**RealtimeKit iOS Core 1.5.4**

**Fixes**

* Internal fixes to reduce telemetry verbosity
* Fixed a minor memory leak

## 2025-10-23

**RealtimeKit iOS Core 1.5.3**

**Fixes**

* Fixed a regression that caused self video to not render if meeting was joined with camera disabled

## 2025-10-23

**RealtimeKit iOS Core 1.5.2**

**Fixes**

* Fixed unreliable grid behavior with improved refresh logic

## 2025-10-06

**RealtimeKit iOS Core 1.5.1**

**Fixes**

* Internal fixes to resolve issues for Flutter platform

## 2025-09-23

**RealtimeKit iOS Core 1.5.0**

**Features**

* Added `RtkSelfEventListener#onAudioDeviceChanged` method that is invoked when the current audio route is updated

**Fixes**

* iOS no longer ignores audio device selection during initial join

## 2025-09-18

**RealtimeKit iOS Core 1.4.1**

**Fixes**

* Speakerphone is now preferred over earpiece as the default audio output

## 2025-09-18

**RealtimeKit iOS Core 1.4.0**

**Breaking changes**

* Updated `RtkSelfEventListener#onAudioDevicesUpdated` method to provide the list of available devices

**Fixes**

* Fixed not being able to route audio to Bluetooth devices

## 2025-09-12

**RealtimeKit iOS Core 1.3.4**

**Fixes**

* Fixed a rare crash during meeting joins in poor network scenarios

## 2025-09-12

**RealtimeKit iOS Core 1.3.3**

**Fixes**

* Fixed pinned peers not being removed from the stage when kicked
* Media consumers are now created in parallel, which significantly improved the speed of when users start seeing other people's audio/video after joining a meeting
* Fixed "Ghost"/Invalid peers that would sometimes show up in long-running meetings
* Fixed an issue in webinar meetings where the SDK would fail to produce media after being removed from the stage once

## 2025-08-13

**RealtimeKit iOS Core 1.3.2**

**Enhancements**

* Fixed microphone not working when joining the stage in a webinar

## 2025-08-13

**RealtimeKit iOS Core 1.3.1**

**Enhancements**

* Fixed a potential crash in poor network scenarios

## 2025-08-12

**RealtimeKit iOS Core 1.3.0**

**Features**

* Added `RtkSelfParticipant#canJoinStage` and `RtkSelfParticipant#canRequestToJoinStage` APIs

**Fixes**

* Fixed viewer unable to join stage in a Livestream
* Fixed user unable to see existing pinned participant after joining meeting

## 2025-08-05

**RealtimeKit iOS Core 1.2.0**

**Breaking changes**

* Renamed `RtkLivestreamData.roomName` to `RtkLivestreamData.meetingId` to match existing API convention
* Removed obsolete `WaitingRoomPermissions` abstraction — all the relevant functionality here is available through `HostPermissions`
* VideoDevice gained a `cameraType: CameraType` parameter
* `VideoDeviceType#displayName` is now deprecated, and it's recommended to call `VideoDevice#toString` instead to get user-facing names for individual `VideoDevice` instances
* Existing APIs related to middlewares were removed and replaced with equivalent counterparts from WebRTC: `RtkSelfParticipant#addVideoMiddleware`, `RtkSelfParticipant#getVideoMiddlewares` and `RtkSelfParticipant#removeVideoMiddleware` were removed. We do not support middlewares on iOS so these APIs were no-op and were incorrectly exposed.

**Features**

* Reimplemented middlewares using WebRTC-native primitives to resolve intermittent crashes and other issues.
* `VideoDevice` now properly labels multiple cameras based on their camera characteristics such as wide-angle and telephoto.

**Fixes**

* Fixed screen share failing to start
* Silenced log spam from our callstats library

## 2025-07-02

**RealtimeKit iOS Core 1.1.0**

**Features**

* Active speakers support

**Enhancements**

* Meeting initialization (`meeting.init()`) is now \~60% faster
* Switched to an updated and **RTK** namespaced WebRTC

## 2025-06-20

**RealtimeKit iOS Core 1.0.1**

**Breaking changes**

* Renamed RtkMessageType to ChatMessageType

**Fixes**

* Silenced logspam from audio activity reporter
* Improved speed of joining calls
* Auth tokens now automatically trim invalid spaces and newlines

## 2025-05-26

**RealtimeKit iOS Core 1.0.0**

**Breaking changes**

* Removed deprecated `channelId` field from `TextMessage`
* Moved listener types to their respective feature package
* Moved public listeners to their respective feature packages
* Renamed plugin add-remove listener methods for RtkPluginsEventListener
* Moved chat extensions to the `chat` package
* Moved `RtkParticipant` to the root package
* Moved `RtkMeetingParticipant` to the root package
* Moved `RtkPluginFile` to the plugins package
* Moved middlewares to their own package
* Moved `VideoScaleType` to top level `media` package
* Dropped `Rtk` prefix from audio and video device types
* Moved device types to the top level `media` package
* Dropped `Rtk` prefix from polls types
* Replaced all LiveStream references with Livestream
* Moved `RtkMeetingParticipant` to root package
* Stripped `Rtk` prefix from `RtkRecordingState`
* Stripped `Rtk` prefix from chat message types
* Removed deprecated RtkLivestream#roomName field
* Moved `RtkMediaPermission` to media package and renamed to `MediaPermission`
* Redistributed `feat` package members
* Moved `StageStatus` class to stage package
* Renamed all event listeners to be of the singular `*EventListener` form

## 2025-05-16

**RealtimeKit iOS Core 0.2.1**

**Fixes**

* Internal fixes to release pipeline

## 2025-05-16

**RealtimeKit iOS Core 0.2.0**

**Fixes**

* Added audio activity detection for active speaker signaling

## 2025-05-14

**RealtimeKit iOS Core 0.1.0**

**New APIs**

* Initial alpha release

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/ios-core/","name":"iOS Core SDK"}}]}
```

---

---
title: iOS UI Kit SDK
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/ios-ui-kit.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# iOS UI Kit SDK

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-ui-kit/index.xml)

## 2026-01-14

**RealtimeKit iOS UI Kit 0.5.7**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.6.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2026-01-14)

**Fixes**

* Fixed video not resuming when video view returns to foreground

## 2025-12-16

**RealtimeKit iOS UI Kit 0.5.6**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.7](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-12-16)

## 2025-12-12

**RealtimeKit iOS UI Kit 0.5.5**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.6](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-12-12)

**Fixes**

* Raised minimum deployment target to iOS 15.6

## 2025-12-04

**RealtimeKit iOS UI Kit 0.5.4**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.5](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-12-04)

**Fixes**

* Raised iOS deployment target to 15.6

## 2025-11-06

**RealtimeKit iOS UI Kit 0.5.3**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.4](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-11-06)

## 2025-10-23

**RealtimeKit iOS UI Kit 0.5.2**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.3](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-10-23)

**Fixes**

* Fixed a regression that caused self video to not render if meeting was joined with camera disabled

## 2025-10-23

**RealtimeKit iOS UI Kit 0.5.1**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.2](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-10-23)

## 2025-10-06

**RealtimeKit iOS UI Kit 0.5.0**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.5.1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-10-06)

**Fixes**

* Audio device selector now dynamically updates the options list when devices are removed or added
* Fixed participant list host actions not working for self

## 2025-09-12

**RealtimeKit iOS UI Kit 0.4.6**

**Fixes**

* Fixed a rare crash during meeting joins in poor network scenarios

## 2025-09-12

**RealtimeKit iOS UI Kit 0.4.5**

**Fixes**

* Fixed pinned peers not being removed from the stage when kicked
* Media consumers are now created in parallel, which significantly improved the speed of when users start seeing other people's audio/video after joining a meeting
* Fixed "Ghost"/Invalid peers that would sometimes show up in long-running meetings
* Fixed an issue in webinar meetings where the SDK would fail to produce media after being removed from the stage once

## 2025-08-13

**RealtimeKit iOS UI Kit 0.4.4**

**Enhancements**

* Upgraded to [RealtimeKit Core v1.3.2](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-08-13)

## 2025-08-13

**RealtimeKit iOS UI Kit 0.4.3**

**Features**

* Upgraded to [RealtimeKit Core v1.3.1](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-08-13)

## 2025-08-12

**RealtimeKit iOS UI Kit 0.4.2**

**Features**

* Upgraded to [RealtimeKit Core v1.3.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-08-12)

## 2025-08-08

**RealtimeKit iOS UI Kit 0.4.1**

**Fixes**

* Fixed multiple errors in the SPM package preventing it from being imported by users

## 2025-08-05

**RealtimeKit iOS UI Kit 0.4.0**

**Features**

* Upgraded to [RealtimeKit Core v1.2.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-08-05)

## 2025-07-02

**RealtimeKit iOS UI Kit 0.3.0**

**Features**

* Upgraded to [RealtimeKit Core v1.1.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2025-07-02)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/ios-ui-kit/","name":"iOS UI Kit SDK"}}]}
```

---

---
title: Notices
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/notice-board.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Notices

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/notice-board/index.xml)

## 2026-01-30

**Chat Pagination Overhaul**

**Affected SDKs:** Web Core SDK 1.2.4+ and Web UI Kit 1.0.9+ (Angular/React/Web Components)

To streamline RealtimeKit SDK offerings, non-operational chat channel APIs have been removed. If you have a custom chat implementation using lower-level components instead of `rtk-chat`, please review the release notes thoroughly and test your implementation after upgrading.

## 2025-11-21

**Support for legacy media engine has been removed**

**Affected SDKs:** Web Core SDK 1.2.0+ (Angular/React/Web Components)

Legacy media engine support has been removed. 

If your organization was created before March 1, 2025 and you are upgrading to `1.2.0` or above, you may experience recording issues.

Please contact support to migrate you to the new Cloudflare SFU media engine to ensure continued recording functionality.

## 2025-11-21

**Update on meeting join issues in firefox 144+**

**Affected SDKs:** Web Core SDK < 1.2.0 (Angular/React/Web Components)

In firefox 144+, users were not able to join the meetings, due to the browser's datachannel behavior change.

Error: `x.data.arrayBuffer is not a function`

Please upgrade to atleast `v1.2.0` to fix this. It is advised to periodically upgrade the SDKs.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/notice-board/","name":"Notices"}}]}
```

---

---
title: React Native Core SDK
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/react-native-core.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# React Native Core SDK

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-core/index.xml)

## 2025-11-20

**RealtimeKit React Native Core 0.3.1**

**Fixes**

* Fixed bluetooth not showing in list/dropdown after rejoining meeting
* Fixed mobile active speaker not working after rejoining meeting

## 2025-11-02

**RealtimeKit React Native Core 0.3.0**

**Breaking changes**

* Starting from version v0.3.0, SDK now supports only React Native 0.77 and above.

**Fixes**

* Fixed 16KB page support in Android >=15
* Fixed foreground service failed to stop errors in Android
* Fixed bluetooth issues in iOS Devices
* Fixed android build issues due to deprecated jCenter in React Native 0.80 or higher

## 2025-10-06

**RealtimeKit React Native Core 0.2.1**

**Fixes**

* Fixed can't install multiple apps with expo sdk
* Fixed screenshare for Android in Expo with New Architecture enabled
* Fixed remote audio/video not working in group calls

## 2025-09-14

**RealtimeKit React Native Core 0.2.0**

**Breaking changes**

* Adding a `blob_provider_authority` string resource is now mandatory. Refer to the installation instructions for more details.

**Fixes**

* Fixed audio switch to earpiece when leaving stage in Webinar
* Fixed types for useRealtimeKitClient options
* Fixed screenshare for Android in Expo

## 2025-08-05

**RealtimeKit React Native Core 0.1.3**

**Fixes**

* Fixed active speaker not working

## 2025-07-08

**RealtimeKit React Native Core 0.1.2**

**Fixes**

* Fixed screenshare not working for Android 13 and later
* Fixed audio device switching not working
* Minor performance improvements

## 2025-06-05

**RealtimeKit React Native Core 0.1.1**

**Fixes**

* Documentation improvements

## 2025-05-29

**RealtimeKit React Native Core 0.1.0**

**Features**

* Initial release

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/react-native-core/","name":"React Native Core SDK"}}]}
```

---

---
title: React Native UI Kit SDK
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/react-native-ui-kit.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# React Native UI Kit SDK

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-ui-kit/index.xml)

## 2025-11-20

**RealtimeKit React Native UI Kit 0.2.0**

**Features**

* Added edit, pin, and delete controls to Chat messages in RtkChat
* Added optional background support for audio/video in Android. Refer to the [documentation](https://docs.realtime.cloudflare.com/react-native/quickstart#additional-steps-for-background-audiovideo-support) for implementation details.

**Fixes**

* Fixed image button in RtkChat opening File Manager instead of Gallery
* Fixed app crash on RtkChat auto-scroll when new messages arrive
* Fixed chat message display issues

## 2025-09-14

**RealtimeKit React Native UI Kit 0.1.3**

**Fixes**

* Fixed duplicate stage toggle pop-ups
* Fixed audio switch to earpiece when leaving stage in Webinar

## 2025-07-08

**RealtimeKit React Native UI Kit 0.1.2**

**Fixes**

* Fixed android build failing for New Architecture
* Added delete option feature in Polls
* Fixed screen being blank when kicked from meeting
* Fixed the fullscreen button not clickable in screenshare
* Fixed audio selector not visible for webinar viewer
* Fixed video incorrectly labeled as being off

## 2025-06-05

**RealtimeKit React Native UI Kit 0.1.1**

**Fixes**

* Documentation improvements

## 2025-06-04

**RealtimeKit React Native UI Kit 0.1.0**

**Features**

* Initial release

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/react-native-ui-kit/","name":"React Native UI Kit SDK"}}]}
```

---

---
title: Web UI Kit
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/release-notes/web-ui-kit.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Web UI Kit

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/realtimekit/release-notes/web-ui-kit/index.xml)

## 2026-03-31

**RealtimeKit Web UI Kit 1.1.2**

**Enhancements**

* AI sidebar component now uses `activeSidebar` state instead of `activeAI` state, streamlining all sidebar components under a single state.

## 2026-03-10

**RealtimeKit Web UI Kit 1.1.1**

**Compatibility:** Works best with RealtimeKit Web Core 1.2.5 or later.

**Enhancements**

* Improved error handling for room join failures to display actionable error messages instead of showing an infinite loader.

**Fixes**

* Corrected typos in UI strings:  
   * `occured` → `occurred`  
   * `On you device` → `On your device`  
   * `Grant acess` → `Grant access`
* Fixed default language pack keys:  
   * `ai.chat.summerise` → `ai.chat.summarize`  
   * `date.yesteday` → `date.yesterday`

## 2026-01-30

**RealtimeKit Web UI Kit 1.1.0**

**Compatibility:** Works best with RealtimeKit Web Core 1.2.4 or later.

**Features**

* Chat message operations (edit, delete, pin) are now available to all participants.
* Chat pagination with infinite scroll for improved performance in meetings with high message volume.
* Pinned messages are now displayed in a dedicated view for easy access.
* Added `overrides` prop support on `rtk-meeting` and `rtk-ui-provider` for easier UI customization. Available overrides include:  
   * `disablePrivateChat` \- Disable private chat functionality.  
   * `disableEmojiPicker` \- Hide emoji picker in chat component.  
```tsx  
<RtkMeeting meeting={meeting} overrides={{  
  disablePrivateChat: true,  
  disableEmojiPicker: true  
}} />  
```

**New components**

* `rtk-chat-header` \- Header component with pinned messages and private chat selector.
* `rtk-pinned-message-selector` \- Displays all pinned messages with paginated infinite scroll.
* `rtk-chat-selector` \- Switch between public chat and private chats with specific participants.

**Component enhancements**

* `rtk-chat-composer-view` now accepts `isSending` prop to display sender messages on the right and other messages on the left with different colors.
* `rtk-chat-messages-ui-paginated` now accepts `privateChatRecipient` prop for displaying paginated private chat messages.
* `rtk-chat-messages-ui-paginated` now emits `editMessage`, `deleteMessage`, and `pinMessage` events for message operations.
* `rtk-menu-item` and `rtk-menu-list` now accept `menuVariant` prop for different color schemes based on user actions.
* `rtk-message-view` now accepts `isEdited`, `isSelf`, `messageType`, and `pinned` props for appropriate message rendering.
* Added automatic scrolling to new messages.

**Breaking changes**

Removed non-operational chat channel components to streamline the SDK. `rtk-chat` remains fully operational.

* Removed `rtk-channel-creator`.
* Removed `rtk-channel-header`.
* Removed `rtk-channel-details`.
* Removed `rtk-channel-selector-ui`.
* Removed `rtk-channel-selector-view`.
* `rtk-chat-composer-ui` no longer accepts `channelId` prop.
* `rtk-chat` no longer accepts `disablePrivateChat` prop. Use preset configuration instead, or pass as override:  
```tsx  
<RtkMeeting meeting={meeting} overrides={{disablePrivateChat: true}} />  
```

**Deprecations**

* `rtk-chat-composer-ui` is deprecated due to scalability limitations and lack of pagination support.

**Known limitations**

* Total message count for public and private chats is not currently displayed.

## 2025-12-17

**RealtimeKit Web UI Kit 1.0.8**

**Fixes**

* Fixed iOS issue where the chat compose view would zoom when typing a message.

## 2025-11-18

**RealtimeKit Web UI Kit 1.0.7**

**Fixes**

* Fixed alignment issues with unread chat message count, unread polls count, and pending participant stage request count.
* Resolved issue where action toggles were incorrectly displayed in participant video preview in the settings component.

## 2025-10-30

**RealtimeKit Web UI Kit 1.0.6**

**Fixes**

* Fixed an issue where `rtk-debugger` displayed audio and video bitrate as `0`.
* Resolved menu visibility for the last participant when the participants list is long.
* Fixed `rtk-polls` not rendering when props were provided after initial mount.
* Improved `rtk-participant-tile` audio visualizer appearance when muted (no longer shows as a single dot).
* Prevented large notifications from overflowing their container.
* Fixed a memory leak in the `mediaConnectionUpdate` event listener.
* Corrected `rtk-ui-provider` prop passing to children during consecutive meetings on the same page.

## 2025-08-14

**RealtimeKit Web UI Kit 1.0.5**

**Fixes**

* Fixed Safari CSS issues where the `rtk-settings` component was not visible and the Audio Playback modal was not taking the proper height.

**Enhancements**

* Livestream viewer now has a seeker and DVR functionality.

## 2025-07-17

**RealtimeKit Web UI Kit 1.0.4**

**Fixes**

* Fixed Angular integration issues.

**Enhancements**

* Added support for multiple meetings on the same page in RealtimeKit.
* Enhanced the `rtk-ui-provider` component to serve as a parent component for sharing common props (`meeting`, `config`, `iconPack`) with all child components.

## 2025-07-08

**RealtimeKit Web UI Kit 1.0.3**

**Fixes**

* Resolved `TypeError` that occurred for meetings without titles.
* Implemented minor UI improvements for chat components.

**Features**

* Made Livestream feature available to all beta users.

## 2025-07-02

**RealtimeKit Web UI Kit 1.0.2**

**Performance**

* Fixed dependency issues to enhance performance and Angular integration.

## 2025-06-30

**RealtimeKit Web UI Kit 1.0.1**

**Deprecated API**

* Discontinued Vue UI support.

## 2025-05-29

**RealtimeKit Web UI Kit 1.0.0**

**Features**

* Initial release of Cloudflare RealtimeKit with support for group calls, webinars, livestreaming, polls, and chat.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/release-notes/","name":"Release Notes"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/release-notes/web-ui-kit/","name":"Web UI Kit"}}]}
```

---

---
title: REST API Reference
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/rest-api-reference.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# REST API Reference

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/rest-api-reference/","name":"REST API Reference"}}]}
```

---

---
title: Select SDK(s)
description: RealtimeKit provides two ways to build real-time media applications:
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/sdk-selection.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Select SDK(s)

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.

### Offerings

RealtimeKit provides two ways to build real-time media applications:

**UI Kit**:  Recommended  UI library of pre-built, customizable components for rapid development — sits on top of the Core SDK.

**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.

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 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)               |
| Android                            | [com.cloudflare.realtimekit:core ↗](https://central.sonatype.com/artifact/com.cloudflare.realtimekit/core)   | [com.cloudflare.realtimekit:ui-android ↗](https://central.sonatype.com/artifact/com.cloudflare.realtimekit/ui-android) |
| iOS                                | [RealtimeKit ↗](https://github.com/dyte-in/RealtimeKitCoreiOS)                                               | [RealtimeKitUI ↗](https://github.com/dyte-in/RealtimeKitUI)                                                            |
| Flutter                            | [realtimekit\_core ↗](https://pub.dev/packages/realtimekit%5Fcore)                                           | [realtimekit\_ui ↗](https://pub.dev/packages/realtimekit%5Fui)                                                         |
| React Native                       | [@cloudflare/realtimekit-react-native ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-react-native) | [@cloudflare/realtimekit-react-native-ui ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-react-native-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                                        |

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.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/sdk-selection/","name":"Select SDK(s)"}}]}
```

---

---
title: Build using UI Kit
description: 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.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Build using UI Kit

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.

Select a framework based on the platform you are building for.

WebMobile

ReactWeb ComponentsAngular

Please install the following dependencies into your project repository:

Terminal window

```

npm i @cloudflare/realtimekit-react @cloudflare/realtimekit-react-ui


```

_Optional:_ You can also build on top of our ready-made template:

Terminal window

```

git clone https://github.com/cloudflare/realtimekit-web-examples.git

cd realtimekit-web-examples/react-examples/examples/default-meeting-ui


```

Please install the following dependencies into your project repository:

Terminal window

```

npm i @cloudflare/realtimekit-web @cloudflare/realtimekit-ui


```

_Optional:_ You can also build on top of our ready-made template:

Terminal window

```

git clone https://github.com/cloudflare/realtimekit-web-examples.git

cd realtimekit-web-examples/html-examples/examples/default-meeting-ui


```

Please install the following dependencies into your project repository:

Terminal window

```

npm i @cloudflare/realtimekit-angular @cloudflare/realtimekit-angular-ui


```

_Optional:_ You can also build on top of our ready-made template:

Terminal window

```

git clone https://github.com/cloudflare/realtimekit-web-examples.git

cd realtimekit-web-examples/angular-examples/examples/default-meeting-ui


```

Add the following dependency to your `build.gradle` file:

```

dependencies {

  implementation 'com.cloudflare.realtimekit:ui-android:0.3.0'

}


```

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/RealtimeKitUI`.
3. Select the version and add the package to your project.

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.

```

<key>NSBluetoothPeripheralUsageDescription</key>

<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>

<key>NSBluetoothAlwaysUsageDescription</key>

<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>

<key>NSCameraUsageDescription</key>

<string>Access camera to enable video during meetings.</string>

<key>NSMicrophoneUsageDescription</key>

<string>Access microphone to enable audio during meetings.</string>

<key>NSPhotoLibraryUsageDescription</key>

<string>Access photos to share images during meetings.</string>

<key>UIBackgroundModes</key>

<array>

  <string>audio</string>

  <string>voip</string>

  <string>fetch</string>

  <string>remote-notification</string>

</array>


```

The `UIBackgroundModes` key is used in the `Info.plist` file of an iOS app to declare the app's supported background execution modes. This key is an array of strings that specifies the types of background tasks that the app supports. By declaring the background modes, the app can continue to run in the background and perform specific tasks even when it is not in the foreground.

Note

The use of background modes should be justified and comply with Apple's App Store Review Guidelines. Apps that misuse background modes or unnecessarily run in the background may be rejected during the app review process.

Source: [Apple Developer Documentation: Declaring Your App's Supported Background Tasks ↗](https://developer.apple.com/documentation/xcode/configuring-background-execution-modes)

Install the RealtimeKit UI Kit by adding the dependency to your `pubspec.yaml` file:

Terminal window

```

flutter pub add realtimekit_ui


```

Then import the package into your project:

Dart

```

import 'package:realtimekit_ui/realtimekit_ui.dart';


```

* [ Android ](#tab-panel-5971)
* [ iOS ](#tab-panel-5972)

Set `compileSdkVersion 36` and `minSdkVersion 24` in your `build.gradle` file at `<project root>/android/app/build.gradle`:

```

defaultConfig {

  ...

  compileSdkVersion 36

  minSdkVersion 24

  ...

}


```

Change the Kotlin version to `1.9.0`:

```

ext.kotlin_version = '1.9.0'


```

Set your platform to iOS 13.0 or above in your `Podfile`:

```

platform :ios, '13.0'


```

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.

```

<key>NSBluetoothPeripheralUsageDescription</key>

<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>

<key>NSBluetoothAlwaysUsageDescription</key>

<string>Access Bluetooth to connect to headphones and audio devices during calls.</string>

<key>NSCameraUsageDescription</key>

<string>Access camera to enable video during meetings.</string>

<key>NSMicrophoneUsageDescription</key>

<string>Access microphone to enable audio during meetings.</string>

<key>NSPhotoLibraryUsageDescription</key>

<string>Access photos to share images during meetings.</string>

<key>UIBackgroundModes</key>

<array>

  <string>audio</string>

  <string>voip</string>

  <string>fetch</string>

  <string>remote-notification</string>

</array>


```

**Optional:** If you are allowing users to download attachments in chat, add the following permissions to your `Info.plist`:

```

<key>LSSupportsOpeningDocumentsInPlace</key>

<true/>

<key>UIFileSharingEnabled</key>

<true/>


```

* [ React Native ](#tab-panel-5973)
* [ Expo ](#tab-panel-5974)

Install the dependencies:

Terminal window

```

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:

* React Native 0.64 - 0.74: `npm install react-native-safe-area-context@^4.0.0`
* React Native >= 0.74: `npm install react-native-safe-area-context@^5.0.0`

Refer to the [react-native-svg installation guide ↗](https://github.com/software-mansion/react-native-svg) for setup.

Install the dependencies:

Terminal window

```

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


```

Install `react-native-safe-area-context` based on your React Native version:

* React Native 0.64 - 0.74: `npm install react-native-safe-area-context@^4.0.0`
* React Native >= 0.74: `npm install react-native-safe-area-context@^5.0.0`

Install Expo config plugins:

Terminal window

```

npx expo install @expo/config-plugins


```

Add the plugins to your `app.json`:

```

{

  "expo": {

    "plugins": [

      "@cloudflare/realtimekit-react-native",

      "@cloudflare/react-native-webrtc"

    ]

  }

}


```

Run `prebuild` to set up native modules:

Terminal window

```

npx expo prebuild


```

* [ Android ](#tab-panel-5975)
* [ iOS ](#tab-panel-5976)

The following instructions are for release builds. Debug builds should work without additional steps.

Edit your `android/gradle.properties` and add the following lines:

```

newArchEnabled=false

android.useFullClasspathForDexingTransform=true


```

**Note:** Starting from version `>=0.2.0`, add a required `blob_provider_authority` string resource in the `strings.xml` file:

```

<resources>

  ...

  <string name="blob_provider_authority">YOUR_APP_RESOURCE_NAME</string>

  ...

</resources>


```

Create or append to the file `android/app/proguard-rules.pro`:

```

-keep class realtimekit.org.webrtc.** { *; }

-dontwarn org.chromium.build.BuildHooksAndroid


```

In your `android/app/build.gradle`, edit the release configuration and add the following line importing the ProGuard configuration:

```

buildTypes {

  release {

    ...

    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

  }

}


```

**Note:** The minimum supported iOS version is **14.0**.

Open your `Podfile` and set the platform to iOS 14:

```

platform :ios, '14.0'


```

Add the following permission entries to your `Info.plist` file:

```

<key>NSCameraUsageDescription</key>

<string>Access camera to enable video during meetings.</string>

<key>NSMicrophoneUsageDescription</key>

<string>Access microphone to enable audio during meetings.</string>

<key>NSPhotoLibraryUsageDescription</key>

<string>Access photos to share images during meetings.</string>

<key>UIViewControllerBasedStatusBarAppearance</key>

<false/>


```

## Initialize the SDK

Add the following code to your React application:

App.tsx

```

import { useEffect } from 'react';

import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';


export default function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {

    initMeeting({ authToken: '<auth-token>' });

  }, []);


  return <div></div>;

}


```

Use the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to fetch the `authToken`.

## 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.

MyMeetingUI.tsx

```

import { useRealtimeKitMeeting } from '@cloudflare/realtimekit-react';

import { RtkMeeting } from '@cloudflare/realtimekit-react-ui';


export default function MyMeetingUI() {

  const { meeting } = useRealtimeKitMeeting();

  return (

    <RtkMeeting mode="fill" meeting={meeting} showSetupScreen={true} />

  );

}


```

## Display the meeting

Wrap your meeting component in `RealtimeKitProvider`:

App.tsx

```

import { useEffect } from 'react';

import { useRealtimeKitClient, RealtimeKitProvider } from '@cloudflare/realtimekit-react';

import MyMeetingUI from './MyMeetingUI.tsx'


export default function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();


  useEffect(() => {

    initMeeting({ authToken: '<auth-token>' });

  }, []);


  return (

    <RealtimeKitProvider value={meeting}>

      <MyMeetingUI />

    </RealtimeKitProvider>

  );

}


```

## Import the SDK

Add the following imports to your HTML file:

index.html

```

<!DOCTYPE html>

<html lang="en">

  <head>

    <!-- Import helper to load UI Kit components -->

    <script type="module">

      import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js";

      defineCustomElements();

    </script>

    <!-- Import RealtimeKit Core via CDN -->

    <script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>

  </head>

</html>


```

## Display the meeting

Use the `rtk-meeting` component to render the meeting UI:

```

<body>

  <rtk-meeting id="my-meeting" show-setup-screen="true" />

</body>


```

## Initialize the SDK

Pass the `authToken` and connect the meeting object to the UI component:

Use the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to fetch the `authToken`.

```

<script>

  const authToken = "<auth-token>";

  // Initialize the SDK

  RealtimeKitClient.init({

    authToken,

  }).then((meeting) => {

    document.getElementById("my-meeting").meeting = meeting;

  });

</script>


```

## 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.

TypeScript

```

import { NgModule } from "@angular/core";

import { BrowserModule } from "@angular/platform-browser";

import { RTKComponentsModule } from "@cloudflare/realtimekit-angular";

import { AppComponent } from "./app.component";


@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule, RTKComponentsModule],

  providers: [],

  bootstrap: [AppComponent],

})

export class AppModule {}


```

_Optional:_ If you are using TypeScript, set `allowSyntheticDefaultImports` as `true` in your `tsconfig.json`.

TypeScript

```

{

  "compilerOptions": {

    "allowSyntheticDefaultImports": true

  }

}


```

## Display the meeting

Load the `RtkMeeting` component in your template file (`component.html`):

```

<rtk-meeting #myid></rtk-meeting>


```

## Initialize the SDK

TypeScript

```

class AppComponent {

  title = "MyProject";

  @ViewChild("myid") meetingComponent: RtkMeeting;

  rtkMeeting: RealtimeKitClient;


  async ngAfterViewInit() {

    const meeting = await RealtimeKitClient.init({

      authToken: "<auth-token>",

    });

    meeting.join();

    this.rtkMeeting = meeting;

    if (this.meetingComponent) this.meetingComponent.meeting = meeting;

  }

}


```

Use the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to fetch the `authToken`.

## 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 [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to fetch the `authToken`.

Swift

```

import RealtimeKit

import RealtimeKitUI


let rtkUI = RealtimeKitUI(

    meetingInfo: RtkMeetingInfo(

        authToken: "<auth-token>",

        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 [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) 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 = "<auth-token>")

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 [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) to fetch the `authToken`.

Dart

```

import 'package:flutter/material.dart';

import 'package:realtimekit_ui/realtimekit_ui.dart';


final meetingInfo = RtkMeetingInfo(authToken: '<auth-token>');

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 [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/) 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 (

    <RtkUIProvider>

      <Meeting authToken="<auth-token>" />

    </RtkUIProvider>

  );

}


function Meeting({ authToken }: { authToken: string }) {

  const [meet, initMeeting] = useRealtimeKitClient();


  useEffect(() => {

    initMeeting({

      authToken,

      defaults: { audio: true, video: true },

    });

  }, [authToken]);


  if (!meet) return <Text>Loading...</Text>;


  return (

    <RealtimeKitProvider value={meet}>

      <RtkMeeting meeting={meet} showSetupScreen={true} />

    </RealtimeKitProvider>

  );

}


```

## Next steps

You have integrated RealtimeKit with the default meeting UI. Participants can now see and hear each other in sessions.

### 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.

To build your own custom meeting UI, follow these guides in order:

1. **[UI Kit Components Library](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/)** \- Browse available components and their visual representations
2. **[UI Kit Meeting Lifecycle](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/)** \- Lifecycle of a meeting and how components communicate and synchronize with each other
3. **[Session Lifecycle](https://developers.cloudflare.com/realtime/realtimekit/concepts/session-lifecycle/)** \- Understand different peer states and transitions
4. **[Meeting Object Explained](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/)** \- Access meeting data and participant information using the Core SDK
5. **[Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/)** \- Put everything together to create a custom meeting interface

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}}]}
```

---

---
title: UI Kit Addons
description: A collection of UI Kit addons that extend RealtimeKit's prebuilt UI Kit capabilities with additional interactive components and controls for enhanced meeting experiences.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/addons.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# UI Kit Addons

A collection of UI Kit addons that extend RealtimeKit's prebuilt UI Kit capabilities with additional interactive components and controls for enhanced meeting experiences.

WebMobile

ReactWeb ComponentsAngular

The UI Kit addons library provides the following categories of components:

#### Host Controls

Host controls allow meeting hosts to manage participant permissions:

* **Camera Host Control** \- Control participant camera permissions
* **Mic Host Control** \- Control participant microphone permissions
* **Chat Host Control** \- Control participant chat permissions

#### Reactions

Interactive engagement features for participants:

* **Hand Raise** \- Allow participants to raise their hand to signal they want to speak
* **Reactions Manager** \- Display emoji reactions during meetings

#### Participant Tile

Customize the participant tile interface:

* **Participant Tile Menu** \- Add custom menu options to participant tiles

#### Participant Tab Actions

Add custom actions to the participants tab:

* **Participant Menu Item** \- Add custom menu items to participant actions
* **Participants Tab Action** \- Add custom action buttons to the participants tab
* **Participants Tab Toggle** \- Add custom toggle controls to the participants tab

#### Video Background

Apply visual effects to participant video:

* **Video Background** \- Apply blur or virtual backgrounds to video streams

#### Control Bar

Customize the meeting control bar:

* **Custom Control Bar Button** \- Add custom buttons to the control bar

## Installation

 npm  yarn  pnpm  bun 

```
npm i @cloudflare/realtimekit-ui-addons
```

```
yarn add @cloudflare/realtimekit-ui-addons
```

```
pnpm add @cloudflare/realtimekit-ui-addons
```

```
bun add @cloudflare/realtimekit-ui-addons
```

 npm  yarn  pnpm  bun 

```
npm i @cloudflare/realtimekit-ui-addons
```

```
yarn add @cloudflare/realtimekit-ui-addons
```

```
pnpm add @cloudflare/realtimekit-ui-addons
```

```
bun add @cloudflare/realtimekit-ui-addons
```

 npm  yarn  pnpm  bun 

```
npm i @cloudflare/realtimekit-ui-addons
```

```
yarn add @cloudflare/realtimekit-ui-addons
```

```
pnpm add @cloudflare/realtimekit-ui-addons
```

```
bun add @cloudflare/realtimekit-ui-addons
```

## Usage

```

import { useState, useEffect } from "react";

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

} from "@cloudflare/realtimekit-react";

import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";

import { registerAddons, defaultConfig } from "@cloudflare/realtimekit-ui";


// Import addons

import CameraHostControl from "@cloudflare/realtimekit-ui-addons/camera-host-control";

import MicHostControl from "@cloudflare/realtimekit-ui-addons/mic-host-control";

import ChatHostControl from "@cloudflare/realtimekit-ui-addons/chat-host-control";

import HandRaise from "@cloudflare/realtimekit-ui-addons/hand-raise";

import ReactionsManagerAddon from "@cloudflare/realtimekit-ui-addons/reactions-manager";

import ParticipantTileMenu from "@cloudflare/realtimekit-ui-addons/participant-tile-menu";

import ParticipantMenuItem from "@cloudflare/realtimekit-ui-addons/participant-menu-item";

import ParticipantsTabAction from "@cloudflare/realtimekit-ui-addons/participants-tab-action";

import ParticipantsTabToggle from "@cloudflare/realtimekit-ui-addons/participants-tab-toggle";

import RealtimeKitVideoBackground from "@cloudflare/realtimekit-ui-addons/video-background";

import CustomControlbarButton from "@cloudflare/realtimekit-ui-addons/custom-controlbar-button";


function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  const [authToken, setAuthToken] = useState("<participant_auth_token>");

  const [config, setConfig] = useState(defaultConfig);


  useEffect(() => {

    if (authToken) {

      initMeeting({

        authToken: authToken,

      });

    }

  }, [authToken]);


  useEffect(() => {

    const initializeAddons = async () => {

      if (!meeting) return;


      // Initialize addons

      const cameraHostControl = await CameraHostControl.init({

        meeting,

        hostPresets: ["webinar_presenter"],

        targetPresets: ["webinar_viewer"],

        addActionInParticipantMenu: true,

      });


      const micHostControl = await MicHostControl.init({

        meeting,

        hostPresets: ["webinar_presenter"],

        targetPresets: ["webinar_viewer"],

        addActionInParticipantMenu: true,

      });


      const chatHostControl = await ChatHostControl.init({

        meeting,

        hostPresets: ["webinar_presenter"],

        targetPresets: ["webinar_viewer"],

        addActionInParticipantMenu: true,

      });


      const handRaise = await HandRaise.init({

        meeting,

        canRaiseHand: true,

        canManageRaisedHand: true,

        handRaiseIcon:

          '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 12.02c0 1.06.2 2.1.6 3.08l.6 1.42c.22.55.64 1.01 1.17 1.29.27.14.56.21.86.21h2.55c.77 0 1.49-.41 1.87-1.08.5-.87 1.02-1.7 1.72-2.43l1.32-1.39c.44-.46.97-.84 1.49-1.23l.59-.45a.6.6 0 0 0 .23-.47c0-.75-.54-1.57-1.22-1.79a3.34 3.34 0 0 0-2.78.29V4.5a1.5 1.5 0 0 0-2.05-1.4 1.5 1.5 0 0 0-2.9 0A1.5 1.5 0 0 0 6 4.5v.09A1.5 1.5 0 0 0 4 6v6.02ZM8 4.5v4a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0v5a.5.5 0 0 0 1 0v-4a.5.5 0 0 1 1 0v6a.5.5 0 0 0 .85.37h.01c.22-.22.44-.44.72-.58.7-.35 2.22-.57 2.4.5l-.53.4c-.52.4-1.04.78-1.48 1.24l-1.33 1.38c-.75.79-1.31 1.7-1.85 2.63-.21.36-.6.58-1.01.58H7.23a.87.87 0 0 1-.4-.1 1.55 1.55 0 0 1-.71-.78l-.59-1.42a7.09 7.09 0 0 1-.53-2.7V6a.5.5 0 0 1 1 0v3.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0Z" fill="#ff0000"></path></svg>',

      });


      const CUSTOM_REACTIONS = [

        { emoji: "🔥", label: "fire" },

        { emoji: "😢", label: "sad" },

        { emoji: "👍", label: "thumbs up" },

        { emoji: "👎", label: "thumbs down" },

        { emoji: "❤️", label: "heart" },

        { emoji: "😂", label: "laugh" },

        { emoji: "👏", label: "clap" },

        { emoji: "🎉", label: "celebrate" },

      ];


      const reactionsAddon = await ReactionsManagerAddon.init({

        meeting,

        reactions: CUSTOM_REACTIONS,

        canSendReactions: true,

      });


      const participantTileMenu = new ParticipantTileMenu(

        [

          {

            label: "Custom Toggle",

            onClick: (participantId) => {

              console.log("Clicked on custom toggle for ", participantId);

            },

          },

        ],

        "top-right",

      );


      const rightTickSVG =

        "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M4 12l6 6 10-14' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>";


      const participantMenuItem = new ParticipantMenuItem({

        label: "Custom Menu Item",

        icon: rightTickSVG,

        styles: "rtk-icon { color: green !important; }",

        onClick: () => {

          alert("Participant Menu Item clicked");

        },

      });


      const participantsTabAction = new ParticipantsTabAction({

        onClick: () => {

          alert("Clicked!");

        },

        label: "Click me",

        position: "start",

      });


      const participantsTabToggle = new ParticipantsTabToggle({

        onEnabled: () => {

          alert("toggled true!");

        },

        onDisabled: () => {

          alert("toggled false!");

        },

        label: "Click me",

        initialValue: () => true,

        position: "start",

      });


      const videoBackground = await RealtimeKitVideoBackground.init({

        modes: ["blur", "virtual", "random"],

        blurStrength: 30,

        meeting,

        images: [

          "https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3",

          "https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3",

          "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3",

        ],

        randomCount: 10,

        onVideoBackgroundUpdate: ({ backgroundMode, backgroundURL }) => {

          console.log("videoBackgroundUpdated => ", {

            backgroundMode,

            backgroundURL,

          });

        },

      });


      const customControlBarButton = new CustomControlbarButton({

        position: "left",

        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 17.75a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5zM12 14c0-2.5 4-2.5 4-6a4 4 0 1 0-8 0" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>',

        label: "Click Me!",

        onClick: () => alert("Custom Control Bar Button Clicked"),

      });


      // Register addons

      const newConfig = registerAddons(

        [

          cameraHostControl,

          micHostControl,

          chatHostControl,

          handRaise,

          reactionsAddon,

          participantTileMenu,

          participantMenuItem,

          participantsTabAction,

          participantsTabToggle,

          videoBackground,

          customControlBarButton,

        ],

        meeting,

      );


      setConfig(newConfig);

    };


    initializeAddons();

  }, [meeting]);


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkMeeting showSetupScreen={true} meeting={meeting} config={config} />

    </RealtimeKitProvider>

  );

}


```

Note

If you are using `RtkUiProvider` instead of the `RtkMeeting`, pass the `meeting` and `config` objects to the provider:

```

<RtkUiProvider meeting={meeting} config={config}>

  {/* Your custom UI components here */}

</RtkUiProvider>


```

Add the UI Kit library to your HTML:

```

<script type="module">

  import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js";

  defineCustomElements();

</script>


```

Place the `rtk-meeting` component in your HTML file:

```

<body>

  <rtk-meeting></rtk-meeting>

</body>


```

Initialize the meeting and configure addons in your script:

```

<script type="module">

  import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";

  import { registerAddons } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/dist/index.es.js";


  // Import addons

  import CameraHostControl from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/camera-host-control/index.js";

  import MicHostControl from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/mic-host-control/index.js";

  import ChatHostControl from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/chat-host-control/index.js";

  import HandRaise from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/hand-raise/index.js";

  import ReactionsManagerAddon from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/reactions-manager/index.js";

  import ParticipantTileMenu from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/participant-tile-menu/index.js";

  import ParticipantMenuItem from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/participant-menu-item/index.js";

  import ParticipantsTabAction from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/participants-tab-action/index.js";

  import ParticipantsTabToggle from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/participants-tab-toggle/index.js";

  import RealtimeKitVideoBackground from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/video-background/index.js";

  import CustomControlbarButton from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui-addons@latest/custom-controlbar-button/index.js";


  // Initialize meeting

  const meeting = await RealtimeKitClient.init({

    authToken: "<participant_auth_token>",

  });


  // Initialize addons

  // Host controls

  const cameraHostControl = await CameraHostControl.init({

    meeting,

    hostPresets: ["webinar_presenter"],

    targetPresets: ["webinar_viewer"],

    addActionInParticipantMenu: true,

  });


  const micHostControl = await MicHostControl.init({

    meeting,

    hostPresets: ["webinar_presenter"],

    targetPresets: ["webinar_viewer"],

    addActionInParticipantMenu: true,

  });


  const chatHostControl = await ChatHostControl.init({

    meeting,

    hostPresets: ["webinar_presenter"],

    targetPresets: ["webinar_viewer"],

    addActionInParticipantMenu: true,

  });


  // Reactions

  const handRaise = await HandRaise.init({

    meeting,

    canRaiseHand: true,

    canManageRaisedHand: true,

    handRaiseIcon:

      '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 12.02c0 1.06.2 2.1.6 3.08l.6 1.42c.22.55.64 1.01 1.17 1.29.27.14.56.21.86.21h2.55c.77 0 1.49-.41 1.87-1.08.5-.87 1.02-1.7 1.72-2.43l1.32-1.39c.44-.46.97-.84 1.49-1.23l.59-.45a.6.6 0 0 0 .23-.47c0-.75-.54-1.57-1.22-1.79a3.34 3.34 0 0 0-2.78.29V4.5a1.5 1.5 0 0 0-2.05-1.4 1.5 1.5 0 0 0-2.9 0A1.5 1.5 0 0 0 6 4.5v.09A1.5 1.5 0 0 0 4 6v6.02ZM8 4.5v4a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0v5a.5.5 0 0 0 1 0v-4a.5.5 0 0 1 1 0v6a.5.5 0 0 0 .85.37h.01c.22-.22.44-.44.72-.58.7-.35 2.22-.57 2.4.5l-.53.4c-.52.4-1.04.78-1.48 1.24l-1.33 1.38c-.75.79-1.31 1.7-1.85 2.63-.21.36-.6.58-1.01.58H7.23a.87.87 0 0 1-.4-.1 1.55 1.55 0 0 1-.71-.78l-.59-1.42a7.09 7.09 0 0 1-.53-2.7V6a.5.5 0 0 1 1 0v3.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0Z" fill="#ff0000"></path></svg>',

  });


  const CUSTOM_REACTIONS = [

    { emoji: "🔥", label: "fire" },

    { emoji: "😢", label: "sad" },

    { emoji: "👍", label: "thumbs up" },

    { emoji: "👎", label: "thumbs down" },

    { emoji: "❤️", label: "heart" },

    { emoji: "😂", label: "laugh" },

    { emoji: "👏", label: "clap" },

    { emoji: "🎉", label: "celebrate" },

  ];


  const reactionsAddon = await ReactionsManagerAddon.init({

    meeting,

    reactions: CUSTOM_REACTIONS,

    canSendReactions: true,

  });


  // Participant Tile

  const participantTileMenu = new ParticipantTileMenu(

    [

      {

        label: "Custom Toggle",

        onClick: (participantId) => {

          console.log("Clicked on custom toggle for ", participantId);

        },

      },

    ],

    "top-right",

  );


  // Participant Tab Actions

  const rightTickSVG =

    "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M4 12l6 6 10-14' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>";


  const participantMenuItem = new ParticipantMenuItem({

    label: "Custom Menu Item",

    icon: rightTickSVG,

    styles: "rtk-icon { color: green !important; }",

    onClick: () => {

      alert("Participant Menu Item clicked");

    },

  });


  const participantsTabAction = new ParticipantsTabAction({

    onClick: () => {

      alert("Clicked!");

    },

    label: "Click me",

    position: "start",

  });


  const participantsTabToggle = new ParticipantsTabToggle({

    onEnabled: () => {

      alert("toggled true!");

    },

    onDisabled: () => {

      alert("toggled false!");

    },

    label: "Click me",

    initialValue: () => true,

    position: "start",

  });


  // Video Background (Effects)

  const videoBackground = await RealtimeKitVideoBackground.init({

    modes: ["blur", "virtual", "random"],

    blurStrength: 30, // 0 - 100 for opacity

    meeting,

    images: [

      "https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3",

      "https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3",

      "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3",

    ],

    randomCount: 10,

    onVideoBackgroundUpdate: ({ backgroundMode, backgroundURL }) => {

      console.log("videoBackgroundUpdated => ", {

        backgroundMode,

        backgroundURL,

      });

    },

  });


  // Control Bar

  const customControlBarButton = new CustomControlbarButton({

    position: "left",

    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 17.75a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5zM12 14c0-2.5 4-2.5 4-6a4 4 0 1 0-8 0" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>',

    label: "Click Me!",

    onClick: () => alert("Custom Control Bar Button Clicked"),

  });


  // Register addons

  const newConfig = registerAddons(

    [

      cameraHostControl,

      micHostControl,

      chatHostControl,

      handRaise,

      reactionsAddon,

      participantTileMenu,

      participantMenuItem,

      participantsTabAction,

      participantsTabToggle,

      videoBackground,

      customControlBarButton,

    ],

    meeting,

  );


  // Apply config to meeting component

  document.querySelector("rtk-meeting").showSetupScreen = true;

  document.querySelector("rtk-meeting").meeting = meeting;

  document.querySelector("rtk-meeting").config = newConfig;

</script>


```

Note

If you are using `rtk-ui-provider` instead of the `rtk-meeting`, pass the `meeting` and `config` objects to the provider:

```

<rtk-ui-provider id="provider" meeting="{meeting}" config="{newConfig}">

  <!-- Your custom UI components here -->

</rtk-ui-provider>


```

In your component template, add the meeting component:

```

<rtk-meeting [meeting]="meeting" [config]="config"></rtk-meeting>


```

In your component TypeScript file:

TypeScript

```

import { Component, OnInit } from "@angular/core";

import RealtimeKitClient from "@cloudflare/realtimekit";

import { registerAddons, defaultConfig } from "@cloudflare/realtimekit-ui";


// Import addons

import CameraHostControl from "@cloudflare/realtimekit-ui-addons/camera-host-control";

import MicHostControl from "@cloudflare/realtimekit-ui-addons/mic-host-control";

import ChatHostControl from "@cloudflare/realtimekit-ui-addons/chat-host-control";

import HandRaise from "@cloudflare/realtimekit-ui-addons/hand-raise";

import ReactionsManagerAddon from "@cloudflare/realtimekit-ui-addons/reactions-manager";

import ParticipantTileMenu from "@cloudflare/realtimekit-ui-addons/participant-tile-menu";

import ParticipantMenuItem from "@cloudflare/realtimekit-ui-addons/participant-menu-item";

import ParticipantsTabAction from "@cloudflare/realtimekit-ui-addons/participants-tab-action";

import ParticipantsTabToggle from "@cloudflare/realtimekit-ui-addons/participants-tab-toggle";

import RealtimeKitVideoBackground from "@cloudflare/realtimekit-ui-addons/video-background";

import CustomControlbarButton from "@cloudflare/realtimekit-ui-addons/custom-controlbar-button";


@Component({

  selector: "app-meeting",

  templateUrl: "./meeting.component.html",

})

export class MeetingComponent implements OnInit {

  meeting: any;

  config: any = defaultConfig;


  async ngOnInit() {

    // Initialize meeting

    this.meeting = await RealtimeKitClient.init({

      authToken: "<participant_auth_token>",

    });


    // Initialize addons

    const cameraHostControl = await CameraHostControl.init({

      meeting: this.meeting,

      hostPresets: ["webinar_presenter"],

      targetPresets: ["webinar_viewer"],

      addActionInParticipantMenu: true,

    });


    const micHostControl = await MicHostControl.init({

      meeting: this.meeting,

      hostPresets: ["webinar_presenter"],

      targetPresets: ["webinar_viewer"],

      addActionInParticipantMenu: true,

    });


    const chatHostControl = await ChatHostControl.init({

      meeting: this.meeting,

      hostPresets: ["webinar_presenter"],

      targetPresets: ["webinar_viewer"],

      addActionInParticipantMenu: true,

    });


    const handRaise = await HandRaise.init({

      meeting: this.meeting,

      canRaiseHand: true,

      canManageRaisedHand: true,

      handRaiseIcon:

        '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 12.02c0 1.06.2 2.1.6 3.08l.6 1.42c.22.55.64 1.01 1.17 1.29.27.14.56.21.86.21h2.55c.77 0 1.49-.41 1.87-1.08.5-.87 1.02-1.7 1.72-2.43l1.32-1.39c.44-.46.97-.84 1.49-1.23l.59-.45a.6.6 0 0 0 .23-.47c0-.75-.54-1.57-1.22-1.79a3.34 3.34 0 0 0-2.78.29V4.5a1.5 1.5 0 0 0-2.05-1.4 1.5 1.5 0 0 0-2.9 0A1.5 1.5 0 0 0 6 4.5v.09A1.5 1.5 0 0 0 4 6v6.02ZM8 4.5v4a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0v5a.5.5 0 0 0 1 0v-4a.5.5 0 0 1 1 0v6a.5.5 0 0 0 .85.37h.01c.22-.22.44-.44.72-.58.7-.35 2.22-.57 2.4.5l-.53.4c-.52.4-1.04.78-1.48 1.24l-1.33 1.38c-.75.79-1.31 1.7-1.85 2.63-.21.36-.6.58-1.01.58H7.23a.87.87 0 0 1-.4-.1 1.55 1.55 0 0 1-.71-.78l-.59-1.42a7.09 7.09 0 0 1-.53-2.7V6a.5.5 0 0 1 1 0v3.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0Z" fill="#ff0000"></path></svg>',

    });


    const CUSTOM_REACTIONS = [

      { emoji: "🔥", label: "fire" },

      { emoji: "😢", label: "sad" },

      { emoji: "👍", label: "thumbs up" },

      { emoji: "👎", label: "thumbs down" },

      { emoji: "❤️", label: "heart" },

      { emoji: "😂", label: "laugh" },

      { emoji: "👏", label: "clap" },

      { emoji: "🎉", label: "celebrate" },

    ];


    const reactionsAddon = await ReactionsManagerAddon.init({

      meeting: this.meeting,

      reactions: CUSTOM_REACTIONS,

      canSendReactions: true,

    });


    const participantTileMenu = new ParticipantTileMenu(

      [

        {

          label: "Custom Toggle",

          onClick: (participantId: string) => {

            console.log("Clicked on custom toggle for ", participantId);

          },

        },

      ],

      "top-right",

    );


    const rightTickSVG =

      "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M4 12l6 6 10-14' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>";


    const participantMenuItem = new ParticipantMenuItem({

      label: "Custom Menu Item",

      icon: rightTickSVG,

      styles: "rtk-icon { color: green !important; }",

      onClick: () => {

        alert("Participant Menu Item clicked");

      },

    });


    const participantsTabAction = new ParticipantsTabAction({

      onClick: () => {

        alert("Clicked!");

      },

      label: "Click me",

      position: "start",

    });


    const participantsTabToggle = new ParticipantsTabToggle({

      onEnabled: () => {

        alert("toggled true!");

      },

      onDisabled: () => {

        alert("toggled false!");

      },

      label: "Click me",

      initialValue: () => true,

      position: "start",

    });


    const videoBackground = await RealtimeKitVideoBackground.init({

      modes: ["blur", "virtual", "random"],

      blurStrength: 30,

      meeting: this.meeting,

      images: [

        "https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3",

        "https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3",

        "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3",

      ],

      randomCount: 10,

      onVideoBackgroundUpdate: ({ backgroundMode, backgroundURL }: any) => {

        console.log("videoBackgroundUpdated => ", {

          backgroundMode,

          backgroundURL,

        });

      },

    });


    const customControlBarButton = new CustomControlbarButton({

      position: "left",

      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 17.75a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5zM12 14c0-2.5 4-2.5 4-6a4 4 0 1 0-8 0" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>',

      label: "Click Me!",

      onClick: () => alert("Custom Control Bar Button Clicked"),

    });


    // Register addons

    this.config = registerAddons(

      [

        cameraHostControl,

        micHostControl,

        chatHostControl,

        handRaise,

        reactionsAddon,

        participantTileMenu,

        participantMenuItem,

        participantsTabAction,

        participantsTabToggle,

        videoBackground,

        customControlBarButton,

      ],

      this.meeting,

    );

  }

}


```

Note

If you are using `rtk-ui-provider` instead of the `rtk-meeting` component, pass the `meeting` and `config` objects to the provider:

```

<rtk-ui-provider [meeting]="meeting" [config]="config">

  <!-- Your custom UI components here -->

</rtk-ui-provider>


```

## Programmatic Control

Some addons support programmatic control for dynamic changes during a meeting.

#### Video Background

You can apply, replace, or remove video backgrounds programmatically:

TypeScript

```

// Apply a virtual background

await videoBackground.applyVirtualBackground(

  "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3",

);


// Apply a blur background

await videoBackground.applyBlurBackground();


// Remove background (return to normal video)

await videoBackground.removeBackground();


```

Some addons support programmatic control for dynamic changes during a meeting.

#### Video Background

You can apply, replace, or remove video backgrounds programmatically:

TypeScript

```

// Apply a virtual background

await videoBackground.applyVirtualBackground(

  "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3",

);


// Apply a blur background

await videoBackground.applyBlurBackground();


// Remove background (return to normal video)

await videoBackground.removeBackground();


```

Some addons support programmatic control for dynamic changes during a meeting.

#### Video Background

You can apply, replace, or remove video backgrounds programmatically:

TypeScript

```

// Apply a virtual background

await videoBackground.applyVirtualBackground(

  "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3",

);


// Apply a blur background

await videoBackground.applyBlurBackground();


// Remove background (return to normal video)

await videoBackground.removeBackground();


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/addons/","name":"UI Kit Addons"}}]}
```

---

---
title: Component Reference
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Component Reference

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}}]}
```

---

---
title: Angular
description: Complete API reference for Angular library components
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Angular

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}}]}
```

---

---
title: rtk-ai
description: API reference for rtk-ai component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ai

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |
| view     | AIView   | ✅        | \-                    | View type      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-ai></rtk-ai>


```

### With Properties

```

<!-- component.html -->

<rtk-ai

 [meeting]="meeting"

 size="md"

 [view]="aiview">

</rtk-ai>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai/","name":"rtk-ai"}}]}
```

---

---
title: rtk-ai-toggle
description: API reference for rtk-ai-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ai-toggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-ai-toggle></rtk-ai-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-ai-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-ai-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-toggle/","name":"rtk-ai-toggle"}}]}
```

---

---
title: rtk-ai-transcriptions
description: API reference for rtk-ai-transcriptions component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-transcriptions.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ai-transcriptions

## Properties

| Property              | Type           | Required | Default       | Description            |
| --------------------- | -------------- | -------- | ------------- | ---------------------- |
| initialTranscriptions | Transcript\[\] | ✅        | \-            | Initial transcriptions |
| meeting               | Meeting        | ✅        | \-            | Meeting object         |
| t                     | RtkI18n        | ❌        | useLanguage() | Language               |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-ai-transcriptions></rtk-ai-transcriptions>


```

### With Properties

```

<!-- component.html -->

<rtk-ai-transcriptions

 [initialTranscriptions]="[]"

 [meeting]="meeting">

</rtk-ai-transcriptions>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-transcriptions/","name":"rtk-ai-transcriptions"}}]}
```

---

---
title: rtk-audio-grid
description: API reference for rtk-audio-grid component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-audio-grid

## Properties

| Property | Type      | Required | Default         | Description                      |
| -------- | --------- | -------- | --------------- | -------------------------------- |
| config   | UIConfig1 | ✅        | \-              | Config                           |
| hideSelf | boolean   | ✅        | \-              | Whether to hide self in the grid |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon Pack                        |
| meeting  | Meeting   | ✅        | \-              | Meeting                          |
| size     | Size1     | ✅        | \-              | Size                             |
| states   | States1   | ✅        | \-              | States                           |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language                         |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-audio-grid></rtk-audio-grid>


```

### With Properties

```

<!-- component.html -->

<rtk-audio-grid

 [config]="defaultUiConfig"

 [hideSelf]="true"

 [meeting]="meeting">

</rtk-audio-grid>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-grid/","name":"rtk-audio-grid"}}]}
```

---

---
title: rtk-audio-tile
description: API reference for rtk-audio-tile component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-tile.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-audio-tile

## Properties

| Property    | Type      | Required | Default         | Description        |
| ----------- | --------- | -------- | --------------- | ------------------ |
| config      | UIConfig  | ✅        | \-              | Config             |
| iconPack    | IconPack1 | ❌        | defaultIconPack | Icon pack          |
| meeting     | Meeting   | ✅        | \-              | Meeting            |
| participant | Peer      | ✅        | \-              | Participant object |
| size        | Size      | ✅        | \-              | Size               |
| states      | States1   | ✅        | \-              | States             |
| t           | RtkI18n1  | ❌        | useLanguage()   | Language           |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-audio-tile></rtk-audio-tile>


```

### With Properties

```

<!-- component.html -->

<rtk-audio-tile

 [config]="defaultUiConfig"

 [meeting]="meeting"

 [participant]="participant">

</rtk-audio-tile>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-tile/","name":"rtk-audio-tile"}}]}
```

---

---
title: rtk-audio-visualizer
description: API reference for rtk-audio-visualizer component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-visualizer.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-audio-visualizer

An audio visualizer component which visualizes a participants audio. Commonly used inside `rtk-name-tag`.

## Properties

| Property      | Type                   | Required | Default         | Description                                                                                   |
| ------------- | ---------------------- | -------- | --------------- | --------------------------------------------------------------------------------------------- |
| hideMuted     | boolean                | ✅        | \-              | Hide the visualizer if audio is muted                                                         |
| iconPack      | IconPack               | ❌        | defaultIconPack | Icon pack                                                                                     |
| isScreenShare | boolean                | ✅        | \-              | Audio visualizer for screensharing, it will use screenShareTracks.audio instead of audioTrack |
| participant   | Peer                   | ✅        | \-              | Participant object                                                                            |
| size          | Size                   | ✅        | \-              | Size                                                                                          |
| t             | RtkI18n                | ❌        | useLanguage()   | Language                                                                                      |
| variant       | AudioVisualizerVariant | ✅        | \-              | Variant                                                                                       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-audio-visualizer></rtk-audio-visualizer>


```

### With Properties

```

<!-- component.html -->

<rtk-audio-visualizer

 [hideMuted]="true"

 [isScreenShare]="true"

 [participant]="participant">

</rtk-audio-visualizer>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-visualizer/","name":"rtk-audio-visualizer"}}]}
```

---

---
title: rtk-avatar
description: API reference for rtk-avatar component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-avatar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-avatar

Avatar component which renders a participant's image or their initials.

## Properties

| Property    | Type                          | Required                          | Default         | Description |                    |
| ----------- | ----------------------------- | --------------------------------- | --------------- | ----------- | ------------------ |
| iconPack    | IconPack                      | ❌                                 | defaultIconPack | Icon pack   |                    |
| participant | Peer \| WaitlistedParticipant | { name: string; picture: string } | ✅               | \-          | Participant object |
| size        | Size                          | ✅                                 | \-              | Size        |                    |
| t           | RtkI18n                       | ❌                                 | useLanguage()   | Language    |                    |
| variant     | AvatarVariant                 | ✅                                 | \-              | Avatar type |                    |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-avatar></rtk-avatar>


```

### With Properties

```

<!-- component.html -->

<rtk-avatar

 participant="example"

 size="md"

 variant="circular">

</rtk-avatar>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-avatar/","name":"rtk-avatar"}}]}
```

---

---
title: rtk-breakout-room-manager
description: API reference for rtk-breakout-room-manager component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-manager.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-breakout-room-manager

## Properties

| Property              | Type               | Required | Default         | Description                      |
| --------------------- | ------------------ | -------- | --------------- | -------------------------------- |
| allowDelete           | boolean            | ✅        | \-              | allow room delete                |
| assigningParticipants | boolean            | ✅        | \-              | Enable updating participants     |
| defaultExpanded       | boolean            | ✅        | \-              | display expanded card by default |
| iconPack              | IconPack           | ❌        | defaultIconPack | Icon pack                        |
| isDragMode            | boolean            | ✅        | \-              | Drag mode                        |
| meeting               | Meeting            | ✅        | \-              | Meeting object                   |
| mode                  | 'edit' \| 'create' | ✅        | \-              | Mode in which selector is used   |
| room                  | DraftMeeting       | ✅        | \-              | Connected Room Config Object     |
| states                | States             | ✅        | \-              | States object                    |
| t                     | RtkI18n            | ❌        | useLanguage()   | Language                         |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-breakout-room-manager></rtk-breakout-room-manager>


```

### With Properties

```

<!-- component.html -->

<rtk-breakout-room-manager

 [allowDelete]="true"

 [assigningParticipants]="true"

 [defaultExpanded]="true">

</rtk-breakout-room-manager>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-manager/","name":"rtk-breakout-room-manager"}}]}
```

---

---
title: rtk-breakout-room-participants
description: API reference for rtk-breakout-room-participants component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-participants.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-breakout-room-participants

A component which lists all participants, with ability to run privileged actions on each participant according to your permissions.

## Properties

| Property               | Type       | Required | Default         | Description           |
| ---------------------- | ---------- | -------- | --------------- | --------------------- |
| iconPack               | IconPack   | ❌        | defaultIconPack | Icon pack             |
| meeting                | Meeting    | ✅        | \-              | Meeting object        |
| participantIds         | string\[\] | ✅        | \-              | Participant ids       |
| selectedParticipantIds | string\[\] | ✅        | \-              | selected participants |
| t                      | RtkI18n    | ❌        | useLanguage()   | Language              |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-breakout-room-participants></rtk-breakout-room-participants>


```

### With Properties

```

<!-- component.html -->

<rtk-breakout-room-participants

 [meeting]="meeting"

 participantIds="example"

 selectedParticipantIds="example">

</rtk-breakout-room-participants>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-participants/","name":"rtk-breakout-room-participants"}}]}
```

---

---
title: rtk-breakout-rooms-manager
description: API reference for rtk-breakout-rooms-manager component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-manager.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-breakout-rooms-manager

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-breakout-rooms-manager></rtk-breakout-rooms-manager>


```

### With Properties

```

<!-- component.html -->

<rtk-breakout-rooms-manager

 [meeting]="meeting">

</rtk-breakout-rooms-manager>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-manager/","name":"rtk-breakout-rooms-manager"}}]}
```

---

---
title: rtk-breakout-rooms-toggle
description: API reference for rtk-breakout-rooms-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-breakout-rooms-toggle

A button which toggles visibility of breakout rooms. You need to pass the `meeting` object to it.

## Properties

| Property | Type              | Required | Default | Description    |
| -------- | ----------------- | -------- | ------- | -------------- |
| iconPack | IconPack          | ✅        | \-      | Icon pack      |
| meeting  | Meeting           | ✅        | \-      | Meeting object |
| size     | Size              | ✅        | \-      | Size           |
| states   | States            | ✅        | \-      | States object  |
| t        | RtkI18n           | ✅        | \-      | Language       |
| variant  | ControlBarVariant | ✅        | \-      | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-breakout-rooms-toggle></rtk-breakout-rooms-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-breakout-rooms-toggle

 [iconPack]="defaultIconPack"

 [meeting]="meeting"

 size="md">

</rtk-breakout-rooms-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-toggle/","name":"rtk-breakout-rooms-toggle"}}]}
```

---

---
title: rtk-broadcast-message-modal
description: API reference for rtk-broadcast-message-modal component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-broadcast-message-modal.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-broadcast-message-modal

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States1  | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-broadcast-message-modal></rtk-broadcast-message-modal>


```

### With Properties

```

<!-- component.html -->

<rtk-broadcast-message-modal

 [meeting]="meeting">

</rtk-broadcast-message-modal>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-broadcast-message-modal/","name":"rtk-broadcast-message-modal"}}]}
```

---

---
title: rtk-button
description: API reference for rtk-button component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-button

A button that follows RTK Design System.

## Properties

| Property | Type                        | Required | Default | Description                          |
| -------- | --------------------------- | -------- | ------- | ------------------------------------ |
| disabled | boolean                     | ✅        | \-      | Where the button is disabled or not  |
| kind     | ButtonKind                  | ✅        | \-      | Button type                          |
| reverse  | boolean                     | ✅        | \-      | Whether to reverse order of children |
| size     | Size                        | ✅        | \-      | Size                                 |
| type     | HTMLButtonElement\['type'\] | ✅        | \-      | Button type                          |
| variant  | ButtonVariant               | ✅        | \-      | Button variant                       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-button></rtk-button>


```

### With Properties

```

<!-- component.html -->

<rtk-button

 [disabled]="true"

 [kind]="buttonkind"

 [reverse]="true">

</rtk-button>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-button/","name":"rtk-button"}}]}
```

---

---
title: rtk-camera-selector
description: API reference for rtk-camera-selector component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-camera-selector

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type               | Required | Default         | Description    |
| -------- | ------------------ | -------- | --------------- | -------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting            | ✅        | \-              | Meeting object |
| size     | Size               | ✅        | \-              | Size           |
| t        | RtkI18n            | ❌        | useLanguage()   | Language       |
| variant  | 'full' \| 'inline' | ✅        | \-              | variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-camera-selector></rtk-camera-selector>


```

### With Properties

```

<!-- component.html -->

<rtk-camera-selector

 [meeting]="meeting"

 size="md"

 [variant]="'full' | 'inline'">

</rtk-camera-selector>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-selector/","name":"rtk-camera-selector"}}]}
```

---

---
title: rtk-camera-toggle
description: API reference for rtk-camera-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-camera-toggle

A button which toggles your camera.

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-camera-toggle></rtk-camera-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-camera-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-camera-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-toggle/","name":"rtk-camera-toggle"}}]}
```

---

---
title: rtk-caption-toggle
description: API reference for rtk-caption-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-caption-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-caption-toggle

## Properties

| Property | Type              | Required | Default               | Description    |
| -------- | ----------------- | -------- | --------------------- | -------------- |
| config   | UIConfig1         | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack1         | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting           | ✅        | \-                    | Meeting object |
| size     | Size1             | ✅        | \-                    | Size           |
| states   | States1           | ✅        | \-                    | States object  |
| t        | RtkI18n           | ❌        | useLanguage()         | Language       |
| variant  | ControlBarVariant | ✅        | \-                    | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-caption-toggle></rtk-caption-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-caption-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-caption-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-caption-toggle/","name":"rtk-caption-toggle"}}]}
```

---

---
title: rtk-chat
description: API reference for rtk-chat component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat

Fully featured chat component with image & file upload, emoji picker and auto-scroll.

## Properties

| Property  | Type      | Required | Default               | Description    |
| --------- | --------- | -------- | --------------------- | -------------- |
| config    | UIConfig1 | ❌        | createDefaultConfig() | Config         |
| iconPack  | IconPack  | ❌        | defaultIconPack       | Icon pack      |
| meeting   | Meeting   | ✅        | \-                    | Meeting object |
| overrides | Overrides | ❌        | defaultOverrides      | UI Overrides   |
| size      | Size      | ✅        | \-                    | Size           |
| t         | RtkI18n   | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat></rtk-chat>


```

### With Properties

```

<!-- component.html -->

<rtk-chat

 [meeting]="meeting"

 size="md">

</rtk-chat>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat/","name":"rtk-chat"}}]}
```

---

---
title: rtk-chat-composer-ui
description: API reference for rtk-chat-composer-ui component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-ui.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-composer-ui

@deprecated . This component is deprecated, please use rtk-chat-composer-view instead.

## Properties

| Property           | Type                                                                                      | Required | Default         | Description                         |
| ------------------ | ----------------------------------------------------------------------------------------- | -------- | --------------- | ----------------------------------- |
| canSendFiles       | boolean                                                                                   | ✅        | \-              | Whether user can send file messages |
| canSendTextMessage | boolean                                                                                   | ✅        | \-              | Whether user can send text messages |
| iconPack           | IconPack1                                                                                 | ❌        | defaultIconPack | Icon pack                           |
| prefill            | { suggestedReplies?: string\[\]; editMessage?: TextMessage; replyMessage?: TextMessage; } | ❌        | \-              | prefill the composer                |
| size               | Size1                                                                                     | ✅        | \-              | Size                                |
| t                  | RtkI18n                                                                                   | ❌        | useLanguage()   | Language                            |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-composer-ui></rtk-chat-composer-ui>


```

### With Properties

```

<!-- component.html -->

<rtk-chat-composer-ui

 [canSendFiles]="true"

 [canSendTextMessage]="true"

 size="md">

</rtk-chat-composer-ui>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-ui/","name":"rtk-chat-composer-ui"}}]}
```

---

---
title: rtk-chat-composer-view
description: API reference for rtk-chat-composer-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-composer-view

A component which renders a chat composer

## Properties

| Property             | Type                                        | Required | Default         | Description                             |
| -------------------- | ------------------------------------------- | -------- | --------------- | --------------------------------------- |
| canSendFiles         | boolean                                     | ✅        | \-              | Whether user can send file messages     |
| canSendTextMessage   | boolean                                     | ✅        | \-              | Whether user can send text messages     |
| iconPack             | IconPack1                                   | ❌        | defaultIconPack | Icon pack                               |
| inputTextPlaceholder | string                                      | ✅        | \-              | Placeholder for text input              |
| isEditing            | boolean                                     | ✅        | \-              | Sets composer to edit mode              |
| maxLength            | number                                      | ✅        | \-              | Max length for text input               |
| message              | string                                      | ✅        | \-              | Message to be pre-populated             |
| quotedMessage        | string                                      | ✅        | \-              | Quote message to be displayed           |
| rateLimits           | { period: number; maxInvocations: number; } | ✅        | \-              | Rate limits                             |
| storageKey           | string                                      | ✅        | \-              | Key for storing message in localStorage |
| t                    | RtkI18n1                                    | ❌        | useLanguage()   | Language                                |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-composer-view></rtk-chat-composer-view>


```

### With Properties

```

<!-- component.html -->

<rtk-chat-composer-view

 [canSendFiles]="true"

 [canSendTextMessage]="true"

 inputTextPlaceholder="example">

</rtk-chat-composer-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-view/","name":"rtk-chat-composer-view"}}]}
```

---

---
title: rtk-chat-header
description: API reference for rtk-chat-header component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-header.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-header

## Properties

_No properties available._

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-header></rtk-chat-header>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-header/","name":"rtk-chat-header"}}]}
```

---

---
title: rtk-chat-message
description: API reference for rtk-chat-message component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-message

@deprecated `rtk-chat-message` is deprecated and will be removed soon. Use `rtk-message-view` instead.

## Properties

| Property             | Type        | Required | Default         | Description                            |
| -------------------- | ----------- | -------- | --------------- | -------------------------------------- |
| alignRight           | boolean     | ✅        | \-              | aligns message to right                |
| canDelete            | boolean     | ✅        | \-              | can delete message                     |
| canEdit              | boolean     | ✅        | \-              | can edit message                       |
| canPin               | boolean     | ✅        | \-              | can pin this message                   |
| canReply             | boolean     | ✅        | \-              | can quote reply this message           |
| child                | HTMLElement | ✅        | \-              | Child                                  |
| disableControls      | boolean     | ✅        | \-              | disables controls                      |
| hideAvatar           | boolean     | ✅        | \-              | hides avatar                           |
| iconPack             | IconPack1   | ❌        | defaultIconPack | Icon pack                              |
| isContinued          | boolean     | ✅        | \-              | is continued                           |
| isSelf               | boolean     | ✅        | \-              | if sender is self                      |
| isUnread             | boolean     | ✅        | \-              | is unread                              |
| leftAlign            | boolean     | ✅        | \-              | Whether to left align the chat bubbles |
| message              | Message     | ✅        | \-              | message item                           |
| senderDisplayPicture | string      | ✅        | \-              | sender display picture url             |
| size                 | Size        | ✅        | \-              | Size                                   |
| t                    | RtkI18n1    | ❌        | useLanguage()   | Language                               |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-message></rtk-chat-message>


```

### With Properties

```

<!-- component.html -->

<rtk-chat-message

 [alignRight]="true"

 [canDelete]="true"

 [canEdit]="true">

</rtk-chat-message>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-message/","name":"rtk-chat-message"}}]}
```

---

---
title: rtk-chat-messages-ui
description: API reference for rtk-chat-messages-ui component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-messages-ui

@deprecated Use `rtk-chat-messages-ui-paginated` instead.

## Properties

| Property       | Type      | Required | Default         | Description                         |
| -------------- | --------- | -------- | --------------- | ----------------------------------- |
| canPinMessages | boolean   | ✅        | \-              | Can current user pin/unpin messages |
| iconPack       | IconPack1 | ❌        | defaultIconPack | Icon pack                           |
| messages       | Chat\[\]  | ✅        | \-              | Chat Messages                       |
| selectedGroup  | string    | ✅        | \-              | Selected group key                  |
| selfUserId     | string    | ✅        | \-              | User ID of self user                |
| size           | Size1     | ✅        | \-              | Size                                |
| t              | RtkI18n   | ❌        | useLanguage()   | Language                            |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-messages-ui></rtk-chat-messages-ui>


```

### With Properties

```

<!-- component.html -->

<rtk-chat-messages-ui

 [canPinMessages]="true"

 [messages]="[]"

 selectedGroup="example">

</rtk-chat-messages-ui>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui/","name":"rtk-chat-messages-ui"}}]}
```

---

---
title: rtk-chat-messages-ui-paginated
description: API reference for rtk-chat-messages-ui-paginated component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui-paginated.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-messages-ui-paginated

## Properties

| Property             | Type                | Required | Default         | Description                                                                                      |
| -------------------- | ------------------- | -------- | --------------- | ------------------------------------------------------------------------------------------------ |
| iconPack             | IconPack            | ❌        | defaultIconPack | Icon pack                                                                                        |
| meeting              | Meeting             | ✅        | \-              | Meeting object                                                                                   |
| privateChatRecipient | Participant \| null | ✅        | \-              | Selected recipient for private chat; when unset, messages are loaded for public chat (Everyone). |
| size                 | Size                | ✅        | \-              | Size                                                                                             |
| t                    | RtkI18n             | ❌        | useLanguage()   | Language                                                                                         |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-messages-ui-paginated></rtk-chat-messages-ui-paginated>


```

### With Properties

```

<!-- component.html -->

<rtk-chat-messages-ui-paginated

 [meeting]="meeting"

 [privateChatRecipient]="participant | null"

 size="md">

</rtk-chat-messages-ui-paginated>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui-paginated/","name":"rtk-chat-messages-ui-paginated"}}]}
```

---

---
title: rtk-chat-search-results
description: API reference for rtk-chat-search-results component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-search-results.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-search-results

@deprecated `rtk-chat-search-results` is deprecated and will be removed soon. Use `rtk-chat-messages-ui-paginated` instead. -

## Properties

| Property  | Type      | Required | Default         | Description    |
| --------- | --------- | -------- | --------------- | -------------- |
| channelId | string    | ✅        | \-              | Channel id     |
| iconPack  | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting   | Meeting   | ✅        | \-              | Meeting object |
| query     | string    | ✅        | \-              | Search query   |
| t         | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-search-results></rtk-chat-search-results>


```

### With Properties

```

<!-- component.html -->

<rtk-chat-search-results

 channelId="example"

 [meeting]="meeting"

 query="example">

</rtk-chat-search-results>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-search-results/","name":"rtk-chat-search-results"}}]}
```

---

---
title: rtk-chat-selector
description: API reference for rtk-chat-selector component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-selector

## Properties

| Property  | Type       | Required | Default               | Description    |
| --------- | ---------- | -------- | --------------------- | -------------- |
| config    | UIConfig1  | ❌        | createDefaultConfig() | Config         |
| iconPack  | IconPack   | ❌        | defaultIconPack       | Icon pack      |
| meeting   | Meeting    | ✅        | \-                    | Meeting object |
| overrides | Overrides1 | ❌        | defaultOverrides      | UI Overrides   |
| size      | Size       | ✅        | \-                    | Size           |
| states    | States1    | ✅        | \-                    | States object  |
| t         | RtkI18n    | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-selector></rtk-chat-selector>


```

### With Properties

```

<!-- component.html -->

<rtk-chat-selector

 [meeting]="meeting"

 size="md">

</rtk-chat-selector>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector/","name":"rtk-chat-selector"}}]}
```

---

---
title: rtk-chat-selector-ui
description: API reference for rtk-chat-selector-ui component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector-ui.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-selector-ui

## Properties

| Property        | Type                   | Required | Default         | Description          |
| --------------- | ---------------------- | -------- | --------------- | -------------------- |
| groups          | ChatGroup\[\]          | ✅        | \-              | Participants         |
| iconPack        | IconPack1              | ❌        | defaultIconPack | Icon pack            |
| selectedGroupId | string                 | ✅        | \-              | Selected participant |
| selfUserId      | string                 | ✅        | \-              | Self User ID         |
| t               | RtkI18n                | ❌        | useLanguage()   | Language             |
| unreadCounts    | Record<string, number> | ✅        | \-              | Unread counts        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-selector-ui></rtk-chat-selector-ui>


```

### With Properties

```

<!-- component.html -->

<rtk-chat-selector-ui

 [groups]="[]"

 selectedGroupId="example"

 selfUserId="example">

</rtk-chat-selector-ui>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector-ui/","name":"rtk-chat-selector-ui"}}]}
```

---

---
title: rtk-chat-toggle
description: API reference for rtk-chat-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-toggle

A button which toggles visibility of chat. You need to pass the `meeting` object to it to see the unread messages count badge. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'chat' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-chat-toggle></rtk-chat-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-chat-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-chat-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-toggle/","name":"rtk-chat-toggle"}}]}
```

---

---
title: rtk-clock
description: API reference for rtk-clock component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-clock.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-clock

Shows the time elapsed in a meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-clock></rtk-clock>


```

### With Properties

```

<!-- component.html -->

<rtk-clock

 [meeting]="meeting"

 size="md">

</rtk-clock>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-clock/","name":"rtk-clock"}}]}
```

---

---
title: rtk-confirmation-modal
description: API reference for rtk-confirmation-modal component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-confirmation-modal.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-confirmation-modal

A confirmation modal.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-confirmation-modal></rtk-confirmation-modal>


```

### With Properties

```

<!-- component.html -->

<rtk-confirmation-modal

 [meeting]="meeting">

</rtk-confirmation-modal>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-confirmation-modal/","name":"rtk-confirmation-modal"}}]}
```

---

---
title: rtk-controlbar
description: API reference for rtk-controlbar component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-controlbar

Controlbar component provides you with various designs as variants.

## Properties

| Property      | Type               | Required | Default               | Description                      |
| ------------- | ------------------ | -------- | --------------------- | -------------------------------- |
| config        | UIConfig1          | ❌        | createDefaultConfig() | Config                           |
| disableRender | boolean            | ✅        | \-                    | Whether to render the default UI |
| iconPack      | IconPack1          | ❌        | defaultIconPack       | Icon Pack                        |
| meeting       | Meeting            | ✅        | \-                    | Meeting                          |
| size          | Size               | ✅        | \-                    | Size                             |
| states        | States             | ✅        | \-                    | States                           |
| t             | RtkI18n            | ❌        | useLanguage()         | Language                         |
| variant       | 'solid' \| 'boxed' | ✅        | \-                    | Variant                          |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-controlbar></rtk-controlbar>


```

### With Properties

```

<!-- component.html -->

<rtk-controlbar

 [disableRender]="true"

 [meeting]="meeting"

 size="md">

</rtk-controlbar>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar/","name":"rtk-controlbar"}}]}
```

---

---
title: rtk-controlbar-button
description: API reference for rtk-controlbar-button component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-controlbar-button

A skeleton component used for composing custom controlbar buttons.

## Properties

| Property    | Type               | Required | Default         | Description                                                    |
| ----------- | ------------------ | -------- | --------------- | -------------------------------------------------------------- |
| brandIcon   | boolean            | ✅        | \-              | Whether icon requires brand color                              |
| disabled    | boolean            | ✅        | \-              | Whether button is disabled                                     |
| icon        | string             | ✅        | \-              | Icon                                                           |
| iconPack    | IconPack           | ❌        | defaultIconPack | Icon pack                                                      |
| isLoading   | boolean            | ✅        | \-              | Loading state Ignores current icon and shows a spinner if true |
| label       | string             | ✅        | \-              | Label of button                                                |
| showWarning | boolean            | ✅        | \-              | Whether to show warning icon                                   |
| size        | Size               | ✅        | \-              | Size                                                           |
| variant     | ControlBarVariant1 | ✅        | \-              | Variant                                                        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-controlbar-button></rtk-controlbar-button>


```

### With Properties

```

<!-- component.html -->

<rtk-controlbar-button

 [brandIcon]="true"

 [disabled]="true"

 icon="example">

</rtk-controlbar-button>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar-button/","name":"rtk-controlbar-button"}}]}
```

---

---
title: rtk-counter
description: API reference for rtk-counter component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-counter.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-counter

A number picker with increment and decrement buttons.

## Properties

| Property | Type      | Required | Default         | Description   |
| -------- | --------- | -------- | --------------- | ------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack     |
| minValue | number    | ✅        | \-              | Minimum value |
| size     | Size1     | ✅        | \-              | Size          |
| t        | RtkI18n   | ❌        | useLanguage()   | Language      |
| value    | number    | ✅        | \-              | Initial value |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-counter></rtk-counter>


```

### With Properties

```

<!-- component.html -->

<rtk-counter

 minValue="42"

 size="md"

 value="42">

</rtk-counter>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-counter/","name":"rtk-counter"}}]}
```

---

---
title: rtk-debugger
description: API reference for rtk-debugger component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger

A troubleshooting component to identify and fix any issues in the meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-debugger></rtk-debugger>


```

### With Properties

```

<!-- component.html -->

<rtk-debugger

 [meeting]="meeting"

 size="md">

</rtk-debugger>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger/","name":"rtk-debugger"}}]}
```

---

---
title: rtk-debugger-audio
description: API reference for rtk-debugger-audio component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-audio.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-audio

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-debugger-audio></rtk-debugger-audio>


```

### With Properties

```

<!-- component.html -->

<rtk-debugger-audio

 [meeting]="meeting"

 size="md">

</rtk-debugger-audio>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-audio/","name":"rtk-debugger-audio"}}]}
```

---

---
title: rtk-debugger-screenshare
description: API reference for rtk-debugger-screenshare component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-screenshare.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-screenshare

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-debugger-screenshare></rtk-debugger-screenshare>


```

### With Properties

```

<!-- component.html -->

<rtk-debugger-screenshare

 [meeting]="meeting"

 size="md">

</rtk-debugger-screenshare>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-screenshare/","name":"rtk-debugger-screenshare"}}]}
```

---

---
title: rtk-debugger-system
description: API reference for rtk-debugger-system component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-system.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-system

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-debugger-system></rtk-debugger-system>


```

### With Properties

```

<!-- component.html -->

<rtk-debugger-system

 [meeting]="meeting"

 size="md">

</rtk-debugger-system>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-system/","name":"rtk-debugger-system"}}]}
```

---

---
title: rtk-debugger-toggle
description: API reference for rtk-debugger-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-toggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-debugger-toggle></rtk-debugger-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-debugger-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-debugger-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-toggle/","name":"rtk-debugger-toggle"}}]}
```

---

---
title: rtk-debugger-video
description: API reference for rtk-debugger-video component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-video.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-video

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-debugger-video></rtk-debugger-video>


```

### With Properties

```

<!-- component.html -->

<rtk-debugger-video

 [meeting]="meeting"

 size="md">

</rtk-debugger-video>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-video/","name":"rtk-debugger-video"}}]}
```

---

---
title: rtk-dialog
description: API reference for rtk-dialog component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-dialog

A dialog component.

## Properties

| Property         | Type     | Required | Default               | Description                            |
| ---------------- | -------- | -------- | --------------------- | -------------------------------------- |
| config           | UIConfig | ❌        | createDefaultConfig() | UI Config                              |
| disableEscapeKey | boolean  | ✅        | \-                    | Whether Escape key can close the modal |
| hideCloseButton  | boolean  | ✅        | \-                    | Whether to show the close button       |
| iconPack         | IconPack | ❌        | defaultIconPack       | Icon pack                              |
| meeting          | Meeting  | ✅        | \-                    | Meeting object                         |
| open             | boolean  | ✅        | \-                    | Whether a dialog is open or not        |
| size             | Size     | ✅        | \-                    | Size                                   |
| states           | States   | ✅        | \-                    | States object                          |
| t                | RtkI18n  | ❌        | useLanguage()         | Language                               |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-dialog></rtk-dialog>


```

### With Properties

```

<!-- component.html -->

<rtk-dialog

 [disableEscapeKey]="true"

 [hideCloseButton]="true"

 [meeting]="meeting">

</rtk-dialog>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog/","name":"rtk-dialog"}}]}
```

---

---
title: rtk-dialog-manager
description: API reference for rtk-dialog-manager component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog-manager.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-dialog-manager

A component which handles all dialog elements in a component such as:

* rtk-settings
* rtk-leave-meeting
* rtk-permissions-message
* rtk-image-viewer
* rtk-breakout-rooms-manager This components depends on the values from `states` object.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | UI Config      |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-dialog-manager></rtk-dialog-manager>


```

### With Properties

```

<!-- component.html -->

<rtk-dialog-manager

 [meeting]="meeting"

 size="md">

</rtk-dialog-manager>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog-manager/","name":"rtk-dialog-manager"}}]}
```

---

---
title: rtk-draft-attachment-view
description: API reference for rtk-draft-attachment-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-draft-attachment-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-draft-attachment-view

A component which renders the draft attachment to send

## Properties

| Property   | Type                                     | Required | Default         | Description           |
| ---------- | ---------------------------------------- | -------- | --------------- | --------------------- |
| attachment | { type: 'image' \| 'file'; file: File; } | ✅        | \-              | Attachment to display |
| iconPack   | IconPack1                                | ❌        | defaultIconPack | Icon pack             |
| t          | RtkI18n1                                 | ❌        | useLanguage()   | Language              |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-draft-attachment-view></rtk-draft-attachment-view>


```

### With Properties

```

<!-- component.html -->

<rtk-draft-attachment-view

 [attachment=]"{}">

</rtk-draft-attachment-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-draft-attachment-view/","name":"rtk-draft-attachment-view"}}]}
```

---

---
title: rtk-emoji-picker
description: API reference for rtk-emoji-picker component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-emoji-picker

A very simple emoji picker component.

## Properties

| Property        | Type     | Required | Default         | Description                               |
| --------------- | -------- | -------- | --------------- | ----------------------------------------- |
| focusWhenOpened | boolean  | ✅        | \-              | Controls whether or not to focus on mount |
| iconPack        | IconPack | ❌        | defaultIconPack | Icon pack                                 |
| t               | RtkI18n  | ❌        | useLanguage()   | Language                                  |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-emoji-picker></rtk-emoji-picker>


```

### With Properties

```

<!-- component.html -->

<rtk-emoji-picker

 [focusWhenOpened]="true">

</rtk-emoji-picker>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker/","name":"rtk-emoji-picker"}}]}
```

---

---
title: rtk-emoji-picker-button
description: API reference for rtk-emoji-picker-button component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-emoji-picker-button

## Properties

| Property | Type      | Required | Default         | Description            |
| -------- | --------- | -------- | --------------- | ---------------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack              |
| isActive | boolean   | ✅        | \-              | Active state indicator |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language               |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-emoji-picker-button></rtk-emoji-picker-button>


```

### With Properties

```

<!-- component.html -->

<rtk-emoji-picker-button

 [isActive]="true">

</rtk-emoji-picker-button>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker-button/","name":"rtk-emoji-picker-button"}}]}
```

---

---
title: rtk-ended-screen
description: API reference for rtk-ended-screen component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ended-screen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ended-screen

A screen which shows a meeting has ended.

## Properties

| Property | Type     | Required | Default               | Description   |
| -------- | -------- | -------- | --------------------- | ------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack     |
| meeting  | Meeting  | ✅        | \-                    | Global states |
| size     | Size     | ✅        | \-                    | Size          |
| states   | States   | ✅        | \-                    | Global states |
| t        | RtkI18n  | ❌        | useLanguage()         | Language      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-ended-screen></rtk-ended-screen>


```

### With Properties

```

<!-- component.html -->

<rtk-ended-screen

 [meeting]="meeting"

 size="md">

</rtk-ended-screen>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ended-screen/","name":"rtk-ended-screen"}}]}
```

---

---
title: rtk-file-dropzone
description: API reference for rtk-file-dropzone component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-dropzone.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-file-dropzone

## Properties

| Property | Type        | Required | Default         | Description                                 |
| -------- | ----------- | -------- | --------------- | ------------------------------------------- |
| hostEl   | HTMLElement | ✅        | \-              | Host element on which drop events to attach |
| iconPack | IconPack1   | ❌        | defaultIconPack | Icon pack                                   |
| t        | RtkI18n1    | ❌        | useLanguage()   | Language                                    |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-file-dropzone></rtk-file-dropzone>


```

### With Properties

```

<!-- component.html -->

<rtk-file-dropzone

 [hostEl]="htmlelement">

</rtk-file-dropzone>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-dropzone/","name":"rtk-file-dropzone"}}]}
```

---

---
title: rtk-file-message
description: API reference for rtk-file-message component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-file-message

@deprecated `rtk-file-message` is deprecated and will be removed soon. Use `rtk-file-message-view` instead. A component which renders a file message from chat.

## Properties

| Property    | Type        | Required | Default         | Description                                             |
| ----------- | ----------- | -------- | --------------- | ------------------------------------------------------- |
| iconPack    | IconPack    | ❌        | defaultIconPack | Icon pack                                               |
| isContinued | boolean     | ✅        | \-              | Whether the message is continued by same user           |
| message     | FileMessage | ✅        | \-              | Text message object                                     |
| now         | Date        | ✅        | \-              | Date object of now, to calculate distance between dates |
| showBubble  | boolean     | ✅        | \-              | show message in bubble                                  |
| t           | RtkI18n     | ❌        | useLanguage()   | Language                                                |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-file-message></rtk-file-message>


```

### With Properties

```

<!-- component.html -->

<rtk-file-message

 [isContinued]="true"

 [message]="filemessage"

 [now]="date">

</rtk-file-message>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message/","name":"rtk-file-message"}}]}
```

---

---
title: rtk-file-message-view
description: API reference for rtk-file-message-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-file-message-view

A component which renders a file message.

## Properties

| Property | Type      | Required | Default         | Description      |
| -------- | --------- | -------- | --------------- | ---------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack        |
| name     | string    | ✅        | \-              | Name of the file |
| size     | number    | ✅        | \-              | Size of the file |
| url      | string    | ✅        | \-              | Url of the file  |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-file-message-view></rtk-file-message-view>


```

### With Properties

```

<!-- component.html -->

<rtk-file-message-view

 name="example"

 size="42"

 url="example">

</rtk-file-message-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message-view/","name":"rtk-file-message-view"}}]}
```

---

---
title: rtk-file-picker-button
description: API reference for rtk-file-picker-button component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-picker-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-file-picker-button

## Properties

| Property | Type            | Required | Default         | Description                               |
| -------- | --------------- | -------- | --------------- | ----------------------------------------- |
| filter   | string          | ✅        | \-              | File type filter to open file picker with |
| icon     | keyof IconPack1 | ✅        | \-              | Icon                                      |
| iconPack | IconPack1       | ❌        | defaultIconPack | Icon pack                                 |
| label    | string          | ✅        | \-              | Label for tooltip                         |
| t        | RtkI18n1        | ❌        | useLanguage()   | Language                                  |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-file-picker-button></rtk-file-picker-button>


```

### With Properties

```

<!-- component.html -->

<rtk-file-picker-button

 filter="example"

 [icon]="defaultIconPack"

 label="example">

</rtk-file-picker-button>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-picker-button/","name":"rtk-file-picker-button"}}]}
```

---

---
title: rtk-fullscreen-toggle
description: API reference for rtk-fullscreen-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-fullscreen-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-fullscreen-toggle

A button which toggles full screen mode for any existing `rtk-meeting` component in the DOM.

## Properties

| Property      | Type              | Required | Default         | Description                  |
| ------------- | ----------------- | -------- | --------------- | ---------------------------- |
| iconPack      | IconPack          | ❌        | defaultIconPack | Icon pack                    |
| size          | Size              | ✅        | \-              | Size                         |
| states        | States            | ✅        | \-              | States object                |
| t             | RtkI18n           | ❌        | useLanguage()   | Language                     |
| targetElement | HTMLElement       | ✅        | \-              | Target Element to fullscreen |
| variant       | ControlBarVariant | ✅        | \-              | Variant                      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-fullscreen-toggle></rtk-fullscreen-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-fullscreen-toggle

 size="md"

 [targetElement]="htmlelement"

 variant="button">

</rtk-fullscreen-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-fullscreen-toggle/","name":"rtk-fullscreen-toggle"}}]}
```

---

---
title: rtk-grid
description: API reference for rtk-grid component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-grid

The main grid component which abstracts all the grid handling logic and renders it for you.

## Properties

| Property    | Type       | Required | Default               | Description                          |
| ----------- | ---------- | -------- | --------------------- | ------------------------------------ |
| aspectRatio | string     | ✅        | \-                    | The aspect ratio of each participant |
| config      | UIConfig   | ❌        | createDefaultConfig() | Config object                        |
| gap         | number     | ✅        | \-                    | Gap between participants             |
| gridSize    | GridSize   | ✅        | \-                    | Grid size                            |
| iconPack    | IconPack   | ❌        | defaultIconPack       | Icon pack                            |
| layout      | GridLayout | ✅        | \-                    | Grid Layout                          |
| meeting     | Meeting    | ✅        | \-                    | Meeting object                       |
| overrides   | any        | ✅        | \-                    | @deprecated                          |
| size        | Size       | ✅        | \-                    | Size                                 |
| states      | States     | ✅        | \-                    | States                               |
| t           | RtkI18n    | ❌        | useLanguage()         | Language                             |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-grid></rtk-grid>


```

### With Properties

```

<!-- component.html -->

<rtk-grid

 aspectRatio="example"

 gap="42"

 gridSize="md">

</rtk-grid>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid/","name":"rtk-grid"}}]}
```

---

---
title: rtk-grid-pagination
description: API reference for rtk-grid-pagination component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid-pagination.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-grid-pagination

A component which allows you to change current page and view mode of active participants list. This is reflected in the `rtk-grid` component.

## Properties

| Property | Type                   | Required | Default         | Description    |
| -------- | ---------------------- | -------- | --------------- | -------------- |
| iconPack | IconPack               | ❌        | defaultIconPack | Icon Pack      |
| meeting  | Meeting                | ✅        | \-              | Meeting object |
| size     | Size                   | ✅        | \-              | Size Prop      |
| states   | States                 | ✅        | \-              | States         |
| t        | RtkI18n                | ❌        | useLanguage()   | Language       |
| variant  | GridPaginationVariants | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-grid-pagination></rtk-grid-pagination>


```

### With Properties

```

<!-- component.html -->

<rtk-grid-pagination

 [meeting]="meeting"

 size="md"

 [variant]="gridpaginationvariants">

</rtk-grid-pagination>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid-pagination/","name":"rtk-grid-pagination"}}]}
```

---

---
title: rtk-header
description: API reference for rtk-header component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-header.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-header

A component that houses all the header components.

## Properties

| Property      | Type               | Required | Default               | Description                      |
| ------------- | ------------------ | -------- | --------------------- | -------------------------------- |
| config        | UIConfig1          | ❌        | createDefaultConfig() | Config                           |
| disableRender | boolean            | ✅        | \-                    | Whether to render the default UI |
| iconPack      | IconPack1          | ❌        | defaultIconPack       | Icon Pack                        |
| meeting       | Meeting            | ✅        | \-                    | Meeting                          |
| size          | Size               | ✅        | \-                    | Size                             |
| states        | States             | ✅        | \-                    | States                           |
| t             | RtkI18n            | ❌        | useLanguage()         | Language                         |
| variant       | 'solid' \| 'boxed' | ✅        | \-                    | Variant                          |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-header></rtk-header>


```

### With Properties

```

<!-- component.html -->

<rtk-header

 [disableRender]="true"

 [meeting]="meeting"

 size="md">

</rtk-header>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-header/","name":"rtk-header"}}]}
```

---

---
title: rtk-icon
description: API reference for rtk-icon component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-icon.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-icon

An icon component which accepts an svg string and renders it.

## Properties

| Property | Type        | Required | Default | Description  |
| -------- | ----------- | -------- | ------- | ------------ |
| icon     | string      | ✅        | \-      | Icon         |
| size     | Size1       | ✅        | \-      | Size         |
| variant  | IconVariant | ✅        | \-      | Icon variant |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-icon></rtk-icon>


```

### With Properties

```

<!-- component.html -->

<rtk-icon

 icon="example"

 size="md"

 variant="primary">

</rtk-icon>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-icon/","name":"rtk-icon"}}]}
```

---

---
title: rtk-idle-screen
description: API reference for rtk-idle-screen component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-idle-screen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-idle-screen

A screen that handles the idle state, i.e; when you are waiting for data about the meeting, specifically the `meeting` object.

## Properties

| Property | Type     | Required | Default               | Description   |
| -------- | -------- | -------- | --------------------- | ------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack     |
| meeting  | Meeting  | ✅        | \-                    | Meeting       |
| t        | RtkI18n  | ❌        | useLanguage()         | Language      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-idle-screen></rtk-idle-screen>


```

### With Properties

```

<!-- component.html -->

<rtk-idle-screen

 [meeting]="meeting">

</rtk-idle-screen>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-idle-screen/","name":"rtk-idle-screen"}}]}
```

---

---
title: rtk-image-message
description: API reference for rtk-image-message component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-image-message

@deprecated `rtk-image-message` is deprecated and will be removed soon. Use `rtk-image-message-view` instead. A component which renders an image message from chat.

## Properties

| Property    | Type         | Required | Default         | Description                                             |
| ----------- | ------------ | -------- | --------------- | ------------------------------------------------------- |
| iconPack    | IconPack     | ❌        | defaultIconPack | Icon pack                                               |
| isContinued | boolean      | ✅        | \-              | Whether the message is continued by same user           |
| message     | ImageMessage | ✅        | \-              | Text message object                                     |
| now         | Date         | ✅        | \-              | Date object of now, to calculate distance between dates |
| showBubble  | boolean      | ✅        | \-              | show message in bubble                                  |
| t           | RtkI18n      | ❌        | useLanguage()   | Language                                                |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-image-message></rtk-image-message>


```

### With Properties

```

<!-- component.html -->

<rtk-image-message

 [isContinued]="true"

 [message]="imagemessage"

 [now]="date">

</rtk-image-message>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message/","name":"rtk-image-message"}}]}
```

---

---
title: rtk-image-message-view
description: API reference for rtk-image-message-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-image-message-view

A component which renders an image message.

## Properties

| Property | Type      | Required | Default         | Description      |
| -------- | --------- | -------- | --------------- | ---------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack        |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language         |
| url      | string    | ✅        | \-              | Url of the image |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-image-message-view></rtk-image-message-view>


```

### With Properties

```

<!-- component.html -->

<rtk-image-message-view

 url="example">

</rtk-image-message-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message-view/","name":"rtk-image-message-view"}}]}
```

---

---
title: rtk-image-viewer
description: API reference for rtk-image-viewer component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-viewer.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-image-viewer

A component which shows an image sent via chat.

## Properties

| Property | Type         | Required | Default         | Description   |
| -------- | ------------ | -------- | --------------- | ------------- |
| iconPack | IconPack     | ❌        | defaultIconPack | Icon pack     |
| image    | ImageMessage | ✅        | \-              | Image message |
| size     | Size         | ✅        | \-              | Size          |
| t        | RtkI18n      | ❌        | useLanguage()   | Language      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-image-viewer></rtk-image-viewer>


```

### With Properties

```

<!-- component.html -->

<rtk-image-viewer

 [image]="imagemessage"

 size="md">

</rtk-image-viewer>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-viewer/","name":"rtk-image-viewer"}}]}
```

---

---
title: rtk-information-tooltip
description: API reference for rtk-information-tooltip component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-information-tooltip.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-information-tooltip

## Properties

| Property | Type      | Required | Default         | Description |
| -------- | --------- | -------- | --------------- | ----------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack   |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-information-tooltip></rtk-information-tooltip>


```

### With Properties

```

<!-- component.html -->

<rtk-information-tooltip

 [iconPack]="defaultIconPack">

</rtk-information-tooltip>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-information-tooltip/","name":"rtk-information-tooltip"}}]}
```

---

---
title: rtk-join-stage
description: API reference for rtk-join-stage component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-join-stage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-join-stage

## Properties

| Property   | Type            | Required | Default               | Description    |
| ---------- | --------------- | -------- | --------------------- | -------------- |
| config     | UIConfig        | ❌        | createDefaultConfig() | UI Config      |
| dataConfig | ModalDataConfig | ✅        | \-                    | Content Config |
| iconPack   | IconPack        | ❌        | defaultIconPack       | Icon pack      |
| meeting    | Meeting         | ✅        | \-                    | Meeting object |
| size       | Size            | ✅        | \-                    | Size           |
| states     | States          | ✅        | \-                    | States object  |
| t          | RtkI18n         | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-join-stage></rtk-join-stage>


```

### With Properties

```

<!-- component.html -->

<rtk-join-stage

 [dataConfig]="modaldataconfig"

 [meeting]="meeting"

 size="md">

</rtk-join-stage>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-join-stage/","name":"rtk-join-stage"}}]}
```

---

---
title: rtk-leave-button
description: API reference for rtk-leave-button component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-leave-button

A button which toggles visilibility of the leave confirmation dialog.

## Properties

| Property | Type              | Required | Default         | Description |
| -------- | ----------------- | -------- | --------------- | ----------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack   |
| size     | Size              | ✅        | \-              | Size        |
| t        | RtkI18n           | ❌        | useLanguage()   | Language    |
| variant  | ControlBarVariant | ✅        | \-              | Variant     |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-leave-button></rtk-leave-button>


```

### With Properties

```

<!-- component.html -->

<rtk-leave-button

 size="md"

 variant="button">

</rtk-leave-button>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-button/","name":"rtk-leave-button"}}]}
```

---

---
title: rtk-leave-meeting
description: API reference for rtk-leave-meeting component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-meeting.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-leave-meeting

A component which allows you to leave a meeting or end meeting for all, if you have the permission.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-leave-meeting></rtk-leave-meeting>


```

### With Properties

```

<!-- component.html -->

<rtk-leave-meeting

 [meeting]="meeting">

</rtk-leave-meeting>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-meeting/","name":"rtk-leave-meeting"}}]}
```

---

---
title: rtk-livestream-indicator
description: API reference for rtk-livestream-indicator component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-indicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-livestream-indicator

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-livestream-indicator></rtk-livestream-indicator>


```

### With Properties

```

<!-- component.html -->

<rtk-livestream-indicator

 [meeting]="meeting"

 size="md">

</rtk-livestream-indicator>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-indicator/","name":"rtk-livestream-indicator"}}]}
```

---

---
title: rtk-livestream-player
description: API reference for rtk-livestream-player component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-player.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-livestream-player

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-livestream-player></rtk-livestream-player>


```

### With Properties

```

<!-- component.html -->

<rtk-livestream-player

 [meeting]="meeting"

 size="md">

</rtk-livestream-player>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-player/","name":"rtk-livestream-player"}}]}
```

---

---
title: rtk-livestream-toggle
description: API reference for rtk-livestream-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-livestream-toggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size1             | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-livestream-toggle></rtk-livestream-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-livestream-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-livestream-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-toggle/","name":"rtk-livestream-toggle"}}]}
```

---

---
title: rtk-logo
description: API reference for rtk-logo component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-logo.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-logo

A component which loads the logo from your config, or via the `logo-url` attribute.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| logoUrl  | string   | ✅        | \-                    | Logo URL       |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-logo></rtk-logo>


```

### With Properties

```

<!-- component.html -->

<rtk-logo

 logoUrl="example"

 [meeting]="meeting">

</rtk-logo>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-logo/","name":"rtk-logo"}}]}
```

---

---
title: rtk-markdown-view
description: API reference for rtk-markdown-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-markdown-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-markdown-view

## Properties

| Property  | Type   | Required | Default | Description                              |
| --------- | ------ | -------- | ------- | ---------------------------------------- |
| maxLength | number | ✅        | \-      | max length of text to render as markdown |
| text      | string | ✅        | \-      | raw text to render as markdown           |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-markdown-view></rtk-markdown-view>


```

### With Properties

```

<!-- component.html -->

<rtk-markdown-view

 maxLength="42"

 text="example">

</rtk-markdown-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-markdown-view/","name":"rtk-markdown-view"}}]}
```

---

---
title: rtk-meeting
description: API reference for rtk-meeting component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-meeting

A single component which renders an entire meeting UI. It loads your preset and renders the UI based on it. With this component, you don't have to handle all the states, dialogs and other smaller bits of managing the application.

## Properties

| Property             | Type        | Required | Default          | Description                                                         |
| -------------------- | ----------- | -------- | ---------------- | ------------------------------------------------------------------- |
| applyDesignSystem    | boolean     | ✅        | \-               | Whether to apply the design system on the document root from config |
| config               | UIConfig    | ✅        | \-               | UI Config                                                           |
| gridLayout           | GridLayout1 | ✅        | \-               | Grid layout                                                         |
| iconPack             | IconPack    | ❌        | defaultIconPack  | Icon pack                                                           |
| leaveOnUnmount       | boolean     | ✅        | \-               | Whether participant should leave when this component gets unmounted |
| loadConfigFromPreset | boolean     | ✅        | \-               | Whether to load config from preset                                  |
| meeting              | Meeting     | ✅        | \-               | Meeting object                                                      |
| mode                 | MeetingMode | ✅        | \-               | Fill type                                                           |
| overrides            | Overrides   | ❌        | defaultOverrides | UI Kit Overrides                                                    |
| showSetupScreen      | boolean     | ✅        | \-               | Whether to show setup screen or not                                 |
| size                 | Size        | ✅        | \-               | Size                                                                |
| t                    | RtkI18n     | ❌        | useLanguage()    | Language                                                            |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-meeting></rtk-meeting>


```

### With Properties

```

<!-- component.html -->

<rtk-meeting

 [applyDesignSystem]="true"

 [config]="defaultUiConfig"

 [gridLayout]="gridlayout1">

</rtk-meeting>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting/","name":"rtk-meeting"}}]}
```

---

---
title: rtk-meeting-title
description: API reference for rtk-meeting-title component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting-title.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-meeting-title

Displays the title of the meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-meeting-title></rtk-meeting-title>


```

### With Properties

```

<!-- component.html -->

<rtk-meeting-title

 [meeting]="meeting">

</rtk-meeting-title>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting-title/","name":"rtk-meeting-title"}}]}
```

---

---
title: rtk-menu
description: API reference for rtk-menu component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-menu

A menu component.

## Properties

| Property  | Type      | Required | Default         | Description       |
| --------- | --------- | -------- | --------------- | ----------------- |
| iconPack  | IconPack  | ❌        | defaultIconPack | Icon pack         |
| offset    | number    | ✅        | \-              | Offset in px      |
| placement | Placement | ✅        | \-              | Placement of menu |
| size      | Size      | ✅        | \-              | Size              |
| t         | RtkI18n   | ❌        | useLanguage()   | Language          |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-menu></rtk-menu>


```

### With Properties

```

<!-- component.html -->

<rtk-menu

 offset="42"

 [placement]="placement"

 size="md">

</rtk-menu>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu/","name":"rtk-menu"}}]}
```

---

---
title: rtk-menu-item
description: API reference for rtk-menu-item component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-item.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-menu-item

A menu item component.

## Properties

| Property    | Type                     | Required | Default         | Description |
| ----------- | ------------------------ | -------- | --------------- | ----------- |
| iconPack    | IconPack                 | ❌        | defaultIconPack | Icon pack   |
| menuVariant | 'primary' \| 'secondary' | ✅        | \-              | Variant     |
| size        | Size                     | ✅        | \-              | Size        |
| t           | RtkI18n                  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-menu-item></rtk-menu-item>


```

### With Properties

```

<!-- component.html -->

<rtk-menu-item

 [menuVariant]="'primary' | 'secondary'"

 size="md">

</rtk-menu-item>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-item/","name":"rtk-menu-item"}}]}
```

---

---
title: rtk-menu-list
description: API reference for rtk-menu-list component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-menu-list

A menu list component.

## Properties

| Property    | Type                     | Required | Default         | Description |
| ----------- | ------------------------ | -------- | --------------- | ----------- |
| iconPack    | IconPack                 | ❌        | defaultIconPack | Icon pack   |
| menuVariant | 'primary' \| 'secondary' | ✅        | \-              | Variant     |
| t           | RtkI18n                  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-menu-list></rtk-menu-list>


```

### With Properties

```

<!-- component.html -->

<rtk-menu-list

 [menuVariant]="'primary' | 'secondary'">

</rtk-menu-list>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-list/","name":"rtk-menu-list"}}]}
```

---

---
title: rtk-message-list-view
description: API reference for rtk-message-list-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-list-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-message-list-view

A component which renders list of messages.

## Properties

| Property          | Type                              | Required | Default         | Description                                                                    |
| ----------------- | --------------------------------- | -------- | --------------- | ------------------------------------------------------------------------------ |
| estimateItemSize  | number                            | ✅        | \-              | Estimated height of an item                                                    |
| iconPack          | IconPack1                         | ❌        | defaultIconPack | Icon pack                                                                      |
| loadMore          | (lastMessage: Message)            | ✅        | \-              | Function to load more messages. Messages returned from this will be preprended |
| messages          | Message\[\]                       | ✅        | \-              | Messages to render                                                             |
| renderer          | (message: Message, index: number) | ✅        | \-              | Render function of the message                                                 |
| visibleItemsCount | number                            | ✅        | \-              | Maximum visible messages                                                       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-message-list-view></rtk-message-list-view>


```

### With Properties

```

<!-- component.html -->

<rtk-message-list-view

 estimateItemSize="42"

 [loadMore]="(lastmessage: message)"

 [messages]="[]">

</rtk-message-list-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-list-view/","name":"rtk-message-list-view"}}]}
```

---

---
title: rtk-message-view
description: API reference for rtk-message-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-message-view

## Properties

| Property       | Type                     | Required | Default         | Description                             |
| -------------- | ------------------------ | -------- | --------------- | --------------------------------------- |
| actions        | MessageAction\[\]        | ✅        | \-              | List of actions to show in menu         |
| authorName     | string                   | ✅        | \-              | Author display label                    |
| avatarUrl      | string                   | ✅        | \-              | Avatar image url                        |
| hideAuthorName | boolean                  | ✅        | \-              | Hides author display label              |
| hideAvatar     | boolean                  | ✅        | \-              | Hides avatar                            |
| hideMetadata   | boolean                  | ✅        | \-              | Hides metadata (time)                   |
| iconPack       | IconPack1                | ❌        | defaultIconPack | Icon pack                               |
| isEdited       | boolean                  | ✅        | \-              | Has the message been edited             |
| isSelf         | boolean                  | ✅        | \-              | Is the message sent by the current user |
| messageType    | Message\['type'\]        | ✅        | \-              | Type of message                         |
| pinned         | boolean                  | ✅        | \-              | Is message pinned                       |
| time           | Date                     | ✅        | \-              | Time when message was sent              |
| variant        | 'plain' \| 'bubble'      | ✅        | \-              | Appearance                              |
| viewType       | 'incoming' \| 'outgoing' | ✅        | \-              | Render                                  |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-message-view></rtk-message-view>


```

### With Properties

```

<!-- component.html -->

<rtk-message-view

 [actions]="[]"

 authorName="example"

 avatarUrl="example">

</rtk-message-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-view/","name":"rtk-message-view"}}]}
```

---

---
title: rtk-mic-toggle
description: API reference for rtk-mic-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mic-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-mic-toggle

A button which toggles your microphone.

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-mic-toggle></rtk-mic-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-mic-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-mic-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mic-toggle/","name":"rtk-mic-toggle"}}]}
```

---

---
title: rtk-microphone-selector
description: API reference for rtk-microphone-selector component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-microphone-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-microphone-selector

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type               | Required | Default         | Description    |
| -------- | ------------------ | -------- | --------------- | -------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting            | ✅        | \-              | Meeting object |
| size     | Size               | ✅        | \-              | Size           |
| t        | RtkI18n            | ❌        | useLanguage()   | Language       |
| variant  | 'full' \| 'inline' | ✅        | \-              | variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-microphone-selector></rtk-microphone-selector>


```

### With Properties

```

<!-- component.html -->

<rtk-microphone-selector

 [meeting]="meeting"

 size="md"

 [variant]="'full' | 'inline'">

</rtk-microphone-selector>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-microphone-selector/","name":"rtk-microphone-selector"}}]}
```

---

---
title: rtk-mixed-grid
description: API reference for rtk-mixed-grid component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mixed-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-mixed-grid

A grid component which handles screenshares, plugins and participants.

## Properties

| Property                | Type          | Required | Default               | Description                                           |
| ----------------------- | ------------- | -------- | --------------------- | ----------------------------------------------------- |
| aspectRatio             | string        | ✅        | \-                    | Aspect Ratio of participant tile Format: width:height |
| config                  | UIConfig      | ❌        | createDefaultConfig() | UI Config                                             |
| gap                     | number        | ✅        | \-                    | Gap between participant tiles                         |
| gridSize                | GridSize1     | ✅        | \-                    | Grid size                                             |
| iconPack                | IconPack      | ❌        | defaultIconPack       | Icon Pack                                             |
| layout                  | GridLayout1   | ✅        | \-                    | Grid Layout                                           |
| meeting                 | Meeting       | ✅        | \-                    | Meeting object                                        |
| participants            | Peer\[\]      | ✅        | \-                    | Participants                                          |
| pinnedParticipants      | Peer\[\]      | ✅        | \-                    | Pinned Participants                                   |
| plugins                 | RTKPlugin\[\] | ✅        | \-                    | Active Plugins                                        |
| screenShareParticipants | Peer\[\]      | ✅        | \-                    | Screenshare Participants                              |
| size                    | Size          | ✅        | \-                    | Size                                                  |
| states                  | States        | ✅        | \-                    | States object                                         |
| t                       | RtkI18n       | ❌        | useLanguage()         | Language                                              |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-mixed-grid></rtk-mixed-grid>


```

### With Properties

```

<!-- component.html -->

<rtk-mixed-grid

 aspectRatio="example"

 gap="42"

 gridSize="md">

</rtk-mixed-grid>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mixed-grid/","name":"rtk-mixed-grid"}}]}
```

---

---
title: rtk-more-toggle
description: API reference for rtk-more-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-more-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-more-toggle

A button which toggles visibility of a more menu. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeMoreMenu: boolean; }


```

## Properties

| Property | Type     | Required | Default         | Description   |
| -------- | -------- | -------- | --------------- | ------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack     |
| size     | Size     | ✅        | \-              | Size          |
| states   | States   | ✅        | \-              | States object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-more-toggle></rtk-more-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-more-toggle

 size="md">

</rtk-more-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-more-toggle/","name":"rtk-more-toggle"}}]}
```

---

---
title: rtk-mute-all-button
description: API reference for rtk-mute-all-button component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-mute-all-button

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack1         | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size1             | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-mute-all-button></rtk-mute-all-button>


```

### With Properties

```

<!-- component.html -->

<rtk-mute-all-button

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-mute-all-button>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-button/","name":"rtk-mute-all-button"}}]}
```

---

---
title: rtk-mute-all-confirmation
description: API reference for rtk-mute-all-confirmation component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-confirmation.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-mute-all-confirmation

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-mute-all-confirmation></rtk-mute-all-confirmation>


```

### With Properties

```

<!-- component.html -->

<rtk-mute-all-confirmation

 [meeting]="meeting">

</rtk-mute-all-confirmation>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-confirmation/","name":"rtk-mute-all-confirmation"}}]}
```

---

---
title: rtk-name-tag
description: API reference for rtk-name-tag component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-name-tag.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-name-tag

A component which shows a participant's name.

## Properties

| Property      | Type              | Required | Default         | Description                               |
| ------------- | ----------------- | -------- | --------------- | ----------------------------------------- |
| iconPack      | IconPack          | ❌        | defaultIconPack | Icon pack                                 |
| isScreenShare | boolean           | ✅        | \-              | Whether it is used in a screen share view |
| meeting       | Meeting           | ✅        | \-              | Meeting object                            |
| participant   | Peer              | ✅        | \-              | Participant object                        |
| size          | Size              | ✅        | \-              | Size                                      |
| t             | RtkI18n           | ❌        | useLanguage()   | Language                                  |
| variant       | RtkNameTagVariant | ✅        | \-              | Name tag variant                          |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-name-tag></rtk-name-tag>


```

### With Properties

```

<!-- component.html -->

<rtk-name-tag

 [isScreenShare]="true"

 [meeting]="meeting"

 [participant]="participant">

</rtk-name-tag>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-name-tag/","name":"rtk-name-tag"}}]}
```

---

---
title: rtk-network-indicator
description: API reference for rtk-network-indicator component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-network-indicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-network-indicator

## Properties

| Property      | Type      | Required | Default         | Description         |
| ------------- | --------- | -------- | --------------- | ------------------- |
| iconPack      | IconPack1 | ❌        | defaultIconPack | Icon pack           |
| isScreenShare | boolean   | ✅        | \-              | Is for screenshare  |
| meeting       | Meeting   | ✅        | \-              | Meeting             |
| participant   | Peer      | ✅        | \-              | Participant or Self |
| t             | RtkI18n1  | ❌        | useLanguage()   | Language            |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-network-indicator></rtk-network-indicator>


```

### With Properties

```

<!-- component.html -->

<rtk-network-indicator

 [isScreenShare]="true"

 [meeting]="meeting"

 [participant]="participant">

</rtk-network-indicator>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-network-indicator/","name":"rtk-network-indicator"}}]}
```

---

---
title: rtk-notification
description: API reference for rtk-notification component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notification.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-notification

A component which shows a notification. You need to remove the element after you receive the`rtkNotificationDismiss` event.

## Properties

| Property     | Type         | Required | Default         | Description             |
| ------------ | ------------ | -------- | --------------- | ----------------------- |
| iconPack     | IconPack     | ❌        | defaultIconPack | Icon pack               |
| notification | Notification | ✅        | \-              | Message                 |
| paused       | boolean      | ✅        | \-              | Stops timeout when true |
| size         | Size         | ✅        | \-              | Size                    |
| t            | RtkI18n      | ❌        | useLanguage()   | Language                |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-notification></rtk-notification>


```

### With Properties

```

<!-- component.html -->

<rtk-notification

 [notification]="notification"

 [paused]="true"

 size="md">

</rtk-notification>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notification/","name":"rtk-notification"}}]}
```

---

---
title: rtk-notifications
description: API reference for rtk-notifications component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notifications.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-notifications

A component which handles notifications. You can configure which notifications you want to see and which ones you want to hear. There are also certain limits which you can set as well.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-notifications></rtk-notifications>


```

### With Properties

```

<!-- component.html -->

<rtk-notifications

 [meeting]="meeting"

 size="md">

</rtk-notifications>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notifications/","name":"rtk-notifications"}}]}
```

---

---
title: rtk-overlay-modal
description: API reference for rtk-overlay-modal component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-overlay-modal.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-overlay-modal

A confirmation modal.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-overlay-modal></rtk-overlay-modal>


```

### With Properties

```

<!-- component.html -->

<rtk-overlay-modal

 [meeting]="meeting">

</rtk-overlay-modal>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-overlay-modal/","name":"rtk-overlay-modal"}}]}
```

---

---
title: rtk-paginated-list
description: API reference for rtk-paginated-list component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-paginated-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-paginated-list

## Properties

| Property       | Type                                                 | Required | Default         | Description                                    |
| -------------- | ---------------------------------------------------- | -------- | --------------- | ---------------------------------------------- |
| autoScroll     | boolean                                              | ✅        | \-              | auto scroll list to bottom                     |
| createNodes    | (data: unknown\[\])                                  | ✅        | \-              | Create nodes                                   |
| emptyListLabel | string                                               | ✅        | \-              | label to show when empty                       |
| fetchData      | (timestamp: number, size: number, reversed: boolean) | ✅        | \-              | Fetch the data                                 |
| iconPack       | IconPack                                             | ❌        | defaultIconPack | Icon pack                                      |
| pageSize       | number                                               | ✅        | \-              | Page Size                                      |
| pagesAllowed   | number                                               | ✅        | \-              | Number of pages allowed to be shown            |
| rerenderList   | ()                                                   | ✅        | \-              | Rerender paginated list                        |
| reset          | (timestamp?: number)                                 | ❌        | \-              | Resets the paginated list to a given timestamp |
| t              | RtkI18n                                              | ❌        | useLanguage()   | Language                                       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-paginated-list></rtk-paginated-list>


```

### With Properties

```

<!-- component.html -->

<rtk-paginated-list

 [autoScroll]="true"

 [createNodes]="[]"

 emptyListLabel="example">

</rtk-paginated-list>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-paginated-list/","name":"rtk-paginated-list"}}]}
```

---

---
title: rtk-participant
description: API reference for rtk-participant component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participant

A participant entry component used inside `rtk-participants` which shows data like: name, picture and media device status. You can perform privileged actions on the participant too.

## Properties

| Property    | Type                | Required | Default               | Description              |
| ----------- | ------------------- | -------- | --------------------- | ------------------------ |
| config      | UIConfig1           | ❌        | createDefaultConfig() | Config object            |
| iconPack    | IconPack            | ❌        | defaultIconPack       | Icon pack                |
| meeting     | Meeting             | ✅        | \-                    | Meeting object           |
| participant | Peer                | ✅        | \-                    | Participant object       |
| states      | States1             | ✅        | \-                    | States                   |
| t           | RtkI18n             | ❌        | useLanguage()         | Language                 |
| view        | ParticipantViewMode | ✅        | \-                    | Show participant summary |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participant></rtk-participant>


```

### With Properties

```

<!-- component.html -->

<rtk-participant

 [meeting]="meeting"

 [participant]="participant"

 [view]="participantviewmode">

</rtk-participant>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant/","name":"rtk-participant"}}]}
```

---

---
title: rtk-participant-count
description: API reference for rtk-participant-count component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-count.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participant-count

A component which shows count of total joined participants in a meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participant-count></rtk-participant-count>


```

### With Properties

```

<!-- component.html -->

<rtk-participant-count

 [meeting]="meeting"

 size="md">

</rtk-participant-count>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-count/","name":"rtk-participant-count"}}]}
```

---

---
title: rtk-participant-setup
description: API reference for rtk-participant-setup component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-setup.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participant-setup

## Properties

| Property        | Type                  | Required       | Default               | Description                      |             |              |   |    |                      |
| --------------- | --------------------- | -------------- | --------------------- | -------------------------------- | ----------- | ------------ | - | -- | -------------------- |
| config          | UIConfig              | ❌              | createDefaultConfig() | Config object                    |             |              |   |    |                      |
| iconPack        | IconPack              | ❌              | defaultIconPack       | Icon pack                        |             |              |   |    |                      |
| isPreview       | boolean               | ✅              | \-                    | Whether tile is used for preview |             |              |   |    |                      |
| nameTagPosition | \| 'bottom-left'      | 'bottom-right' | 'bottom-center'       | 'top-left'                       | 'top-right' | 'top-center' | ✅ | \- | Position of name tag |
| participant     | Peer                  | ✅              | \-                    | Participant object               |             |              |   |    |                      |
| size            | Size                  | ✅              | \-                    | Size                             |             |              |   |    |                      |
| states          | States                | ✅              | \-                    | States object                    |             |              |   |    |                      |
| t               | RtkI18n               | ❌              | useLanguage()         | Language                         |             |              |   |    |                      |
| variant         | 'solid' \| 'gradient' | ✅              | \-                    | Variant                          |             |              |   |    |                      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participant-setup></rtk-participant-setup>


```

### With Properties

```

<!-- component.html -->

<rtk-participant-setup

 [isPreview]="true"

 [nameTagPosition]="| 'bottom-left'

    | 'bottom-right'

    | 'bottom-center'

    | 'top-left'

    | 'top-right'

    | 'top-center'"

 [participant]="participant">

</rtk-participant-setup>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-setup/","name":"rtk-participant-setup"}}]}
```

---

---
title: rtk-participant-tile
description: API reference for rtk-participant-tile component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-tile.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participant-tile

A component which plays a participants video and allows for placement of components like `rtk-name-tag`, `rtk-audio-visualizer` or any other component.

## Properties

| Property        | Type                  | Required       | Default               | Description                      |             |              |   |    |                      |
| --------------- | --------------------- | -------------- | --------------------- | -------------------------------- | ----------- | ------------ | - | -- | -------------------- |
| config          | UIConfig              | ❌              | createDefaultConfig() | Config object                    |             |              |   |    |                      |
| iconPack        | IconPack              | ❌              | defaultIconPack       | Icon pack                        |             |              |   |    |                      |
| isPreview       | boolean               | ✅              | \-                    | Whether tile is used for preview |             |              |   |    |                      |
| meeting         | Meeting               | ✅              | \-                    | Meeting object                   |             |              |   |    |                      |
| nameTagPosition | \| 'bottom-left'      | 'bottom-right' | 'bottom-center'       | 'top-left'                       | 'top-right' | 'top-center' | ✅ | \- | Position of name tag |
| participant     | Peer                  | ✅              | \-                    | Participant object               |             |              |   |    |                      |
| size            | Size                  | ✅              | \-                    | Size                             |             |              |   |    |                      |
| states          | States                | ✅              | \-                    | States object                    |             |              |   |    |                      |
| t               | RtkI18n               | ❌              | useLanguage()         | Language                         |             |              |   |    |                      |
| variant         | 'solid' \| 'gradient' | ✅              | \-                    | Variant                          |             |              |   |    |                      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participant-tile></rtk-participant-tile>


```

### With Properties

```

<!-- component.html -->

<rtk-participant-tile

 [isPreview]="true"

 [meeting]="meeting"

 [nameTagPosition]="| 'bottom-left'

    | 'bottom-right'

    | 'bottom-center'

    | 'top-left'

    | 'top-right'

    | 'top-center'">

</rtk-participant-tile>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-tile/","name":"rtk-participant-tile"}}]}
```

---

---
title: rtk-participants
description: API reference for rtk-participants component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants

A component which lists all participants, with ability to run privileged actions on each participant according to your permissions.

## Properties

| Property                 | Type              | Required | Default               | Description     |
| ------------------------ | ----------------- | -------- | --------------------- | --------------- |
| config                   | UIConfig          | ❌        | createDefaultConfig() | Config          |
| defaultParticipantsTabId | ParticipantsTabId | ✅        | \-                    | Default section |
| iconPack                 | IconPack          | ❌        | defaultIconPack       | Icon pack       |
| meeting                  | Meeting           | ✅        | \-                    | Meeting object  |
| size                     | Size              | ✅        | \-                    | Size            |
| states                   | States            | ✅        | \-                    | States object   |
| t                        | RtkI18n           | ❌        | useLanguage()         | Language        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participants></rtk-participants>


```

### With Properties

```

<!-- component.html -->

<rtk-participants

 [defaultParticipantsTabId]="participantstabid"

 [meeting]="meeting"

 size="md">

</rtk-participants>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants/","name":"rtk-participants"}}]}
```

---

---
title: rtk-participants-audio
description: API reference for rtk-participants-audio component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-audio.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-audio

A component which plays all the audio from participants and screenshares.

## Properties

| Property           | Type             | Required | Default         | Description                 |
| ------------------ | ---------------- | -------- | --------------- | --------------------------- |
| iconPack           | IconPack         | ❌        | defaultIconPack | Icon pack                   |
| meeting            | Meeting          | ✅        | \-              | Meeting object              |
| preloadedAudioElem | HTMLAudioElement | ✅        | \-              | Pass existing audio element |
| t                  | RtkI18n          | ❌        | useLanguage()   | Language                    |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participants-audio></rtk-participants-audio>


```

### With Properties

```

<!-- component.html -->

<rtk-participants-audio

 [meeting]="meeting"

 [preloadedAudioElem]="htmlaudioelement">

</rtk-participants-audio>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-audio/","name":"rtk-participants-audio"}}]}
```

---

---
title: rtk-participants-stage-list
description: API reference for rtk-participants-stage-list component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-stage-list

A component which lists all participants, with ability to run privileged actions on each participant according to your permissions.

## Properties

| Property   | Type                 | Required | Default               | Description                          |
| ---------- | -------------------- | -------- | --------------------- | ------------------------------------ |
| config     | UIConfig             | ❌        | createDefaultConfig() | Config                               |
| hideHeader | boolean              | ✅        | \-                    | Hide Stage Participants Count Header |
| iconPack   | IconPack             | ❌        | defaultIconPack       | Icon pack                            |
| meeting    | Meeting              | ✅        | \-                    | Meeting object                       |
| search     | string               | ✅        | \-                    | Search                               |
| size       | Size                 | ✅        | \-                    | Size                                 |
| states     | States1              | ✅        | \-                    | Meeting object                       |
| t          | RtkI18n              | ❌        | useLanguage()         | Language                             |
| view       | ParticipantsViewMode | ✅        | \-                    | View mode for participants list      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participants-stage-list></rtk-participants-stage-list>


```

### With Properties

```

<!-- component.html -->

<rtk-participants-stage-list

 [hideHeader]="true"

 [meeting]="meeting"

 search="example">

</rtk-participants-stage-list>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-list/","name":"rtk-participants-stage-list"}}]}
```

---

---
title: rtk-participants-stage-queue
description: API reference for rtk-participants-stage-queue component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-queue.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-stage-queue

## Properties

| Property | Type                 | Required | Default               | Description                     |
| -------- | -------------------- | -------- | --------------------- | ------------------------------- |
| config   | UIConfig1            | ❌        | createDefaultConfig() | Config                          |
| iconPack | IconPack1            | ❌        | defaultIconPack       | Icon pack                       |
| meeting  | Meeting              | ✅        | \-                    | Meeting object                  |
| size     | Size1                | ✅        | \-                    | Size                            |
| t        | RtkI18n1             | ❌        | useLanguage()         | Language                        |
| view     | ParticipantsViewMode | ✅        | \-                    | View mode for participants list |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participants-stage-queue></rtk-participants-stage-queue>


```

### With Properties

```

<!-- component.html -->

<rtk-participants-stage-queue

 [meeting]="meeting"

 size="md"

 [view]="participantsviewmode">

</rtk-participants-stage-queue>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-queue/","name":"rtk-participants-stage-queue"}}]}
```

---

---
title: rtk-participants-toggle
description: API reference for rtk-participants-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-toggle

A button which toggles visibility of participants. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'participants' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participants-toggle></rtk-participants-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-participants-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-participants-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-toggle/","name":"rtk-participants-toggle"}}]}
```

---

---
title: rtk-participants-viewer-list
description: API reference for rtk-participants-viewer-list component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-viewer-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-viewer-list

## Properties

| Property   | Type                 | Required | Default               | Description                     |
| ---------- | -------------------- | -------- | --------------------- | ------------------------------- |
| config     | UIConfig1            | ❌        | createDefaultConfig() | Config                          |
| hideHeader | boolean              | ✅        | \-                    | Hide Viewer Count Header        |
| iconPack   | IconPack1            | ❌        | defaultIconPack       | Icon pack                       |
| meeting    | Meeting              | ✅        | \-                    | Meeting object                  |
| search     | string               | ✅        | \-                    | Search                          |
| size       | Size1                | ✅        | \-                    | Size                            |
| t          | RtkI18n1             | ❌        | useLanguage()         | Language                        |
| view       | ParticipantsViewMode | ✅        | \-                    | View mode for participants list |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participants-viewer-list></rtk-participants-viewer-list>


```

### With Properties

```

<!-- component.html -->

<rtk-participants-viewer-list

 [hideHeader]="true"

 [meeting]="meeting"

 search="example">

</rtk-participants-viewer-list>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-viewer-list/","name":"rtk-participants-viewer-list"}}]}
```

---

---
title: rtk-participants-waiting-list
description: API reference for rtk-participants-waiting-list component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-waiting-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-waiting-list

## Properties

| Property | Type                 | Required | Default               | Description                     |
| -------- | -------------------- | -------- | --------------------- | ------------------------------- |
| config   | UIConfig1            | ❌        | createDefaultConfig() | Config                          |
| iconPack | IconPack1            | ❌        | defaultIconPack       | Icon pack                       |
| meeting  | Meeting              | ✅        | \-                    | Meeting object                  |
| size     | Size1                | ✅        | \-                    | Size                            |
| t        | RtkI18n1             | ❌        | useLanguage()         | Language                        |
| view     | ParticipantsViewMode | ✅        | \-                    | View mode for participants list |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-participants-waiting-list></rtk-participants-waiting-list>


```

### With Properties

```

<!-- component.html -->

<rtk-participants-waiting-list

 [meeting]="meeting"

 size="md"

 [view]="participantsviewmode">

</rtk-participants-waiting-list>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-waiting-list/","name":"rtk-participants-waiting-list"}}]}
```

---

---
title: rtk-permissions-message
description: API reference for rtk-permissions-message component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-permissions-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-permissions-message

A component which shows permission related troubleshooting information.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon Pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-permissions-message></rtk-permissions-message>


```

### With Properties

```

<!-- component.html -->

<rtk-permissions-message

 [meeting]="meeting">

</rtk-permissions-message>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-permissions-message/","name":"rtk-permissions-message"}}]}
```

---

---
title: rtk-pinned-message-selector
description: API reference for rtk-pinned-message-selector component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pinned-message-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-pinned-message-selector

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-pinned-message-selector></rtk-pinned-message-selector>


```

### With Properties

```

<!-- component.html -->

<rtk-pinned-message-selector

 [meeting]="meeting">

</rtk-pinned-message-selector>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pinned-message-selector/","name":"rtk-pinned-message-selector"}}]}
```

---

---
title: rtk-pip-toggle
description: API reference for rtk-pip-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pip-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-pip-toggle

## Properties

| Property | Type              | Required | Default               | Description    |
| -------- | ----------------- | -------- | --------------------- | -------------- |
| config   | UIConfig1         | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack1         | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting           | ✅        | \-                    | Meeting object |
| size     | Size1             | ✅        | \-                    | Size           |
| states   | States1           | ✅        | \-                    | States object  |
| t        | RtkI18n           | ❌        | useLanguage()         | Language       |
| variant  | ControlBarVariant | ✅        | \-                    | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-pip-toggle></rtk-pip-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-pip-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-pip-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pip-toggle/","name":"rtk-pip-toggle"}}]}
```

---

---
title: rtk-plugin-main
description: API reference for rtk-plugin-main component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugin-main.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-plugin-main

A component which loads a plugin.

## Properties

| Property | Type      | Required | Default         | Description |
| -------- | --------- | -------- | --------------- | ----------- |
| iconPack | IconPack  | ❌        | defaultIconPack | Icon pack   |
| meeting  | Meeting   | ✅        | \-              | Meeting     |
| plugin   | RTKPlugin | ✅        | \-              | Plugin      |
| t        | RtkI18n   | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-plugin-main></rtk-plugin-main>


```

### With Properties

```

<!-- component.html -->

<rtk-plugin-main

 [meeting]="meeting"

 [plugin]="rtkplugin">

</rtk-plugin-main>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugin-main/","name":"rtk-plugin-main"}}]}
```

---

---
title: rtk-plugins
description: API reference for rtk-plugins component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-plugins

A component which lists all available plugins from their preset, and ability to enable or disable plugins.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-plugins></rtk-plugins>


```

### With Properties

```

<!-- component.html -->

<rtk-plugins

 [meeting]="meeting"

 size="md">

</rtk-plugins>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins/","name":"rtk-plugins"}}]}
```

---

---
title: rtk-plugins-toggle
description: API reference for rtk-plugins-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-plugins-toggle

A button which toggles visibility of plugins. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'plugins' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-plugins-toggle></rtk-plugins-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-plugins-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-plugins-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins-toggle/","name":"rtk-plugins-toggle"}}]}
```

---

---
title: rtk-poll
description: API reference for rtk-poll component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-poll

A poll component. Shows a poll where a user can vote.

## Properties

| Property    | Type                 | Required | Default         | Description        |
| ----------- | -------------------- | -------- | --------------- | ------------------ |
| iconPack    | IconPack             | ❌        | defaultIconPack | Icon pack          |
| permissions | RTKPermissionsPreset | ✅        | \-              | Permissions Object |
| poll        | Poll                 | ✅        | \-              | Poll               |
| self        | string               | ✅        | \-              | Self ID            |
| t           | RtkI18n              | ❌        | useLanguage()   | Language           |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-poll></rtk-poll>


```

### With Properties

```

<!-- component.html -->

<rtk-poll

 [permissions]="rtkpermissionspreset"

 [poll]="poll"

 self="example">

</rtk-poll>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll/","name":"rtk-poll"}}]}
```

---

---
title: rtk-poll-form
description: API reference for rtk-poll-form component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll-form.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-poll-form

A component that lets you create a poll.

## Properties

| Property | Type     | Required | Default         | Description |
| -------- | -------- | -------- | --------------- | ----------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack   |
| t        | RtkI18n  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-poll-form></rtk-poll-form>


```

### With Properties

```

<!-- component.html -->

<rtk-poll-form

 [iconPack]="defaultIconPack"

 [t]="rtki18n">

</rtk-poll-form>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll-form/","name":"rtk-poll-form"}}]}
```

---

---
title: rtk-polls
description: API reference for rtk-polls component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-polls

A component which lists all available plugins a user can access with the ability to enable or disable them as per their permissions.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-polls></rtk-polls>


```

### With Properties

```

<!-- component.html -->

<rtk-polls

 [meeting]="meeting"

 size="md">

</rtk-polls>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls/","name":"rtk-polls"}}]}
```

---

---
title: rtk-polls-toggle
description: API reference for rtk-polls-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-polls-toggle

A button which toggles visibility of polls. You need to pass the `meeting` object to it to see the unread polls count badge. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'polls' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-polls-toggle></rtk-polls-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-polls-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-polls-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls-toggle/","name":"rtk-polls-toggle"}}]}
```

---

---
title: rtk-recording-indicator
description: API reference for rtk-recording-indicator component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-indicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-recording-indicator

A component which indicates the recording status of a meeting. It will not render anything if no recording is taking place.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-recording-indicator></rtk-recording-indicator>


```

### With Properties

```

<!-- component.html -->

<rtk-recording-indicator

 [meeting]="meeting"

 size="md">

</rtk-recording-indicator>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-indicator/","name":"rtk-recording-indicator"}}]}
```

---

---
title: rtk-recording-toggle
description: API reference for rtk-recording-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-recording-toggle

A button which toggles recording state of a meeting. Only a privileged user can perform this action, thus the button will not be visible for participants who don't have the permission to record a meeting.

## Properties

| Property | Type              | Required | Default         | Description        |
| -------- | ----------------- | -------- | --------------- | ------------------ |
| disabled | boolean           | ✅        | \-              | Disable the button |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack          |
| meeting  | Meeting           | ✅        | \-              | Meeting object     |
| size     | Size              | ✅        | \-              | Size               |
| t        | RtkI18n           | ❌        | useLanguage()   | Language           |
| variant  | ControlBarVariant | ✅        | \-              | Variant            |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-recording-toggle></rtk-recording-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-recording-toggle

 [disabled]="true"

 [meeting]="meeting"

 size="md">

</rtk-recording-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-toggle/","name":"rtk-recording-toggle"}}]}
```

---

---
title: rtk-screen-share-toggle
description: API reference for rtk-screen-share-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screen-share-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-screen-share-toggle

A button which toggles your screenshare.

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-screen-share-toggle></rtk-screen-share-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-screen-share-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-screen-share-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screen-share-toggle/","name":"rtk-screen-share-toggle"}}]}
```

---

---
title: rtk-screenshare-view
description: API reference for rtk-screenshare-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screenshare-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-screenshare-view

A component which plays a participant's screenshared video. It also allows for placement of other components similar to `rtk-participant-tile`. This component will not render anything if the participant hasn't start screensharing.

## Properties

| Property             | Type                  | Required       | Default         | Description             |             |              |   |    |                      |
| -------------------- | --------------------- | -------------- | --------------- | ----------------------- | ----------- | ------------ | - | -- | -------------------- |
| hideFullScreenButton | boolean               | ✅              | \-              | Hide full screen button |             |              |   |    |                      |
| iconPack             | IconPack              | ❌              | defaultIconPack | Icon pack               |             |              |   |    |                      |
| meeting              | Meeting               | ✅              | \-              | Meeting object          |             |              |   |    |                      |
| nameTagPosition      | \| 'bottom-left'      | 'bottom-right' | 'bottom-center' | 'top-left'              | 'top-right' | 'top-center' | ✅ | \- | Position of name tag |
| participant          | Peer                  | ✅              | \-              | Participant object      |             |              |   |    |                      |
| size                 | Size                  | ✅              | \-              | Size                    |             |              |   |    |                      |
| t                    | RtkI18n               | ❌              | useLanguage()   | Language                |             |              |   |    |                      |
| variant              | 'solid' \| 'gradient' | ✅              | \-              | Variant                 |             |              |   |    |                      |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-screenshare-view></rtk-screenshare-view>


```

### With Properties

```

<!-- component.html -->

<rtk-screenshare-view

 [hideFullScreenButton]="true"

 [meeting]="meeting"

 [nameTagPosition]="| 'bottom-left'

    | 'bottom-right'

    | 'bottom-center'

    | 'top-left'

    | 'top-right'

    | 'top-center'">

</rtk-screenshare-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screenshare-view/","name":"rtk-screenshare-view"}}]}
```

---

---
title: rtk-settings
description: API reference for rtk-settings component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-settings

A settings component to see and change your audio/video devices as well as see your connection quality.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-settings></rtk-settings>


```

### With Properties

```

<!-- component.html -->

<rtk-settings

 [meeting]="meeting"

 size="md">

</rtk-settings>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings/","name":"rtk-settings"}}]}
```

---

---
title: rtk-settings-audio
description: API reference for rtk-settings-audio component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-audio.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-settings-audio

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-settings-audio></rtk-settings-audio>


```

### With Properties

```

<!-- component.html -->

<rtk-settings-audio

 [meeting]="meeting"

 size="md">

</rtk-settings-audio>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-audio/","name":"rtk-settings-audio"}}]}
```

---

---
title: rtk-settings-toggle
description: API reference for rtk-settings-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-settings-toggle

A button which toggles visibility of settings module. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSettings: boolean; }


```

## Properties

| Property | Type              | Required | Default         | Description   |
| -------- | ----------------- | -------- | --------------- | ------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack     |
| size     | Size              | ✅        | \-              | Size          |
| states   | States            | ✅        | \-              | States object |
| t        | RtkI18n           | ❌        | useLanguage()   | Language      |
| variant  | ControlBarVariant | ✅        | \-              | Variant       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-settings-toggle></rtk-settings-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-settings-toggle

 size="md"

 variant="button">

</rtk-settings-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-toggle/","name":"rtk-settings-toggle"}}]}
```

---

---
title: rtk-settings-video
description: API reference for rtk-settings-video component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-video.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-settings-video

A component which lets to manage your camera devices and your video preferences. Emits `rtkStateUpdate` event with data for toggling mirroring of self video:

TypeScript

```

{

 prefs: {

   mirrorVideo: boolean

 }

}


```

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-settings-video></rtk-settings-video>


```

### With Properties

```

<!-- component.html -->

<rtk-settings-video

 [meeting]="meeting"

 size="md">

</rtk-settings-video>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-video/","name":"rtk-settings-video"}}]}
```

---

---
title: rtk-setup-screen
description: API reference for rtk-setup-screen component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-setup-screen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-setup-screen

A screen shown before joining the meeting, where you can edit your display name, and media settings.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-setup-screen></rtk-setup-screen>


```

### With Properties

```

<!-- component.html -->

<rtk-setup-screen

 [meeting]="meeting"

 size="md">

</rtk-setup-screen>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-setup-screen/","name":"rtk-setup-screen"}}]}
```

---

---
title: rtk-sidebar
description: API reference for rtk-sidebar component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-sidebar

A component which handles the sidebar and you can customize which sections you want, and which section you want as the default.

## Properties

| Property        | Type              | Required | Default               | Description                 |
| --------------- | ----------------- | -------- | --------------------- | --------------------------- |
| config          | UIConfig          | ❌        | createDefaultConfig() | Config                      |
| defaultSection  | RtkSidebarSection | ✅        | \-                    | Default section             |
| enabledSections | RtkSidebarTab\[\] | ✅        | \-                    | Enabled sections in sidebar |
| iconPack        | IconPack          | ❌        | defaultIconPack       | Icon pack                   |
| meeting         | Meeting           | ✅        | \-                    | Meeting object              |
| size            | Size              | ✅        | \-                    | Size                        |
| states          | States            | ✅        | \-                    | States object               |
| t               | RtkI18n           | ❌        | useLanguage()         | Language                    |
| view            | RtkSidebarView    | ✅        | \-                    | View type                   |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-sidebar></rtk-sidebar>


```

### With Properties

```

<!-- component.html -->

<rtk-sidebar

 [defaultSection]="rtksidebarsection"

 [enabledSections]="[]"

 [meeting]="meeting">

</rtk-sidebar>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar/","name":"rtk-sidebar"}}]}
```

---

---
title: rtk-sidebar-ui
description: API reference for rtk-sidebar-ui component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar-ui.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-sidebar-ui

## Properties

| Property         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Required | Default       | Description                              |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- | ---------------------------------------- |
| currentTab       | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | ✅        | \-            | Default tab to open                      |
| focusCloseButton | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ✅        | \-            | Option to focus close button when opened |
| hideCloseAction  | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ✅        | \-            | Hide Close Action                        |
| hideHeader       | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ✅        | \-            | Hide Main Header                         |
| iconPack         | { people: string; people\_checked: string; chat: string; poll: string; participants: string; rocket: string; call\_end: string; share: string; mic\_on: string; mic\_off: string; video\_on: string; video\_off: string; share\_screen\_start: string; share\_screen\_stop: string; share\_screen\_person: string; clock: string; dismiss: string; send: string; search: string; more\_vertical: string; chevron\_down: string; chevron\_up: string; chevron\_left: string; chevron\_right: string; settings: string; wifi: string; speaker: string; speaker\_off: string; download: string; full\_screen\_maximize: string; full\_screen\_minimize: string; copy: string; attach: string; image: string; emoji\_multiple: string; image\_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop\_recording: string; warning: string; pin: string; pin\_off: string; spinner: string; breakout\_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join\_stage: string; leave\_stage: string; pip\_off: string; pip\_on: string; signal\_1: string; signal\_2: string; signal\_3: string; signal\_4: string; signal\_5: string; start\_livestream: string; stop\_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal\_dots: string; ai\_sparkle: string; meeting\_ai: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; minimize: string; maximize: string; } | ✅        | \-            | Icon Pack                                |
| t                | RtkI18n1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | ❌        | useLanguage() | Language                                 |
| tabs             | RtkSidebarTab1\[\]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | ✅        | \-            | Tabs                                     |
| view             | RtkSidebarView1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | ✅        | \-            | View                                     |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-sidebar-ui></rtk-sidebar-ui>


```

### With Properties

```

<!-- component.html -->

<rtk-sidebar-ui

 currentTab="example"

 [focusCloseButton]="true"

 [hideCloseAction]="true">

</rtk-sidebar-ui>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar-ui/","name":"rtk-sidebar-ui"}}]}
```

---

---
title: rtk-simple-grid
description: API reference for rtk-simple-grid component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-simple-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-simple-grid

A grid component which renders only the participants in a simple grid.

## Properties

| Property     | Type     | Required | Default               | Description                                           |
| ------------ | -------- | -------- | --------------------- | ----------------------------------------------------- |
| aspectRatio  | string   | ✅        | \-                    | Aspect Ratio of participant tile Format: width:height |
| config       | UIConfig | ❌        | createDefaultConfig() | UI Config                                             |
| gap          | number   | ✅        | \-                    | Gap between participant tiles                         |
| iconPack     | IconPack | ❌        | defaultIconPack       | Icon Pack                                             |
| meeting      | Meeting  | ✅        | \-                    | Meeting object                                        |
| participants | Peer\[\] | ✅        | \-                    | Participants                                          |
| size         | Size     | ✅        | \-                    | Size                                                  |
| states       | States   | ✅        | \-                    | States object                                         |
| t            | RtkI18n  | ❌        | useLanguage()         | Language                                              |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-simple-grid></rtk-simple-grid>


```

### With Properties

```

<!-- component.html -->

<rtk-simple-grid

 aspectRatio="example"

 gap="42"

 [meeting]="meeting">

</rtk-simple-grid>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-simple-grid/","name":"rtk-simple-grid"}}]}
```

---

---
title: rtk-speaker-selector
description: API reference for rtk-speaker-selector component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-speaker-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-speaker-selector

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type               | Required | Default         | Description    |
| -------- | ------------------ | -------- | --------------- | -------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting            | ✅        | \-              | Meeting object |
| size     | Size               | ✅        | \-              | Size           |
| states   | States             | ✅        | \-              | States object  |
| t        | RtkI18n            | ❌        | useLanguage()   | Language       |
| variant  | 'full' \| 'inline' | ✅        | \-              | variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-speaker-selector></rtk-speaker-selector>


```

### With Properties

```

<!-- component.html -->

<rtk-speaker-selector

 [meeting]="meeting"

 size="md"

 [variant]="'full' | 'inline'">

</rtk-speaker-selector>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-speaker-selector/","name":"rtk-speaker-selector"}}]}
```

---

---
title: rtk-spinner
description: API reference for rtk-spinner component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spinner.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-spinner

A component which shows an animating spinner.

## Properties

| Property | Type     | Required | Default         | Description |
| -------- | -------- | -------- | --------------- | ----------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack   |
| size     | Size1    | ✅        | \-              | Size        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-spinner></rtk-spinner>


```

### With Properties

```

<!-- component.html -->

<rtk-spinner

 size="md">

</rtk-spinner>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spinner/","name":"rtk-spinner"}}]}
```

---

---
title: rtk-spotlight-grid
description: API reference for rtk-spotlight-grid component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-spotlight-grid

A grid component that renders two lists of participants: `pinnedParticipants` and `participants`. You can customize the layout to a `column` view, by default is is `row`.

* Participants from `pinnedParticipants[]` are rendered inside a larger grid.
* Participants from `participants[]` array are rendered in a smaller grid.

## Properties

| Property           | Type        | Required | Default               | Description                                           |
| ------------------ | ----------- | -------- | --------------------- | ----------------------------------------------------- |
| aspectRatio        | string      | ✅        | \-                    | Aspect Ratio of participant tile Format: width:height |
| config             | UIConfig    | ❌        | createDefaultConfig() | UI Config                                             |
| gap                | number      | ✅        | \-                    | Gap between participant tiles                         |
| gridSize           | GridSize1   | ✅        | \-                    | Grid size                                             |
| iconPack           | IconPack    | ❌        | defaultIconPack       | Icon Pack                                             |
| layout             | GridLayout1 | ✅        | \-                    | Grid Layout                                           |
| meeting            | Meeting     | ✅        | \-                    | Meeting object                                        |
| participants       | Peer\[\]    | ✅        | \-                    | Participants                                          |
| pinnedParticipants | Peer\[\]    | ✅        | \-                    | Pinned Participants                                   |
| size               | Size        | ✅        | \-                    | Size                                                  |
| states             | States      | ✅        | \-                    | States object                                         |
| t                  | RtkI18n     | ❌        | useLanguage()         | Language                                              |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-spotlight-grid></rtk-spotlight-grid>


```

### With Properties

```

<!-- component.html -->

<rtk-spotlight-grid

 aspectRatio="example"

 gap="42"

 gridSize="md">

</rtk-spotlight-grid>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-grid/","name":"rtk-spotlight-grid"}}]}
```

---

---
title: rtk-spotlight-indicator
description: API reference for rtk-spotlight-indicator component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-indicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-spotlight-indicator

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size1    | ✅        | \-              | Size           |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-spotlight-indicator></rtk-spotlight-indicator>


```

### With Properties

```

<!-- component.html -->

<rtk-spotlight-indicator

 [meeting]="meeting"

 size="md">

</rtk-spotlight-indicator>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-indicator/","name":"rtk-spotlight-indicator"}}]}
```

---

---
title: rtk-stage
description: API reference for rtk-stage component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-stage

A component used as a stage that commonly houses the `grid` and `sidebar` components.

## Properties

| Property | Type     | Required | Default         | Description |
| -------- | -------- | -------- | --------------- | ----------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack   |
| t        | RtkI18n  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-stage></rtk-stage>


```

### With Properties

```

<!-- component.html -->

<rtk-stage

 [iconPack]="defaultIconPack"

 [t]="rtki18n">

</rtk-stage>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage/","name":"rtk-stage"}}]}
```

---

---
title: rtk-stage-toggle
description: API reference for rtk-stage-toggle component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-stage-toggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack1         | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size1             | ✅        | \-              | Size           |
| states   | States1           | ✅        | \-              | States         |
| t        | RtkI18n1          | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-stage-toggle></rtk-stage-toggle>


```

### With Properties

```

<!-- component.html -->

<rtk-stage-toggle

 [meeting]="meeting"

 size="md"

 variant="button">

</rtk-stage-toggle>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage-toggle/","name":"rtk-stage-toggle"}}]}
```

---

---
title: rtk-switch
description: API reference for rtk-switch component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-switch.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-switch

A switch component which follows RTK Design System.

## Properties

| Property | Type     | Required | Default         | Description                           |
| -------- | -------- | -------- | --------------- | ------------------------------------- |
| checked  | boolean  | ✅        | \-              | Whether the switch is enabled/checked |
| disabled | boolean  | ✅        | \-              | Whether switch is readonly            |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack                             |
| readonly | boolean  | ✅        | \-              | Whether switch is readonly            |
| t        | RtkI18n  | ❌        | useLanguage()   | Language                              |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-switch></rtk-switch>


```

### With Properties

```

<!-- component.html -->

<rtk-switch

 [checked]="true"

 [disabled]="true"

 [readonly]="true">

</rtk-switch>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-switch/","name":"rtk-switch"}}]}
```

---

---
title: rtk-tab-bar
description: API reference for rtk-tab-bar component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tab-bar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-tab-bar

## Properties

| Property  | Type        | Required | Default               | Description    |
| --------- | ----------- | -------- | --------------------- | -------------- |
| activeTab | Tab         | ✅        | \-                    | Active tab     |
| config    | UIConfig    | ❌        | createDefaultConfig() | UI Config      |
| iconPack  | IconPack    | ❌        | defaultIconPack       | Icon Pack      |
| layout    | GridLayout1 | ✅        | \-                    | Grid Layout    |
| meeting   | Meeting     | ✅        | \-                    | Meeting object |
| size      | Size        | ✅        | \-                    | Size           |
| states    | States      | ✅        | \-                    | States object  |
| t         | RtkI18n     | ❌        | useLanguage()         | Language       |
| tabs      | Tab\[\]     | ✅        | \-                    | Tabs           |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-tab-bar></rtk-tab-bar>


```

### With Properties

```

<!-- component.html -->

<rtk-tab-bar

 [activeTab]="tab"

 [layout]="gridlayout1"

 [meeting]="meeting">

</rtk-tab-bar>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tab-bar/","name":"rtk-tab-bar"}}]}
```

---

---
title: rtk-text-composer-view
description: API reference for rtk-text-composer-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-composer-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-text-composer-view

A component which renders a text composer

## Properties

| Property          | Type                            | Required | Default         | Description                                   |
| ----------------- | ------------------------------- | -------- | --------------- | --------------------------------------------- |
| disabled          | boolean                         | ✅        | \-              | Disable the text input (default = false)      |
| iconPack          | IconPack1                       | ❌        | defaultIconPack | Icon pack                                     |
| keyDownHandler    | (e: KeyboardEvent)              | ✅        | \-              | Keydown event handler function                |
| maxLength         | number                          | ✅        | \-              | Max length for text input                     |
| placeholder       | string                          | ✅        | \-              | Placeholder text                              |
| rateLimitBreached | boolean                         | ✅        | \-              | Boolean to indicate if rate limit is breached |
| setText           | (text: string, focus?: boolean) | ❌        | \-              | Sets value of the text input                  |
| t                 | RtkI18n1                        | ❌        | useLanguage()   | Language                                      |
| value             | string                          | ✅        | \-              | Default value for text input                  |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-text-composer-view></rtk-text-composer-view>


```

### With Properties

```

<!-- component.html -->

<rtk-text-composer-view

 [disabled]="true"

 [keyDownHandler]="(e: keyboardevent)"

 maxLength="42">

</rtk-text-composer-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-composer-view/","name":"rtk-text-composer-view"}}]}
```

---

---
title: rtk-text-message
description: API reference for rtk-text-message component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-text-message

@deprecated `rtk-text-message` is deprecated and will be removed soon. Use `rtk-text-message-view` instead. A component which renders a text message from chat.

## Properties

| Property    | Type        | Required | Default         | Description                                             |
| ----------- | ----------- | -------- | --------------- | ------------------------------------------------------- |
| iconPack    | IconPack    | ❌        | defaultIconPack | Icon pack                                               |
| isContinued | boolean     | ✅        | \-              | Whether the message is continued by same user           |
| message     | TextMessage | ✅        | \-              | Text message object                                     |
| now         | Date        | ✅        | \-              | Date object of now, to calculate distance between dates |
| showBubble  | boolean     | ✅        | \-              | show message in bubble                                  |
| t           | RtkI18n     | ❌        | useLanguage()   | Language                                                |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-text-message></rtk-text-message>


```

### With Properties

```

<!-- component.html -->

<rtk-text-message

 [isContinued]="true"

 [message]="textmessage"

 [now]="date">

</rtk-text-message>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message/","name":"rtk-text-message"}}]}
```

---

---
title: rtk-text-message-view
description: API reference for rtk-text-message-view component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-text-message-view

A component which renders a text message from chat.

## Properties

| Property   | Type    | Required | Default | Description                               |
| ---------- | ------- | -------- | ------- | ----------------------------------------- |
| isMarkdown | boolean | ✅        | \-      | Renders text as markdown (default = true) |
| text       | string  | ✅        | \-      | Text message                              |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-text-message-view></rtk-text-message-view>


```

### With Properties

```

<!-- component.html -->

<rtk-text-message-view

 [isMarkdown]="true"

 text="example">

</rtk-text-message-view>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message-view/","name":"rtk-text-message-view"}}]}
```

---

---
title: rtk-tooltip
description: API reference for rtk-tooltip component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tooltip.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-tooltip

Tooltip component which follows RTK Design System.

## Properties

| Property  | Type           | Required | Default | Description                      |
| --------- | -------------- | -------- | ------- | -------------------------------- |
| delay     | number         | ✅        | \-      | Delay before showing the tooltip |
| disabled  | boolean        | ✅        | \-      | Disabled                         |
| kind      | TooltipKind    | ✅        | \-      | Tooltip kind                     |
| label     | string         | ✅        | \-      | Tooltip label                    |
| open      | boolean        | ✅        | \-      | Open                             |
| placement | Placement      | ✅        | \-      | Placement of menu                |
| size      | Size           | ✅        | \-      | Size                             |
| variant   | TooltipVariant | ✅        | \-      | Tooltip variant                  |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-tooltip></rtk-tooltip>


```

### With Properties

```

<!-- component.html -->

<rtk-tooltip

 delay="42"

 [disabled]="true"

 [kind]="tooltipkind">

</rtk-tooltip>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tooltip/","name":"rtk-tooltip"}}]}
```

---

---
title: rtk-transcript
description: API reference for rtk-transcript component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcript.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-transcript

A component which shows a transcript. You need to remove the element after you receive the`rtkTranscriptDismiss` event.

## Properties

| Property   | Type                                 | Required | Default       | Description |
| ---------- | ------------------------------------ | -------- | ------------- | ----------- |
| t          | RtkI18n                              | ❌        | useLanguage() | Language    |
| transcript | Transcript & { renderedId?: string } | ❌        | \-            | Message     |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-transcript></rtk-transcript>


```

### With Properties

```

<!-- component.html -->

<rtk-transcript

 [t]="rtki18n"

 transcript="example">

</rtk-transcript>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcript/","name":"rtk-transcript"}}]}
```

---

---
title: rtk-transcripts
description: API reference for rtk-transcripts component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcripts.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-transcripts

A component which handles transcripts. You can configure which transcripts you want to see and which ones you want to hear. There are also certain limits which you can set as well.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-transcripts></rtk-transcripts>


```

### With Properties

```

<!-- component.html -->

<rtk-transcripts

 [meeting]="meeting">

</rtk-transcripts>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcripts/","name":"rtk-transcripts"}}]}
```

---

---
title: rtk-ui-provider
description: API reference for rtk-ui-provider component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ui-provider.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ui-provider

## Properties

| Property        | Type            | Required | Default          | Description                         |
| --------------- | --------------- | -------- | ---------------- | ----------------------------------- |
| config          | UIConfig1       | ✅        | \-               | Config                              |
| iconPack        | IconPack1       | ❌        | defaultIconPack  | Icon pack                           |
| meeting         | Meeting \| null | ❌        | null             | Meeting                             |
| mode            | MeetingMode1    | ✅        | \-               | Fill type                           |
| overrides       | Overrides1      | ❌        | defaultOverrides | UI Kit Overrides                    |
| showSetupScreen | boolean         | ✅        | \-               | Whether to show setup screen or not |
| t               | RtkI18n1        | ❌        | useLanguage()    | Language utility                    |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-ui-provider></rtk-ui-provider>


```

### With Properties

```

<!-- component.html -->

<rtk-ui-provider

 [config]="defaultUiConfig"

 [mode]="meeting"

 [showSetupScreen]="true">

</rtk-ui-provider>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ui-provider/","name":"rtk-ui-provider"}}]}
```

---

---
title: rtk-viewer-count
description: API reference for rtk-viewer-count component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-viewer-count.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-viewer-count

A component which shows count of total joined participants in a meeting.

## Properties

| Property | Type               | Required | Default         | Description          |
| -------- | ------------------ | -------- | --------------- | -------------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack            |
| meeting  | Meeting            | ✅        | \-              | Meeting object       |
| t        | RtkI18n            | ❌        | useLanguage()   | Language             |
| variant  | ViewerCountVariant | ✅        | \-              | Viewer count variant |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-viewer-count></rtk-viewer-count>


```

### With Properties

```

<!-- component.html -->

<rtk-viewer-count

 [meeting]="meeting"

 variant="primary">

</rtk-viewer-count>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-viewer-count/","name":"rtk-viewer-count"}}]}
```

---

---
title: rtk-virtualized-participant-list
description: API reference for rtk-virtualized-participant-list component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-virtualized-participant-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-virtualized-participant-list

## Properties

| Property           | Type                         | Required | Default | Description                                              |
| ------------------ | ---------------------------- | -------- | ------- | -------------------------------------------------------- |
| bufferedItemsCount | number                       | ✅        | \-      | Buffer items to render before and after the visible area |
| emptyListElement   | HTMLElement                  | ✅        | \-      | Element to render if list is empty                       |
| itemHeight         | number                       | ✅        | \-      | Height of each item in pixels (assumed fixed)            |
| items              | Peer1\[\]                    | ✅        | \-      | Items to be virtualized                                  |
| renderItem         | (item: Peer1, index: number) | ✅        | \-      | Function to render each item                             |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-virtualized-participant-list></rtk-virtualized-participant-list>


```

### With Properties

```

<!-- component.html -->

<rtk-virtualized-participant-list

 bufferedItemsCount="42"

 [emptyListElement]="htmlelement"

 itemHeight="42">

</rtk-virtualized-participant-list>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-virtualized-participant-list/","name":"rtk-virtualized-participant-list"}}]}
```

---

---
title: rtk-waiting-screen
description: API reference for rtk-waiting-screen component (Angular Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/angular/rtk-waiting-screen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-waiting-screen

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<!-- component.html -->

<rtk-waiting-screen></rtk-waiting-screen>


```

### With Properties

```

<!-- component.html -->

<rtk-waiting-screen

 [meeting]="meeting">

</rtk-waiting-screen>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/","name":"Angular"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/angular/rtk-waiting-screen/","name":"rtk-waiting-screen"}}]}
```

---

---
title: Web Components (HTML)
description: Complete API reference for Web Components (HTML) library components
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Web Components (HTML)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}}]}
```

---

---
title: rtk-ai
description: API reference for rtk-ai component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ai

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |
| view     | AIView   | ✅        | \-                    | View type      |

## Usage Examples

### Basic Usage

```

<rtk-ai></rtk-ai>


```

### With Properties

```

<rtk-ai

 size="md">

</rtk-ai>


```

```

<script>

  const el = document.querySelector("rtk-ai");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai/","name":"rtk-ai"}}]}
```

---

---
title: rtk-ai-toggle
description: API reference for rtk-ai-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ai-toggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-ai-toggle></rtk-ai-toggle>


```

### With Properties

```

<rtk-ai-toggle

 size="md"

 variant"button">

</rtk-ai-toggle>


```

```

<script>

  const el = document.querySelector("rtk-ai-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-toggle/","name":"rtk-ai-toggle"}}]}
```

---

---
title: rtk-ai-transcriptions
description: API reference for rtk-ai-transcriptions component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-transcriptions.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ai-transcriptions

## Properties

| Property              | Type           | Required | Default       | Description            |
| --------------------- | -------------- | -------- | ------------- | ---------------------- |
| initialTranscriptions | Transcript\[\] | ✅        | \-            | Initial transcriptions |
| meeting               | Meeting        | ✅        | \-            | Meeting object         |
| t                     | RtkI18n        | ❌        | useLanguage() | Language               |

## Usage Examples

### Basic Usage

```

<rtk-ai-transcriptions></rtk-ai-transcriptions>


```

### With Properties

```

<rtk-ai-transcriptions>

</rtk-ai-transcriptions>


```

```

<script>

  const el = document.querySelector("rtk-ai-transcriptions");


  el.initialTranscriptions= [];

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-transcriptions/","name":"rtk-ai-transcriptions"}}]}
```

---

---
title: rtk-audio-grid
description: API reference for rtk-audio-grid component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-audio-grid

## Properties

| Property | Type      | Required | Default         | Description                      |
| -------- | --------- | -------- | --------------- | -------------------------------- |
| config   | UIConfig1 | ✅        | \-              | Config                           |
| hideSelf | boolean   | ✅        | \-              | Whether to hide self in the grid |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon Pack                        |
| meeting  | Meeting   | ✅        | \-              | Meeting                          |
| size     | Size1     | ✅        | \-              | Size                             |
| states   | States1   | ✅        | \-              | States                           |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language                         |

## Usage Examples

### Basic Usage

```

<rtk-audio-grid></rtk-audio-grid>


```

### With Properties

```

<rtk-audio-grid>

</rtk-audio-grid>


```

```

<script>

  const el = document.querySelector("rtk-audio-grid");


  el.config= defaultUiConfig

  el.hideSelf= true;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-grid/","name":"rtk-audio-grid"}}]}
```

---

---
title: rtk-audio-tile
description: API reference for rtk-audio-tile component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-tile.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-audio-tile

## Properties

| Property    | Type      | Required | Default         | Description        |
| ----------- | --------- | -------- | --------------- | ------------------ |
| config      | UIConfig  | ✅        | \-              | Config             |
| iconPack    | IconPack1 | ❌        | defaultIconPack | Icon pack          |
| meeting     | Meeting   | ✅        | \-              | Meeting            |
| participant | Peer      | ✅        | \-              | Participant object |
| size        | Size      | ✅        | \-              | Size               |
| states      | States1   | ✅        | \-              | States             |
| t           | RtkI18n1  | ❌        | useLanguage()   | Language           |

## Usage Examples

### Basic Usage

```

<rtk-audio-tile></rtk-audio-tile>


```

### With Properties

```

<rtk-audio-tile>

</rtk-audio-tile>


```

```

<script>

  const el = document.querySelector("rtk-audio-tile");


  el.config= defaultUiConfig

  el.meeting= meeting

  el.participant= participant

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-tile/","name":"rtk-audio-tile"}}]}
```

---

---
title: rtk-audio-visualizer
description: API reference for rtk-audio-visualizer component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-visualizer.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-audio-visualizer

An audio visualizer component which visualizes a participants audio. Commonly used inside `rtk-name-tag`.

## Properties

| Property      | Type                   | Required | Default         | Description                                                                                   |
| ------------- | ---------------------- | -------- | --------------- | --------------------------------------------------------------------------------------------- |
| hideMuted     | boolean                | ✅        | \-              | Hide the visualizer if audio is muted                                                         |
| iconPack      | IconPack               | ❌        | defaultIconPack | Icon pack                                                                                     |
| isScreenShare | boolean                | ✅        | \-              | Audio visualizer for screensharing, it will use screenShareTracks.audio instead of audioTrack |
| participant   | Peer                   | ✅        | \-              | Participant object                                                                            |
| size          | Size                   | ✅        | \-              | Size                                                                                          |
| t             | RtkI18n                | ❌        | useLanguage()   | Language                                                                                      |
| variant       | AudioVisualizerVariant | ✅        | \-              | Variant                                                                                       |

## Usage Examples

### Basic Usage

```

<rtk-audio-visualizer></rtk-audio-visualizer>


```

### With Properties

```

<rtk-audio-visualizer>

</rtk-audio-visualizer>


```

```

<script>

  const el = document.querySelector("rtk-audio-visualizer");


  el.hideMuted= true;

  el.isScreenShare= true;

  el.participant= participant

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-visualizer/","name":"rtk-audio-visualizer"}}]}
```

---

---
title: rtk-avatar
description: API reference for rtk-avatar component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-avatar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-avatar

Avatar component which renders a participant's image or their initials.

## Properties

| Property    | Type                          | Required                          | Default         | Description |                    |
| ----------- | ----------------------------- | --------------------------------- | --------------- | ----------- | ------------------ |
| iconPack    | IconPack                      | ❌                                 | defaultIconPack | Icon pack   |                    |
| participant | Peer \| WaitlistedParticipant | { name: string; picture: string } | ✅               | \-          | Participant object |
| size        | Size                          | ✅                                 | \-              | Size        |                    |
| t           | RtkI18n                       | ❌                                 | useLanguage()   | Language    |                    |
| variant     | AvatarVariant                 | ✅                                 | \-              | Avatar type |                    |

## Usage Examples

### Basic Usage

```

<rtk-avatar></rtk-avatar>


```

### With Properties

```

<rtk-avatar

 participant="example"

 size="md"

 variant="circular">

</rtk-avatar>


```

```

<script>

  const el = document.querySelector("rtk-avatar");


  el.participant= {};

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-avatar/","name":"rtk-avatar"}}]}
```

---

---
title: rtk-breakout-room-manager
description: API reference for rtk-breakout-room-manager component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-manager.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-breakout-room-manager

## Properties

| Property              | Type               | Required | Default         | Description                      |
| --------------------- | ------------------ | -------- | --------------- | -------------------------------- |
| allowDelete           | boolean            | ✅        | \-              | allow room delete                |
| assigningParticipants | boolean            | ✅        | \-              | Enable updating participants     |
| defaultExpanded       | boolean            | ✅        | \-              | display expanded card by default |
| iconPack              | IconPack           | ❌        | defaultIconPack | Icon pack                        |
| isDragMode            | boolean            | ✅        | \-              | Drag mode                        |
| meeting               | Meeting            | ✅        | \-              | Meeting object                   |
| mode                  | 'edit' \| 'create' | ✅        | \-              | Mode in which selector is used   |
| room                  | DraftMeeting       | ✅        | \-              | Connected Room Config Object     |
| states                | States             | ✅        | \-              | States object                    |
| t                     | RtkI18n            | ❌        | useLanguage()   | Language                         |

## Usage Examples

### Basic Usage

```

<rtk-breakout-room-manager></rtk-breakout-room-manager>


```

### With Properties

```

<rtk-breakout-room-manager>

</rtk-breakout-room-manager>


```

```

<script>

  const el = document.querySelector("rtk-breakout-room-manager");


  el.allowDelete= true;

  el.assigningParticipants= true;

  el.defaultExpanded= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-manager/","name":"rtk-breakout-room-manager"}}]}
```

---

---
title: rtk-breakout-room-participants
description: API reference for rtk-breakout-room-participants component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-participants.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-breakout-room-participants

A component which lists all participants, with ability to run privileged actions on each participant according to your permissions.

## Properties

| Property               | Type       | Required | Default         | Description           |
| ---------------------- | ---------- | -------- | --------------- | --------------------- |
| iconPack               | IconPack   | ❌        | defaultIconPack | Icon pack             |
| meeting                | Meeting    | ✅        | \-              | Meeting object        |
| participantIds         | string\[\] | ✅        | \-              | Participant ids       |
| selectedParticipantIds | string\[\] | ✅        | \-              | selected participants |
| t                      | RtkI18n    | ❌        | useLanguage()   | Language              |

## Usage Examples

### Basic Usage

```

<rtk-breakout-room-participants></rtk-breakout-room-participants>


```

### With Properties

```

<rtk-breakout-room-participants

 participantIds="example"

 selectedParticipantIds="example">

</rtk-breakout-room-participants>


```

```

<script>

  const el = document.querySelector("rtk-breakout-room-participants");


  el.meeting= meeting

  el.participantIds= [];

  el.selectedParticipantIds= [];

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-participants/","name":"rtk-breakout-room-participants"}}]}
```

---

---
title: rtk-breakout-rooms-manager
description: API reference for rtk-breakout-rooms-manager component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-manager.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-breakout-rooms-manager

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-breakout-rooms-manager></rtk-breakout-rooms-manager>


```

### With Properties

```

<rtk-breakout-rooms-manager>

</rtk-breakout-rooms-manager>


```

```

<script>

  const el = document.querySelector("rtk-breakout-rooms-manager");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-manager/","name":"rtk-breakout-rooms-manager"}}]}
```

---

---
title: rtk-breakout-rooms-toggle
description: API reference for rtk-breakout-rooms-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-breakout-rooms-toggle

A button which toggles visibility of breakout rooms. You need to pass the `meeting` object to it.

## Properties

| Property | Type              | Required | Default | Description    |
| -------- | ----------------- | -------- | ------- | -------------- |
| iconPack | IconPack          | ✅        | \-      | Icon pack      |
| meeting  | Meeting           | ✅        | \-      | Meeting object |
| size     | Size              | ✅        | \-      | Size           |
| states   | States            | ✅        | \-      | States object  |
| t        | RtkI18n           | ✅        | \-      | Language       |
| variant  | ControlBarVariant | ✅        | \-      | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-breakout-rooms-toggle></rtk-breakout-rooms-toggle>


```

### With Properties

```

<rtk-breakout-rooms-toggle

 size="md">

</rtk-breakout-rooms-toggle>


```

```

<script>

  const el = document.querySelector("rtk-breakout-rooms-toggle");


  el.iconPack= defaultIconPack

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-toggle/","name":"rtk-breakout-rooms-toggle"}}]}
```

---

---
title: rtk-broadcast-message-modal
description: API reference for rtk-broadcast-message-modal component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-broadcast-message-modal.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-broadcast-message-modal

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States1  | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-broadcast-message-modal></rtk-broadcast-message-modal>


```

### With Properties

```

<rtk-broadcast-message-modal>

</rtk-broadcast-message-modal>


```

```

<script>

  const el = document.querySelector("rtk-broadcast-message-modal");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-broadcast-message-modal/","name":"rtk-broadcast-message-modal"}}]}
```

---

---
title: rtk-button
description: API reference for rtk-button component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-button

A button that follows RTK Design System.

## Properties

| Property | Type                        | Required | Default | Description                          |
| -------- | --------------------------- | -------- | ------- | ------------------------------------ |
| disabled | boolean                     | ✅        | \-      | Where the button is disabled or not  |
| kind     | ButtonKind                  | ✅        | \-      | Button type                          |
| reverse  | boolean                     | ✅        | \-      | Whether to reverse order of children |
| size     | Size                        | ✅        | \-      | Size                                 |
| type     | HTMLButtonElement\['type'\] | ✅        | \-      | Button type                          |
| variant  | ButtonVariant               | ✅        | \-      | Button variant                       |

## Usage Examples

### Basic Usage

```

<rtk-button></rtk-button>


```

### With Properties

```

<rtk-button>

</rtk-button>


```

```

<script>

  const el = document.querySelector("rtk-button");


  el.disabled= true;

  el.reverse= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-button/","name":"rtk-button"}}]}
```

---

---
title: rtk-camera-selector
description: API reference for rtk-camera-selector component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-camera-selector

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type               | Required | Default         | Description    |
| -------- | ------------------ | -------- | --------------- | -------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting            | ✅        | \-              | Meeting object |
| size     | Size               | ✅        | \-              | Size           |
| t        | RtkI18n            | ❌        | useLanguage()   | Language       |
| variant  | 'full' \| 'inline' | ✅        | \-              | variant        |

## Usage Examples

### Basic Usage

```

<rtk-camera-selector></rtk-camera-selector>


```

### With Properties

```

<rtk-camera-selector

 size="md">

</rtk-camera-selector>


```

```

<script>

  const el = document.querySelector("rtk-camera-selector");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-selector/","name":"rtk-camera-selector"}}]}
```

---

---
title: rtk-camera-toggle
description: API reference for rtk-camera-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-camera-toggle

A button which toggles your camera.

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-camera-toggle></rtk-camera-toggle>


```

### With Properties

```

<rtk-camera-toggle

 size="md"

 variant"button">

</rtk-camera-toggle>


```

```

<script>

  const el = document.querySelector("rtk-camera-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-toggle/","name":"rtk-camera-toggle"}}]}
```

---

---
title: rtk-caption-toggle
description: API reference for rtk-caption-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-caption-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-caption-toggle

## Properties

| Property | Type              | Required | Default               | Description    |
| -------- | ----------------- | -------- | --------------------- | -------------- |
| config   | UIConfig1         | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack1         | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting           | ✅        | \-                    | Meeting object |
| size     | Size1             | ✅        | \-                    | Size           |
| states   | States1           | ✅        | \-                    | States object  |
| t        | RtkI18n           | ❌        | useLanguage()         | Language       |
| variant  | ControlBarVariant | ✅        | \-                    | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-caption-toggle></rtk-caption-toggle>


```

### With Properties

```

<rtk-caption-toggle

 size="md"

 variant"button">

</rtk-caption-toggle>


```

```

<script>

  const el = document.querySelector("rtk-caption-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-caption-toggle/","name":"rtk-caption-toggle"}}]}
```

---

---
title: rtk-chat
description: API reference for rtk-chat component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat

Fully featured chat component with image & file upload, emoji picker and auto-scroll.

## Properties

| Property  | Type      | Required | Default               | Description    |
| --------- | --------- | -------- | --------------------- | -------------- |
| config    | UIConfig1 | ❌        | createDefaultConfig() | Config         |
| iconPack  | IconPack  | ❌        | defaultIconPack       | Icon pack      |
| meeting   | Meeting   | ✅        | \-                    | Meeting object |
| overrides | Overrides | ❌        | defaultOverrides      | UI Overrides   |
| size      | Size      | ✅        | \-                    | Size           |
| t         | RtkI18n   | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-chat></rtk-chat>


```

### With Properties

```

<rtk-chat

 size="md">

</rtk-chat>


```

```

<script>

  const el = document.querySelector("rtk-chat");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat/","name":"rtk-chat"}}]}
```

---

---
title: rtk-chat-composer-ui
description: API reference for rtk-chat-composer-ui component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-ui.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-composer-ui

@deprecated . This component is deprecated, please use rtk-chat-composer-view instead.

## Properties

| Property           | Type                                                                                      | Required | Default         | Description                         |
| ------------------ | ----------------------------------------------------------------------------------------- | -------- | --------------- | ----------------------------------- |
| canSendFiles       | boolean                                                                                   | ✅        | \-              | Whether user can send file messages |
| canSendTextMessage | boolean                                                                                   | ✅        | \-              | Whether user can send text messages |
| iconPack           | IconPack1                                                                                 | ❌        | defaultIconPack | Icon pack                           |
| prefill            | { suggestedReplies?: string\[\]; editMessage?: TextMessage; replyMessage?: TextMessage; } | ❌        | \-              | prefill the composer                |
| size               | Size1                                                                                     | ✅        | \-              | Size                                |
| t                  | RtkI18n                                                                                   | ❌        | useLanguage()   | Language                            |

## Usage Examples

### Basic Usage

```

<rtk-chat-composer-ui></rtk-chat-composer-ui>


```

### With Properties

```

<rtk-chat-composer-ui

 size="md">

</rtk-chat-composer-ui>


```

```

<script>

  const el = document.querySelector("rtk-chat-composer-ui");


  el.canSendFiles= true;

  el.canSendTextMessage= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-ui/","name":"rtk-chat-composer-ui"}}]}
```

---

---
title: rtk-chat-composer-view
description: API reference for rtk-chat-composer-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-composer-view

A component which renders a chat composer

## Properties

| Property             | Type                                        | Required | Default         | Description                             |
| -------------------- | ------------------------------------------- | -------- | --------------- | --------------------------------------- |
| canSendFiles         | boolean                                     | ✅        | \-              | Whether user can send file messages     |
| canSendTextMessage   | boolean                                     | ✅        | \-              | Whether user can send text messages     |
| iconPack             | IconPack1                                   | ❌        | defaultIconPack | Icon pack                               |
| inputTextPlaceholder | string                                      | ✅        | \-              | Placeholder for text input              |
| isEditing            | boolean                                     | ✅        | \-              | Sets composer to edit mode              |
| maxLength            | number                                      | ✅        | \-              | Max length for text input               |
| message              | string                                      | ✅        | \-              | Message to be pre-populated             |
| quotedMessage        | string                                      | ✅        | \-              | Quote message to be displayed           |
| rateLimits           | { period: number; maxInvocations: number; } | ✅        | \-              | Rate limits                             |
| storageKey           | string                                      | ✅        | \-              | Key for storing message in localStorage |
| t                    | RtkI18n1                                    | ❌        | useLanguage()   | Language                                |

## Usage Examples

### Basic Usage

```

<rtk-chat-composer-view></rtk-chat-composer-view>


```

### With Properties

```

<rtk-chat-composer-view

 inputTextPlaceholder="example">

</rtk-chat-composer-view>


```

```

<script>

  const el = document.querySelector("rtk-chat-composer-view");


  el.canSendFiles= true;

  el.canSendTextMessage= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-view/","name":"rtk-chat-composer-view"}}]}
```

---

---
title: rtk-chat-header
description: API reference for rtk-chat-header component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-header.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-header

## Properties

_No properties available._

## Usage Examples

### Basic Usage

```

<rtk-chat-header></rtk-chat-header>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-header/","name":"rtk-chat-header"}}]}
```

---

---
title: rtk-chat-message
description: API reference for rtk-chat-message component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-message

@deprecated `rtk-chat-message` is deprecated and will be removed soon. Use `rtk-message-view` instead.

## Properties

| Property             | Type        | Required | Default         | Description                            |
| -------------------- | ----------- | -------- | --------------- | -------------------------------------- |
| alignRight           | boolean     | ✅        | \-              | aligns message to right                |
| canDelete            | boolean     | ✅        | \-              | can delete message                     |
| canEdit              | boolean     | ✅        | \-              | can edit message                       |
| canPin               | boolean     | ✅        | \-              | can pin this message                   |
| canReply             | boolean     | ✅        | \-              | can quote reply this message           |
| child                | HTMLElement | ✅        | \-              | Child                                  |
| disableControls      | boolean     | ✅        | \-              | disables controls                      |
| hideAvatar           | boolean     | ✅        | \-              | hides avatar                           |
| iconPack             | IconPack1   | ❌        | defaultIconPack | Icon pack                              |
| isContinued          | boolean     | ✅        | \-              | is continued                           |
| isSelf               | boolean     | ✅        | \-              | if sender is self                      |
| isUnread             | boolean     | ✅        | \-              | is unread                              |
| leftAlign            | boolean     | ✅        | \-              | Whether to left align the chat bubbles |
| message              | Message     | ✅        | \-              | message item                           |
| senderDisplayPicture | string      | ✅        | \-              | sender display picture url             |
| size                 | Size        | ✅        | \-              | Size                                   |
| t                    | RtkI18n1    | ❌        | useLanguage()   | Language                               |

## Usage Examples

### Basic Usage

```

<rtk-chat-message></rtk-chat-message>


```

### With Properties

```

<rtk-chat-message>

</rtk-chat-message>


```

```

<script>

  const el = document.querySelector("rtk-chat-message");


  el.alignRight= true;

  el.canDelete= true;

  el.canEdit= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-message/","name":"rtk-chat-message"}}]}
```

---

---
title: rtk-chat-messages-ui
description: API reference for rtk-chat-messages-ui component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-messages-ui

@deprecated Use `rtk-chat-messages-ui-paginated` instead.

## Properties

| Property       | Type      | Required | Default         | Description                         |
| -------------- | --------- | -------- | --------------- | ----------------------------------- |
| canPinMessages | boolean   | ✅        | \-              | Can current user pin/unpin messages |
| iconPack       | IconPack1 | ❌        | defaultIconPack | Icon pack                           |
| messages       | Chat\[\]  | ✅        | \-              | Chat Messages                       |
| selectedGroup  | string    | ✅        | \-              | Selected group key                  |
| selfUserId     | string    | ✅        | \-              | User ID of self user                |
| size           | Size1     | ✅        | \-              | Size                                |
| t              | RtkI18n   | ❌        | useLanguage()   | Language                            |

## Usage Examples

### Basic Usage

```

<rtk-chat-messages-ui></rtk-chat-messages-ui>


```

### With Properties

```

<rtk-chat-messages-ui

 selectedGroup="example">

</rtk-chat-messages-ui>


```

```

<script>

  const el = document.querySelector("rtk-chat-messages-ui");


  el.canPinMessages= true;

  el.messages= [];

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui/","name":"rtk-chat-messages-ui"}}]}
```

---

---
title: rtk-chat-messages-ui-paginated
description: API reference for rtk-chat-messages-ui-paginated component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui-paginated.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-messages-ui-paginated

## Properties

| Property             | Type                | Required | Default         | Description                                                                                      |
| -------------------- | ------------------- | -------- | --------------- | ------------------------------------------------------------------------------------------------ |
| iconPack             | IconPack            | ❌        | defaultIconPack | Icon pack                                                                                        |
| meeting              | Meeting             | ✅        | \-              | Meeting object                                                                                   |
| privateChatRecipient | Participant \| null | ✅        | \-              | Selected recipient for private chat; when unset, messages are loaded for public chat (Everyone). |
| size                 | Size                | ✅        | \-              | Size                                                                                             |
| t                    | RtkI18n             | ❌        | useLanguage()   | Language                                                                                         |

## Usage Examples

### Basic Usage

```

<rtk-chat-messages-ui-paginated></rtk-chat-messages-ui-paginated>


```

### With Properties

```

<rtk-chat-messages-ui-paginated

 size="md">

</rtk-chat-messages-ui-paginated>


```

```

<script>

  const el = document.querySelector("rtk-chat-messages-ui-paginated");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui-paginated/","name":"rtk-chat-messages-ui-paginated"}}]}
```

---

---
title: rtk-chat-search-results
description: API reference for rtk-chat-search-results component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-search-results.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-search-results

@deprecated `rtk-chat-search-results` is deprecated and will be removed soon. Use `rtk-chat-messages-ui-paginated` instead. -

## Properties

| Property  | Type      | Required | Default         | Description    |
| --------- | --------- | -------- | --------------- | -------------- |
| channelId | string    | ✅        | \-              | Channel id     |
| iconPack  | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting   | Meeting   | ✅        | \-              | Meeting object |
| query     | string    | ✅        | \-              | Search query   |
| t         | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-chat-search-results></rtk-chat-search-results>


```

### With Properties

```

<rtk-chat-search-results

 channelId="example"

 query="example">

</rtk-chat-search-results>


```

```

<script>

  const el = document.querySelector("rtk-chat-search-results");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-search-results/","name":"rtk-chat-search-results"}}]}
```

---

---
title: rtk-chat-selector
description: API reference for rtk-chat-selector component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-selector

## Properties

| Property  | Type       | Required | Default               | Description    |
| --------- | ---------- | -------- | --------------------- | -------------- |
| config    | UIConfig1  | ❌        | createDefaultConfig() | Config         |
| iconPack  | IconPack   | ❌        | defaultIconPack       | Icon pack      |
| meeting   | Meeting    | ✅        | \-                    | Meeting object |
| overrides | Overrides1 | ❌        | defaultOverrides      | UI Overrides   |
| size      | Size       | ✅        | \-                    | Size           |
| states    | States1    | ✅        | \-                    | States object  |
| t         | RtkI18n    | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-chat-selector></rtk-chat-selector>


```

### With Properties

```

<rtk-chat-selector

 size="md">

</rtk-chat-selector>


```

```

<script>

  const el = document.querySelector("rtk-chat-selector");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector/","name":"rtk-chat-selector"}}]}
```

---

---
title: rtk-chat-selector-ui
description: API reference for rtk-chat-selector-ui component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector-ui.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-selector-ui

## Properties

| Property        | Type                   | Required | Default         | Description          |
| --------------- | ---------------------- | -------- | --------------- | -------------------- |
| groups          | ChatGroup\[\]          | ✅        | \-              | Participants         |
| iconPack        | IconPack1              | ❌        | defaultIconPack | Icon pack            |
| selectedGroupId | string                 | ✅        | \-              | Selected participant |
| selfUserId      | string                 | ✅        | \-              | Self User ID         |
| t               | RtkI18n                | ❌        | useLanguage()   | Language             |
| unreadCounts    | Record<string, number> | ✅        | \-              | Unread counts        |

## Usage Examples

### Basic Usage

```

<rtk-chat-selector-ui></rtk-chat-selector-ui>


```

### With Properties

```

<rtk-chat-selector-ui

 selectedGroupId="example"

 selfUserId="example">

</rtk-chat-selector-ui>


```

```

<script>

  const el = document.querySelector("rtk-chat-selector-ui");


  el.groups= [];

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector-ui/","name":"rtk-chat-selector-ui"}}]}
```

---

---
title: rtk-chat-toggle
description: API reference for rtk-chat-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-chat-toggle

A button which toggles visibility of chat. You need to pass the `meeting` object to it to see the unread messages count badge. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'chat' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-chat-toggle></rtk-chat-toggle>


```

### With Properties

```

<rtk-chat-toggle

 size="md"

 variant"button">

</rtk-chat-toggle>


```

```

<script>

  const el = document.querySelector("rtk-chat-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-toggle/","name":"rtk-chat-toggle"}}]}
```

---

---
title: rtk-clock
description: API reference for rtk-clock component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-clock.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-clock

Shows the time elapsed in a meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |

## Usage Examples

### Basic Usage

```

<rtk-clock></rtk-clock>


```

### With Properties

```

<rtk-clock

 size="md">

</rtk-clock>


```

```

<script>

  const el = document.querySelector("rtk-clock");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-clock/","name":"rtk-clock"}}]}
```

---

---
title: rtk-confirmation-modal
description: API reference for rtk-confirmation-modal component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-confirmation-modal.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-confirmation-modal

A confirmation modal.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-confirmation-modal></rtk-confirmation-modal>


```

### With Properties

```

<rtk-confirmation-modal>

</rtk-confirmation-modal>


```

```

<script>

  const el = document.querySelector("rtk-confirmation-modal");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-confirmation-modal/","name":"rtk-confirmation-modal"}}]}
```

---

---
title: rtk-controlbar
description: API reference for rtk-controlbar component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-controlbar

Controlbar component provides you with various designs as variants.

## Properties

| Property      | Type               | Required | Default               | Description                      |
| ------------- | ------------------ | -------- | --------------------- | -------------------------------- |
| config        | UIConfig1          | ❌        | createDefaultConfig() | Config                           |
| disableRender | boolean            | ✅        | \-                    | Whether to render the default UI |
| iconPack      | IconPack1          | ❌        | defaultIconPack       | Icon Pack                        |
| meeting       | Meeting            | ✅        | \-                    | Meeting                          |
| size          | Size               | ✅        | \-                    | Size                             |
| states        | States             | ✅        | \-                    | States                           |
| t             | RtkI18n            | ❌        | useLanguage()         | Language                         |
| variant       | 'solid' \| 'boxed' | ✅        | \-                    | Variant                          |

## Usage Examples

### Basic Usage

```

<rtk-controlbar></rtk-controlbar>


```

### With Properties

```

<rtk-controlbar

 size="md">

</rtk-controlbar>


```

```

<script>

  const el = document.querySelector("rtk-controlbar");


  el.disableRender= true;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar/","name":"rtk-controlbar"}}]}
```

---

---
title: rtk-controlbar-button
description: API reference for rtk-controlbar-button component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-controlbar-button

A skeleton component used for composing custom controlbar buttons.

## Properties

| Property    | Type               | Required | Default         | Description                                                    |
| ----------- | ------------------ | -------- | --------------- | -------------------------------------------------------------- |
| brandIcon   | boolean            | ✅        | \-              | Whether icon requires brand color                              |
| disabled    | boolean            | ✅        | \-              | Whether button is disabled                                     |
| icon        | string             | ✅        | \-              | Icon                                                           |
| iconPack    | IconPack           | ❌        | defaultIconPack | Icon pack                                                      |
| isLoading   | boolean            | ✅        | \-              | Loading state Ignores current icon and shows a spinner if true |
| label       | string             | ✅        | \-              | Label of button                                                |
| showWarning | boolean            | ✅        | \-              | Whether to show warning icon                                   |
| size        | Size               | ✅        | \-              | Size                                                           |
| variant     | ControlBarVariant1 | ✅        | \-              | Variant                                                        |

## Usage Examples

### Basic Usage

```

<rtk-controlbar-button></rtk-controlbar-button>


```

### With Properties

```

<rtk-controlbar-button

 icon="example">

</rtk-controlbar-button>


```

```

<script>

  const el = document.querySelector("rtk-controlbar-button");


  el.brandIcon= true;

  el.disabled= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar-button/","name":"rtk-controlbar-button"}}]}
```

---

---
title: rtk-counter
description: API reference for rtk-counter component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-counter.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-counter

A number picker with increment and decrement buttons.

## Properties

| Property | Type      | Required | Default         | Description   |
| -------- | --------- | -------- | --------------- | ------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack     |
| minValue | number    | ✅        | \-              | Minimum value |
| size     | Size1     | ✅        | \-              | Size          |
| t        | RtkI18n   | ❌        | useLanguage()   | Language      |
| value    | number    | ✅        | \-              | Initial value |

## Usage Examples

### Basic Usage

```

<rtk-counter></rtk-counter>


```

### With Properties

```

<rtk-counter

 size="md">

</rtk-counter>


```

```

<script>

  const el = document.querySelector("rtk-counter");


  el.minValue= 42;

  el.value= 42;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-counter/","name":"rtk-counter"}}]}
```

---

---
title: rtk-debugger
description: API reference for rtk-debugger component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger

A troubleshooting component to identify and fix any issues in the meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-debugger></rtk-debugger>


```

### With Properties

```

<rtk-debugger

 size="md">

</rtk-debugger>


```

```

<script>

  const el = document.querySelector("rtk-debugger");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger/","name":"rtk-debugger"}}]}
```

---

---
title: rtk-debugger-audio
description: API reference for rtk-debugger-audio component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-audio.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-audio

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-debugger-audio></rtk-debugger-audio>


```

### With Properties

```

<rtk-debugger-audio

 size="md">

</rtk-debugger-audio>


```

```

<script>

  const el = document.querySelector("rtk-debugger-audio");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-audio/","name":"rtk-debugger-audio"}}]}
```

---

---
title: rtk-debugger-screenshare
description: API reference for rtk-debugger-screenshare component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-screenshare.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-screenshare

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-debugger-screenshare></rtk-debugger-screenshare>


```

### With Properties

```

<rtk-debugger-screenshare

 size="md">

</rtk-debugger-screenshare>


```

```

<script>

  const el = document.querySelector("rtk-debugger-screenshare");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-screenshare/","name":"rtk-debugger-screenshare"}}]}
```

---

---
title: rtk-debugger-system
description: API reference for rtk-debugger-system component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-system.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-system

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-debugger-system></rtk-debugger-system>


```

### With Properties

```

<rtk-debugger-system

 size="md">

</rtk-debugger-system>


```

```

<script>

  const el = document.querySelector("rtk-debugger-system");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-system/","name":"rtk-debugger-system"}}]}
```

---

---
title: rtk-debugger-toggle
description: API reference for rtk-debugger-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-toggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-debugger-toggle></rtk-debugger-toggle>


```

### With Properties

```

<rtk-debugger-toggle

 size="md"

 variant"button">

</rtk-debugger-toggle>


```

```

<script>

  const el = document.querySelector("rtk-debugger-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-toggle/","name":"rtk-debugger-toggle"}}]}
```

---

---
title: rtk-debugger-video
description: API reference for rtk-debugger-video component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-video.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-debugger-video

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-debugger-video></rtk-debugger-video>


```

### With Properties

```

<rtk-debugger-video

 size="md">

</rtk-debugger-video>


```

```

<script>

  const el = document.querySelector("rtk-debugger-video");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-video/","name":"rtk-debugger-video"}}]}
```

---

---
title: rtk-dialog
description: API reference for rtk-dialog component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-dialog

A dialog component.

## Properties

| Property         | Type     | Required | Default               | Description                            |
| ---------------- | -------- | -------- | --------------------- | -------------------------------------- |
| config           | UIConfig | ❌        | createDefaultConfig() | UI Config                              |
| disableEscapeKey | boolean  | ✅        | \-                    | Whether Escape key can close the modal |
| hideCloseButton  | boolean  | ✅        | \-                    | Whether to show the close button       |
| iconPack         | IconPack | ❌        | defaultIconPack       | Icon pack                              |
| meeting          | Meeting  | ✅        | \-                    | Meeting object                         |
| open             | boolean  | ✅        | \-                    | Whether a dialog is open or not        |
| size             | Size     | ✅        | \-                    | Size                                   |
| states           | States   | ✅        | \-                    | States object                          |
| t                | RtkI18n  | ❌        | useLanguage()         | Language                               |

## Usage Examples

### Basic Usage

```

<rtk-dialog></rtk-dialog>


```

### With Properties

```

<rtk-dialog>

</rtk-dialog>


```

```

<script>

  const el = document.querySelector("rtk-dialog");


  el.disableEscapeKey= true;

  el.hideCloseButton= true;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog/","name":"rtk-dialog"}}]}
```

---

---
title: rtk-dialog-manager
description: API reference for rtk-dialog-manager component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog-manager.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-dialog-manager

A component which handles all dialog elements in a component such as:

* rtk-settings
* rtk-leave-meeting
* rtk-permissions-message
* rtk-image-viewer
* rtk-breakout-rooms-manager This components depends on the values from `states` object.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | UI Config      |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-dialog-manager></rtk-dialog-manager>


```

### With Properties

```

<rtk-dialog-manager

 size="md">

</rtk-dialog-manager>


```

```

<script>

  const el = document.querySelector("rtk-dialog-manager");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog-manager/","name":"rtk-dialog-manager"}}]}
```

---

---
title: rtk-draft-attachment-view
description: API reference for rtk-draft-attachment-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-draft-attachment-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-draft-attachment-view

A component which renders the draft attachment to send

## Properties

| Property   | Type                                     | Required | Default         | Description           |
| ---------- | ---------------------------------------- | -------- | --------------- | --------------------- |
| attachment | { type: 'image' \| 'file'; file: File; } | ✅        | \-              | Attachment to display |
| iconPack   | IconPack1                                | ❌        | defaultIconPack | Icon pack             |
| t          | RtkI18n1                                 | ❌        | useLanguage()   | Language              |

## Usage Examples

### Basic Usage

```

<rtk-draft-attachment-view></rtk-draft-attachment-view>


```

### With Properties

```

<rtk-draft-attachment-view>

</rtk-draft-attachment-view>


```

```

<script>

  const el = document.querySelector("rtk-draft-attachment-view");


  el.attachment= {};

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-draft-attachment-view/","name":"rtk-draft-attachment-view"}}]}
```

---

---
title: rtk-emoji-picker
description: API reference for rtk-emoji-picker component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-emoji-picker

A very simple emoji picker component.

## Properties

| Property        | Type     | Required | Default         | Description                               |
| --------------- | -------- | -------- | --------------- | ----------------------------------------- |
| focusWhenOpened | boolean  | ✅        | \-              | Controls whether or not to focus on mount |
| iconPack        | IconPack | ❌        | defaultIconPack | Icon pack                                 |
| t               | RtkI18n  | ❌        | useLanguage()   | Language                                  |

## Usage Examples

### Basic Usage

```

<rtk-emoji-picker></rtk-emoji-picker>


```

### With Properties

```

<rtk-emoji-picker>

</rtk-emoji-picker>


```

```

<script>

  const el = document.querySelector("rtk-emoji-picker");


  el.focusWhenOpened= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker/","name":"rtk-emoji-picker"}}]}
```

---

---
title: rtk-emoji-picker-button
description: API reference for rtk-emoji-picker-button component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-emoji-picker-button

## Properties

| Property | Type      | Required | Default         | Description            |
| -------- | --------- | -------- | --------------- | ---------------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack              |
| isActive | boolean   | ✅        | \-              | Active state indicator |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language               |

## Usage Examples

### Basic Usage

```

<rtk-emoji-picker-button></rtk-emoji-picker-button>


```

### With Properties

```

<rtk-emoji-picker-button>

</rtk-emoji-picker-button>


```

```

<script>

  const el = document.querySelector("rtk-emoji-picker-button");


  el.isActive= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker-button/","name":"rtk-emoji-picker-button"}}]}
```

---

---
title: rtk-ended-screen
description: API reference for rtk-ended-screen component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-ended-screen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ended-screen

A screen which shows a meeting has ended.

## Properties

| Property | Type     | Required | Default               | Description   |
| -------- | -------- | -------- | --------------------- | ------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack     |
| meeting  | Meeting  | ✅        | \-                    | Global states |
| size     | Size     | ✅        | \-                    | Size          |
| states   | States   | ✅        | \-                    | Global states |
| t        | RtkI18n  | ❌        | useLanguage()         | Language      |

## Usage Examples

### Basic Usage

```

<rtk-ended-screen></rtk-ended-screen>


```

### With Properties

```

<rtk-ended-screen

 size="md">

</rtk-ended-screen>


```

```

<script>

  const el = document.querySelector("rtk-ended-screen");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-ended-screen/","name":"rtk-ended-screen"}}]}
```

---

---
title: rtk-file-dropzone
description: API reference for rtk-file-dropzone component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-dropzone.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-file-dropzone

## Properties

| Property | Type        | Required | Default         | Description                                 |
| -------- | ----------- | -------- | --------------- | ------------------------------------------- |
| hostEl   | HTMLElement | ✅        | \-              | Host element on which drop events to attach |
| iconPack | IconPack1   | ❌        | defaultIconPack | Icon pack                                   |
| t        | RtkI18n1    | ❌        | useLanguage()   | Language                                    |

## Usage Examples

### Basic Usage

```

<rtk-file-dropzone></rtk-file-dropzone>


```

### With Properties

```

<rtk-file-dropzone>

</rtk-file-dropzone>


```

```

<script>

  const el = document.querySelector("rtk-file-dropzone");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-dropzone/","name":"rtk-file-dropzone"}}]}
```

---

---
title: rtk-file-message
description: API reference for rtk-file-message component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-file-message

@deprecated `rtk-file-message` is deprecated and will be removed soon. Use `rtk-file-message-view` instead. A component which renders a file message from chat.

## Properties

| Property    | Type        | Required | Default         | Description                                             |
| ----------- | ----------- | -------- | --------------- | ------------------------------------------------------- |
| iconPack    | IconPack    | ❌        | defaultIconPack | Icon pack                                               |
| isContinued | boolean     | ✅        | \-              | Whether the message is continued by same user           |
| message     | FileMessage | ✅        | \-              | Text message object                                     |
| now         | Date        | ✅        | \-              | Date object of now, to calculate distance between dates |
| showBubble  | boolean     | ✅        | \-              | show message in bubble                                  |
| t           | RtkI18n     | ❌        | useLanguage()   | Language                                                |

## Usage Examples

### Basic Usage

```

<rtk-file-message></rtk-file-message>


```

### With Properties

```

<rtk-file-message>

</rtk-file-message>


```

```

<script>

  const el = document.querySelector("rtk-file-message");


  el.isContinued= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message/","name":"rtk-file-message"}}]}
```

---

---
title: rtk-file-message-view
description: API reference for rtk-file-message-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-file-message-view

A component which renders a file message.

## Properties

| Property | Type      | Required | Default         | Description      |
| -------- | --------- | -------- | --------------- | ---------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack        |
| name     | string    | ✅        | \-              | Name of the file |
| size     | number    | ✅        | \-              | Size of the file |
| url      | string    | ✅        | \-              | Url of the file  |

## Usage Examples

### Basic Usage

```

<rtk-file-message-view></rtk-file-message-view>


```

### With Properties

```

<rtk-file-message-view

 name="example"

 url="example">

</rtk-file-message-view>


```

```

<script>

  const el = document.querySelector("rtk-file-message-view");


  el.size= 42;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message-view/","name":"rtk-file-message-view"}}]}
```

---

---
title: rtk-file-picker-button
description: API reference for rtk-file-picker-button component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-picker-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-file-picker-button

## Properties

| Property | Type            | Required | Default         | Description                               |
| -------- | --------------- | -------- | --------------- | ----------------------------------------- |
| filter   | string          | ✅        | \-              | File type filter to open file picker with |
| icon     | keyof IconPack1 | ✅        | \-              | Icon                                      |
| iconPack | IconPack1       | ❌        | defaultIconPack | Icon pack                                 |
| label    | string          | ✅        | \-              | Label for tooltip                         |
| t        | RtkI18n1        | ❌        | useLanguage()   | Language                                  |

## Usage Examples

### Basic Usage

```

<rtk-file-picker-button></rtk-file-picker-button>


```

### With Properties

```

<rtk-file-picker-button

 filter="example"

 label="example">

</rtk-file-picker-button>


```

```

<script>

  const el = document.querySelector("rtk-file-picker-button");


  el.icon= defaultIconPack

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-picker-button/","name":"rtk-file-picker-button"}}]}
```

---

---
title: rtk-fullscreen-toggle
description: API reference for rtk-fullscreen-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-fullscreen-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-fullscreen-toggle

A button which toggles full screen mode for any existing `rtk-meeting` component in the DOM.

## Properties

| Property      | Type              | Required | Default         | Description                  |
| ------------- | ----------------- | -------- | --------------- | ---------------------------- |
| iconPack      | IconPack          | ❌        | defaultIconPack | Icon pack                    |
| size          | Size              | ✅        | \-              | Size                         |
| states        | States            | ✅        | \-              | States object                |
| t             | RtkI18n           | ❌        | useLanguage()   | Language                     |
| targetElement | HTMLElement       | ✅        | \-              | Target Element to fullscreen |
| variant       | ControlBarVariant | ✅        | \-              | Variant                      |

## Usage Examples

### Basic Usage

```

<rtk-fullscreen-toggle></rtk-fullscreen-toggle>


```

### With Properties

```

<rtk-fullscreen-toggle

 size="md"

 variant"button">

</rtk-fullscreen-toggle>


```

```

<script>

  const el = document.querySelector("rtk-fullscreen-toggle");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-fullscreen-toggle/","name":"rtk-fullscreen-toggle"}}]}
```

---

---
title: rtk-grid
description: API reference for rtk-grid component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-grid

The main grid component which abstracts all the grid handling logic and renders it for you.

## Properties

| Property    | Type       | Required | Default               | Description                          |
| ----------- | ---------- | -------- | --------------------- | ------------------------------------ |
| aspectRatio | string     | ✅        | \-                    | The aspect ratio of each participant |
| config      | UIConfig   | ❌        | createDefaultConfig() | Config object                        |
| gap         | number     | ✅        | \-                    | Gap between participants             |
| gridSize    | GridSize   | ✅        | \-                    | Grid size                            |
| iconPack    | IconPack   | ❌        | defaultIconPack       | Icon pack                            |
| layout      | GridLayout | ✅        | \-                    | Grid Layout                          |
| meeting     | Meeting    | ✅        | \-                    | Meeting object                       |
| overrides   | any        | ✅        | \-                    | @deprecated                          |
| size        | Size       | ✅        | \-                    | Size                                 |
| states      | States     | ✅        | \-                    | States                               |
| t           | RtkI18n    | ❌        | useLanguage()         | Language                             |

## Usage Examples

### Basic Usage

```

<rtk-grid></rtk-grid>


```

### With Properties

```

<rtk-grid

 aspectRatio="example"

 gridSize="md">

</rtk-grid>


```

```

<script>

  const el = document.querySelector("rtk-grid");


  el.gap= 42;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid/","name":"rtk-grid"}}]}
```

---

---
title: rtk-grid-pagination
description: API reference for rtk-grid-pagination component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid-pagination.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-grid-pagination

A component which allows you to change current page and view mode of active participants list. This is reflected in the `rtk-grid` component.

## Properties

| Property | Type                   | Required | Default         | Description    |
| -------- | ---------------------- | -------- | --------------- | -------------- |
| iconPack | IconPack               | ❌        | defaultIconPack | Icon Pack      |
| meeting  | Meeting                | ✅        | \-              | Meeting object |
| size     | Size                   | ✅        | \-              | Size Prop      |
| states   | States                 | ✅        | \-              | States         |
| t        | RtkI18n                | ❌        | useLanguage()   | Language       |
| variant  | GridPaginationVariants | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-grid-pagination></rtk-grid-pagination>


```

### With Properties

```

<rtk-grid-pagination

 size="md">

</rtk-grid-pagination>


```

```

<script>

  const el = document.querySelector("rtk-grid-pagination");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid-pagination/","name":"rtk-grid-pagination"}}]}
```

---

---
title: rtk-header
description: API reference for rtk-header component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-header.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-header

A component that houses all the header components.

## Properties

| Property      | Type               | Required | Default               | Description                      |
| ------------- | ------------------ | -------- | --------------------- | -------------------------------- |
| config        | UIConfig1          | ❌        | createDefaultConfig() | Config                           |
| disableRender | boolean            | ✅        | \-                    | Whether to render the default UI |
| iconPack      | IconPack1          | ❌        | defaultIconPack       | Icon Pack                        |
| meeting       | Meeting            | ✅        | \-                    | Meeting                          |
| size          | Size               | ✅        | \-                    | Size                             |
| states        | States             | ✅        | \-                    | States                           |
| t             | RtkI18n            | ❌        | useLanguage()         | Language                         |
| variant       | 'solid' \| 'boxed' | ✅        | \-                    | Variant                          |

## Usage Examples

### Basic Usage

```

<rtk-header></rtk-header>


```

### With Properties

```

<rtk-header

 size="md">

</rtk-header>


```

```

<script>

  const el = document.querySelector("rtk-header");


  el.disableRender= true;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-header/","name":"rtk-header"}}]}
```

---

---
title: rtk-icon
description: API reference for rtk-icon component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-icon.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-icon

An icon component which accepts an svg string and renders it.

## Properties

| Property | Type        | Required | Default | Description  |
| -------- | ----------- | -------- | ------- | ------------ |
| icon     | string      | ✅        | \-      | Icon         |
| size     | Size1       | ✅        | \-      | Size         |
| variant  | IconVariant | ✅        | \-      | Icon variant |

## Usage Examples

### Basic Usage

```

<rtk-icon></rtk-icon>


```

### With Properties

```

<rtk-icon

 icon="example"

 size="md"

 variant="primary">

</rtk-icon>


```

```

<script>

  const el = document.querySelector("rtk-icon");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-icon/","name":"rtk-icon"}}]}
```

---

---
title: rtk-idle-screen
description: API reference for rtk-idle-screen component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-idle-screen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-idle-screen

A screen that handles the idle state, i.e; when you are waiting for data about the meeting, specifically the `meeting` object.

## Properties

| Property | Type     | Required | Default               | Description   |
| -------- | -------- | -------- | --------------------- | ------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack     |
| meeting  | Meeting  | ✅        | \-                    | Meeting       |
| t        | RtkI18n  | ❌        | useLanguage()         | Language      |

## Usage Examples

### Basic Usage

```

<rtk-idle-screen></rtk-idle-screen>


```

### With Properties

```

<rtk-idle-screen>

</rtk-idle-screen>


```

```

<script>

  const el = document.querySelector("rtk-idle-screen");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-idle-screen/","name":"rtk-idle-screen"}}]}
```

---

---
title: rtk-image-message
description: API reference for rtk-image-message component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-image-message

@deprecated `rtk-image-message` is deprecated and will be removed soon. Use `rtk-image-message-view` instead. A component which renders an image message from chat.

## Properties

| Property    | Type         | Required | Default         | Description                                             |
| ----------- | ------------ | -------- | --------------- | ------------------------------------------------------- |
| iconPack    | IconPack     | ❌        | defaultIconPack | Icon pack                                               |
| isContinued | boolean      | ✅        | \-              | Whether the message is continued by same user           |
| message     | ImageMessage | ✅        | \-              | Text message object                                     |
| now         | Date         | ✅        | \-              | Date object of now, to calculate distance between dates |
| showBubble  | boolean      | ✅        | \-              | show message in bubble                                  |
| t           | RtkI18n      | ❌        | useLanguage()   | Language                                                |

## Usage Examples

### Basic Usage

```

<rtk-image-message></rtk-image-message>


```

### With Properties

```

<rtk-image-message>

</rtk-image-message>


```

```

<script>

  const el = document.querySelector("rtk-image-message");


  el.isContinued= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message/","name":"rtk-image-message"}}]}
```

---

---
title: rtk-image-message-view
description: API reference for rtk-image-message-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-image-message-view

A component which renders an image message.

## Properties

| Property | Type      | Required | Default         | Description      |
| -------- | --------- | -------- | --------------- | ---------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack        |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language         |
| url      | string    | ✅        | \-              | Url of the image |

## Usage Examples

### Basic Usage

```

<rtk-image-message-view></rtk-image-message-view>


```

### With Properties

```

<rtk-image-message-view

 url="example">

</rtk-image-message-view>


```

```

<script>

  const el = document.querySelector("rtk-image-message-view");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message-view/","name":"rtk-image-message-view"}}]}
```

---

---
title: rtk-image-viewer
description: API reference for rtk-image-viewer component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-viewer.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-image-viewer

A component which shows an image sent via chat.

## Properties

| Property | Type         | Required | Default         | Description   |
| -------- | ------------ | -------- | --------------- | ------------- |
| iconPack | IconPack     | ❌        | defaultIconPack | Icon pack     |
| image    | ImageMessage | ✅        | \-              | Image message |
| size     | Size         | ✅        | \-              | Size          |
| t        | RtkI18n      | ❌        | useLanguage()   | Language      |

## Usage Examples

### Basic Usage

```

<rtk-image-viewer></rtk-image-viewer>


```

### With Properties

```

<rtk-image-viewer

 size="md">

</rtk-image-viewer>


```

```

<script>

  const el = document.querySelector("rtk-image-viewer");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-viewer/","name":"rtk-image-viewer"}}]}
```

---

---
title: rtk-information-tooltip
description: API reference for rtk-information-tooltip component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-information-tooltip.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-information-tooltip

## Properties

| Property | Type      | Required | Default         | Description |
| -------- | --------- | -------- | --------------- | ----------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack   |

## Usage Examples

### Basic Usage

```

<rtk-information-tooltip></rtk-information-tooltip>


```

### With Properties

```

<rtk-information-tooltip>

</rtk-information-tooltip>


```

```

<script>

  const el = document.querySelector("rtk-information-tooltip");


  el.iconPack= defaultIconPack

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-information-tooltip/","name":"rtk-information-tooltip"}}]}
```

---

---
title: rtk-join-stage
description: API reference for rtk-join-stage component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-join-stage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-join-stage

## Properties

| Property   | Type            | Required | Default               | Description    |
| ---------- | --------------- | -------- | --------------------- | -------------- |
| config     | UIConfig        | ❌        | createDefaultConfig() | UI Config      |
| dataConfig | ModalDataConfig | ✅        | \-                    | Content Config |
| iconPack   | IconPack        | ❌        | defaultIconPack       | Icon pack      |
| meeting    | Meeting         | ✅        | \-                    | Meeting object |
| size       | Size            | ✅        | \-                    | Size           |
| states     | States          | ✅        | \-                    | States object  |
| t          | RtkI18n         | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-join-stage></rtk-join-stage>


```

### With Properties

```

<rtk-join-stage

 size="md">

</rtk-join-stage>


```

```

<script>

  const el = document.querySelector("rtk-join-stage");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-join-stage/","name":"rtk-join-stage"}}]}
```

---

---
title: rtk-leave-button
description: API reference for rtk-leave-button component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-leave-button

A button which toggles visilibility of the leave confirmation dialog.

## Properties

| Property | Type              | Required | Default         | Description |
| -------- | ----------------- | -------- | --------------- | ----------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack   |
| size     | Size              | ✅        | \-              | Size        |
| t        | RtkI18n           | ❌        | useLanguage()   | Language    |
| variant  | ControlBarVariant | ✅        | \-              | Variant     |

## Usage Examples

### Basic Usage

```

<rtk-leave-button></rtk-leave-button>


```

### With Properties

```

<rtk-leave-button

 size="md"

 variant"button">

</rtk-leave-button>


```

```

<script>

  const el = document.querySelector("rtk-leave-button");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-button/","name":"rtk-leave-button"}}]}
```

---

---
title: rtk-leave-meeting
description: API reference for rtk-leave-meeting component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-meeting.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-leave-meeting

A component which allows you to leave a meeting or end meeting for all, if you have the permission.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-leave-meeting></rtk-leave-meeting>


```

### With Properties

```

<rtk-leave-meeting>

</rtk-leave-meeting>


```

```

<script>

  const el = document.querySelector("rtk-leave-meeting");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-meeting/","name":"rtk-leave-meeting"}}]}
```

---

---
title: rtk-livestream-indicator
description: API reference for rtk-livestream-indicator component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-indicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-livestream-indicator

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-livestream-indicator></rtk-livestream-indicator>


```

### With Properties

```

<rtk-livestream-indicator

 size="md">

</rtk-livestream-indicator>


```

```

<script>

  const el = document.querySelector("rtk-livestream-indicator");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-indicator/","name":"rtk-livestream-indicator"}}]}
```

---

---
title: rtk-livestream-player
description: API reference for rtk-livestream-player component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-player.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-livestream-player

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-livestream-player></rtk-livestream-player>


```

### With Properties

```

<rtk-livestream-player

 size="md">

</rtk-livestream-player>


```

```

<script>

  const el = document.querySelector("rtk-livestream-player");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-player/","name":"rtk-livestream-player"}}]}
```

---

---
title: rtk-livestream-toggle
description: API reference for rtk-livestream-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-livestream-toggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size1             | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-livestream-toggle></rtk-livestream-toggle>


```

### With Properties

```

<rtk-livestream-toggle

 size="md"

 variant"button">

</rtk-livestream-toggle>


```

```

<script>

  const el = document.querySelector("rtk-livestream-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-toggle/","name":"rtk-livestream-toggle"}}]}
```

---

---
title: rtk-logo
description: API reference for rtk-logo component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-logo.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-logo

A component which loads the logo from your config, or via the `logo-url` attribute.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| logoUrl  | string   | ✅        | \-                    | Logo URL       |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-logo></rtk-logo>


```

### With Properties

```

<rtk-logo

 logoUrl="example">

</rtk-logo>


```

```

<script>

  const el = document.querySelector("rtk-logo");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-logo/","name":"rtk-logo"}}]}
```

---

---
title: rtk-markdown-view
description: API reference for rtk-markdown-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-markdown-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-markdown-view

## Properties

| Property  | Type   | Required | Default | Description                              |
| --------- | ------ | -------- | ------- | ---------------------------------------- |
| maxLength | number | ✅        | \-      | max length of text to render as markdown |
| text      | string | ✅        | \-      | raw text to render as markdown           |

## Usage Examples

### Basic Usage

```

<rtk-markdown-view></rtk-markdown-view>


```

### With Properties

```

<rtk-markdown-view

 text="example">

</rtk-markdown-view>


```

```

<script>

  const el = document.querySelector("rtk-markdown-view");


  el.maxLength= 42;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-markdown-view/","name":"rtk-markdown-view"}}]}
```

---

---
title: rtk-meeting
description: API reference for rtk-meeting component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-meeting

A single component which renders an entire meeting UI. It loads your preset and renders the UI based on it. With this component, you don't have to handle all the states, dialogs and other smaller bits of managing the application.

## Properties

| Property             | Type        | Required | Default          | Description                                                         |
| -------------------- | ----------- | -------- | ---------------- | ------------------------------------------------------------------- |
| applyDesignSystem    | boolean     | ✅        | \-               | Whether to apply the design system on the document root from config |
| config               | UIConfig    | ✅        | \-               | UI Config                                                           |
| gridLayout           | GridLayout1 | ✅        | \-               | Grid layout                                                         |
| iconPack             | IconPack    | ❌        | defaultIconPack  | Icon pack                                                           |
| leaveOnUnmount       | boolean     | ✅        | \-               | Whether participant should leave when this component gets unmounted |
| loadConfigFromPreset | boolean     | ✅        | \-               | Whether to load config from preset                                  |
| meeting              | Meeting     | ✅        | \-               | Meeting object                                                      |
| mode                 | MeetingMode | ✅        | \-               | Fill type                                                           |
| overrides            | Overrides   | ❌        | defaultOverrides | UI Kit Overrides                                                    |
| showSetupScreen      | boolean     | ✅        | \-               | Whether to show setup screen or not                                 |
| size                 | Size        | ✅        | \-               | Size                                                                |
| t                    | RtkI18n     | ❌        | useLanguage()    | Language                                                            |

## Usage Examples

### Basic Usage

```

<rtk-meeting></rtk-meeting>


```

### With Properties

```

<rtk-meeting>

</rtk-meeting>


```

```

<script>

  const el = document.querySelector("rtk-meeting");


  el.applyDesignSystem= true;

  el.config= defaultUiConfig

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting/","name":"rtk-meeting"}}]}
```

---

---
title: rtk-meeting-title
description: API reference for rtk-meeting-title component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting-title.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-meeting-title

Displays the title of the meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-meeting-title></rtk-meeting-title>


```

### With Properties

```

<rtk-meeting-title>

</rtk-meeting-title>


```

```

<script>

  const el = document.querySelector("rtk-meeting-title");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting-title/","name":"rtk-meeting-title"}}]}
```

---

---
title: rtk-menu
description: API reference for rtk-menu component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-menu

A menu component.

## Properties

| Property  | Type      | Required | Default         | Description       |
| --------- | --------- | -------- | --------------- | ----------------- |
| iconPack  | IconPack  | ❌        | defaultIconPack | Icon pack         |
| offset    | number    | ✅        | \-              | Offset in px      |
| placement | Placement | ✅        | \-              | Placement of menu |
| size      | Size      | ✅        | \-              | Size              |
| t         | RtkI18n   | ❌        | useLanguage()   | Language          |

## Usage Examples

### Basic Usage

```

<rtk-menu></rtk-menu>


```

### With Properties

```

<rtk-menu

 size="md">

</rtk-menu>


```

```

<script>

  const el = document.querySelector("rtk-menu");


  el.offset= 42;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu/","name":"rtk-menu"}}]}
```

---

---
title: rtk-menu-item
description: API reference for rtk-menu-item component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-item.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-menu-item

A menu item component.

## Properties

| Property    | Type                     | Required | Default         | Description |
| ----------- | ------------------------ | -------- | --------------- | ----------- |
| iconPack    | IconPack                 | ❌        | defaultIconPack | Icon pack   |
| menuVariant | 'primary' \| 'secondary' | ✅        | \-              | Variant     |
| size        | Size                     | ✅        | \-              | Size        |
| t           | RtkI18n                  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<rtk-menu-item></rtk-menu-item>


```

### With Properties

```

<rtk-menu-item

 size="md">

</rtk-menu-item>


```

```

<script>

  const el = document.querySelector("rtk-menu-item");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-item/","name":"rtk-menu-item"}}]}
```

---

---
title: rtk-menu-list
description: API reference for rtk-menu-list component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-menu-list

A menu list component.

## Properties

| Property    | Type                     | Required | Default         | Description |
| ----------- | ------------------------ | -------- | --------------- | ----------- |
| iconPack    | IconPack                 | ❌        | defaultIconPack | Icon pack   |
| menuVariant | 'primary' \| 'secondary' | ✅        | \-              | Variant     |
| t           | RtkI18n                  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<rtk-menu-list></rtk-menu-list>


```

### With Properties

```

<rtk-menu-list>

</rtk-menu-list>


```

```

<script>

  const el = document.querySelector("rtk-menu-list");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-list/","name":"rtk-menu-list"}}]}
```

---

---
title: rtk-message-list-view
description: API reference for rtk-message-list-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-list-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-message-list-view

A component which renders list of messages.

## Properties

| Property          | Type                              | Required | Default         | Description                                                                    |
| ----------------- | --------------------------------- | -------- | --------------- | ------------------------------------------------------------------------------ |
| estimateItemSize  | number                            | ✅        | \-              | Estimated height of an item                                                    |
| iconPack          | IconPack1                         | ❌        | defaultIconPack | Icon pack                                                                      |
| loadMore          | (lastMessage: Message)            | ✅        | \-              | Function to load more messages. Messages returned from this will be preprended |
| messages          | Message\[\]                       | ✅        | \-              | Messages to render                                                             |
| renderer          | (message: Message, index: number) | ✅        | \-              | Render function of the message                                                 |
| visibleItemsCount | number                            | ✅        | \-              | Maximum visible messages                                                       |

## Usage Examples

### Basic Usage

```

<rtk-message-list-view></rtk-message-list-view>


```

### With Properties

```

<rtk-message-list-view>

</rtk-message-list-view>


```

```

<script>

  const el = document.querySelector("rtk-message-list-view");


  el.estimateItemSize= 42;

  el.messages= [];

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-list-view/","name":"rtk-message-list-view"}}]}
```

---

---
title: rtk-message-view
description: API reference for rtk-message-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-message-view

## Properties

| Property       | Type                     | Required | Default         | Description                             |
| -------------- | ------------------------ | -------- | --------------- | --------------------------------------- |
| actions        | MessageAction\[\]        | ✅        | \-              | List of actions to show in menu         |
| authorName     | string                   | ✅        | \-              | Author display label                    |
| avatarUrl      | string                   | ✅        | \-              | Avatar image url                        |
| hideAuthorName | boolean                  | ✅        | \-              | Hides author display label              |
| hideAvatar     | boolean                  | ✅        | \-              | Hides avatar                            |
| hideMetadata   | boolean                  | ✅        | \-              | Hides metadata (time)                   |
| iconPack       | IconPack1                | ❌        | defaultIconPack | Icon pack                               |
| isEdited       | boolean                  | ✅        | \-              | Has the message been edited             |
| isSelf         | boolean                  | ✅        | \-              | Is the message sent by the current user |
| messageType    | Message\['type'\]        | ✅        | \-              | Type of message                         |
| pinned         | boolean                  | ✅        | \-              | Is message pinned                       |
| time           | Date                     | ✅        | \-              | Time when message was sent              |
| variant        | 'plain' \| 'bubble'      | ✅        | \-              | Appearance                              |
| viewType       | 'incoming' \| 'outgoing' | ✅        | \-              | Render                                  |

## Usage Examples

### Basic Usage

```

<rtk-message-view></rtk-message-view>


```

### With Properties

```

<rtk-message-view

 authorName="example"

 avatarUrl="example">

</rtk-message-view>


```

```

<script>

  const el = document.querySelector("rtk-message-view");


  el.actions= [];

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-view/","name":"rtk-message-view"}}]}
```

---

---
title: rtk-mic-toggle
description: API reference for rtk-mic-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-mic-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-mic-toggle

A button which toggles your microphone.

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-mic-toggle></rtk-mic-toggle>


```

### With Properties

```

<rtk-mic-toggle

 size="md"

 variant"button">

</rtk-mic-toggle>


```

```

<script>

  const el = document.querySelector("rtk-mic-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-mic-toggle/","name":"rtk-mic-toggle"}}]}
```

---

---
title: rtk-microphone-selector
description: API reference for rtk-microphone-selector component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-microphone-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-microphone-selector

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type               | Required | Default         | Description    |
| -------- | ------------------ | -------- | --------------- | -------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting            | ✅        | \-              | Meeting object |
| size     | Size               | ✅        | \-              | Size           |
| t        | RtkI18n            | ❌        | useLanguage()   | Language       |
| variant  | 'full' \| 'inline' | ✅        | \-              | variant        |

## Usage Examples

### Basic Usage

```

<rtk-microphone-selector></rtk-microphone-selector>


```

### With Properties

```

<rtk-microphone-selector

 size="md">

</rtk-microphone-selector>


```

```

<script>

  const el = document.querySelector("rtk-microphone-selector");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-microphone-selector/","name":"rtk-microphone-selector"}}]}
```

---

---
title: rtk-mixed-grid
description: API reference for rtk-mixed-grid component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-mixed-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-mixed-grid

A grid component which handles screenshares, plugins and participants.

## Properties

| Property                | Type          | Required | Default               | Description                                           |
| ----------------------- | ------------- | -------- | --------------------- | ----------------------------------------------------- |
| aspectRatio             | string        | ✅        | \-                    | Aspect Ratio of participant tile Format: width:height |
| config                  | UIConfig      | ❌        | createDefaultConfig() | UI Config                                             |
| gap                     | number        | ✅        | \-                    | Gap between participant tiles                         |
| gridSize                | GridSize1     | ✅        | \-                    | Grid size                                             |
| iconPack                | IconPack      | ❌        | defaultIconPack       | Icon Pack                                             |
| layout                  | GridLayout1   | ✅        | \-                    | Grid Layout                                           |
| meeting                 | Meeting       | ✅        | \-                    | Meeting object                                        |
| participants            | Peer\[\]      | ✅        | \-                    | Participants                                          |
| pinnedParticipants      | Peer\[\]      | ✅        | \-                    | Pinned Participants                                   |
| plugins                 | RTKPlugin\[\] | ✅        | \-                    | Active Plugins                                        |
| screenShareParticipants | Peer\[\]      | ✅        | \-                    | Screenshare Participants                              |
| size                    | Size          | ✅        | \-                    | Size                                                  |
| states                  | States        | ✅        | \-                    | States object                                         |
| t                       | RtkI18n       | ❌        | useLanguage()         | Language                                              |

## Usage Examples

### Basic Usage

```

<rtk-mixed-grid></rtk-mixed-grid>


```

### With Properties

```

<rtk-mixed-grid

 aspectRatio="example"

 gridSize="md">

</rtk-mixed-grid>


```

```

<script>

  const el = document.querySelector("rtk-mixed-grid");


  el.gap= 42;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-mixed-grid/","name":"rtk-mixed-grid"}}]}
```

---

---
title: rtk-more-toggle
description: API reference for rtk-more-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-more-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-more-toggle

A button which toggles visibility of a more menu. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeMoreMenu: boolean; }


```

## Properties

| Property | Type     | Required | Default         | Description   |
| -------- | -------- | -------- | --------------- | ------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack     |
| size     | Size     | ✅        | \-              | Size          |
| states   | States   | ✅        | \-              | States object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language      |

## Usage Examples

### Basic Usage

```

<rtk-more-toggle></rtk-more-toggle>


```

### With Properties

```

<rtk-more-toggle

 size="md">

</rtk-more-toggle>


```

```

<script>

  const el = document.querySelector("rtk-more-toggle");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-more-toggle/","name":"rtk-more-toggle"}}]}
```

---

---
title: rtk-mute-all-button
description: API reference for rtk-mute-all-button component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-button.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-mute-all-button

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack1         | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size1             | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-mute-all-button></rtk-mute-all-button>


```

### With Properties

```

<rtk-mute-all-button

 size="md"

 variant"button">

</rtk-mute-all-button>


```

```

<script>

  const el = document.querySelector("rtk-mute-all-button");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-button/","name":"rtk-mute-all-button"}}]}
```

---

---
title: rtk-mute-all-confirmation
description: API reference for rtk-mute-all-confirmation component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-confirmation.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-mute-all-confirmation

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-mute-all-confirmation></rtk-mute-all-confirmation>


```

### With Properties

```

<rtk-mute-all-confirmation>

</rtk-mute-all-confirmation>


```

```

<script>

  const el = document.querySelector("rtk-mute-all-confirmation");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-confirmation/","name":"rtk-mute-all-confirmation"}}]}
```

---

---
title: rtk-name-tag
description: API reference for rtk-name-tag component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-name-tag.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-name-tag

A component which shows a participant's name.

## Properties

| Property      | Type              | Required | Default         | Description                               |
| ------------- | ----------------- | -------- | --------------- | ----------------------------------------- |
| iconPack      | IconPack          | ❌        | defaultIconPack | Icon pack                                 |
| isScreenShare | boolean           | ✅        | \-              | Whether it is used in a screen share view |
| meeting       | Meeting           | ✅        | \-              | Meeting object                            |
| participant   | Peer              | ✅        | \-              | Participant object                        |
| size          | Size              | ✅        | \-              | Size                                      |
| t             | RtkI18n           | ❌        | useLanguage()   | Language                                  |
| variant       | RtkNameTagVariant | ✅        | \-              | Name tag variant                          |

## Usage Examples

### Basic Usage

```

<rtk-name-tag></rtk-name-tag>


```

### With Properties

```

<rtk-name-tag>

</rtk-name-tag>


```

```

<script>

  const el = document.querySelector("rtk-name-tag");


  el.isScreenShare= true;

  el.meeting= meeting

  el.participant= participant

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-name-tag/","name":"rtk-name-tag"}}]}
```

---

---
title: rtk-network-indicator
description: API reference for rtk-network-indicator component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-network-indicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-network-indicator

## Properties

| Property      | Type      | Required | Default         | Description         |
| ------------- | --------- | -------- | --------------- | ------------------- |
| iconPack      | IconPack1 | ❌        | defaultIconPack | Icon pack           |
| isScreenShare | boolean   | ✅        | \-              | Is for screenshare  |
| meeting       | Meeting   | ✅        | \-              | Meeting             |
| participant   | Peer      | ✅        | \-              | Participant or Self |
| t             | RtkI18n1  | ❌        | useLanguage()   | Language            |

## Usage Examples

### Basic Usage

```

<rtk-network-indicator></rtk-network-indicator>


```

### With Properties

```

<rtk-network-indicator>

</rtk-network-indicator>


```

```

<script>

  const el = document.querySelector("rtk-network-indicator");


  el.isScreenShare= true;

  el.meeting= meeting

  el.participant= participant

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-network-indicator/","name":"rtk-network-indicator"}}]}
```

---

---
title: rtk-notification
description: API reference for rtk-notification component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-notification.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-notification

A component which shows a notification. You need to remove the element after you receive the`rtkNotificationDismiss` event.

## Properties

| Property     | Type         | Required | Default         | Description             |
| ------------ | ------------ | -------- | --------------- | ----------------------- |
| iconPack     | IconPack     | ❌        | defaultIconPack | Icon pack               |
| notification | Notification | ✅        | \-              | Message                 |
| paused       | boolean      | ✅        | \-              | Stops timeout when true |
| size         | Size         | ✅        | \-              | Size                    |
| t            | RtkI18n      | ❌        | useLanguage()   | Language                |

## Usage Examples

### Basic Usage

```

<rtk-notification></rtk-notification>


```

### With Properties

```

<rtk-notification

 size="md">

</rtk-notification>


```

```

<script>

  const el = document.querySelector("rtk-notification");


  el.paused= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-notification/","name":"rtk-notification"}}]}
```

---

---
title: rtk-notifications
description: API reference for rtk-notifications component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-notifications.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-notifications

A component which handles notifications. You can configure which notifications you want to see and which ones you want to hear. There are also certain limits which you can set as well.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-notifications></rtk-notifications>


```

### With Properties

```

<rtk-notifications

 size="md">

</rtk-notifications>


```

```

<script>

  const el = document.querySelector("rtk-notifications");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-notifications/","name":"rtk-notifications"}}]}
```

---

---
title: rtk-overlay-modal
description: API reference for rtk-overlay-modal component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-overlay-modal.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-overlay-modal

A confirmation modal.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-overlay-modal></rtk-overlay-modal>


```

### With Properties

```

<rtk-overlay-modal>

</rtk-overlay-modal>


```

```

<script>

  const el = document.querySelector("rtk-overlay-modal");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-overlay-modal/","name":"rtk-overlay-modal"}}]}
```

---

---
title: rtk-paginated-list
description: API reference for rtk-paginated-list component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-paginated-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-paginated-list

## Properties

| Property       | Type                                                 | Required | Default         | Description                                    |
| -------------- | ---------------------------------------------------- | -------- | --------------- | ---------------------------------------------- |
| autoScroll     | boolean                                              | ✅        | \-              | auto scroll list to bottom                     |
| createNodes    | (data: unknown\[\])                                  | ✅        | \-              | Create nodes                                   |
| emptyListLabel | string                                               | ✅        | \-              | label to show when empty                       |
| fetchData      | (timestamp: number, size: number, reversed: boolean) | ✅        | \-              | Fetch the data                                 |
| iconPack       | IconPack                                             | ❌        | defaultIconPack | Icon pack                                      |
| pageSize       | number                                               | ✅        | \-              | Page Size                                      |
| pagesAllowed   | number                                               | ✅        | \-              | Number of pages allowed to be shown            |
| rerenderList   | ()                                                   | ✅        | \-              | Rerender paginated list                        |
| reset          | (timestamp?: number)                                 | ❌        | \-              | Resets the paginated list to a given timestamp |
| t              | RtkI18n                                              | ❌        | useLanguage()   | Language                                       |

## Usage Examples

### Basic Usage

```

<rtk-paginated-list></rtk-paginated-list>


```

### With Properties

```

<rtk-paginated-list

 emptyListLabel="example">

</rtk-paginated-list>


```

```

<script>

  const el = document.querySelector("rtk-paginated-list");


  el.autoScroll= true;

  el.createNodes= [];

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-paginated-list/","name":"rtk-paginated-list"}}]}
```

---

---
title: rtk-participant
description: API reference for rtk-participant component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participant

A participant entry component used inside `rtk-participants` which shows data like: name, picture and media device status. You can perform privileged actions on the participant too.

## Properties

| Property    | Type                | Required | Default               | Description              |
| ----------- | ------------------- | -------- | --------------------- | ------------------------ |
| config      | UIConfig1           | ❌        | createDefaultConfig() | Config object            |
| iconPack    | IconPack            | ❌        | defaultIconPack       | Icon pack                |
| meeting     | Meeting             | ✅        | \-                    | Meeting object           |
| participant | Peer                | ✅        | \-                    | Participant object       |
| states      | States1             | ✅        | \-                    | States                   |
| t           | RtkI18n             | ❌        | useLanguage()         | Language                 |
| view        | ParticipantViewMode | ✅        | \-                    | Show participant summary |

## Usage Examples

### Basic Usage

```

<rtk-participant></rtk-participant>


```

### With Properties

```

<rtk-participant>

</rtk-participant>


```

```

<script>

  const el = document.querySelector("rtk-participant");


  el.meeting= meeting

  el.participant= participant

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant/","name":"rtk-participant"}}]}
```

---

---
title: rtk-participant-count
description: API reference for rtk-participant-count component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-count.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participant-count

A component which shows count of total joined participants in a meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-participant-count></rtk-participant-count>


```

### With Properties

```

<rtk-participant-count

 size="md">

</rtk-participant-count>


```

```

<script>

  const el = document.querySelector("rtk-participant-count");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-count/","name":"rtk-participant-count"}}]}
```

---

---
title: rtk-participant-setup
description: API reference for rtk-participant-setup component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-setup.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participant-setup

## Properties

| Property        | Type                  | Required       | Default               | Description                      |             |              |   |    |                      |
| --------------- | --------------------- | -------------- | --------------------- | -------------------------------- | ----------- | ------------ | - | -- | -------------------- |
| config          | UIConfig              | ❌              | createDefaultConfig() | Config object                    |             |              |   |    |                      |
| iconPack        | IconPack              | ❌              | defaultIconPack       | Icon pack                        |             |              |   |    |                      |
| isPreview       | boolean               | ✅              | \-                    | Whether tile is used for preview |             |              |   |    |                      |
| nameTagPosition | \| 'bottom-left'      | 'bottom-right' | 'bottom-center'       | 'top-left'                       | 'top-right' | 'top-center' | ✅ | \- | Position of name tag |
| participant     | Peer                  | ✅              | \-                    | Participant object               |             |              |   |    |                      |
| size            | Size                  | ✅              | \-                    | Size                             |             |              |   |    |                      |
| states          | States                | ✅              | \-                    | States object                    |             |              |   |    |                      |
| t               | RtkI18n               | ❌              | useLanguage()         | Language                         |             |              |   |    |                      |
| variant         | 'solid' \| 'gradient' | ✅              | \-                    | Variant                          |             |              |   |    |                      |

## Usage Examples

### Basic Usage

```

<rtk-participant-setup></rtk-participant-setup>


```

### With Properties

```

<rtk-participant-setup>

</rtk-participant-setup>


```

```

<script>

  const el = document.querySelector("rtk-participant-setup");


  el.isPreview= true;

  el.participant= participant

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-setup/","name":"rtk-participant-setup"}}]}
```

---

---
title: rtk-participant-tile
description: API reference for rtk-participant-tile component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-tile.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participant-tile

A component which plays a participants video and allows for placement of components like `rtk-name-tag`, `rtk-audio-visualizer` or any other component.

## Properties

| Property        | Type                  | Required       | Default               | Description                      |             |              |   |    |                      |
| --------------- | --------------------- | -------------- | --------------------- | -------------------------------- | ----------- | ------------ | - | -- | -------------------- |
| config          | UIConfig              | ❌              | createDefaultConfig() | Config object                    |             |              |   |    |                      |
| iconPack        | IconPack              | ❌              | defaultIconPack       | Icon pack                        |             |              |   |    |                      |
| isPreview       | boolean               | ✅              | \-                    | Whether tile is used for preview |             |              |   |    |                      |
| meeting         | Meeting               | ✅              | \-                    | Meeting object                   |             |              |   |    |                      |
| nameTagPosition | \| 'bottom-left'      | 'bottom-right' | 'bottom-center'       | 'top-left'                       | 'top-right' | 'top-center' | ✅ | \- | Position of name tag |
| participant     | Peer                  | ✅              | \-                    | Participant object               |             |              |   |    |                      |
| size            | Size                  | ✅              | \-                    | Size                             |             |              |   |    |                      |
| states          | States                | ✅              | \-                    | States object                    |             |              |   |    |                      |
| t               | RtkI18n               | ❌              | useLanguage()         | Language                         |             |              |   |    |                      |
| variant         | 'solid' \| 'gradient' | ✅              | \-                    | Variant                          |             |              |   |    |                      |

## Usage Examples

### Basic Usage

```

<rtk-participant-tile></rtk-participant-tile>


```

### With Properties

```

<rtk-participant-tile>

</rtk-participant-tile>


```

```

<script>

  const el = document.querySelector("rtk-participant-tile");


  el.isPreview= true;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-tile/","name":"rtk-participant-tile"}}]}
```

---

---
title: rtk-participants
description: API reference for rtk-participants component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants

A component which lists all participants, with ability to run privileged actions on each participant according to your permissions.

## Properties

| Property                 | Type              | Required | Default               | Description     |
| ------------------------ | ----------------- | -------- | --------------------- | --------------- |
| config                   | UIConfig          | ❌        | createDefaultConfig() | Config          |
| defaultParticipantsTabId | ParticipantsTabId | ✅        | \-                    | Default section |
| iconPack                 | IconPack          | ❌        | defaultIconPack       | Icon pack       |
| meeting                  | Meeting           | ✅        | \-                    | Meeting object  |
| size                     | Size              | ✅        | \-                    | Size            |
| states                   | States            | ✅        | \-                    | States object   |
| t                        | RtkI18n           | ❌        | useLanguage()         | Language        |

## Usage Examples

### Basic Usage

```

<rtk-participants></rtk-participants>


```

### With Properties

```

<rtk-participants

 size="md">

</rtk-participants>


```

```

<script>

  const el = document.querySelector("rtk-participants");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants/","name":"rtk-participants"}}]}
```

---

---
title: rtk-participants-audio
description: API reference for rtk-participants-audio component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-audio.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-audio

A component which plays all the audio from participants and screenshares.

## Properties

| Property           | Type             | Required | Default         | Description                 |
| ------------------ | ---------------- | -------- | --------------- | --------------------------- |
| iconPack           | IconPack         | ❌        | defaultIconPack | Icon pack                   |
| meeting            | Meeting          | ✅        | \-              | Meeting object              |
| preloadedAudioElem | HTMLAudioElement | ✅        | \-              | Pass existing audio element |
| t                  | RtkI18n          | ❌        | useLanguage()   | Language                    |

## Usage Examples

### Basic Usage

```

<rtk-participants-audio></rtk-participants-audio>


```

### With Properties

```

<rtk-participants-audio>

</rtk-participants-audio>


```

```

<script>

  const el = document.querySelector("rtk-participants-audio");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-audio/","name":"rtk-participants-audio"}}]}
```

---

---
title: rtk-participants-stage-list
description: API reference for rtk-participants-stage-list component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-stage-list

A component which lists all participants, with ability to run privileged actions on each participant according to your permissions.

## Properties

| Property   | Type                 | Required | Default               | Description                          |
| ---------- | -------------------- | -------- | --------------------- | ------------------------------------ |
| config     | UIConfig             | ❌        | createDefaultConfig() | Config                               |
| hideHeader | boolean              | ✅        | \-                    | Hide Stage Participants Count Header |
| iconPack   | IconPack             | ❌        | defaultIconPack       | Icon pack                            |
| meeting    | Meeting              | ✅        | \-                    | Meeting object                       |
| search     | string               | ✅        | \-                    | Search                               |
| size       | Size                 | ✅        | \-                    | Size                                 |
| states     | States1              | ✅        | \-                    | Meeting object                       |
| t          | RtkI18n              | ❌        | useLanguage()         | Language                             |
| view       | ParticipantsViewMode | ✅        | \-                    | View mode for participants list      |

## Usage Examples

### Basic Usage

```

<rtk-participants-stage-list></rtk-participants-stage-list>


```

### With Properties

```

<rtk-participants-stage-list

 search="example">

</rtk-participants-stage-list>


```

```

<script>

  const el = document.querySelector("rtk-participants-stage-list");


  el.hideHeader= true;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-list/","name":"rtk-participants-stage-list"}}]}
```

---

---
title: rtk-participants-stage-queue
description: API reference for rtk-participants-stage-queue component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-queue.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-stage-queue

## Properties

| Property | Type                 | Required | Default               | Description                     |
| -------- | -------------------- | -------- | --------------------- | ------------------------------- |
| config   | UIConfig1            | ❌        | createDefaultConfig() | Config                          |
| iconPack | IconPack1            | ❌        | defaultIconPack       | Icon pack                       |
| meeting  | Meeting              | ✅        | \-                    | Meeting object                  |
| size     | Size1                | ✅        | \-                    | Size                            |
| t        | RtkI18n1             | ❌        | useLanguage()         | Language                        |
| view     | ParticipantsViewMode | ✅        | \-                    | View mode for participants list |

## Usage Examples

### Basic Usage

```

<rtk-participants-stage-queue></rtk-participants-stage-queue>


```

### With Properties

```

<rtk-participants-stage-queue

 size="md">

</rtk-participants-stage-queue>


```

```

<script>

  const el = document.querySelector("rtk-participants-stage-queue");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-queue/","name":"rtk-participants-stage-queue"}}]}
```

---

---
title: rtk-participants-toggle
description: API reference for rtk-participants-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-toggle

A button which toggles visibility of participants. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'participants' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-participants-toggle></rtk-participants-toggle>


```

### With Properties

```

<rtk-participants-toggle

 size="md"

 variant"button">

</rtk-participants-toggle>


```

```

<script>

  const el = document.querySelector("rtk-participants-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-toggle/","name":"rtk-participants-toggle"}}]}
```

---

---
title: rtk-participants-viewer-list
description: API reference for rtk-participants-viewer-list component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-viewer-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-viewer-list

## Properties

| Property   | Type                 | Required | Default               | Description                     |
| ---------- | -------------------- | -------- | --------------------- | ------------------------------- |
| config     | UIConfig1            | ❌        | createDefaultConfig() | Config                          |
| hideHeader | boolean              | ✅        | \-                    | Hide Viewer Count Header        |
| iconPack   | IconPack1            | ❌        | defaultIconPack       | Icon pack                       |
| meeting    | Meeting              | ✅        | \-                    | Meeting object                  |
| search     | string               | ✅        | \-                    | Search                          |
| size       | Size1                | ✅        | \-                    | Size                            |
| t          | RtkI18n1             | ❌        | useLanguage()         | Language                        |
| view       | ParticipantsViewMode | ✅        | \-                    | View mode for participants list |

## Usage Examples

### Basic Usage

```

<rtk-participants-viewer-list></rtk-participants-viewer-list>


```

### With Properties

```

<rtk-participants-viewer-list

 search="example">

</rtk-participants-viewer-list>


```

```

<script>

  const el = document.querySelector("rtk-participants-viewer-list");


  el.hideHeader= true;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-viewer-list/","name":"rtk-participants-viewer-list"}}]}
```

---

---
title: rtk-participants-waiting-list
description: API reference for rtk-participants-waiting-list component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-waiting-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-participants-waiting-list

## Properties

| Property | Type                 | Required | Default               | Description                     |
| -------- | -------------------- | -------- | --------------------- | ------------------------------- |
| config   | UIConfig1            | ❌        | createDefaultConfig() | Config                          |
| iconPack | IconPack1            | ❌        | defaultIconPack       | Icon pack                       |
| meeting  | Meeting              | ✅        | \-                    | Meeting object                  |
| size     | Size1                | ✅        | \-                    | Size                            |
| t        | RtkI18n1             | ❌        | useLanguage()         | Language                        |
| view     | ParticipantsViewMode | ✅        | \-                    | View mode for participants list |

## Usage Examples

### Basic Usage

```

<rtk-participants-waiting-list></rtk-participants-waiting-list>


```

### With Properties

```

<rtk-participants-waiting-list

 size="md">

</rtk-participants-waiting-list>


```

```

<script>

  const el = document.querySelector("rtk-participants-waiting-list");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-waiting-list/","name":"rtk-participants-waiting-list"}}]}
```

---

---
title: rtk-permissions-message
description: API reference for rtk-permissions-message component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-permissions-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-permissions-message

A component which shows permission related troubleshooting information.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon Pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-permissions-message></rtk-permissions-message>


```

### With Properties

```

<rtk-permissions-message>

</rtk-permissions-message>


```

```

<script>

  const el = document.querySelector("rtk-permissions-message");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-permissions-message/","name":"rtk-permissions-message"}}]}
```

---

---
title: rtk-pinned-message-selector
description: API reference for rtk-pinned-message-selector component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-pinned-message-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-pinned-message-selector

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-pinned-message-selector></rtk-pinned-message-selector>


```

### With Properties

```

<rtk-pinned-message-selector>

</rtk-pinned-message-selector>


```

```

<script>

  const el = document.querySelector("rtk-pinned-message-selector");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-pinned-message-selector/","name":"rtk-pinned-message-selector"}}]}
```

---

---
title: rtk-pip-toggle
description: API reference for rtk-pip-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-pip-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-pip-toggle

## Properties

| Property | Type              | Required | Default               | Description    |
| -------- | ----------------- | -------- | --------------------- | -------------- |
| config   | UIConfig1         | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack1         | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting           | ✅        | \-                    | Meeting object |
| size     | Size1             | ✅        | \-                    | Size           |
| states   | States1           | ✅        | \-                    | States object  |
| t        | RtkI18n           | ❌        | useLanguage()         | Language       |
| variant  | ControlBarVariant | ✅        | \-                    | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-pip-toggle></rtk-pip-toggle>


```

### With Properties

```

<rtk-pip-toggle

 size="md"

 variant"button">

</rtk-pip-toggle>


```

```

<script>

  const el = document.querySelector("rtk-pip-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-pip-toggle/","name":"rtk-pip-toggle"}}]}
```

---

---
title: rtk-plugin-main
description: API reference for rtk-plugin-main component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugin-main.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-plugin-main

A component which loads a plugin.

## Properties

| Property | Type      | Required | Default         | Description |
| -------- | --------- | -------- | --------------- | ----------- |
| iconPack | IconPack  | ❌        | defaultIconPack | Icon pack   |
| meeting  | Meeting   | ✅        | \-              | Meeting     |
| plugin   | RTKPlugin | ✅        | \-              | Plugin      |
| t        | RtkI18n   | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<rtk-plugin-main></rtk-plugin-main>


```

### With Properties

```

<rtk-plugin-main>

</rtk-plugin-main>


```

```

<script>

  const el = document.querySelector("rtk-plugin-main");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugin-main/","name":"rtk-plugin-main"}}]}
```

---

---
title: rtk-plugins
description: API reference for rtk-plugins component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-plugins

A component which lists all available plugins from their preset, and ability to enable or disable plugins.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-plugins></rtk-plugins>


```

### With Properties

```

<rtk-plugins

 size="md">

</rtk-plugins>


```

```

<script>

  const el = document.querySelector("rtk-plugins");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins/","name":"rtk-plugins"}}]}
```

---

---
title: rtk-plugins-toggle
description: API reference for rtk-plugins-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-plugins-toggle

A button which toggles visibility of plugins. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'plugins' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-plugins-toggle></rtk-plugins-toggle>


```

### With Properties

```

<rtk-plugins-toggle

 size="md"

 variant"button">

</rtk-plugins-toggle>


```

```

<script>

  const el = document.querySelector("rtk-plugins-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins-toggle/","name":"rtk-plugins-toggle"}}]}
```

---

---
title: rtk-poll
description: API reference for rtk-poll component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-poll

A poll component. Shows a poll where a user can vote.

## Properties

| Property    | Type                 | Required | Default         | Description        |
| ----------- | -------------------- | -------- | --------------- | ------------------ |
| iconPack    | IconPack             | ❌        | defaultIconPack | Icon pack          |
| permissions | RTKPermissionsPreset | ✅        | \-              | Permissions Object |
| poll        | Poll                 | ✅        | \-              | Poll               |
| self        | string               | ✅        | \-              | Self ID            |
| t           | RtkI18n              | ❌        | useLanguage()   | Language           |

## Usage Examples

### Basic Usage

```

<rtk-poll></rtk-poll>


```

### With Properties

```

<rtk-poll

 self="example">

</rtk-poll>


```

```

<script>

  const el = document.querySelector("rtk-poll");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll/","name":"rtk-poll"}}]}
```

---

---
title: rtk-poll-form
description: API reference for rtk-poll-form component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll-form.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-poll-form

A component that lets you create a poll.

## Properties

| Property | Type     | Required | Default         | Description |
| -------- | -------- | -------- | --------------- | ----------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack   |
| t        | RtkI18n  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<rtk-poll-form></rtk-poll-form>


```

### With Properties

```

<rtk-poll-form>

</rtk-poll-form>


```

```

<script>

  const el = document.querySelector("rtk-poll-form");


  el.iconPack= defaultIconPack

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll-form/","name":"rtk-poll-form"}}]}
```

---

---
title: rtk-polls
description: API reference for rtk-polls component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-polls

A component which lists all available plugins a user can access with the ability to enable or disable them as per their permissions.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-polls></rtk-polls>


```

### With Properties

```

<rtk-polls

 size="md">

</rtk-polls>


```

```

<script>

  const el = document.querySelector("rtk-polls");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls/","name":"rtk-polls"}}]}
```

---

---
title: rtk-polls-toggle
description: API reference for rtk-polls-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-polls-toggle

A button which toggles visibility of polls. You need to pass the `meeting` object to it to see the unread polls count badge. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'polls' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-polls-toggle></rtk-polls-toggle>


```

### With Properties

```

<rtk-polls-toggle

 size="md"

 variant"button">

</rtk-polls-toggle>


```

```

<script>

  const el = document.querySelector("rtk-polls-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls-toggle/","name":"rtk-polls-toggle"}}]}
```

---

---
title: rtk-recording-indicator
description: API reference for rtk-recording-indicator component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-indicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-recording-indicator

A component which indicates the recording status of a meeting. It will not render anything if no recording is taking place.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-recording-indicator></rtk-recording-indicator>


```

### With Properties

```

<rtk-recording-indicator

 size="md">

</rtk-recording-indicator>


```

```

<script>

  const el = document.querySelector("rtk-recording-indicator");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-indicator/","name":"rtk-recording-indicator"}}]}
```

---

---
title: rtk-recording-toggle
description: API reference for rtk-recording-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-recording-toggle

A button which toggles recording state of a meeting. Only a privileged user can perform this action, thus the button will not be visible for participants who don't have the permission to record a meeting.

## Properties

| Property | Type              | Required | Default         | Description        |
| -------- | ----------------- | -------- | --------------- | ------------------ |
| disabled | boolean           | ✅        | \-              | Disable the button |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack          |
| meeting  | Meeting           | ✅        | \-              | Meeting object     |
| size     | Size              | ✅        | \-              | Size               |
| t        | RtkI18n           | ❌        | useLanguage()   | Language           |
| variant  | ControlBarVariant | ✅        | \-              | Variant            |

## Usage Examples

### Basic Usage

```

<rtk-recording-toggle></rtk-recording-toggle>


```

### With Properties

```

<rtk-recording-toggle

 size="md">

</rtk-recording-toggle>


```

```

<script>

  const el = document.querySelector("rtk-recording-toggle");


  el.disabled= true;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-toggle/","name":"rtk-recording-toggle"}}]}
```

---

---
title: rtk-screen-share-toggle
description: API reference for rtk-screen-share-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-screen-share-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-screen-share-toggle

A button which toggles your screenshare.

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-screen-share-toggle></rtk-screen-share-toggle>


```

### With Properties

```

<rtk-screen-share-toggle

 size="md"

 variant"button">

</rtk-screen-share-toggle>


```

```

<script>

  const el = document.querySelector("rtk-screen-share-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-screen-share-toggle/","name":"rtk-screen-share-toggle"}}]}
```

---

---
title: rtk-screenshare-view
description: API reference for rtk-screenshare-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-screenshare-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-screenshare-view

A component which plays a participant's screenshared video. It also allows for placement of other components similar to `rtk-participant-tile`. This component will not render anything if the participant hasn't start screensharing.

## Properties

| Property             | Type                  | Required       | Default         | Description             |             |              |   |    |                      |
| -------------------- | --------------------- | -------------- | --------------- | ----------------------- | ----------- | ------------ | - | -- | -------------------- |
| hideFullScreenButton | boolean               | ✅              | \-              | Hide full screen button |             |              |   |    |                      |
| iconPack             | IconPack              | ❌              | defaultIconPack | Icon pack               |             |              |   |    |                      |
| meeting              | Meeting               | ✅              | \-              | Meeting object          |             |              |   |    |                      |
| nameTagPosition      | \| 'bottom-left'      | 'bottom-right' | 'bottom-center' | 'top-left'              | 'top-right' | 'top-center' | ✅ | \- | Position of name tag |
| participant          | Peer                  | ✅              | \-              | Participant object      |             |              |   |    |                      |
| size                 | Size                  | ✅              | \-              | Size                    |             |              |   |    |                      |
| t                    | RtkI18n               | ❌              | useLanguage()   | Language                |             |              |   |    |                      |
| variant              | 'solid' \| 'gradient' | ✅              | \-              | Variant                 |             |              |   |    |                      |

## Usage Examples

### Basic Usage

```

<rtk-screenshare-view></rtk-screenshare-view>


```

### With Properties

```

<rtk-screenshare-view>

</rtk-screenshare-view>


```

```

<script>

  const el = document.querySelector("rtk-screenshare-view");


  el.hideFullScreenButton= true;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-screenshare-view/","name":"rtk-screenshare-view"}}]}
```

---

---
title: rtk-settings
description: API reference for rtk-settings component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-settings

A settings component to see and change your audio/video devices as well as see your connection quality.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-settings></rtk-settings>


```

### With Properties

```

<rtk-settings

 size="md">

</rtk-settings>


```

```

<script>

  const el = document.querySelector("rtk-settings");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings/","name":"rtk-settings"}}]}
```

---

---
title: rtk-settings-audio
description: API reference for rtk-settings-audio component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-audio.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-settings-audio

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-settings-audio></rtk-settings-audio>


```

### With Properties

```

<rtk-settings-audio

 size="md">

</rtk-settings-audio>


```

```

<script>

  const el = document.querySelector("rtk-settings-audio");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-audio/","name":"rtk-settings-audio"}}]}
```

---

---
title: rtk-settings-toggle
description: API reference for rtk-settings-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-settings-toggle

A button which toggles visibility of settings module. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSettings: boolean; }


```

## Properties

| Property | Type              | Required | Default         | Description   |
| -------- | ----------------- | -------- | --------------- | ------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack     |
| size     | Size              | ✅        | \-              | Size          |
| states   | States            | ✅        | \-              | States object |
| t        | RtkI18n           | ❌        | useLanguage()   | Language      |
| variant  | ControlBarVariant | ✅        | \-              | Variant       |

## Usage Examples

### Basic Usage

```

<rtk-settings-toggle></rtk-settings-toggle>


```

### With Properties

```

<rtk-settings-toggle

 size="md"

 variant"button">

</rtk-settings-toggle>


```

```

<script>

  const el = document.querySelector("rtk-settings-toggle");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-toggle/","name":"rtk-settings-toggle"}}]}
```

---

---
title: rtk-settings-video
description: API reference for rtk-settings-video component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-video.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-settings-video

A component which lets to manage your camera devices and your video preferences. Emits `rtkStateUpdate` event with data for toggling mirroring of self video:

TypeScript

```

{

 prefs: {

   mirrorVideo: boolean

 }

}


```

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-settings-video></rtk-settings-video>


```

### With Properties

```

<rtk-settings-video

 size="md">

</rtk-settings-video>


```

```

<script>

  const el = document.querySelector("rtk-settings-video");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-video/","name":"rtk-settings-video"}}]}
```

---

---
title: rtk-setup-screen
description: API reference for rtk-setup-screen component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-setup-screen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-setup-screen

A screen shown before joining the meeting, where you can edit your display name, and media settings.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-setup-screen></rtk-setup-screen>


```

### With Properties

```

<rtk-setup-screen

 size="md">

</rtk-setup-screen>


```

```

<script>

  const el = document.querySelector("rtk-setup-screen");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-setup-screen/","name":"rtk-setup-screen"}}]}
```

---

---
title: rtk-sidebar
description: API reference for rtk-sidebar component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-sidebar

A component which handles the sidebar and you can customize which sections you want, and which section you want as the default.

## Properties

| Property        | Type              | Required | Default               | Description                 |
| --------------- | ----------------- | -------- | --------------------- | --------------------------- |
| config          | UIConfig          | ❌        | createDefaultConfig() | Config                      |
| defaultSection  | RtkSidebarSection | ✅        | \-                    | Default section             |
| enabledSections | RtkSidebarTab\[\] | ✅        | \-                    | Enabled sections in sidebar |
| iconPack        | IconPack          | ❌        | defaultIconPack       | Icon pack                   |
| meeting         | Meeting           | ✅        | \-                    | Meeting object              |
| size            | Size              | ✅        | \-                    | Size                        |
| states          | States            | ✅        | \-                    | States object               |
| t               | RtkI18n           | ❌        | useLanguage()         | Language                    |
| view            | RtkSidebarView    | ✅        | \-                    | View type                   |

## Usage Examples

### Basic Usage

```

<rtk-sidebar></rtk-sidebar>


```

### With Properties

```

<rtk-sidebar>

</rtk-sidebar>


```

```

<script>

  const el = document.querySelector("rtk-sidebar");


  el.enabledSections= [];

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar/","name":"rtk-sidebar"}}]}
```

---

---
title: rtk-sidebar-ui
description: API reference for rtk-sidebar-ui component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar-ui.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-sidebar-ui

## Properties

| Property         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Required | Default       | Description                              |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- | ---------------------------------------- |
| currentTab       | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | ✅        | \-            | Default tab to open                      |
| focusCloseButton | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ✅        | \-            | Option to focus close button when opened |
| hideCloseAction  | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ✅        | \-            | Hide Close Action                        |
| hideHeader       | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ✅        | \-            | Hide Main Header                         |
| iconPack         | { people: string; people\_checked: string; chat: string; poll: string; participants: string; rocket: string; call\_end: string; share: string; mic\_on: string; mic\_off: string; video\_on: string; video\_off: string; share\_screen\_start: string; share\_screen\_stop: string; share\_screen\_person: string; clock: string; dismiss: string; send: string; search: string; more\_vertical: string; chevron\_down: string; chevron\_up: string; chevron\_left: string; chevron\_right: string; settings: string; wifi: string; speaker: string; speaker\_off: string; download: string; full\_screen\_maximize: string; full\_screen\_minimize: string; copy: string; attach: string; image: string; emoji\_multiple: string; image\_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop\_recording: string; warning: string; pin: string; pin\_off: string; spinner: string; breakout\_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join\_stage: string; leave\_stage: string; pip\_off: string; pip\_on: string; signal\_1: string; signal\_2: string; signal\_3: string; signal\_4: string; signal\_5: string; start\_livestream: string; stop\_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal\_dots: string; ai\_sparkle: string; meeting\_ai: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; minimize: string; maximize: string; } | ✅        | \-            | Icon Pack                                |
| t                | RtkI18n1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | ❌        | useLanguage() | Language                                 |
| tabs             | RtkSidebarTab1\[\]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | ✅        | \-            | Tabs                                     |
| view             | RtkSidebarView1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | ✅        | \-            | View                                     |

## Usage Examples

### Basic Usage

```

<rtk-sidebar-ui></rtk-sidebar-ui>


```

### With Properties

```

<rtk-sidebar-ui

 currentTab="example">

</rtk-sidebar-ui>


```

```

<script>

  const el = document.querySelector("rtk-sidebar-ui");


  el.focusCloseButton= true;

  el.hideCloseAction= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar-ui/","name":"rtk-sidebar-ui"}}]}
```

---

---
title: rtk-simple-grid
description: API reference for rtk-simple-grid component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-simple-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-simple-grid

A grid component which renders only the participants in a simple grid.

## Properties

| Property     | Type     | Required | Default               | Description                                           |
| ------------ | -------- | -------- | --------------------- | ----------------------------------------------------- |
| aspectRatio  | string   | ✅        | \-                    | Aspect Ratio of participant tile Format: width:height |
| config       | UIConfig | ❌        | createDefaultConfig() | UI Config                                             |
| gap          | number   | ✅        | \-                    | Gap between participant tiles                         |
| iconPack     | IconPack | ❌        | defaultIconPack       | Icon Pack                                             |
| meeting      | Meeting  | ✅        | \-                    | Meeting object                                        |
| participants | Peer\[\] | ✅        | \-                    | Participants                                          |
| size         | Size     | ✅        | \-                    | Size                                                  |
| states       | States   | ✅        | \-                    | States object                                         |
| t            | RtkI18n  | ❌        | useLanguage()         | Language                                              |

## Usage Examples

### Basic Usage

```

<rtk-simple-grid></rtk-simple-grid>


```

### With Properties

```

<rtk-simple-grid

 aspectRatio="example">

</rtk-simple-grid>


```

```

<script>

  const el = document.querySelector("rtk-simple-grid");


  el.gap= 42;

  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-simple-grid/","name":"rtk-simple-grid"}}]}
```

---

---
title: rtk-speaker-selector
description: API reference for rtk-speaker-selector component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-speaker-selector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-speaker-selector

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type               | Required | Default         | Description    |
| -------- | ------------------ | -------- | --------------- | -------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting            | ✅        | \-              | Meeting object |
| size     | Size               | ✅        | \-              | Size           |
| states   | States             | ✅        | \-              | States object  |
| t        | RtkI18n            | ❌        | useLanguage()   | Language       |
| variant  | 'full' \| 'inline' | ✅        | \-              | variant        |

## Usage Examples

### Basic Usage

```

<rtk-speaker-selector></rtk-speaker-selector>


```

### With Properties

```

<rtk-speaker-selector

 size="md">

</rtk-speaker-selector>


```

```

<script>

  const el = document.querySelector("rtk-speaker-selector");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-speaker-selector/","name":"rtk-speaker-selector"}}]}
```

---

---
title: rtk-spinner
description: API reference for rtk-spinner component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-spinner.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-spinner

A component which shows an animating spinner.

## Properties

| Property | Type     | Required | Default         | Description |
| -------- | -------- | -------- | --------------- | ----------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack   |
| size     | Size1    | ✅        | \-              | Size        |

## Usage Examples

### Basic Usage

```

<rtk-spinner></rtk-spinner>


```

### With Properties

```

<rtk-spinner

 size="md">

</rtk-spinner>


```

```

<script>

  const el = document.querySelector("rtk-spinner");


</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-spinner/","name":"rtk-spinner"}}]}
```

---

---
title: rtk-spotlight-grid
description: API reference for rtk-spotlight-grid component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-grid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-spotlight-grid

A grid component that renders two lists of participants: `pinnedParticipants` and `participants`. You can customize the layout to a `column` view, by default is is `row`.

* Participants from `pinnedParticipants[]` are rendered inside a larger grid.
* Participants from `participants[]` array are rendered in a smaller grid.

## Properties

| Property           | Type        | Required | Default               | Description                                           |
| ------------------ | ----------- | -------- | --------------------- | ----------------------------------------------------- |
| aspectRatio        | string      | ✅        | \-                    | Aspect Ratio of participant tile Format: width:height |
| config             | UIConfig    | ❌        | createDefaultConfig() | UI Config                                             |
| gap                | number      | ✅        | \-                    | Gap between participant tiles                         |
| gridSize           | GridSize1   | ✅        | \-                    | Grid size                                             |
| iconPack           | IconPack    | ❌        | defaultIconPack       | Icon Pack                                             |
| layout             | GridLayout1 | ✅        | \-                    | Grid Layout                                           |
| meeting            | Meeting     | ✅        | \-                    | Meeting object                                        |
| participants       | Peer\[\]    | ✅        | \-                    | Participants                                          |
| pinnedParticipants | Peer\[\]    | ✅        | \-                    | Pinned Participants                                   |
| size               | Size        | ✅        | \-                    | Size                                                  |
| states             | States      | ✅        | \-                    | States object                                         |
| t                  | RtkI18n     | ❌        | useLanguage()         | Language                                              |

## Usage Examples

### Basic Usage

```

<rtk-spotlight-grid></rtk-spotlight-grid>


```

### With Properties

```

<rtk-spotlight-grid

 aspectRatio="example"

 gridSize="md">

</rtk-spotlight-grid>


```

```

<script>

  const el = document.querySelector("rtk-spotlight-grid");


  el.gap= 42;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-grid/","name":"rtk-spotlight-grid"}}]}
```

---

---
title: rtk-spotlight-indicator
description: API reference for rtk-spotlight-indicator component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-indicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-spotlight-indicator

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size1    | ✅        | \-              | Size           |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

<rtk-spotlight-indicator></rtk-spotlight-indicator>


```

### With Properties

```

<rtk-spotlight-indicator

 size="md">

</rtk-spotlight-indicator>


```

```

<script>

  const el = document.querySelector("rtk-spotlight-indicator");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-indicator/","name":"rtk-spotlight-indicator"}}]}
```

---

---
title: rtk-stage
description: API reference for rtk-stage component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-stage

A component used as a stage that commonly houses the `grid` and `sidebar` components.

## Properties

| Property | Type     | Required | Default         | Description |
| -------- | -------- | -------- | --------------- | ----------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack   |
| t        | RtkI18n  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

<rtk-stage></rtk-stage>


```

### With Properties

```

<rtk-stage>

</rtk-stage>


```

```

<script>

  const el = document.querySelector("rtk-stage");


  el.iconPack= defaultIconPack

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage/","name":"rtk-stage"}}]}
```

---

---
title: rtk-stage-toggle
description: API reference for rtk-stage-toggle component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage-toggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-stage-toggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack1         | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size1             | ✅        | \-              | Size           |
| states   | States1           | ✅        | \-              | States         |
| t        | RtkI18n1          | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

<rtk-stage-toggle></rtk-stage-toggle>


```

### With Properties

```

<rtk-stage-toggle

 size="md"

 variant"button">

</rtk-stage-toggle>


```

```

<script>

  const el = document.querySelector("rtk-stage-toggle");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage-toggle/","name":"rtk-stage-toggle"}}]}
```

---

---
title: rtk-switch
description: API reference for rtk-switch component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-switch.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-switch

A switch component which follows RTK Design System.

## Properties

| Property | Type     | Required | Default         | Description                           |
| -------- | -------- | -------- | --------------- | ------------------------------------- |
| checked  | boolean  | ✅        | \-              | Whether the switch is enabled/checked |
| disabled | boolean  | ✅        | \-              | Whether switch is readonly            |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack                             |
| readonly | boolean  | ✅        | \-              | Whether switch is readonly            |
| t        | RtkI18n  | ❌        | useLanguage()   | Language                              |

## Usage Examples

### Basic Usage

```

<rtk-switch></rtk-switch>


```

### With Properties

```

<rtk-switch>

</rtk-switch>


```

```

<script>

  const el = document.querySelector("rtk-switch");


  el.checked= true;

  el.disabled= true;

  el.readonly= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-switch/","name":"rtk-switch"}}]}
```

---

---
title: rtk-tab-bar
description: API reference for rtk-tab-bar component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-tab-bar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-tab-bar

## Properties

| Property  | Type        | Required | Default               | Description    |
| --------- | ----------- | -------- | --------------------- | -------------- |
| activeTab | Tab         | ✅        | \-                    | Active tab     |
| config    | UIConfig    | ❌        | createDefaultConfig() | UI Config      |
| iconPack  | IconPack    | ❌        | defaultIconPack       | Icon Pack      |
| layout    | GridLayout1 | ✅        | \-                    | Grid Layout    |
| meeting   | Meeting     | ✅        | \-                    | Meeting object |
| size      | Size        | ✅        | \-                    | Size           |
| states    | States      | ✅        | \-                    | States object  |
| t         | RtkI18n     | ❌        | useLanguage()         | Language       |
| tabs      | Tab\[\]     | ✅        | \-                    | Tabs           |

## Usage Examples

### Basic Usage

```

<rtk-tab-bar></rtk-tab-bar>


```

### With Properties

```

<rtk-tab-bar>

</rtk-tab-bar>


```

```

<script>

  const el = document.querySelector("rtk-tab-bar");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-tab-bar/","name":"rtk-tab-bar"}}]}
```

---

---
title: rtk-text-composer-view
description: API reference for rtk-text-composer-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-composer-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-text-composer-view

A component which renders a text composer

## Properties

| Property          | Type                            | Required | Default         | Description                                   |
| ----------------- | ------------------------------- | -------- | --------------- | --------------------------------------------- |
| disabled          | boolean                         | ✅        | \-              | Disable the text input (default = false)      |
| iconPack          | IconPack1                       | ❌        | defaultIconPack | Icon pack                                     |
| keyDownHandler    | (e: KeyboardEvent)              | ✅        | \-              | Keydown event handler function                |
| maxLength         | number                          | ✅        | \-              | Max length for text input                     |
| placeholder       | string                          | ✅        | \-              | Placeholder text                              |
| rateLimitBreached | boolean                         | ✅        | \-              | Boolean to indicate if rate limit is breached |
| setText           | (text: string, focus?: boolean) | ❌        | \-              | Sets value of the text input                  |
| t                 | RtkI18n1                        | ❌        | useLanguage()   | Language                                      |
| value             | string                          | ✅        | \-              | Default value for text input                  |

## Usage Examples

### Basic Usage

```

<rtk-text-composer-view></rtk-text-composer-view>


```

### With Properties

```

<rtk-text-composer-view>

</rtk-text-composer-view>


```

```

<script>

  const el = document.querySelector("rtk-text-composer-view");


  el.disabled= true;

  el.maxLength= 42;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-composer-view/","name":"rtk-text-composer-view"}}]}
```

---

---
title: rtk-text-message
description: API reference for rtk-text-message component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-text-message

@deprecated `rtk-text-message` is deprecated and will be removed soon. Use `rtk-text-message-view` instead. A component which renders a text message from chat.

## Properties

| Property    | Type        | Required | Default         | Description                                             |
| ----------- | ----------- | -------- | --------------- | ------------------------------------------------------- |
| iconPack    | IconPack    | ❌        | defaultIconPack | Icon pack                                               |
| isContinued | boolean     | ✅        | \-              | Whether the message is continued by same user           |
| message     | TextMessage | ✅        | \-              | Text message object                                     |
| now         | Date        | ✅        | \-              | Date object of now, to calculate distance between dates |
| showBubble  | boolean     | ✅        | \-              | show message in bubble                                  |
| t           | RtkI18n     | ❌        | useLanguage()   | Language                                                |

## Usage Examples

### Basic Usage

```

<rtk-text-message></rtk-text-message>


```

### With Properties

```

<rtk-text-message>

</rtk-text-message>


```

```

<script>

  const el = document.querySelector("rtk-text-message");


  el.isContinued= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message/","name":"rtk-text-message"}}]}
```

---

---
title: rtk-text-message-view
description: API reference for rtk-text-message-view component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message-view.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-text-message-view

A component which renders a text message from chat.

## Properties

| Property   | Type    | Required | Default | Description                               |
| ---------- | ------- | -------- | ------- | ----------------------------------------- |
| isMarkdown | boolean | ✅        | \-      | Renders text as markdown (default = true) |
| text       | string  | ✅        | \-      | Text message                              |

## Usage Examples

### Basic Usage

```

<rtk-text-message-view></rtk-text-message-view>


```

### With Properties

```

<rtk-text-message-view

 text="example">

</rtk-text-message-view>


```

```

<script>

  const el = document.querySelector("rtk-text-message-view");


  el.isMarkdown= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message-view/","name":"rtk-text-message-view"}}]}
```

---

---
title: rtk-tooltip
description: API reference for rtk-tooltip component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-tooltip.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-tooltip

Tooltip component which follows RTK Design System.

## Properties

| Property  | Type           | Required | Default | Description                      |
| --------- | -------------- | -------- | ------- | -------------------------------- |
| delay     | number         | ✅        | \-      | Delay before showing the tooltip |
| disabled  | boolean        | ✅        | \-      | Disabled                         |
| kind      | TooltipKind    | ✅        | \-      | Tooltip kind                     |
| label     | string         | ✅        | \-      | Tooltip label                    |
| open      | boolean        | ✅        | \-      | Open                             |
| placement | Placement      | ✅        | \-      | Placement of menu                |
| size      | Size           | ✅        | \-      | Size                             |
| variant   | TooltipVariant | ✅        | \-      | Tooltip variant                  |

## Usage Examples

### Basic Usage

```

<rtk-tooltip></rtk-tooltip>


```

### With Properties

```

<rtk-tooltip>

</rtk-tooltip>


```

```

<script>

  const el = document.querySelector("rtk-tooltip");


  el.delay= 42;

  el.disabled= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-tooltip/","name":"rtk-tooltip"}}]}
```

---

---
title: rtk-transcript
description: API reference for rtk-transcript component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcript.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-transcript

A component which shows a transcript. You need to remove the element after you receive the`rtkTranscriptDismiss` event.

## Properties

| Property   | Type                                 | Required | Default       | Description |
| ---------- | ------------------------------------ | -------- | ------------- | ----------- |
| t          | RtkI18n                              | ❌        | useLanguage() | Language    |
| transcript | Transcript & { renderedId?: string } | ❌        | \-            | Message     |

## Usage Examples

### Basic Usage

```

<rtk-transcript></rtk-transcript>


```

### With Properties

```

<rtk-transcript

 transcript="example">

</rtk-transcript>


```

```

<script>

  const el = document.querySelector("rtk-transcript");


  el.transcript= {};

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcript/","name":"rtk-transcript"}}]}
```

---

---
title: rtk-transcripts
description: API reference for rtk-transcripts component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcripts.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-transcripts

A component which handles transcripts. You can configure which transcripts you want to see and which ones you want to hear. There are also certain limits which you can set as well.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-transcripts></rtk-transcripts>


```

### With Properties

```

<rtk-transcripts>

</rtk-transcripts>


```

```

<script>

  const el = document.querySelector("rtk-transcripts");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcripts/","name":"rtk-transcripts"}}]}
```

---

---
title: rtk-ui-provider
description: API reference for rtk-ui-provider component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-ui-provider.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-ui-provider

## Properties

| Property        | Type            | Required | Default          | Description                         |
| --------------- | --------------- | -------- | ---------------- | ----------------------------------- |
| config          | UIConfig1       | ✅        | \-               | Config                              |
| iconPack        | IconPack1       | ❌        | defaultIconPack  | Icon pack                           |
| meeting         | Meeting \| null | ❌        | null             | Meeting                             |
| mode            | MeetingMode1    | ✅        | \-               | Fill type                           |
| overrides       | Overrides1      | ❌        | defaultOverrides | UI Kit Overrides                    |
| showSetupScreen | boolean         | ✅        | \-               | Whether to show setup screen or not |
| t               | RtkI18n1        | ❌        | useLanguage()    | Language utility                    |

## Usage Examples

### Basic Usage

```

<rtk-ui-provider></rtk-ui-provider>


```

### With Properties

```

<rtk-ui-provider>

</rtk-ui-provider>


```

```

<script>

  const el = document.querySelector("rtk-ui-provider");


  el.config= defaultUiConfig

  el.mode= meeting

  el.showSetupScreen= true;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-ui-provider/","name":"rtk-ui-provider"}}]}
```

---

---
title: rtk-viewer-count
description: API reference for rtk-viewer-count component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-viewer-count.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-viewer-count

A component which shows count of total joined participants in a meeting.

## Properties

| Property | Type               | Required | Default         | Description          |
| -------- | ------------------ | -------- | --------------- | -------------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack            |
| meeting  | Meeting            | ✅        | \-              | Meeting object       |
| t        | RtkI18n            | ❌        | useLanguage()   | Language             |
| variant  | ViewerCountVariant | ✅        | \-              | Viewer count variant |

## Usage Examples

### Basic Usage

```

<rtk-viewer-count></rtk-viewer-count>


```

### With Properties

```

<rtk-viewer-count

 variant="primary">

</rtk-viewer-count>


```

```

<script>

  const el = document.querySelector("rtk-viewer-count");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-viewer-count/","name":"rtk-viewer-count"}}]}
```

---

---
title: rtk-virtualized-participant-list
description: API reference for rtk-virtualized-participant-list component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-virtualized-participant-list.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-virtualized-participant-list

## Properties

| Property           | Type                         | Required | Default | Description                                              |
| ------------------ | ---------------------------- | -------- | ------- | -------------------------------------------------------- |
| bufferedItemsCount | number                       | ✅        | \-      | Buffer items to render before and after the visible area |
| emptyListElement   | HTMLElement                  | ✅        | \-      | Element to render if list is empty                       |
| itemHeight         | number                       | ✅        | \-      | Height of each item in pixels (assumed fixed)            |
| items              | Peer1\[\]                    | ✅        | \-      | Items to be virtualized                                  |
| renderItem         | (item: Peer1, index: number) | ✅        | \-      | Function to render each item                             |

## Usage Examples

### Basic Usage

```

<rtk-virtualized-participant-list></rtk-virtualized-participant-list>


```

### With Properties

```

<rtk-virtualized-participant-list>

</rtk-virtualized-participant-list>


```

```

<script>

  const el = document.querySelector("rtk-virtualized-participant-list");


  el.bufferedItemsCount= 42;

  el.itemHeight= 42;

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-virtualized-participant-list/","name":"rtk-virtualized-participant-list"}}]}
```

---

---
title: rtk-waiting-screen
description: API reference for rtk-waiting-screen component (Web Components (HTML) Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/core/rtk-waiting-screen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# rtk-waiting-screen

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

<rtk-waiting-screen></rtk-waiting-screen>


```

### With Properties

```

<rtk-waiting-screen>

</rtk-waiting-screen>


```

```

<script>

  const el = document.querySelector("rtk-waiting-screen");


  el.meeting= meeting

</script>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/","name":"Web Components (HTML)"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/core/rtk-waiting-screen/","name":"rtk-waiting-screen"}}]}
```

---

---
title: React
description: Complete API reference for React library components
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# React

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}}]}
```

---

---
title: RtkAi
description: API reference for RtkAi component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkAi.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkAi

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |
| view     | AIView   | ✅        | \-                    | View type      |

## Usage Examples

### Basic Usage

```

import { RtkAi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkAi />;

}


```

### With Properties

```

import { RtkAi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkAi

      meeting={meeting}

      size="md"

      view={aiview}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkai/","name":"RtkAi"}}]}
```

---

---
title: RtkAiToggle
description: API reference for RtkAiToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkAiToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkAiToggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkAiToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkAiToggle />;

}


```

### With Properties

```

import { RtkAiToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkAiToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkaitoggle/","name":"RtkAiToggle"}}]}
```

---

---
title: RtkAiTranscriptions
description: API reference for RtkAiTranscriptions component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkAiTranscriptions.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkAiTranscriptions

## Properties

| Property              | Type           | Required | Default       | Description            |
| --------------------- | -------------- | -------- | ------------- | ---------------------- |
| initialTranscriptions | Transcript\[\] | ✅        | \-            | Initial transcriptions |
| meeting               | Meeting        | ✅        | \-            | Meeting object         |
| t                     | RtkI18n        | ❌        | useLanguage() | Language               |

## Usage Examples

### Basic Usage

```

import { RtkAiTranscriptions } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkAiTranscriptions />;

}


```

### With Properties

```

import { RtkAiTranscriptions } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkAiTranscriptions

      initialTranscriptions={[]}

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkaitranscriptions/","name":"RtkAiTranscriptions"}}]}
```

---

---
title: RtkAudioGrid
description: API reference for RtkAudioGrid component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkAudioGrid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkAudioGrid

## Properties

| Property | Type      | Required | Default         | Description                      |
| -------- | --------- | -------- | --------------- | -------------------------------- |
| config   | UIConfig1 | ✅        | \-              | Config                           |
| hideSelf | boolean   | ✅        | \-              | Whether to hide self in the grid |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon Pack                        |
| meeting  | Meeting   | ✅        | \-              | Meeting                          |
| size     | Size1     | ✅        | \-              | Size                             |
| states   | States1   | ✅        | \-              | States                           |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language                         |

## Usage Examples

### Basic Usage

```

import { RtkAudioGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkAudioGrid />;

}


```

### With Properties

```

import { RtkAudioGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkAudioGrid

      config={defaultUiConfig}

      hideSelf={true}

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiogrid/","name":"RtkAudioGrid"}}]}
```

---

---
title: RtkAudioTile
description: API reference for RtkAudioTile component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkAudioTile.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkAudioTile

## Properties

| Property    | Type      | Required | Default         | Description        |
| ----------- | --------- | -------- | --------------- | ------------------ |
| config      | UIConfig  | ✅        | \-              | Config             |
| iconPack    | IconPack1 | ❌        | defaultIconPack | Icon pack          |
| meeting     | Meeting   | ✅        | \-              | Meeting            |
| participant | Peer      | ✅        | \-              | Participant object |
| size        | Size      | ✅        | \-              | Size               |
| states      | States1   | ✅        | \-              | States             |
| t           | RtkI18n1  | ❌        | useLanguage()   | Language           |

## Usage Examples

### Basic Usage

```

import { RtkAudioTile } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkAudioTile />;

}


```

### With Properties

```

import { RtkAudioTile } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkAudioTile

      config={defaultUiConfig}

      meeting={meeting}

      participant={participant}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiotile/","name":"RtkAudioTile"}}]}
```

---

---
title: RtkAudioVisualizer
description: API reference for RtkAudioVisualizer component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkAudioVisualizer.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkAudioVisualizer

An audio visualizer component which visualizes a participants audio. Commonly used inside `rtk-name-tag`.

## Properties

| Property      | Type                   | Required | Default         | Description                                                                                   |
| ------------- | ---------------------- | -------- | --------------- | --------------------------------------------------------------------------------------------- |
| hideMuted     | boolean                | ✅        | \-              | Hide the visualizer if audio is muted                                                         |
| iconPack      | IconPack               | ❌        | defaultIconPack | Icon pack                                                                                     |
| isScreenShare | boolean                | ✅        | \-              | Audio visualizer for screensharing, it will use screenShareTracks.audio instead of audioTrack |
| participant   | Peer                   | ✅        | \-              | Participant object                                                                            |
| size          | Size                   | ✅        | \-              | Size                                                                                          |
| t             | RtkI18n                | ❌        | useLanguage()   | Language                                                                                      |
| variant       | AudioVisualizerVariant | ✅        | \-              | Variant                                                                                       |

## Usage Examples

### Basic Usage

```

import { RtkAudioVisualizer } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkAudioVisualizer />;

}


```

### With Properties

```

import { RtkAudioVisualizer } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkAudioVisualizer

      hideMuted={true}

      isScreenShare={true}

      participant={participant}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiovisualizer/","name":"RtkAudioVisualizer"}}]}
```

---

---
title: RtkAvatar
description: API reference for RtkAvatar component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkAvatar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkAvatar

Avatar component which renders a participant's image or their initials.

## Properties

| Property    | Type                          | Required                          | Default         | Description |                    |
| ----------- | ----------------------------- | --------------------------------- | --------------- | ----------- | ------------------ |
| iconPack    | IconPack                      | ❌                                 | defaultIconPack | Icon pack   |                    |
| participant | Peer \| WaitlistedParticipant | { name: string; picture: string } | ✅               | \-          | Participant object |
| size        | Size                          | ✅                                 | \-              | Size        |                    |
| t           | RtkI18n                       | ❌                                 | useLanguage()   | Language    |                    |
| variant     | AvatarVariant                 | ✅                                 | \-              | Avatar type |                    |

## Usage Examples

### Basic Usage

```

import { RtkAvatar } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkAvatar />;

}


```

### With Properties

```

import { RtkAvatar } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkAvatar

      participant="example"

      size="md"

      variant="circular"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkavatar/","name":"RtkAvatar"}}]}
```

---

---
title: RtkBreakoutRoomManager
description: API reference for RtkBreakoutRoomManager component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkBreakoutRoomManager.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkBreakoutRoomManager

## Properties

| Property              | Type               | Required | Default         | Description                      |
| --------------------- | ------------------ | -------- | --------------- | -------------------------------- |
| allowDelete           | boolean            | ✅        | \-              | allow room delete                |
| assigningParticipants | boolean            | ✅        | \-              | Enable updating participants     |
| defaultExpanded       | boolean            | ✅        | \-              | display expanded card by default |
| iconPack              | IconPack           | ❌        | defaultIconPack | Icon pack                        |
| isDragMode            | boolean            | ✅        | \-              | Drag mode                        |
| meeting               | Meeting            | ✅        | \-              | Meeting object                   |
| mode                  | 'edit' \| 'create' | ✅        | \-              | Mode in which selector is used   |
| room                  | DraftMeeting       | ✅        | \-              | Connected Room Config Object     |
| states                | States             | ✅        | \-              | States object                    |
| t                     | RtkI18n            | ❌        | useLanguage()   | Language                         |

## Usage Examples

### Basic Usage

```

import { RtkBreakoutRoomManager } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkBreakoutRoomManager />;

}


```

### With Properties

```

import { RtkBreakoutRoomManager } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkBreakoutRoomManager

      allowDelete={true}

      assigningParticipants={true}

      defaultExpanded={true}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroommanager/","name":"RtkBreakoutRoomManager"}}]}
```

---

---
title: RtkBreakoutRoomParticipants
description: API reference for RtkBreakoutRoomParticipants component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkBreakoutRoomParticipants.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkBreakoutRoomParticipants

A component which lists all participants, with ability to run privileged actions on each participant according to your permissions.

## Properties

| Property               | Type       | Required | Default         | Description           |
| ---------------------- | ---------- | -------- | --------------- | --------------------- |
| iconPack               | IconPack   | ❌        | defaultIconPack | Icon pack             |
| meeting                | Meeting    | ✅        | \-              | Meeting object        |
| participantIds         | string\[\] | ✅        | \-              | Participant ids       |
| selectedParticipantIds | string\[\] | ✅        | \-              | selected participants |
| t                      | RtkI18n    | ❌        | useLanguage()   | Language              |

## Usage Examples

### Basic Usage

```

import { RtkBreakoutRoomParticipants } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkBreakoutRoomParticipants />;

}


```

### With Properties

```

import { RtkBreakoutRoomParticipants } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkBreakoutRoomParticipants

      meeting={meeting}

      participantIds="example"

      selectedParticipantIds="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomparticipants/","name":"RtkBreakoutRoomParticipants"}}]}
```

---

---
title: RtkBreakoutRoomsManager
description: API reference for RtkBreakoutRoomsManager component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkBreakoutRoomsManager.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkBreakoutRoomsManager

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkBreakoutRoomsManager } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkBreakoutRoomsManager />;

}


```

### With Properties

```

import { RtkBreakoutRoomsManager } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkBreakoutRoomsManager

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomsmanager/","name":"RtkBreakoutRoomsManager"}}]}
```

---

---
title: RtkBreakoutRoomsToggle
description: API reference for RtkBreakoutRoomsToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkBreakoutRoomsToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkBreakoutRoomsToggle

A button which toggles visibility of breakout rooms. You need to pass the `meeting` object to it.

## Properties

| Property | Type              | Required | Default | Description    |
| -------- | ----------------- | -------- | ------- | -------------- |
| iconPack | IconPack          | ✅        | \-      | Icon pack      |
| meeting  | Meeting           | ✅        | \-      | Meeting object |
| size     | Size              | ✅        | \-      | Size           |
| states   | States            | ✅        | \-      | States object  |
| t        | RtkI18n           | ✅        | \-      | Language       |
| variant  | ControlBarVariant | ✅        | \-      | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkBreakoutRoomsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkBreakoutRoomsToggle />;

}


```

### With Properties

```

import { RtkBreakoutRoomsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkBreakoutRoomsToggle

      iconPack={defaultIconPack}

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomstoggle/","name":"RtkBreakoutRoomsToggle"}}]}
```

---

---
title: RtkBroadcastMessageModal
description: API reference for RtkBroadcastMessageModal component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkBroadcastMessageModal.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkBroadcastMessageModal

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States1  | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkBroadcastMessageModal } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkBroadcastMessageModal />;

}


```

### With Properties

```

import { RtkBroadcastMessageModal } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkBroadcastMessageModal

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkbroadcastmessagemodal/","name":"RtkBroadcastMessageModal"}}]}
```

---

---
title: RtkButton
description: API reference for RtkButton component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkButton.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkButton

A button that follows RTK Design System.

## Properties

| Property | Type                        | Required | Default | Description                          |
| -------- | --------------------------- | -------- | ------- | ------------------------------------ |
| disabled | boolean                     | ✅        | \-      | Where the button is disabled or not  |
| kind     | ButtonKind                  | ✅        | \-      | Button type                          |
| reverse  | boolean                     | ✅        | \-      | Whether to reverse order of children |
| size     | Size                        | ✅        | \-      | Size                                 |
| type     | HTMLButtonElement\['type'\] | ✅        | \-      | Button type                          |
| variant  | ButtonVariant               | ✅        | \-      | Button variant                       |

## Usage Examples

### Basic Usage

```

import { RtkButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkButton />;

}


```

### With Properties

```

import { RtkButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkButton

      disabled={true}

      kind={buttonkind}

      reverse={true}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkbutton/","name":"RtkButton"}}]}
```

---

---
title: RtkCameraSelector
description: API reference for RtkCameraSelector component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkCameraSelector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkCameraSelector

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type               | Required | Default         | Description    |
| -------- | ------------------ | -------- | --------------- | -------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting            | ✅        | \-              | Meeting object |
| size     | Size               | ✅        | \-              | Size           |
| t        | RtkI18n            | ❌        | useLanguage()   | Language       |
| variant  | 'full' \| 'inline' | ✅        | \-              | variant        |

## Usage Examples

### Basic Usage

```

import { RtkCameraSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkCameraSelector />;

}


```

### With Properties

```

import { RtkCameraSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkCameraSelector

      meeting={meeting}

      size="md"

      variant={'full' | 'inline'}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkcameraselector/","name":"RtkCameraSelector"}}]}
```

---

---
title: RtkCameraToggle
description: API reference for RtkCameraToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkCameraToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkCameraToggle

A button which toggles your camera.

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkCameraToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkCameraToggle />;

}


```

### With Properties

```

import { RtkCameraToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkCameraToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkcameratoggle/","name":"RtkCameraToggle"}}]}
```

---

---
title: RtkCaptionToggle
description: API reference for RtkCaptionToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkCaptionToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkCaptionToggle

## Properties

| Property | Type              | Required | Default               | Description    |
| -------- | ----------------- | -------- | --------------------- | -------------- |
| config   | UIConfig1         | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack1         | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting           | ✅        | \-                    | Meeting object |
| size     | Size1             | ✅        | \-                    | Size           |
| states   | States1           | ✅        | \-                    | States object  |
| t        | RtkI18n           | ❌        | useLanguage()         | Language       |
| variant  | ControlBarVariant | ✅        | \-                    | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkCaptionToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkCaptionToggle />;

}


```

### With Properties

```

import { RtkCaptionToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkCaptionToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkcaptiontoggle/","name":"RtkCaptionToggle"}}]}
```

---

---
title: RtkChat
description: API reference for RtkChat component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChat.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChat

Fully featured chat component with image & file upload, emoji picker and auto-scroll.

## Properties

| Property  | Type      | Required | Default               | Description    |
| --------- | --------- | -------- | --------------------- | -------------- |
| config    | UIConfig1 | ❌        | createDefaultConfig() | Config         |
| iconPack  | IconPack  | ❌        | defaultIconPack       | Icon pack      |
| meeting   | Meeting   | ✅        | \-                    | Meeting object |
| overrides | Overrides | ❌        | defaultOverrides      | UI Overrides   |
| size      | Size      | ✅        | \-                    | Size           |
| t         | RtkI18n   | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkChat } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChat />;

}


```

### With Properties

```

import { RtkChat } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChat

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchat/","name":"RtkChat"}}]}
```

---

---
title: RtkChatComposerUi
description: API reference for RtkChatComposerUi component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatComposerUi.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatComposerUi

@deprecated . This component is deprecated, please use rtk-chat-composer-view instead.

## Properties

| Property           | Type                                                                                      | Required | Default         | Description                         |
| ------------------ | ----------------------------------------------------------------------------------------- | -------- | --------------- | ----------------------------------- |
| canSendFiles       | boolean                                                                                   | ✅        | \-              | Whether user can send file messages |
| canSendTextMessage | boolean                                                                                   | ✅        | \-              | Whether user can send text messages |
| iconPack           | IconPack1                                                                                 | ❌        | defaultIconPack | Icon pack                           |
| prefill            | { suggestedReplies?: string\[\]; editMessage?: TextMessage; replyMessage?: TextMessage; } | ❌        | \-              | prefill the composer                |
| size               | Size1                                                                                     | ✅        | \-              | Size                                |
| t                  | RtkI18n                                                                                   | ❌        | useLanguage()   | Language                            |

## Usage Examples

### Basic Usage

```

import { RtkChatComposerUi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatComposerUi />;

}


```

### With Properties

```

import { RtkChatComposerUi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChatComposerUi

      canSendFiles={true}

      canSendTextMessage={true}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchatcomposerui/","name":"RtkChatComposerUi"}}]}
```

---

---
title: RtkChatComposerView
description: API reference for RtkChatComposerView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatComposerView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatComposerView

A component which renders a chat composer

## Properties

| Property             | Type                                        | Required | Default         | Description                             |
| -------------------- | ------------------------------------------- | -------- | --------------- | --------------------------------------- |
| canSendFiles         | boolean                                     | ✅        | \-              | Whether user can send file messages     |
| canSendTextMessage   | boolean                                     | ✅        | \-              | Whether user can send text messages     |
| iconPack             | IconPack1                                   | ❌        | defaultIconPack | Icon pack                               |
| inputTextPlaceholder | string                                      | ✅        | \-              | Placeholder for text input              |
| isEditing            | boolean                                     | ✅        | \-              | Sets composer to edit mode              |
| maxLength            | number                                      | ✅        | \-              | Max length for text input               |
| message              | string                                      | ✅        | \-              | Message to be pre-populated             |
| quotedMessage        | string                                      | ✅        | \-              | Quote message to be displayed           |
| rateLimits           | { period: number; maxInvocations: number; } | ✅        | \-              | Rate limits                             |
| storageKey           | string                                      | ✅        | \-              | Key for storing message in localStorage |
| t                    | RtkI18n1                                    | ❌        | useLanguage()   | Language                                |

## Usage Examples

### Basic Usage

```

import { RtkChatComposerView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatComposerView />;

}


```

### With Properties

```

import { RtkChatComposerView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChatComposerView

      canSendFiles={true}

      canSendTextMessage={true}

      inputTextPlaceholder="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchatcomposerview/","name":"RtkChatComposerView"}}]}
```

---

---
title: RtkChatHeader
description: API reference for RtkChatHeader component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatHeader.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatHeader

## Properties

_No properties available._

## Usage Examples

### Basic Usage

```

import { RtkChatHeader } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatHeader />;

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchatheader/","name":"RtkChatHeader"}}]}
```

---

---
title: RtkChatMessage
description: API reference for RtkChatMessage component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatMessage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatMessage

@deprecated `rtk-chat-message` is deprecated and will be removed soon. Use `rtk-message-view` instead.

## Properties

| Property             | Type        | Required | Default         | Description                            |
| -------------------- | ----------- | -------- | --------------- | -------------------------------------- |
| alignRight           | boolean     | ✅        | \-              | aligns message to right                |
| canDelete            | boolean     | ✅        | \-              | can delete message                     |
| canEdit              | boolean     | ✅        | \-              | can edit message                       |
| canPin               | boolean     | ✅        | \-              | can pin this message                   |
| canReply             | boolean     | ✅        | \-              | can quote reply this message           |
| child                | HTMLElement | ✅        | \-              | Child                                  |
| disableControls      | boolean     | ✅        | \-              | disables controls                      |
| hideAvatar           | boolean     | ✅        | \-              | hides avatar                           |
| iconPack             | IconPack1   | ❌        | defaultIconPack | Icon pack                              |
| isContinued          | boolean     | ✅        | \-              | is continued                           |
| isSelf               | boolean     | ✅        | \-              | if sender is self                      |
| isUnread             | boolean     | ✅        | \-              | is unread                              |
| leftAlign            | boolean     | ✅        | \-              | Whether to left align the chat bubbles |
| message              | Message     | ✅        | \-              | message item                           |
| senderDisplayPicture | string      | ✅        | \-              | sender display picture url             |
| size                 | Size        | ✅        | \-              | Size                                   |
| t                    | RtkI18n1    | ❌        | useLanguage()   | Language                               |

## Usage Examples

### Basic Usage

```

import { RtkChatMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatMessage />;

}


```

### With Properties

```

import { RtkChatMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChatMessage

      alignRight={true}

      canDelete={true}

      canEdit={true}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessage/","name":"RtkChatMessage"}}]}
```

---

---
title: RtkChatMessagesUi
description: API reference for RtkChatMessagesUi component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatMessagesUi.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatMessagesUi

@deprecated Use `rtk-chat-messages-ui-paginated` instead.

## Properties

| Property       | Type      | Required | Default         | Description                         |
| -------------- | --------- | -------- | --------------- | ----------------------------------- |
| canPinMessages | boolean   | ✅        | \-              | Can current user pin/unpin messages |
| iconPack       | IconPack1 | ❌        | defaultIconPack | Icon pack                           |
| messages       | Chat\[\]  | ✅        | \-              | Chat Messages                       |
| selectedGroup  | string    | ✅        | \-              | Selected group key                  |
| selfUserId     | string    | ✅        | \-              | User ID of self user                |
| size           | Size1     | ✅        | \-              | Size                                |
| t              | RtkI18n   | ❌        | useLanguage()   | Language                            |

## Usage Examples

### Basic Usage

```

import { RtkChatMessagesUi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatMessagesUi />;

}


```

### With Properties

```

import { RtkChatMessagesUi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChatMessagesUi

      canPinMessages={true}

      messages={[]}

      selectedGroup="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessagesui/","name":"RtkChatMessagesUi"}}]}
```

---

---
title: RtkChatMessagesUiPaginated
description: API reference for RtkChatMessagesUiPaginated component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatMessagesUiPaginated.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatMessagesUiPaginated

## Properties

| Property             | Type                | Required | Default         | Description                                                                                      |
| -------------------- | ------------------- | -------- | --------------- | ------------------------------------------------------------------------------------------------ |
| iconPack             | IconPack            | ❌        | defaultIconPack | Icon pack                                                                                        |
| meeting              | Meeting             | ✅        | \-              | Meeting object                                                                                   |
| privateChatRecipient | Participant \| null | ✅        | \-              | Selected recipient for private chat; when unset, messages are loaded for public chat (Everyone). |
| size                 | Size                | ✅        | \-              | Size                                                                                             |
| t                    | RtkI18n             | ❌        | useLanguage()   | Language                                                                                         |

## Usage Examples

### Basic Usage

```

import { RtkChatMessagesUiPaginated } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatMessagesUiPaginated />;

}


```

### With Properties

```

import { RtkChatMessagesUiPaginated } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChatMessagesUiPaginated

      meeting={meeting}

      privateChatRecipient={participant | null}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessagesuipaginated/","name":"RtkChatMessagesUiPaginated"}}]}
```

---

---
title: RtkChatSearchResults
description: API reference for RtkChatSearchResults component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatSearchResults.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatSearchResults

@deprecated `rtk-chat-search-results` is deprecated and will be removed soon. Use `rtk-chat-messages-ui-paginated` instead. -

## Properties

| Property  | Type      | Required | Default         | Description    |
| --------- | --------- | -------- | --------------- | -------------- |
| channelId | string    | ✅        | \-              | Channel id     |
| iconPack  | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting   | Meeting   | ✅        | \-              | Meeting object |
| query     | string    | ✅        | \-              | Search query   |
| t         | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkChatSearchResults } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatSearchResults />;

}


```

### With Properties

```

import { RtkChatSearchResults } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChatSearchResults

      channelId="example"

      meeting={meeting}

      query="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchatsearchresults/","name":"RtkChatSearchResults"}}]}
```

---

---
title: RtkChatSelector
description: API reference for RtkChatSelector component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatSelector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatSelector

## Properties

| Property  | Type       | Required | Default               | Description    |
| --------- | ---------- | -------- | --------------------- | -------------- |
| config    | UIConfig1  | ❌        | createDefaultConfig() | Config         |
| iconPack  | IconPack   | ❌        | defaultIconPack       | Icon pack      |
| meeting   | Meeting    | ✅        | \-                    | Meeting object |
| overrides | Overrides1 | ❌        | defaultOverrides      | UI Overrides   |
| size      | Size       | ✅        | \-                    | Size           |
| states    | States1    | ✅        | \-                    | States object  |
| t         | RtkI18n    | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkChatSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatSelector />;

}


```

### With Properties

```

import { RtkChatSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChatSelector

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchatselector/","name":"RtkChatSelector"}}]}
```

---

---
title: RtkChatSelectorUi
description: API reference for RtkChatSelectorUi component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatSelectorUi.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatSelectorUi

## Properties

| Property        | Type                   | Required | Default         | Description          |
| --------------- | ---------------------- | -------- | --------------- | -------------------- |
| groups          | ChatGroup\[\]          | ✅        | \-              | Participants         |
| iconPack        | IconPack1              | ❌        | defaultIconPack | Icon pack            |
| selectedGroupId | string                 | ✅        | \-              | Selected participant |
| selfUserId      | string                 | ✅        | \-              | Self User ID         |
| t               | RtkI18n                | ❌        | useLanguage()   | Language             |
| unreadCounts    | Record<string, number> | ✅        | \-              | Unread counts        |

## Usage Examples

### Basic Usage

```

import { RtkChatSelectorUi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatSelectorUi />;

}


```

### With Properties

```

import { RtkChatSelectorUi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChatSelectorUi

      groups={[]}

      selectedGroupId="example"

      selfUserId="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchatselectorui/","name":"RtkChatSelectorUi"}}]}
```

---

---
title: RtkChatToggle
description: API reference for RtkChatToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkChatToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkChatToggle

A button which toggles visibility of chat. You need to pass the `meeting` object to it to see the unread messages count badge. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'chat' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkChatToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkChatToggle />;

}


```

### With Properties

```

import { RtkChatToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkChatToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkchattoggle/","name":"RtkChatToggle"}}]}
```

---

---
title: RtkClock
description: API reference for RtkClock component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkClock.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkClock

Shows the time elapsed in a meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |

## Usage Examples

### Basic Usage

```

import { RtkClock } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkClock />;

}


```

### With Properties

```

import { RtkClock } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkClock

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkclock/","name":"RtkClock"}}]}
```

---

---
title: RtkConfirmationModal
description: API reference for RtkConfirmationModal component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkConfirmationModal.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkConfirmationModal

A confirmation modal.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkConfirmationModal } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkConfirmationModal />;

}


```

### With Properties

```

import { RtkConfirmationModal } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkConfirmationModal

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkconfirmationmodal/","name":"RtkConfirmationModal"}}]}
```

---

---
title: RtkControlbar
description: API reference for RtkControlbar component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkControlbar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkControlbar

Controlbar component provides you with various designs as variants.

## Properties

| Property      | Type               | Required | Default               | Description                      |
| ------------- | ------------------ | -------- | --------------------- | -------------------------------- |
| config        | UIConfig1          | ❌        | createDefaultConfig() | Config                           |
| disableRender | boolean            | ✅        | \-                    | Whether to render the default UI |
| iconPack      | IconPack1          | ❌        | defaultIconPack       | Icon Pack                        |
| meeting       | Meeting            | ✅        | \-                    | Meeting                          |
| size          | Size               | ✅        | \-                    | Size                             |
| states        | States             | ✅        | \-                    | States                           |
| t             | RtkI18n            | ❌        | useLanguage()         | Language                         |
| variant       | 'solid' \| 'boxed' | ✅        | \-                    | Variant                          |

## Usage Examples

### Basic Usage

```

import { RtkControlbar } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkControlbar />;

}


```

### With Properties

```

import { RtkControlbar } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkControlbar

      disableRender={true}

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkcontrolbar/","name":"RtkControlbar"}}]}
```

---

---
title: RtkControlbarButton
description: API reference for RtkControlbarButton component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkControlbarButton.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkControlbarButton

A skeleton component used for composing custom controlbar buttons.

## Properties

| Property    | Type               | Required | Default         | Description                                                    |
| ----------- | ------------------ | -------- | --------------- | -------------------------------------------------------------- |
| brandIcon   | boolean            | ✅        | \-              | Whether icon requires brand color                              |
| disabled    | boolean            | ✅        | \-              | Whether button is disabled                                     |
| icon        | string             | ✅        | \-              | Icon                                                           |
| iconPack    | IconPack           | ❌        | defaultIconPack | Icon pack                                                      |
| isLoading   | boolean            | ✅        | \-              | Loading state Ignores current icon and shows a spinner if true |
| label       | string             | ✅        | \-              | Label of button                                                |
| showWarning | boolean            | ✅        | \-              | Whether to show warning icon                                   |
| size        | Size               | ✅        | \-              | Size                                                           |
| variant     | ControlBarVariant1 | ✅        | \-              | Variant                                                        |

## Usage Examples

### Basic Usage

```

import { RtkControlbarButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkControlbarButton />;

}


```

### With Properties

```

import { RtkControlbarButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkControlbarButton

      brandIcon={true}

      disabled={true}

      icon="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkcontrolbarbutton/","name":"RtkControlbarButton"}}]}
```

---

---
title: RtkCounter
description: API reference for RtkCounter component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkCounter.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkCounter

A number picker with increment and decrement buttons.

## Properties

| Property | Type      | Required | Default         | Description   |
| -------- | --------- | -------- | --------------- | ------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack     |
| minValue | number    | ✅        | \-              | Minimum value |
| size     | Size1     | ✅        | \-              | Size          |
| t        | RtkI18n   | ❌        | useLanguage()   | Language      |
| value    | number    | ✅        | \-              | Initial value |

## Usage Examples

### Basic Usage

```

import { RtkCounter } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkCounter />;

}


```

### With Properties

```

import { RtkCounter } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkCounter

      minValue={42}

      size="md"

      value={42}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkcounter/","name":"RtkCounter"}}]}
```

---

---
title: RtkDebugger
description: API reference for RtkDebugger component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkDebugger.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkDebugger

A troubleshooting component to identify and fix any issues in the meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkDebugger } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkDebugger />;

}


```

### With Properties

```

import { RtkDebugger } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkDebugger

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkdebugger/","name":"RtkDebugger"}}]}
```

---

---
title: RtkDebuggerAudio
description: API reference for RtkDebuggerAudio component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkDebuggerAudio.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkDebuggerAudio

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkDebuggerAudio } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkDebuggerAudio />;

}


```

### With Properties

```

import { RtkDebuggerAudio } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkDebuggerAudio

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggeraudio/","name":"RtkDebuggerAudio"}}]}
```

---

---
title: RtkDebuggerScreenshare
description: API reference for RtkDebuggerScreenshare component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkDebuggerScreenshare.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkDebuggerScreenshare

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkDebuggerScreenshare } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkDebuggerScreenshare />;

}


```

### With Properties

```

import { RtkDebuggerScreenshare } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkDebuggerScreenshare

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggerscreenshare/","name":"RtkDebuggerScreenshare"}}]}
```

---

---
title: RtkDebuggerSystem
description: API reference for RtkDebuggerSystem component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkDebuggerSystem.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkDebuggerSystem

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkDebuggerSystem } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkDebuggerSystem />;

}


```

### With Properties

```

import { RtkDebuggerSystem } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkDebuggerSystem

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggersystem/","name":"RtkDebuggerSystem"}}]}
```

---

---
title: RtkDebuggerToggle
description: API reference for RtkDebuggerToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkDebuggerToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkDebuggerToggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkDebuggerToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkDebuggerToggle />;

}


```

### With Properties

```

import { RtkDebuggerToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkDebuggerToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggertoggle/","name":"RtkDebuggerToggle"}}]}
```

---

---
title: RtkDebuggerVideo
description: API reference for RtkDebuggerVideo component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkDebuggerVideo.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkDebuggerVideo

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| states   | States1   | ✅        | \-              | States object  |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkDebuggerVideo } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkDebuggerVideo />;

}


```

### With Properties

```

import { RtkDebuggerVideo } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkDebuggerVideo

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggervideo/","name":"RtkDebuggerVideo"}}]}
```

---

---
title: RtkDialog
description: API reference for RtkDialog component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkDialog.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkDialog

A dialog component.

## Properties

| Property         | Type     | Required | Default               | Description                            |
| ---------------- | -------- | -------- | --------------------- | -------------------------------------- |
| config           | UIConfig | ❌        | createDefaultConfig() | UI Config                              |
| disableEscapeKey | boolean  | ✅        | \-                    | Whether Escape key can close the modal |
| hideCloseButton  | boolean  | ✅        | \-                    | Whether to show the close button       |
| iconPack         | IconPack | ❌        | defaultIconPack       | Icon pack                              |
| meeting          | Meeting  | ✅        | \-                    | Meeting object                         |
| open             | boolean  | ✅        | \-                    | Whether a dialog is open or not        |
| size             | Size     | ✅        | \-                    | Size                                   |
| states           | States   | ✅        | \-                    | States object                          |
| t                | RtkI18n  | ❌        | useLanguage()         | Language                               |

## Usage Examples

### Basic Usage

```

import { RtkDialog } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkDialog />;

}


```

### With Properties

```

import { RtkDialog } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkDialog

      disableEscapeKey={true}

      hideCloseButton={true}

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkdialog/","name":"RtkDialog"}}]}
```

---

---
title: RtkDialogManager
description: API reference for RtkDialogManager component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkDialogManager.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkDialogManager

A component which handles all dialog elements in a component such as:

* rtk-settings
* rtk-leave-meeting
* rtk-permissions-message
* rtk-image-viewer
* rtk-breakout-rooms-manager This components depends on the values from `states` object.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | UI Config      |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkDialogManager } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkDialogManager />;

}


```

### With Properties

```

import { RtkDialogManager } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkDialogManager

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkdialogmanager/","name":"RtkDialogManager"}}]}
```

---

---
title: RtkDraftAttachmentView
description: API reference for RtkDraftAttachmentView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkDraftAttachmentView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkDraftAttachmentView

A component which renders the draft attachment to send

## Properties

| Property   | Type                                     | Required | Default         | Description           |
| ---------- | ---------------------------------------- | -------- | --------------- | --------------------- |
| attachment | { type: 'image' \| 'file'; file: File; } | ✅        | \-              | Attachment to display |
| iconPack   | IconPack1                                | ❌        | defaultIconPack | Icon pack             |
| t          | RtkI18n1                                 | ❌        | useLanguage()   | Language              |

## Usage Examples

### Basic Usage

```

import { RtkDraftAttachmentView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkDraftAttachmentView />;

}


```

### With Properties

```

import { RtkDraftAttachmentView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkDraftAttachmentView

      attachment={{}}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkdraftattachmentview/","name":"RtkDraftAttachmentView"}}]}
```

---

---
title: RtkEmojiPicker
description: API reference for RtkEmojiPicker component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkEmojiPicker.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkEmojiPicker

A very simple emoji picker component.

## Properties

| Property        | Type     | Required | Default         | Description                               |
| --------------- | -------- | -------- | --------------- | ----------------------------------------- |
| focusWhenOpened | boolean  | ✅        | \-              | Controls whether or not to focus on mount |
| iconPack        | IconPack | ❌        | defaultIconPack | Icon pack                                 |
| t               | RtkI18n  | ❌        | useLanguage()   | Language                                  |

## Usage Examples

### Basic Usage

```

import { RtkEmojiPicker } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkEmojiPicker />;

}


```

### With Properties

```

import { RtkEmojiPicker } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkEmojiPicker

      focusWhenOpened={true}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkemojipicker/","name":"RtkEmojiPicker"}}]}
```

---

---
title: RtkEmojiPickerButton
description: API reference for RtkEmojiPickerButton component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkEmojiPickerButton.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkEmojiPickerButton

## Properties

| Property | Type      | Required | Default         | Description            |
| -------- | --------- | -------- | --------------- | ---------------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack              |
| isActive | boolean   | ✅        | \-              | Active state indicator |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language               |

## Usage Examples

### Basic Usage

```

import { RtkEmojiPickerButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkEmojiPickerButton />;

}


```

### With Properties

```

import { RtkEmojiPickerButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkEmojiPickerButton

      isActive={true}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkemojipickerbutton/","name":"RtkEmojiPickerButton"}}]}
```

---

---
title: RtkEndedScreen
description: API reference for RtkEndedScreen component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkEndedScreen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkEndedScreen

A screen which shows a meeting has ended.

## Properties

| Property | Type     | Required | Default               | Description   |
| -------- | -------- | -------- | --------------------- | ------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack     |
| meeting  | Meeting  | ✅        | \-                    | Global states |
| size     | Size     | ✅        | \-                    | Size          |
| states   | States   | ✅        | \-                    | Global states |
| t        | RtkI18n  | ❌        | useLanguage()         | Language      |

## Usage Examples

### Basic Usage

```

import { RtkEndedScreen } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkEndedScreen />;

}


```

### With Properties

```

import { RtkEndedScreen } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkEndedScreen

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkendedscreen/","name":"RtkEndedScreen"}}]}
```

---

---
title: RtkFileDropzone
description: API reference for RtkFileDropzone component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkFileDropzone.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkFileDropzone

## Properties

| Property | Type        | Required | Default         | Description                                 |
| -------- | ----------- | -------- | --------------- | ------------------------------------------- |
| hostEl   | HTMLElement | ✅        | \-              | Host element on which drop events to attach |
| iconPack | IconPack1   | ❌        | defaultIconPack | Icon pack                                   |
| t        | RtkI18n1    | ❌        | useLanguage()   | Language                                    |

## Usage Examples

### Basic Usage

```

import { RtkFileDropzone } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkFileDropzone />;

}


```

### With Properties

```

import { RtkFileDropzone } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkFileDropzone

      hostEl={htmlelement}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkfiledropzone/","name":"RtkFileDropzone"}}]}
```

---

---
title: RtkFileMessage
description: API reference for RtkFileMessage component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkFileMessage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkFileMessage

@deprecated `rtk-file-message` is deprecated and will be removed soon. Use `rtk-file-message-view` instead. A component which renders a file message from chat.

## Properties

| Property    | Type        | Required | Default         | Description                                             |
| ----------- | ----------- | -------- | --------------- | ------------------------------------------------------- |
| iconPack    | IconPack    | ❌        | defaultIconPack | Icon pack                                               |
| isContinued | boolean     | ✅        | \-              | Whether the message is continued by same user           |
| message     | FileMessage | ✅        | \-              | Text message object                                     |
| now         | Date        | ✅        | \-              | Date object of now, to calculate distance between dates |
| showBubble  | boolean     | ✅        | \-              | show message in bubble                                  |
| t           | RtkI18n     | ❌        | useLanguage()   | Language                                                |

## Usage Examples

### Basic Usage

```

import { RtkFileMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkFileMessage />;

}


```

### With Properties

```

import { RtkFileMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkFileMessage

      isContinued={true}

      message={filemessage}

      now={date}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkfilemessage/","name":"RtkFileMessage"}}]}
```

---

---
title: RtkFileMessageView
description: API reference for RtkFileMessageView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkFileMessageView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkFileMessageView

A component which renders a file message.

## Properties

| Property | Type      | Required | Default         | Description      |
| -------- | --------- | -------- | --------------- | ---------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack        |
| name     | string    | ✅        | \-              | Name of the file |
| size     | number    | ✅        | \-              | Size of the file |
| url      | string    | ✅        | \-              | Url of the file  |

## Usage Examples

### Basic Usage

```

import { RtkFileMessageView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkFileMessageView />;

}


```

### With Properties

```

import { RtkFileMessageView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkFileMessageView

      name="example"

      size={42}

      url="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkfilemessageview/","name":"RtkFileMessageView"}}]}
```

---

---
title: RtkFilePickerButton
description: API reference for RtkFilePickerButton component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkFilePickerButton.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkFilePickerButton

## Properties

| Property | Type            | Required | Default         | Description                               |
| -------- | --------------- | -------- | --------------- | ----------------------------------------- |
| filter   | string          | ✅        | \-              | File type filter to open file picker with |
| icon     | keyof IconPack1 | ✅        | \-              | Icon                                      |
| iconPack | IconPack1       | ❌        | defaultIconPack | Icon pack                                 |
| label    | string          | ✅        | \-              | Label for tooltip                         |
| t        | RtkI18n1        | ❌        | useLanguage()   | Language                                  |

## Usage Examples

### Basic Usage

```

import { RtkFilePickerButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkFilePickerButton />;

}


```

### With Properties

```

import { RtkFilePickerButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkFilePickerButton

      filter="example"

      icon={defaultIconPack}

      label="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkfilepickerbutton/","name":"RtkFilePickerButton"}}]}
```

---

---
title: RtkFullscreenToggle
description: API reference for RtkFullscreenToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkFullscreenToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkFullscreenToggle

A button which toggles full screen mode for any existing `rtk-meeting` component in the DOM.

## Properties

| Property      | Type              | Required | Default         | Description                  |
| ------------- | ----------------- | -------- | --------------- | ---------------------------- |
| iconPack      | IconPack          | ❌        | defaultIconPack | Icon pack                    |
| size          | Size              | ✅        | \-              | Size                         |
| states        | States            | ✅        | \-              | States object                |
| t             | RtkI18n           | ❌        | useLanguage()   | Language                     |
| targetElement | HTMLElement       | ✅        | \-              | Target Element to fullscreen |
| variant       | ControlBarVariant | ✅        | \-              | Variant                      |

## Usage Examples

### Basic Usage

```

import { RtkFullscreenToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkFullscreenToggle />;

}


```

### With Properties

```

import { RtkFullscreenToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkFullscreenToggle

      size="md"

      targetElement={htmlelement}

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkfullscreentoggle/","name":"RtkFullscreenToggle"}}]}
```

---

---
title: RtkGrid
description: API reference for RtkGrid component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkGrid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkGrid

The main grid component which abstracts all the grid handling logic and renders it for you.

## Properties

| Property    | Type       | Required | Default               | Description                          |
| ----------- | ---------- | -------- | --------------------- | ------------------------------------ |
| aspectRatio | string     | ✅        | \-                    | The aspect ratio of each participant |
| config      | UIConfig   | ❌        | createDefaultConfig() | Config object                        |
| gap         | number     | ✅        | \-                    | Gap between participants             |
| gridSize    | GridSize   | ✅        | \-                    | Grid size                            |
| iconPack    | IconPack   | ❌        | defaultIconPack       | Icon pack                            |
| layout      | GridLayout | ✅        | \-                    | Grid Layout                          |
| meeting     | Meeting    | ✅        | \-                    | Meeting object                       |
| overrides   | any        | ✅        | \-                    | @deprecated                          |
| size        | Size       | ✅        | \-                    | Size                                 |
| states      | States     | ✅        | \-                    | States                               |
| t           | RtkI18n    | ❌        | useLanguage()         | Language                             |

## Usage Examples

### Basic Usage

```

import { RtkGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkGrid />;

}


```

### With Properties

```

import { RtkGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkGrid

      aspectRatio="example"

      gap={42}

      gridSize="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkgrid/","name":"RtkGrid"}}]}
```

---

---
title: RtkGridPagination
description: API reference for RtkGridPagination component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkGridPagination.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkGridPagination

A component which allows you to change current page and view mode of active participants list. This is reflected in the `rtk-grid` component.

## Properties

| Property | Type                   | Required | Default         | Description    |
| -------- | ---------------------- | -------- | --------------- | -------------- |
| iconPack | IconPack               | ❌        | defaultIconPack | Icon Pack      |
| meeting  | Meeting                | ✅        | \-              | Meeting object |
| size     | Size                   | ✅        | \-              | Size Prop      |
| states   | States                 | ✅        | \-              | States         |
| t        | RtkI18n                | ❌        | useLanguage()   | Language       |
| variant  | GridPaginationVariants | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkGridPagination } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkGridPagination />;

}


```

### With Properties

```

import { RtkGridPagination } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkGridPagination

      meeting={meeting}

      size="md"

      variant={gridpaginationvariants}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkgridpagination/","name":"RtkGridPagination"}}]}
```

---

---
title: RtkHeader
description: API reference for RtkHeader component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkHeader.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkHeader

A component that houses all the header components.

## Properties

| Property      | Type               | Required | Default               | Description                      |
| ------------- | ------------------ | -------- | --------------------- | -------------------------------- |
| config        | UIConfig1          | ❌        | createDefaultConfig() | Config                           |
| disableRender | boolean            | ✅        | \-                    | Whether to render the default UI |
| iconPack      | IconPack1          | ❌        | defaultIconPack       | Icon Pack                        |
| meeting       | Meeting            | ✅        | \-                    | Meeting                          |
| size          | Size               | ✅        | \-                    | Size                             |
| states        | States             | ✅        | \-                    | States                           |
| t             | RtkI18n            | ❌        | useLanguage()         | Language                         |
| variant       | 'solid' \| 'boxed' | ✅        | \-                    | Variant                          |

## Usage Examples

### Basic Usage

```

import { RtkHeader } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkHeader />;

}


```

### With Properties

```

import { RtkHeader } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkHeader

      disableRender={true}

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkheader/","name":"RtkHeader"}}]}
```

---

---
title: RtkIcon
description: API reference for RtkIcon component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkIcon.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkIcon

An icon component which accepts an svg string and renders it.

## Properties

| Property | Type        | Required | Default | Description  |
| -------- | ----------- | -------- | ------- | ------------ |
| icon     | string      | ✅        | \-      | Icon         |
| size     | Size1       | ✅        | \-      | Size         |
| variant  | IconVariant | ✅        | \-      | Icon variant |

## Usage Examples

### Basic Usage

```

import { RtkIcon } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkIcon />;

}


```

### With Properties

```

import { RtkIcon } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkIcon

      icon="example"

      size="md"

      variant="primary"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkicon/","name":"RtkIcon"}}]}
```

---

---
title: RtkIdleScreen
description: API reference for RtkIdleScreen component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkIdleScreen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkIdleScreen

A screen that handles the idle state, i.e; when you are waiting for data about the meeting, specifically the `meeting` object.

## Properties

| Property | Type     | Required | Default               | Description   |
| -------- | -------- | -------- | --------------------- | ------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack     |
| meeting  | Meeting  | ✅        | \-                    | Meeting       |
| t        | RtkI18n  | ❌        | useLanguage()         | Language      |

## Usage Examples

### Basic Usage

```

import { RtkIdleScreen } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkIdleScreen />;

}


```

### With Properties

```

import { RtkIdleScreen } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkIdleScreen

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkidlescreen/","name":"RtkIdleScreen"}}]}
```

---

---
title: RtkImageMessage
description: API reference for RtkImageMessage component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkImageMessage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkImageMessage

@deprecated `rtk-image-message` is deprecated and will be removed soon. Use `rtk-image-message-view` instead. A component which renders an image message from chat.

## Properties

| Property    | Type         | Required | Default         | Description                                             |
| ----------- | ------------ | -------- | --------------- | ------------------------------------------------------- |
| iconPack    | IconPack     | ❌        | defaultIconPack | Icon pack                                               |
| isContinued | boolean      | ✅        | \-              | Whether the message is continued by same user           |
| message     | ImageMessage | ✅        | \-              | Text message object                                     |
| now         | Date         | ✅        | \-              | Date object of now, to calculate distance between dates |
| showBubble  | boolean      | ✅        | \-              | show message in bubble                                  |
| t           | RtkI18n      | ❌        | useLanguage()   | Language                                                |

## Usage Examples

### Basic Usage

```

import { RtkImageMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkImageMessage />;

}


```

### With Properties

```

import { RtkImageMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkImageMessage

      isContinued={true}

      message={imagemessage}

      now={date}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkimagemessage/","name":"RtkImageMessage"}}]}
```

---

---
title: RtkImageMessageView
description: API reference for RtkImageMessageView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkImageMessageView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkImageMessageView

A component which renders an image message.

## Properties

| Property | Type      | Required | Default         | Description      |
| -------- | --------- | -------- | --------------- | ---------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack        |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language         |
| url      | string    | ✅        | \-              | Url of the image |

## Usage Examples

### Basic Usage

```

import { RtkImageMessageView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkImageMessageView />;

}


```

### With Properties

```

import { RtkImageMessageView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkImageMessageView

      url="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkimagemessageview/","name":"RtkImageMessageView"}}]}
```

---

---
title: RtkImageViewer
description: API reference for RtkImageViewer component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkImageViewer.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkImageViewer

A component which shows an image sent via chat.

## Properties

| Property | Type         | Required | Default         | Description   |
| -------- | ------------ | -------- | --------------- | ------------- |
| iconPack | IconPack     | ❌        | defaultIconPack | Icon pack     |
| image    | ImageMessage | ✅        | \-              | Image message |
| size     | Size         | ✅        | \-              | Size          |
| t        | RtkI18n      | ❌        | useLanguage()   | Language      |

## Usage Examples

### Basic Usage

```

import { RtkImageViewer } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkImageViewer />;

}


```

### With Properties

```

import { RtkImageViewer } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkImageViewer

      image={imagemessage}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkimageviewer/","name":"RtkImageViewer"}}]}
```

---

---
title: RtkInformationTooltip
description: API reference for RtkInformationTooltip component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkInformationTooltip.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkInformationTooltip

## Properties

| Property | Type      | Required | Default         | Description |
| -------- | --------- | -------- | --------------- | ----------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack   |

## Usage Examples

### Basic Usage

```

import { RtkInformationTooltip } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkInformationTooltip />;

}


```

### With Properties

```

import { RtkInformationTooltip } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkInformationTooltip

      iconPack={defaultIconPack}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkinformationtooltip/","name":"RtkInformationTooltip"}}]}
```

---

---
title: RtkJoinStage
description: API reference for RtkJoinStage component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkJoinStage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkJoinStage

## Properties

| Property   | Type            | Required | Default               | Description    |
| ---------- | --------------- | -------- | --------------------- | -------------- |
| config     | UIConfig        | ❌        | createDefaultConfig() | UI Config      |
| dataConfig | ModalDataConfig | ✅        | \-                    | Content Config |
| iconPack   | IconPack        | ❌        | defaultIconPack       | Icon pack      |
| meeting    | Meeting         | ✅        | \-                    | Meeting object |
| size       | Size            | ✅        | \-                    | Size           |
| states     | States          | ✅        | \-                    | States object  |
| t          | RtkI18n         | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkJoinStage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkJoinStage />;

}


```

### With Properties

```

import { RtkJoinStage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkJoinStage

      dataConfig={modaldataconfig}

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkjoinstage/","name":"RtkJoinStage"}}]}
```

---

---
title: RtkLeaveButton
description: API reference for RtkLeaveButton component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkLeaveButton.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkLeaveButton

A button which toggles visilibility of the leave confirmation dialog.

## Properties

| Property | Type              | Required | Default         | Description |
| -------- | ----------------- | -------- | --------------- | ----------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack   |
| size     | Size              | ✅        | \-              | Size        |
| t        | RtkI18n           | ❌        | useLanguage()   | Language    |
| variant  | ControlBarVariant | ✅        | \-              | Variant     |

## Usage Examples

### Basic Usage

```

import { RtkLeaveButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkLeaveButton />;

}


```

### With Properties

```

import { RtkLeaveButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkLeaveButton

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkleavebutton/","name":"RtkLeaveButton"}}]}
```

---

---
title: RtkLeaveMeeting
description: API reference for RtkLeaveMeeting component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkLeaveMeeting.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkLeaveMeeting

A component which allows you to leave a meeting or end meeting for all, if you have the permission.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkLeaveMeeting } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkLeaveMeeting />;

}


```

### With Properties

```

import { RtkLeaveMeeting } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkLeaveMeeting

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkleavemeeting/","name":"RtkLeaveMeeting"}}]}
```

---

---
title: RtkLivestreamIndicator
description: API reference for RtkLivestreamIndicator component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkLivestreamIndicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkLivestreamIndicator

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkLivestreamIndicator } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkLivestreamIndicator />;

}


```

### With Properties

```

import { RtkLivestreamIndicator } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkLivestreamIndicator

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamindicator/","name":"RtkLivestreamIndicator"}}]}
```

---

---
title: RtkLivestreamPlayer
description: API reference for RtkLivestreamPlayer component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkLivestreamPlayer.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkLivestreamPlayer

## Properties

| Property | Type      | Required | Default         | Description    |
| -------- | --------- | -------- | --------------- | -------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting   | ✅        | \-              | Meeting object |
| size     | Size1     | ✅        | \-              | Size           |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkLivestreamPlayer } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkLivestreamPlayer />;

}


```

### With Properties

```

import { RtkLivestreamPlayer } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkLivestreamPlayer

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamplayer/","name":"RtkLivestreamPlayer"}}]}
```

---

---
title: RtkLivestreamToggle
description: API reference for RtkLivestreamToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkLivestreamToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkLivestreamToggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size1             | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkLivestreamToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkLivestreamToggle />;

}


```

### With Properties

```

import { RtkLivestreamToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkLivestreamToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamtoggle/","name":"RtkLivestreamToggle"}}]}
```

---

---
title: RtkLogo
description: API reference for RtkLogo component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkLogo.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkLogo

A component which loads the logo from your config, or via the `logo-url` attribute.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| logoUrl  | string   | ✅        | \-                    | Logo URL       |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkLogo } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkLogo />;

}


```

### With Properties

```

import { RtkLogo } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkLogo

      logoUrl="example"

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtklogo/","name":"RtkLogo"}}]}
```

---

---
title: RtkMarkdownView
description: API reference for RtkMarkdownView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMarkdownView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMarkdownView

## Properties

| Property  | Type   | Required | Default | Description                              |
| --------- | ------ | -------- | ------- | ---------------------------------------- |
| maxLength | number | ✅        | \-      | max length of text to render as markdown |
| text      | string | ✅        | \-      | raw text to render as markdown           |

## Usage Examples

### Basic Usage

```

import { RtkMarkdownView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMarkdownView />;

}


```

### With Properties

```

import { RtkMarkdownView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMarkdownView

      maxLength={42}

      text="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmarkdownview/","name":"RtkMarkdownView"}}]}
```

---

---
title: RtkMeeting
description: API reference for RtkMeeting component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMeeting.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMeeting

A single component which renders an entire meeting UI. It loads your preset and renders the UI based on it. With this component, you don't have to handle all the states, dialogs and other smaller bits of managing the application.

## Properties

| Property             | Type        | Required | Default          | Description                                                         |
| -------------------- | ----------- | -------- | ---------------- | ------------------------------------------------------------------- |
| applyDesignSystem    | boolean     | ✅        | \-               | Whether to apply the design system on the document root from config |
| config               | UIConfig    | ✅        | \-               | UI Config                                                           |
| gridLayout           | GridLayout1 | ✅        | \-               | Grid layout                                                         |
| iconPack             | IconPack    | ❌        | defaultIconPack  | Icon pack                                                           |
| leaveOnUnmount       | boolean     | ✅        | \-               | Whether participant should leave when this component gets unmounted |
| loadConfigFromPreset | boolean     | ✅        | \-               | Whether to load config from preset                                  |
| meeting              | Meeting     | ✅        | \-               | Meeting object                                                      |
| mode                 | MeetingMode | ✅        | \-               | Fill type                                                           |
| overrides            | Overrides   | ❌        | defaultOverrides | UI Kit Overrides                                                    |
| showSetupScreen      | boolean     | ✅        | \-               | Whether to show setup screen or not                                 |
| size                 | Size        | ✅        | \-               | Size                                                                |
| t                    | RtkI18n     | ❌        | useLanguage()    | Language                                                            |

## Usage Examples

### Basic Usage

```

import { RtkMeeting } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMeeting />;

}


```

### With Properties

```

import { RtkMeeting } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMeeting

      applyDesignSystem={true}

      config={defaultUiConfig}

      gridLayout={gridlayout1}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmeeting/","name":"RtkMeeting"}}]}
```

---

---
title: RtkMeetingTitle
description: API reference for RtkMeetingTitle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMeetingTitle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMeetingTitle

Displays the title of the meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkMeetingTitle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMeetingTitle />;

}


```

### With Properties

```

import { RtkMeetingTitle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMeetingTitle

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmeetingtitle/","name":"RtkMeetingTitle"}}]}
```

---

---
title: RtkMenu
description: API reference for RtkMenu component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMenu.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMenu

A menu component.

## Properties

| Property  | Type      | Required | Default         | Description       |
| --------- | --------- | -------- | --------------- | ----------------- |
| iconPack  | IconPack  | ❌        | defaultIconPack | Icon pack         |
| offset    | number    | ✅        | \-              | Offset in px      |
| placement | Placement | ✅        | \-              | Placement of menu |
| size      | Size      | ✅        | \-              | Size              |
| t         | RtkI18n   | ❌        | useLanguage()   | Language          |

## Usage Examples

### Basic Usage

```

import { RtkMenu } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMenu />;

}


```

### With Properties

```

import { RtkMenu } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMenu

      offset={42}

      placement={placement}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmenu/","name":"RtkMenu"}}]}
```

---

---
title: RtkMenuItem
description: API reference for RtkMenuItem component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMenuItem.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMenuItem

A menu item component.

## Properties

| Property    | Type                     | Required | Default         | Description |
| ----------- | ------------------------ | -------- | --------------- | ----------- |
| iconPack    | IconPack                 | ❌        | defaultIconPack | Icon pack   |
| menuVariant | 'primary' \| 'secondary' | ✅        | \-              | Variant     |
| size        | Size                     | ✅        | \-              | Size        |
| t           | RtkI18n                  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

import { RtkMenuItem } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMenuItem />;

}


```

### With Properties

```

import { RtkMenuItem } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMenuItem

      menuVariant={'primary' | 'secondary'}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmenuitem/","name":"RtkMenuItem"}}]}
```

---

---
title: RtkMenuList
description: API reference for RtkMenuList component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMenuList.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMenuList

A menu list component.

## Properties

| Property    | Type                     | Required | Default         | Description |
| ----------- | ------------------------ | -------- | --------------- | ----------- |
| iconPack    | IconPack                 | ❌        | defaultIconPack | Icon pack   |
| menuVariant | 'primary' \| 'secondary' | ✅        | \-              | Variant     |
| t           | RtkI18n                  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

import { RtkMenuList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMenuList />;

}


```

### With Properties

```

import { RtkMenuList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMenuList

      menuVariant={'primary' | 'secondary'}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmenulist/","name":"RtkMenuList"}}]}
```

---

---
title: RtkMessageListView
description: API reference for RtkMessageListView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMessageListView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMessageListView

A component which renders list of messages.

## Properties

| Property          | Type                              | Required | Default         | Description                                                                    |
| ----------------- | --------------------------------- | -------- | --------------- | ------------------------------------------------------------------------------ |
| estimateItemSize  | number                            | ✅        | \-              | Estimated height of an item                                                    |
| iconPack          | IconPack1                         | ❌        | defaultIconPack | Icon pack                                                                      |
| loadMore          | (lastMessage: Message)            | ✅        | \-              | Function to load more messages. Messages returned from this will be preprended |
| messages          | Message\[\]                       | ✅        | \-              | Messages to render                                                             |
| renderer          | (message: Message, index: number) | ✅        | \-              | Render function of the message                                                 |
| visibleItemsCount | number                            | ✅        | \-              | Maximum visible messages                                                       |

## Usage Examples

### Basic Usage

```

import { RtkMessageListView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMessageListView />;

}


```

### With Properties

```

import { RtkMessageListView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMessageListView

      estimateItemSize={42}

      loadMore={(lastmessage: message)}

      messages={[]}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmessagelistview/","name":"RtkMessageListView"}}]}
```

---

---
title: RtkMessageView
description: API reference for RtkMessageView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMessageView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMessageView

## Properties

| Property       | Type                     | Required | Default         | Description                             |
| -------------- | ------------------------ | -------- | --------------- | --------------------------------------- |
| actions        | MessageAction\[\]        | ✅        | \-              | List of actions to show in menu         |
| authorName     | string                   | ✅        | \-              | Author display label                    |
| avatarUrl      | string                   | ✅        | \-              | Avatar image url                        |
| hideAuthorName | boolean                  | ✅        | \-              | Hides author display label              |
| hideAvatar     | boolean                  | ✅        | \-              | Hides avatar                            |
| hideMetadata   | boolean                  | ✅        | \-              | Hides metadata (time)                   |
| iconPack       | IconPack1                | ❌        | defaultIconPack | Icon pack                               |
| isEdited       | boolean                  | ✅        | \-              | Has the message been edited             |
| isSelf         | boolean                  | ✅        | \-              | Is the message sent by the current user |
| messageType    | Message\['type'\]        | ✅        | \-              | Type of message                         |
| pinned         | boolean                  | ✅        | \-              | Is message pinned                       |
| time           | Date                     | ✅        | \-              | Time when message was sent              |
| variant        | 'plain' \| 'bubble'      | ✅        | \-              | Appearance                              |
| viewType       | 'incoming' \| 'outgoing' | ✅        | \-              | Render                                  |

## Usage Examples

### Basic Usage

```

import { RtkMessageView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMessageView />;

}


```

### With Properties

```

import { RtkMessageView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMessageView

      actions={[]}

      authorName="example"

      avatarUrl="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmessageview/","name":"RtkMessageView"}}]}
```

---

---
title: RtkMicrophoneSelector
description: API reference for RtkMicrophoneSelector component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMicrophoneSelector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMicrophoneSelector

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type               | Required | Default         | Description    |
| -------- | ------------------ | -------- | --------------- | -------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting            | ✅        | \-              | Meeting object |
| size     | Size               | ✅        | \-              | Size           |
| t        | RtkI18n            | ❌        | useLanguage()   | Language       |
| variant  | 'full' \| 'inline' | ✅        | \-              | variant        |

## Usage Examples

### Basic Usage

```

import { RtkMicrophoneSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMicrophoneSelector />;

}


```

### With Properties

```

import { RtkMicrophoneSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMicrophoneSelector

      meeting={meeting}

      size="md"

      variant={'full' | 'inline'}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmicrophoneselector/","name":"RtkMicrophoneSelector"}}]}
```

---

---
title: RtkMicToggle
description: API reference for RtkMicToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMicToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMicToggle

A button which toggles your microphone.

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkMicToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMicToggle />;

}


```

### With Properties

```

import { RtkMicToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMicToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmictoggle/","name":"RtkMicToggle"}}]}
```

---

---
title: RtkMixedGrid
description: API reference for RtkMixedGrid component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMixedGrid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMixedGrid

A grid component which handles screenshares, plugins and participants.

## Properties

| Property                | Type          | Required | Default               | Description                                           |
| ----------------------- | ------------- | -------- | --------------------- | ----------------------------------------------------- |
| aspectRatio             | string        | ✅        | \-                    | Aspect Ratio of participant tile Format: width:height |
| config                  | UIConfig      | ❌        | createDefaultConfig() | UI Config                                             |
| gap                     | number        | ✅        | \-                    | Gap between participant tiles                         |
| gridSize                | GridSize1     | ✅        | \-                    | Grid size                                             |
| iconPack                | IconPack      | ❌        | defaultIconPack       | Icon Pack                                             |
| layout                  | GridLayout1   | ✅        | \-                    | Grid Layout                                           |
| meeting                 | Meeting       | ✅        | \-                    | Meeting object                                        |
| participants            | Peer\[\]      | ✅        | \-                    | Participants                                          |
| pinnedParticipants      | Peer\[\]      | ✅        | \-                    | Pinned Participants                                   |
| plugins                 | RTKPlugin\[\] | ✅        | \-                    | Active Plugins                                        |
| screenShareParticipants | Peer\[\]      | ✅        | \-                    | Screenshare Participants                              |
| size                    | Size          | ✅        | \-                    | Size                                                  |
| states                  | States        | ✅        | \-                    | States object                                         |
| t                       | RtkI18n       | ❌        | useLanguage()         | Language                                              |

## Usage Examples

### Basic Usage

```

import { RtkMixedGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMixedGrid />;

}


```

### With Properties

```

import { RtkMixedGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMixedGrid

      aspectRatio="example"

      gap={42}

      gridSize="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmixedgrid/","name":"RtkMixedGrid"}}]}
```

---

---
title: RtkMoreToggle
description: API reference for RtkMoreToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMoreToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMoreToggle

A button which toggles visibility of a more menu. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeMoreMenu: boolean; }


```

## Properties

| Property | Type     | Required | Default         | Description   |
| -------- | -------- | -------- | --------------- | ------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack     |
| size     | Size     | ✅        | \-              | Size          |
| states   | States   | ✅        | \-              | States object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language      |

## Usage Examples

### Basic Usage

```

import { RtkMoreToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMoreToggle />;

}


```

### With Properties

```

import { RtkMoreToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMoreToggle

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmoretoggle/","name":"RtkMoreToggle"}}]}
```

---

---
title: RtkMuteAllButton
description: API reference for RtkMuteAllButton component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMuteAllButton.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMuteAllButton

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack1         | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size1             | ✅        | \-              | Size           |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkMuteAllButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMuteAllButton />;

}


```

### With Properties

```

import { RtkMuteAllButton } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMuteAllButton

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmuteallbutton/","name":"RtkMuteAllButton"}}]}
```

---

---
title: RtkMuteAllConfirmation
description: API reference for RtkMuteAllConfirmation component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkMuteAllConfirmation.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkMuteAllConfirmation

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkMuteAllConfirmation } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkMuteAllConfirmation />;

}


```

### With Properties

```

import { RtkMuteAllConfirmation } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkMuteAllConfirmation

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkmuteallconfirmation/","name":"RtkMuteAllConfirmation"}}]}
```

---

---
title: RtkNameTag
description: API reference for RtkNameTag component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkNameTag.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkNameTag

A component which shows a participant's name.

## Properties

| Property      | Type              | Required | Default         | Description                               |
| ------------- | ----------------- | -------- | --------------- | ----------------------------------------- |
| iconPack      | IconPack          | ❌        | defaultIconPack | Icon pack                                 |
| isScreenShare | boolean           | ✅        | \-              | Whether it is used in a screen share view |
| meeting       | Meeting           | ✅        | \-              | Meeting object                            |
| participant   | Peer              | ✅        | \-              | Participant object                        |
| size          | Size              | ✅        | \-              | Size                                      |
| t             | RtkI18n           | ❌        | useLanguage()   | Language                                  |
| variant       | RtkNameTagVariant | ✅        | \-              | Name tag variant                          |

## Usage Examples

### Basic Usage

```

import { RtkNameTag } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkNameTag />;

}


```

### With Properties

```

import { RtkNameTag } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkNameTag

      isScreenShare={true}

      meeting={meeting}

      participant={participant}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtknametag/","name":"RtkNameTag"}}]}
```

---

---
title: RtkNetworkIndicator
description: API reference for RtkNetworkIndicator component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkNetworkIndicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkNetworkIndicator

## Properties

| Property      | Type      | Required | Default         | Description         |
| ------------- | --------- | -------- | --------------- | ------------------- |
| iconPack      | IconPack1 | ❌        | defaultIconPack | Icon pack           |
| isScreenShare | boolean   | ✅        | \-              | Is for screenshare  |
| meeting       | Meeting   | ✅        | \-              | Meeting             |
| participant   | Peer      | ✅        | \-              | Participant or Self |
| t             | RtkI18n1  | ❌        | useLanguage()   | Language            |

## Usage Examples

### Basic Usage

```

import { RtkNetworkIndicator } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkNetworkIndicator />;

}


```

### With Properties

```

import { RtkNetworkIndicator } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkNetworkIndicator

      isScreenShare={true}

      meeting={meeting}

      participant={participant}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtknetworkindicator/","name":"RtkNetworkIndicator"}}]}
```

---

---
title: RtkNotification
description: API reference for RtkNotification component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkNotification.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkNotification

A component which shows a notification. You need to remove the element after you receive the`rtkNotificationDismiss` event.

## Properties

| Property     | Type         | Required | Default         | Description             |
| ------------ | ------------ | -------- | --------------- | ----------------------- |
| iconPack     | IconPack     | ❌        | defaultIconPack | Icon pack               |
| notification | Notification | ✅        | \-              | Message                 |
| paused       | boolean      | ✅        | \-              | Stops timeout when true |
| size         | Size         | ✅        | \-              | Size                    |
| t            | RtkI18n      | ❌        | useLanguage()   | Language                |

## Usage Examples

### Basic Usage

```

import { RtkNotification } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkNotification />;

}


```

### With Properties

```

import { RtkNotification } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkNotification

      notification={notification}

      paused={true}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtknotification/","name":"RtkNotification"}}]}
```

---

---
title: RtkNotifications
description: API reference for RtkNotifications component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkNotifications.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkNotifications

A component which handles notifications. You can configure which notifications you want to see and which ones you want to hear. There are also certain limits which you can set as well.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkNotifications } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkNotifications />;

}


```

### With Properties

```

import { RtkNotifications } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkNotifications

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtknotifications/","name":"RtkNotifications"}}]}
```

---

---
title: RtkOverlayModal
description: API reference for RtkOverlayModal component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkOverlayModal.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkOverlayModal

A confirmation modal.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkOverlayModal } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkOverlayModal />;

}


```

### With Properties

```

import { RtkOverlayModal } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkOverlayModal

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkoverlaymodal/","name":"RtkOverlayModal"}}]}
```

---

---
title: RtkPaginatedList
description: API reference for RtkPaginatedList component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPaginatedList.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPaginatedList

## Properties

| Property       | Type                                                 | Required | Default         | Description                                    |
| -------------- | ---------------------------------------------------- | -------- | --------------- | ---------------------------------------------- |
| autoScroll     | boolean                                              | ✅        | \-              | auto scroll list to bottom                     |
| createNodes    | (data: unknown\[\])                                  | ✅        | \-              | Create nodes                                   |
| emptyListLabel | string                                               | ✅        | \-              | label to show when empty                       |
| fetchData      | (timestamp: number, size: number, reversed: boolean) | ✅        | \-              | Fetch the data                                 |
| iconPack       | IconPack                                             | ❌        | defaultIconPack | Icon pack                                      |
| pageSize       | number                                               | ✅        | \-              | Page Size                                      |
| pagesAllowed   | number                                               | ✅        | \-              | Number of pages allowed to be shown            |
| rerenderList   | ()                                                   | ✅        | \-              | Rerender paginated list                        |
| reset          | (timestamp?: number)                                 | ❌        | \-              | Resets the paginated list to a given timestamp |
| t              | RtkI18n                                              | ❌        | useLanguage()   | Language                                       |

## Usage Examples

### Basic Usage

```

import { RtkPaginatedList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPaginatedList />;

}


```

### With Properties

```

import { RtkPaginatedList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPaginatedList

      autoScroll={true}

      createNodes={[]}

      emptyListLabel="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpaginatedlist/","name":"RtkPaginatedList"}}]}
```

---

---
title: RtkParticipant
description: API reference for RtkParticipant component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipant.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipant

A participant entry component used inside `rtk-participants` which shows data like: name, picture and media device status. You can perform privileged actions on the participant too.

## Properties

| Property    | Type                | Required | Default               | Description              |
| ----------- | ------------------- | -------- | --------------------- | ------------------------ |
| config      | UIConfig1           | ❌        | createDefaultConfig() | Config object            |
| iconPack    | IconPack            | ❌        | defaultIconPack       | Icon pack                |
| meeting     | Meeting             | ✅        | \-                    | Meeting object           |
| participant | Peer                | ✅        | \-                    | Participant object       |
| states      | States1             | ✅        | \-                    | States                   |
| t           | RtkI18n             | ❌        | useLanguage()         | Language                 |
| view        | ParticipantViewMode | ✅        | \-                    | Show participant summary |

## Usage Examples

### Basic Usage

```

import { RtkParticipant } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipant />;

}


```

### With Properties

```

import { RtkParticipant } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipant

      meeting={meeting}

      participant={participant}

      view={participantviewmode}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipant/","name":"RtkParticipant"}}]}
```

---

---
title: RtkParticipantCount
description: API reference for RtkParticipantCount component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipantCount.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipantCount

A component which shows count of total joined participants in a meeting.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkParticipantCount } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipantCount />;

}


```

### With Properties

```

import { RtkParticipantCount } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipantCount

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantcount/","name":"RtkParticipantCount"}}]}
```

---

---
title: RtkParticipants
description: API reference for RtkParticipants component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipants.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipants

A component which lists all participants, with ability to run privileged actions on each participant according to your permissions.

## Properties

| Property                 | Type              | Required | Default               | Description     |
| ------------------------ | ----------------- | -------- | --------------------- | --------------- |
| config                   | UIConfig          | ❌        | createDefaultConfig() | Config          |
| defaultParticipantsTabId | ParticipantsTabId | ✅        | \-                    | Default section |
| iconPack                 | IconPack          | ❌        | defaultIconPack       | Icon pack       |
| meeting                  | Meeting           | ✅        | \-                    | Meeting object  |
| size                     | Size              | ✅        | \-                    | Size            |
| states                   | States            | ✅        | \-                    | States object   |
| t                        | RtkI18n           | ❌        | useLanguage()         | Language        |

## Usage Examples

### Basic Usage

```

import { RtkParticipants } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipants />;

}


```

### With Properties

```

import { RtkParticipants } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipants

      defaultParticipantsTabId={participantstabid}

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipants/","name":"RtkParticipants"}}]}
```

---

---
title: RtkParticipantsAudio
description: API reference for RtkParticipantsAudio component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipantsAudio.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipantsAudio

A component which plays all the audio from participants and screenshares.

## Properties

| Property           | Type             | Required | Default         | Description                 |
| ------------------ | ---------------- | -------- | --------------- | --------------------------- |
| iconPack           | IconPack         | ❌        | defaultIconPack | Icon pack                   |
| meeting            | Meeting          | ✅        | \-              | Meeting object              |
| preloadedAudioElem | HTMLAudioElement | ✅        | \-              | Pass existing audio element |
| t                  | RtkI18n          | ❌        | useLanguage()   | Language                    |

## Usage Examples

### Basic Usage

```

import { RtkParticipantsAudio } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipantsAudio />;

}


```

### With Properties

```

import { RtkParticipantsAudio } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipantsAudio

      meeting={meeting}

      preloadedAudioElem={htmlaudioelement}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsaudio/","name":"RtkParticipantsAudio"}}]}
```

---

---
title: RtkParticipantSetup
description: API reference for RtkParticipantSetup component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipantSetup.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipantSetup

## Properties

| Property        | Type                  | Required       | Default               | Description                      |             |              |   |    |                      |
| --------------- | --------------------- | -------------- | --------------------- | -------------------------------- | ----------- | ------------ | - | -- | -------------------- |
| config          | UIConfig              | ❌              | createDefaultConfig() | Config object                    |             |              |   |    |                      |
| iconPack        | IconPack              | ❌              | defaultIconPack       | Icon pack                        |             |              |   |    |                      |
| isPreview       | boolean               | ✅              | \-                    | Whether tile is used for preview |             |              |   |    |                      |
| nameTagPosition | \| 'bottom-left'      | 'bottom-right' | 'bottom-center'       | 'top-left'                       | 'top-right' | 'top-center' | ✅ | \- | Position of name tag |
| participant     | Peer                  | ✅              | \-                    | Participant object               |             |              |   |    |                      |
| size            | Size                  | ✅              | \-                    | Size                             |             |              |   |    |                      |
| states          | States                | ✅              | \-                    | States object                    |             |              |   |    |                      |
| t               | RtkI18n               | ❌              | useLanguage()         | Language                         |             |              |   |    |                      |
| variant         | 'solid' \| 'gradient' | ✅              | \-                    | Variant                          |             |              |   |    |                      |

## Usage Examples

### Basic Usage

```

import { RtkParticipantSetup } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipantSetup />;

}


```

### With Properties

```

import { RtkParticipantSetup } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipantSetup

      isPreview={true}

      nameTagPosition={| 'bottom-left'

    | 'bottom-right'

    | 'bottom-center'

    | 'top-left'

    | 'top-right'

    | 'top-center'}

      participant={participant}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsetup/","name":"RtkParticipantSetup"}}]}
```

---

---
title: RtkParticipantsStageList
description: API reference for RtkParticipantsStageList component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipantsStageList.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipantsStageList

A component which lists all participants, with ability to run privileged actions on each participant according to your permissions.

## Properties

| Property   | Type                 | Required | Default               | Description                          |
| ---------- | -------------------- | -------- | --------------------- | ------------------------------------ |
| config     | UIConfig             | ❌        | createDefaultConfig() | Config                               |
| hideHeader | boolean              | ✅        | \-                    | Hide Stage Participants Count Header |
| iconPack   | IconPack             | ❌        | defaultIconPack       | Icon pack                            |
| meeting    | Meeting              | ✅        | \-                    | Meeting object                       |
| search     | string               | ✅        | \-                    | Search                               |
| size       | Size                 | ✅        | \-                    | Size                                 |
| states     | States1              | ✅        | \-                    | Meeting object                       |
| t          | RtkI18n              | ❌        | useLanguage()         | Language                             |
| view       | ParticipantsViewMode | ✅        | \-                    | View mode for participants list      |

## Usage Examples

### Basic Usage

```

import { RtkParticipantsStageList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipantsStageList />;

}


```

### With Properties

```

import { RtkParticipantsStageList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipantsStageList

      hideHeader={true}

      meeting={meeting}

      search="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsstagelist/","name":"RtkParticipantsStageList"}}]}
```

---

---
title: RtkParticipantsStageQueue
description: API reference for RtkParticipantsStageQueue component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipantsStageQueue.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipantsStageQueue

## Properties

| Property | Type                 | Required | Default               | Description                     |
| -------- | -------------------- | -------- | --------------------- | ------------------------------- |
| config   | UIConfig1            | ❌        | createDefaultConfig() | Config                          |
| iconPack | IconPack1            | ❌        | defaultIconPack       | Icon pack                       |
| meeting  | Meeting              | ✅        | \-                    | Meeting object                  |
| size     | Size1                | ✅        | \-                    | Size                            |
| t        | RtkI18n1             | ❌        | useLanguage()         | Language                        |
| view     | ParticipantsViewMode | ✅        | \-                    | View mode for participants list |

## Usage Examples

### Basic Usage

```

import { RtkParticipantsStageQueue } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipantsStageQueue />;

}


```

### With Properties

```

import { RtkParticipantsStageQueue } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipantsStageQueue

      meeting={meeting}

      size="md"

      view={participantsviewmode}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsstagequeue/","name":"RtkParticipantsStageQueue"}}]}
```

---

---
title: RtkParticipantsToggle
description: API reference for RtkParticipantsToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipantsToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipantsToggle

A button which toggles visibility of participants. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'participants' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkParticipantsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipantsToggle />;

}


```

### With Properties

```

import { RtkParticipantsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipantsToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantstoggle/","name":"RtkParticipantsToggle"}}]}
```

---

---
title: RtkParticipantsViewerList
description: API reference for RtkParticipantsViewerList component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipantsViewerList.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipantsViewerList

## Properties

| Property   | Type                 | Required | Default               | Description                     |
| ---------- | -------------------- | -------- | --------------------- | ------------------------------- |
| config     | UIConfig1            | ❌        | createDefaultConfig() | Config                          |
| hideHeader | boolean              | ✅        | \-                    | Hide Viewer Count Header        |
| iconPack   | IconPack1            | ❌        | defaultIconPack       | Icon pack                       |
| meeting    | Meeting              | ✅        | \-                    | Meeting object                  |
| search     | string               | ✅        | \-                    | Search                          |
| size       | Size1                | ✅        | \-                    | Size                            |
| t          | RtkI18n1             | ❌        | useLanguage()         | Language                        |
| view       | ParticipantsViewMode | ✅        | \-                    | View mode for participants list |

## Usage Examples

### Basic Usage

```

import { RtkParticipantsViewerList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipantsViewerList />;

}


```

### With Properties

```

import { RtkParticipantsViewerList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipantsViewerList

      hideHeader={true}

      meeting={meeting}

      search="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsviewerlist/","name":"RtkParticipantsViewerList"}}]}
```

---

---
title: RtkParticipantsWaitingList
description: API reference for RtkParticipantsWaitingList component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipantsWaitingList.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipantsWaitingList

## Properties

| Property | Type                 | Required | Default               | Description                     |
| -------- | -------------------- | -------- | --------------------- | ------------------------------- |
| config   | UIConfig1            | ❌        | createDefaultConfig() | Config                          |
| iconPack | IconPack1            | ❌        | defaultIconPack       | Icon pack                       |
| meeting  | Meeting              | ✅        | \-                    | Meeting object                  |
| size     | Size1                | ✅        | \-                    | Size                            |
| t        | RtkI18n1             | ❌        | useLanguage()         | Language                        |
| view     | ParticipantsViewMode | ✅        | \-                    | View mode for participants list |

## Usage Examples

### Basic Usage

```

import { RtkParticipantsWaitingList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipantsWaitingList />;

}


```

### With Properties

```

import { RtkParticipantsWaitingList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipantsWaitingList

      meeting={meeting}

      size="md"

      view={participantsviewmode}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantswaitinglist/","name":"RtkParticipantsWaitingList"}}]}
```

---

---
title: RtkParticipantTile
description: API reference for RtkParticipantTile component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkParticipantTile.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkParticipantTile

A component which plays a participants video and allows for placement of components like `rtk-name-tag`, `rtk-audio-visualizer` or any other component.

## Properties

| Property        | Type                  | Required       | Default               | Description                      |             |              |   |    |                      |
| --------------- | --------------------- | -------------- | --------------------- | -------------------------------- | ----------- | ------------ | - | -- | -------------------- |
| config          | UIConfig              | ❌              | createDefaultConfig() | Config object                    |             |              |   |    |                      |
| iconPack        | IconPack              | ❌              | defaultIconPack       | Icon pack                        |             |              |   |    |                      |
| isPreview       | boolean               | ✅              | \-                    | Whether tile is used for preview |             |              |   |    |                      |
| meeting         | Meeting               | ✅              | \-                    | Meeting object                   |             |              |   |    |                      |
| nameTagPosition | \| 'bottom-left'      | 'bottom-right' | 'bottom-center'       | 'top-left'                       | 'top-right' | 'top-center' | ✅ | \- | Position of name tag |
| participant     | Peer                  | ✅              | \-                    | Participant object               |             |              |   |    |                      |
| size            | Size                  | ✅              | \-                    | Size                             |             |              |   |    |                      |
| states          | States                | ✅              | \-                    | States object                    |             |              |   |    |                      |
| t               | RtkI18n               | ❌              | useLanguage()         | Language                         |             |              |   |    |                      |
| variant         | 'solid' \| 'gradient' | ✅              | \-                    | Variant                          |             |              |   |    |                      |

## Usage Examples

### Basic Usage

```

import { RtkParticipantTile } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkParticipantTile />;

}


```

### With Properties

```

import { RtkParticipantTile } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkParticipantTile

      isPreview={true}

      meeting={meeting}

      nameTagPosition={| 'bottom-left'

    | 'bottom-right'

    | 'bottom-center'

    | 'top-left'

    | 'top-right'

    | 'top-center'}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipanttile/","name":"RtkParticipantTile"}}]}
```

---

---
title: RtkPermissionsMessage
description: API reference for RtkPermissionsMessage component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPermissionsMessage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPermissionsMessage

A component which shows permission related troubleshooting information.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon Pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkPermissionsMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPermissionsMessage />;

}


```

### With Properties

```

import { RtkPermissionsMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPermissionsMessage

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpermissionsmessage/","name":"RtkPermissionsMessage"}}]}
```

---

---
title: RtkPinnedMessageSelector
description: API reference for RtkPinnedMessageSelector component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPinnedMessageSelector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPinnedMessageSelector

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkPinnedMessageSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPinnedMessageSelector />;

}


```

### With Properties

```

import { RtkPinnedMessageSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPinnedMessageSelector

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpinnedmessageselector/","name":"RtkPinnedMessageSelector"}}]}
```

---

---
title: RtkPipToggle
description: API reference for RtkPipToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPipToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPipToggle

## Properties

| Property | Type              | Required | Default               | Description    |
| -------- | ----------------- | -------- | --------------------- | -------------- |
| config   | UIConfig1         | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack1         | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting           | ✅        | \-                    | Meeting object |
| size     | Size1             | ✅        | \-                    | Size           |
| states   | States1           | ✅        | \-                    | States object  |
| t        | RtkI18n           | ❌        | useLanguage()         | Language       |
| variant  | ControlBarVariant | ✅        | \-                    | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkPipToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPipToggle />;

}


```

### With Properties

```

import { RtkPipToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPipToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpiptoggle/","name":"RtkPipToggle"}}]}
```

---

---
title: RtkPluginMain
description: API reference for RtkPluginMain component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPluginMain.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPluginMain

A component which loads a plugin.

## Properties

| Property | Type      | Required | Default         | Description |
| -------- | --------- | -------- | --------------- | ----------- |
| iconPack | IconPack  | ❌        | defaultIconPack | Icon pack   |
| meeting  | Meeting   | ✅        | \-              | Meeting     |
| plugin   | RTKPlugin | ✅        | \-              | Plugin      |
| t        | RtkI18n   | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

import { RtkPluginMain } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPluginMain />;

}


```

### With Properties

```

import { RtkPluginMain } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPluginMain

      meeting={meeting}

      plugin={rtkplugin}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpluginmain/","name":"RtkPluginMain"}}]}
```

---

---
title: RtkPlugins
description: API reference for RtkPlugins component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPlugins.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPlugins

A component which lists all available plugins from their preset, and ability to enable or disable plugins.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkPlugins } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPlugins />;

}


```

### With Properties

```

import { RtkPlugins } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPlugins

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkplugins/","name":"RtkPlugins"}}]}
```

---

---
title: RtkPluginsToggle
description: API reference for RtkPluginsToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPluginsToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPluginsToggle

A button which toggles visibility of plugins. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'plugins' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkPluginsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPluginsToggle />;

}


```

### With Properties

```

import { RtkPluginsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPluginsToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpluginstoggle/","name":"RtkPluginsToggle"}}]}
```

---

---
title: RtkPoll
description: API reference for RtkPoll component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPoll.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPoll

A poll component. Shows a poll where a user can vote.

## Properties

| Property    | Type                 | Required | Default         | Description        |
| ----------- | -------------------- | -------- | --------------- | ------------------ |
| iconPack    | IconPack             | ❌        | defaultIconPack | Icon pack          |
| permissions | RTKPermissionsPreset | ✅        | \-              | Permissions Object |
| poll        | Poll                 | ✅        | \-              | Poll               |
| self        | string               | ✅        | \-              | Self ID            |
| t           | RtkI18n              | ❌        | useLanguage()   | Language           |

## Usage Examples

### Basic Usage

```

import { RtkPoll } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPoll />;

}


```

### With Properties

```

import { RtkPoll } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPoll

      permissions={rtkpermissionspreset}

      poll={poll}

      self="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpoll/","name":"RtkPoll"}}]}
```

---

---
title: RtkPollForm
description: API reference for RtkPollForm component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPollForm.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPollForm

A component that lets you create a poll.

## Properties

| Property | Type     | Required | Default         | Description |
| -------- | -------- | -------- | --------------- | ----------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack   |
| t        | RtkI18n  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

import { RtkPollForm } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPollForm />;

}


```

### With Properties

```

import { RtkPollForm } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPollForm

      iconPack={defaultIconPack}

      t={rtki18n}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpollform/","name":"RtkPollForm"}}]}
```

---

---
title: RtkPolls
description: API reference for RtkPolls component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPolls.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPolls

A component which lists all available plugins a user can access with the ability to enable or disable them as per their permissions.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkPolls } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPolls />;

}


```

### With Properties

```

import { RtkPolls } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPolls

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpolls/","name":"RtkPolls"}}]}
```

---

---
title: RtkPollsToggle
description: API reference for RtkPollsToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkPollsToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkPollsToggle

A button which toggles visibility of polls. You need to pass the `meeting` object to it to see the unread polls count badge. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSidebar: boolean; sidebar: 'polls' }


```

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkPollsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkPollsToggle />;

}


```

### With Properties

```

import { RtkPollsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkPollsToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkpollstoggle/","name":"RtkPollsToggle"}}]}
```

---

---
title: RtkRecordingIndicator
description: API reference for RtkRecordingIndicator component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkRecordingIndicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkRecordingIndicator

A component which indicates the recording status of a meeting. It will not render anything if no recording is taking place.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkRecordingIndicator } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkRecordingIndicator />;

}


```

### With Properties

```

import { RtkRecordingIndicator } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkRecordingIndicator

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkrecordingindicator/","name":"RtkRecordingIndicator"}}]}
```

---

---
title: RtkRecordingToggle
description: API reference for RtkRecordingToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkRecordingToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkRecordingToggle

A button which toggles recording state of a meeting. Only a privileged user can perform this action, thus the button will not be visible for participants who don't have the permission to record a meeting.

## Properties

| Property | Type              | Required | Default         | Description        |
| -------- | ----------------- | -------- | --------------- | ------------------ |
| disabled | boolean           | ✅        | \-              | Disable the button |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack          |
| meeting  | Meeting           | ✅        | \-              | Meeting object     |
| size     | Size              | ✅        | \-              | Size               |
| t        | RtkI18n           | ❌        | useLanguage()   | Language           |
| variant  | ControlBarVariant | ✅        | \-              | Variant            |

## Usage Examples

### Basic Usage

```

import { RtkRecordingToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkRecordingToggle />;

}


```

### With Properties

```

import { RtkRecordingToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkRecordingToggle

      disabled={true}

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkrecordingtoggle/","name":"RtkRecordingToggle"}}]}
```

---

---
title: RtkScreenShareToggle
description: API reference for RtkScreenShareToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkScreenShareToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkScreenShareToggle

A button which toggles your screenshare.

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size              | ✅        | \-              | Size           |
| states   | States            | ✅        | \-              | States object  |
| t        | RtkI18n           | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkScreenShareToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkScreenShareToggle />;

}


```

### With Properties

```

import { RtkScreenShareToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkScreenShareToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkscreensharetoggle/","name":"RtkScreenShareToggle"}}]}
```

---

---
title: RtkScreenshareView
description: API reference for RtkScreenshareView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkScreenshareView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkScreenshareView

A component which plays a participant's screenshared video. It also allows for placement of other components similar to `rtk-participant-tile`. This component will not render anything if the participant hasn't start screensharing.

## Properties

| Property             | Type                  | Required       | Default         | Description             |             |              |   |    |                      |
| -------------------- | --------------------- | -------------- | --------------- | ----------------------- | ----------- | ------------ | - | -- | -------------------- |
| hideFullScreenButton | boolean               | ✅              | \-              | Hide full screen button |             |              |   |    |                      |
| iconPack             | IconPack              | ❌              | defaultIconPack | Icon pack               |             |              |   |    |                      |
| meeting              | Meeting               | ✅              | \-              | Meeting object          |             |              |   |    |                      |
| nameTagPosition      | \| 'bottom-left'      | 'bottom-right' | 'bottom-center' | 'top-left'              | 'top-right' | 'top-center' | ✅ | \- | Position of name tag |
| participant          | Peer                  | ✅              | \-              | Participant object      |             |              |   |    |                      |
| size                 | Size                  | ✅              | \-              | Size                    |             |              |   |    |                      |
| t                    | RtkI18n               | ❌              | useLanguage()   | Language                |             |              |   |    |                      |
| variant              | 'solid' \| 'gradient' | ✅              | \-              | Variant                 |             |              |   |    |                      |

## Usage Examples

### Basic Usage

```

import { RtkScreenshareView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkScreenshareView />;

}


```

### With Properties

```

import { RtkScreenshareView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkScreenshareView

      hideFullScreenButton={true}

      meeting={meeting}

      nameTagPosition={| 'bottom-left'

    | 'bottom-right'

    | 'bottom-center'

    | 'top-left'

    | 'top-right'

    | 'top-center'}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkscreenshareview/","name":"RtkScreenshareView"}}]}
```

---

---
title: RtkSettings
description: API reference for RtkSettings component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSettings.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSettings

A settings component to see and change your audio/video devices as well as see your connection quality.

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkSettings } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSettings />;

}


```

### With Properties

```

import { RtkSettings } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSettings

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtksettings/","name":"RtkSettings"}}]}
```

---

---
title: RtkSettingsAudio
description: API reference for RtkSettingsAudio component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSettingsAudio.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSettingsAudio

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkSettingsAudio } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSettingsAudio />;

}


```

### With Properties

```

import { RtkSettingsAudio } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSettingsAudio

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtksettingsaudio/","name":"RtkSettingsAudio"}}]}
```

---

---
title: RtkSettingsToggle
description: API reference for RtkSettingsToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSettingsToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSettingsToggle

A button which toggles visibility of settings module. When clicked it emits a `rtkStateUpdate` event with the data:

TypeScript

```

{ activeSettings: boolean; }


```

## Properties

| Property | Type              | Required | Default         | Description   |
| -------- | ----------------- | -------- | --------------- | ------------- |
| iconPack | IconPack          | ❌        | defaultIconPack | Icon pack     |
| size     | Size              | ✅        | \-              | Size          |
| states   | States            | ✅        | \-              | States object |
| t        | RtkI18n           | ❌        | useLanguage()   | Language      |
| variant  | ControlBarVariant | ✅        | \-              | Variant       |

## Usage Examples

### Basic Usage

```

import { RtkSettingsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSettingsToggle />;

}


```

### With Properties

```

import { RtkSettingsToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSettingsToggle

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtksettingstoggle/","name":"RtkSettingsToggle"}}]}
```

---

---
title: RtkSettingsVideo
description: API reference for RtkSettingsVideo component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSettingsVideo.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSettingsVideo

A component which lets to manage your camera devices and your video preferences. Emits `rtkStateUpdate` event with data for toggling mirroring of self video:

TypeScript

```

{

 prefs: {

   mirrorVideo: boolean

 }

}


```

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size     | ✅        | \-              | Size           |
| states   | States   | ✅        | \-              | States object  |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkSettingsVideo } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSettingsVideo />;

}


```

### With Properties

```

import { RtkSettingsVideo } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSettingsVideo

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtksettingsvideo/","name":"RtkSettingsVideo"}}]}
```

---

---
title: RtkSetupScreen
description: API reference for RtkSetupScreen component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSetupScreen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSetupScreen

A screen shown before joining the meeting, where you can edit your display name, and media settings.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| size     | Size     | ✅        | \-                    | Size           |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkSetupScreen } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSetupScreen />;

}


```

### With Properties

```

import { RtkSetupScreen } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSetupScreen

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtksetupscreen/","name":"RtkSetupScreen"}}]}
```

---

---
title: RtkSidebar
description: API reference for RtkSidebar component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSidebar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSidebar

A component which handles the sidebar and you can customize which sections you want, and which section you want as the default.

## Properties

| Property        | Type              | Required | Default               | Description                 |
| --------------- | ----------------- | -------- | --------------------- | --------------------------- |
| config          | UIConfig          | ❌        | createDefaultConfig() | Config                      |
| defaultSection  | RtkSidebarSection | ✅        | \-                    | Default section             |
| enabledSections | RtkSidebarTab\[\] | ✅        | \-                    | Enabled sections in sidebar |
| iconPack        | IconPack          | ❌        | defaultIconPack       | Icon pack                   |
| meeting         | Meeting           | ✅        | \-                    | Meeting object              |
| size            | Size              | ✅        | \-                    | Size                        |
| states          | States            | ✅        | \-                    | States object               |
| t               | RtkI18n           | ❌        | useLanguage()         | Language                    |
| view            | RtkSidebarView    | ✅        | \-                    | View type                   |

## Usage Examples

### Basic Usage

```

import { RtkSidebar } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSidebar />;

}


```

### With Properties

```

import { RtkSidebar } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSidebar

      defaultSection={rtksidebarsection}

      enabledSections={[]}

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtksidebar/","name":"RtkSidebar"}}]}
```

---

---
title: RtkSidebarUi
description: API reference for RtkSidebarUi component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSidebarUi.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSidebarUi

## Properties

| Property         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Required | Default       | Description                              |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- | ---------------------------------------- |
| currentTab       | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | ✅        | \-            | Default tab to open                      |
| focusCloseButton | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ✅        | \-            | Option to focus close button when opened |
| hideCloseAction  | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ✅        | \-            | Hide Close Action                        |
| hideHeader       | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ✅        | \-            | Hide Main Header                         |
| iconPack         | { people: string; people\_checked: string; chat: string; poll: string; participants: string; rocket: string; call\_end: string; share: string; mic\_on: string; mic\_off: string; video\_on: string; video\_off: string; share\_screen\_start: string; share\_screen\_stop: string; share\_screen\_person: string; clock: string; dismiss: string; send: string; search: string; more\_vertical: string; chevron\_down: string; chevron\_up: string; chevron\_left: string; chevron\_right: string; settings: string; wifi: string; speaker: string; speaker\_off: string; download: string; full\_screen\_maximize: string; full\_screen\_minimize: string; copy: string; attach: string; image: string; emoji\_multiple: string; image\_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop\_recording: string; warning: string; pin: string; pin\_off: string; spinner: string; breakout\_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join\_stage: string; leave\_stage: string; pip\_off: string; pip\_on: string; signal\_1: string; signal\_2: string; signal\_3: string; signal\_4: string; signal\_5: string; start\_livestream: string; stop\_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal\_dots: string; ai\_sparkle: string; meeting\_ai: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; minimize: string; maximize: string; } | ✅        | \-            | Icon Pack                                |
| t                | RtkI18n1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | ❌        | useLanguage() | Language                                 |
| tabs             | RtkSidebarTab1\[\]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | ✅        | \-            | Tabs                                     |
| view             | RtkSidebarView1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | ✅        | \-            | View                                     |

## Usage Examples

### Basic Usage

```

import { RtkSidebarUi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSidebarUi />;

}


```

### With Properties

```

import { RtkSidebarUi } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSidebarUi

      currentTab="example"

      focusCloseButton={true}

      hideCloseAction={true}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtksidebarui/","name":"RtkSidebarUi"}}]}
```

---

---
title: RtkSimpleGrid
description: API reference for RtkSimpleGrid component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSimpleGrid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSimpleGrid

A grid component which renders only the participants in a simple grid.

## Properties

| Property     | Type     | Required | Default               | Description                                           |
| ------------ | -------- | -------- | --------------------- | ----------------------------------------------------- |
| aspectRatio  | string   | ✅        | \-                    | Aspect Ratio of participant tile Format: width:height |
| config       | UIConfig | ❌        | createDefaultConfig() | UI Config                                             |
| gap          | number   | ✅        | \-                    | Gap between participant tiles                         |
| iconPack     | IconPack | ❌        | defaultIconPack       | Icon Pack                                             |
| meeting      | Meeting  | ✅        | \-                    | Meeting object                                        |
| participants | Peer\[\] | ✅        | \-                    | Participants                                          |
| size         | Size     | ✅        | \-                    | Size                                                  |
| states       | States   | ✅        | \-                    | States object                                         |
| t            | RtkI18n  | ❌        | useLanguage()         | Language                                              |

## Usage Examples

### Basic Usage

```

import { RtkSimpleGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSimpleGrid />;

}


```

### With Properties

```

import { RtkSimpleGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSimpleGrid

      aspectRatio="example"

      gap={42}

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtksimplegrid/","name":"RtkSimpleGrid"}}]}
```

---

---
title: RtkSpeakerSelector
description: API reference for RtkSpeakerSelector component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSpeakerSelector.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSpeakerSelector

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

TypeScript

```

{

 prefs: {

   muteNotificationSounds: boolean

 }

}


```

## Properties

| Property | Type               | Required | Default         | Description    |
| -------- | ------------------ | -------- | --------------- | -------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting            | ✅        | \-              | Meeting object |
| size     | Size               | ✅        | \-              | Size           |
| states   | States             | ✅        | \-              | States object  |
| t        | RtkI18n            | ❌        | useLanguage()   | Language       |
| variant  | 'full' \| 'inline' | ✅        | \-              | variant        |

## Usage Examples

### Basic Usage

```

import { RtkSpeakerSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSpeakerSelector />;

}


```

### With Properties

```

import { RtkSpeakerSelector } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSpeakerSelector

      meeting={meeting}

      size="md"

      variant={'full' | 'inline'}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkspeakerselector/","name":"RtkSpeakerSelector"}}]}
```

---

---
title: RtkSpinner
description: API reference for RtkSpinner component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSpinner.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSpinner

A component which shows an animating spinner.

## Properties

| Property | Type     | Required | Default         | Description |
| -------- | -------- | -------- | --------------- | ----------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack   |
| size     | Size1    | ✅        | \-              | Size        |

## Usage Examples

### Basic Usage

```

import { RtkSpinner } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSpinner />;

}


```

### With Properties

```

import { RtkSpinner } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSpinner

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkspinner/","name":"RtkSpinner"}}]}
```

---

---
title: RtkSpotlightGrid
description: API reference for RtkSpotlightGrid component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSpotlightGrid.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSpotlightGrid

A grid component that renders two lists of participants: `pinnedParticipants` and `participants`. You can customize the layout to a `column` view, by default is is `row`.

* Participants from `pinnedParticipants[]` are rendered inside a larger grid.
* Participants from `participants[]` array are rendered in a smaller grid.

## Properties

| Property           | Type        | Required | Default               | Description                                           |
| ------------------ | ----------- | -------- | --------------------- | ----------------------------------------------------- |
| aspectRatio        | string      | ✅        | \-                    | Aspect Ratio of participant tile Format: width:height |
| config             | UIConfig    | ❌        | createDefaultConfig() | UI Config                                             |
| gap                | number      | ✅        | \-                    | Gap between participant tiles                         |
| gridSize           | GridSize1   | ✅        | \-                    | Grid size                                             |
| iconPack           | IconPack    | ❌        | defaultIconPack       | Icon Pack                                             |
| layout             | GridLayout1 | ✅        | \-                    | Grid Layout                                           |
| meeting            | Meeting     | ✅        | \-                    | Meeting object                                        |
| participants       | Peer\[\]    | ✅        | \-                    | Participants                                          |
| pinnedParticipants | Peer\[\]    | ✅        | \-                    | Pinned Participants                                   |
| size               | Size        | ✅        | \-                    | Size                                                  |
| states             | States      | ✅        | \-                    | States object                                         |
| t                  | RtkI18n     | ❌        | useLanguage()         | Language                                              |

## Usage Examples

### Basic Usage

```

import { RtkSpotlightGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSpotlightGrid />;

}


```

### With Properties

```

import { RtkSpotlightGrid } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSpotlightGrid

      aspectRatio="example"

      gap={42}

      gridSize="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkspotlightgrid/","name":"RtkSpotlightGrid"}}]}
```

---

---
title: RtkSpotlightIndicator
description: API reference for RtkSpotlightIndicator component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSpotlightIndicator.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSpotlightIndicator

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| size     | Size1    | ✅        | \-              | Size           |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```

import { RtkSpotlightIndicator } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSpotlightIndicator />;

}


```

### With Properties

```

import { RtkSpotlightIndicator } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSpotlightIndicator

      meeting={meeting}

      size="md"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkspotlightindicator/","name":"RtkSpotlightIndicator"}}]}
```

---

---
title: RtkStage
description: API reference for RtkStage component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkStage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkStage

A component used as a stage that commonly houses the `grid` and `sidebar` components.

## Properties

| Property | Type     | Required | Default         | Description |
| -------- | -------- | -------- | --------------- | ----------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack   |
| t        | RtkI18n  | ❌        | useLanguage()   | Language    |

## Usage Examples

### Basic Usage

```

import { RtkStage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkStage />;

}


```

### With Properties

```

import { RtkStage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkStage

      iconPack={defaultIconPack}

      t={rtki18n}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkstage/","name":"RtkStage"}}]}
```

---

---
title: RtkStageToggle
description: API reference for RtkStageToggle component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkStageToggle.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkStageToggle

## Properties

| Property | Type              | Required | Default         | Description    |
| -------- | ----------------- | -------- | --------------- | -------------- |
| iconPack | IconPack1         | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting           | ✅        | \-              | Meeting object |
| size     | Size1             | ✅        | \-              | Size           |
| states   | States1           | ✅        | \-              | States         |
| t        | RtkI18n1          | ❌        | useLanguage()   | Language       |
| variant  | ControlBarVariant | ✅        | \-              | Variant        |

## Usage Examples

### Basic Usage

```

import { RtkStageToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkStageToggle />;

}


```

### With Properties

```

import { RtkStageToggle } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkStageToggle

      meeting={meeting}

      size="md"

      variant="button"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkstagetoggle/","name":"RtkStageToggle"}}]}
```

---

---
title: RtkSwitch
description: API reference for RtkSwitch component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkSwitch.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkSwitch

A switch component which follows RTK Design System.

## Properties

| Property | Type     | Required | Default         | Description                           |
| -------- | -------- | -------- | --------------- | ------------------------------------- |
| checked  | boolean  | ✅        | \-              | Whether the switch is enabled/checked |
| disabled | boolean  | ✅        | \-              | Whether switch is readonly            |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack                             |
| readonly | boolean  | ✅        | \-              | Whether switch is readonly            |
| t        | RtkI18n  | ❌        | useLanguage()   | Language                              |

## Usage Examples

### Basic Usage

```

import { RtkSwitch } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkSwitch />;

}


```

### With Properties

```

import { RtkSwitch } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkSwitch

      checked={true}

      disabled={true}

      readonly={true}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkswitch/","name":"RtkSwitch"}}]}
```

---

---
title: RtkTabBar
description: API reference for RtkTabBar component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkTabBar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkTabBar

## Properties

| Property  | Type        | Required | Default               | Description    |
| --------- | ----------- | -------- | --------------------- | -------------- |
| activeTab | Tab         | ✅        | \-                    | Active tab     |
| config    | UIConfig    | ❌        | createDefaultConfig() | UI Config      |
| iconPack  | IconPack    | ❌        | defaultIconPack       | Icon Pack      |
| layout    | GridLayout1 | ✅        | \-                    | Grid Layout    |
| meeting   | Meeting     | ✅        | \-                    | Meeting object |
| size      | Size        | ✅        | \-                    | Size           |
| states    | States      | ✅        | \-                    | States object  |
| t         | RtkI18n     | ❌        | useLanguage()         | Language       |
| tabs      | Tab\[\]     | ✅        | \-                    | Tabs           |

## Usage Examples

### Basic Usage

```

import { RtkTabBar } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkTabBar />;

}


```

### With Properties

```

import { RtkTabBar } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkTabBar

      activeTab={tab}

      layout={gridlayout1}

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtktabbar/","name":"RtkTabBar"}}]}
```

---

---
title: RtkTextComposerView
description: API reference for RtkTextComposerView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkTextComposerView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkTextComposerView

A component which renders a text composer

## Properties

| Property          | Type                            | Required | Default         | Description                                   |
| ----------------- | ------------------------------- | -------- | --------------- | --------------------------------------------- |
| disabled          | boolean                         | ✅        | \-              | Disable the text input (default = false)      |
| iconPack          | IconPack1                       | ❌        | defaultIconPack | Icon pack                                     |
| keyDownHandler    | (e: KeyboardEvent)              | ✅        | \-              | Keydown event handler function                |
| maxLength         | number                          | ✅        | \-              | Max length for text input                     |
| placeholder       | string                          | ✅        | \-              | Placeholder text                              |
| rateLimitBreached | boolean                         | ✅        | \-              | Boolean to indicate if rate limit is breached |
| setText           | (text: string, focus?: boolean) | ❌        | \-              | Sets value of the text input                  |
| t                 | RtkI18n1                        | ❌        | useLanguage()   | Language                                      |
| value             | string                          | ✅        | \-              | Default value for text input                  |

## Usage Examples

### Basic Usage

```

import { RtkTextComposerView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkTextComposerView />;

}


```

### With Properties

```

import { RtkTextComposerView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkTextComposerView

      disabled={true}

      keyDownHandler={(e: keyboardevent)}

      maxLength={42}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtktextcomposerview/","name":"RtkTextComposerView"}}]}
```

---

---
title: RtkTextMessage
description: API reference for RtkTextMessage component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkTextMessage.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkTextMessage

@deprecated `rtk-text-message` is deprecated and will be removed soon. Use `rtk-text-message-view` instead. A component which renders a text message from chat.

## Properties

| Property    | Type        | Required | Default         | Description                                             |
| ----------- | ----------- | -------- | --------------- | ------------------------------------------------------- |
| iconPack    | IconPack    | ❌        | defaultIconPack | Icon pack                                               |
| isContinued | boolean     | ✅        | \-              | Whether the message is continued by same user           |
| message     | TextMessage | ✅        | \-              | Text message object                                     |
| now         | Date        | ✅        | \-              | Date object of now, to calculate distance between dates |
| showBubble  | boolean     | ✅        | \-              | show message in bubble                                  |
| t           | RtkI18n     | ❌        | useLanguage()   | Language                                                |

## Usage Examples

### Basic Usage

```

import { RtkTextMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkTextMessage />;

}


```

### With Properties

```

import { RtkTextMessage } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkTextMessage

      isContinued={true}

      message={textmessage}

      now={date}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtktextmessage/","name":"RtkTextMessage"}}]}
```

---

---
title: RtkTextMessageView
description: API reference for RtkTextMessageView component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkTextMessageView.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkTextMessageView

A component which renders a text message from chat.

## Properties

| Property   | Type    | Required | Default | Description                               |
| ---------- | ------- | -------- | ------- | ----------------------------------------- |
| isMarkdown | boolean | ✅        | \-      | Renders text as markdown (default = true) |
| text       | string  | ✅        | \-      | Text message                              |

## Usage Examples

### Basic Usage

```

import { RtkTextMessageView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkTextMessageView />;

}


```

### With Properties

```

import { RtkTextMessageView } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkTextMessageView

      isMarkdown={true}

      text="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtktextmessageview/","name":"RtkTextMessageView"}}]}
```

---

---
title: RtkTooltip
description: API reference for RtkTooltip component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkTooltip.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkTooltip

Tooltip component which follows RTK Design System.

## Properties

| Property  | Type           | Required | Default | Description                      |
| --------- | -------------- | -------- | ------- | -------------------------------- |
| delay     | number         | ✅        | \-      | Delay before showing the tooltip |
| disabled  | boolean        | ✅        | \-      | Disabled                         |
| kind      | TooltipKind    | ✅        | \-      | Tooltip kind                     |
| label     | string         | ✅        | \-      | Tooltip label                    |
| open      | boolean        | ✅        | \-      | Open                             |
| placement | Placement      | ✅        | \-      | Placement of menu                |
| size      | Size           | ✅        | \-      | Size                             |
| variant   | TooltipVariant | ✅        | \-      | Tooltip variant                  |

## Usage Examples

### Basic Usage

```

import { RtkTooltip } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkTooltip />;

}


```

### With Properties

```

import { RtkTooltip } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkTooltip

      delay={42}

      disabled={true}

      kind={tooltipkind}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtktooltip/","name":"RtkTooltip"}}]}
```

---

---
title: RtkTranscript
description: API reference for RtkTranscript component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkTranscript.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkTranscript

A component which shows a transcript. You need to remove the element after you receive the`rtkTranscriptDismiss` event.

## Properties

| Property   | Type                                 | Required | Default       | Description |
| ---------- | ------------------------------------ | -------- | ------------- | ----------- |
| t          | RtkI18n                              | ❌        | useLanguage() | Language    |
| transcript | Transcript & { renderedId?: string } | ❌        | \-            | Message     |

## Usage Examples

### Basic Usage

```

import { RtkTranscript } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkTranscript />;

}


```

### With Properties

```

import { RtkTranscript } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkTranscript

      t={rtki18n}

      transcript="example"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtktranscript/","name":"RtkTranscript"}}]}
```

---

---
title: RtkTranscripts
description: API reference for RtkTranscripts component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkTranscripts.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkTranscripts

A component which handles transcripts. You can configure which transcripts you want to see and which ones you want to hear. There are also certain limits which you can set as well.

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config object  |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| states   | States   | ✅        | \-                    | States object  |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkTranscripts } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkTranscripts />;

}


```

### With Properties

```

import { RtkTranscripts } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkTranscripts

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtktranscripts/","name":"RtkTranscripts"}}]}
```

---

---
title: RtkUiProvider
description: API reference for RtkUiProvider component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkUiProvider.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkUiProvider

## Properties

| Property        | Type            | Required | Default          | Description                         |
| --------------- | --------------- | -------- | ---------------- | ----------------------------------- |
| config          | UIConfig1       | ✅        | \-               | Config                              |
| iconPack        | IconPack1       | ❌        | defaultIconPack  | Icon pack                           |
| meeting         | Meeting \| null | ❌        | null             | Meeting                             |
| mode            | MeetingMode1    | ✅        | \-               | Fill type                           |
| overrides       | Overrides1      | ❌        | defaultOverrides | UI Kit Overrides                    |
| showSetupScreen | boolean         | ✅        | \-               | Whether to show setup screen or not |
| t               | RtkI18n1        | ❌        | useLanguage()    | Language utility                    |

## Usage Examples

### Basic Usage

```

import { RtkUiProvider } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkUiProvider />;

}


```

### With Properties

```

import { RtkUiProvider } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkUiProvider

      config={defaultUiConfig}

      mode={meeting}

      showSetupScreen={true}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkuiprovider/","name":"RtkUiProvider"}}]}
```

---

---
title: RtkViewerCount
description: API reference for RtkViewerCount component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkViewerCount.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkViewerCount

A component which shows count of total joined participants in a meeting.

## Properties

| Property | Type               | Required | Default         | Description          |
| -------- | ------------------ | -------- | --------------- | -------------------- |
| iconPack | IconPack           | ❌        | defaultIconPack | Icon pack            |
| meeting  | Meeting            | ✅        | \-              | Meeting object       |
| t        | RtkI18n            | ❌        | useLanguage()   | Language             |
| variant  | ViewerCountVariant | ✅        | \-              | Viewer count variant |

## Usage Examples

### Basic Usage

```

import { RtkViewerCount } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkViewerCount />;

}


```

### With Properties

```

import { RtkViewerCount } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkViewerCount

      meeting={meeting}

      variant="primary"

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkviewercount/","name":"RtkViewerCount"}}]}
```

---

---
title: RtkVirtualizedParticipantList
description: API reference for RtkVirtualizedParticipantList component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkVirtualizedParticipantList.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkVirtualizedParticipantList

## Properties

| Property           | Type                         | Required | Default | Description                                              |
| ------------------ | ---------------------------- | -------- | ------- | -------------------------------------------------------- |
| bufferedItemsCount | number                       | ✅        | \-      | Buffer items to render before and after the visible area |
| emptyListElement   | HTMLElement                  | ✅        | \-      | Element to render if list is empty                       |
| itemHeight         | number                       | ✅        | \-      | Height of each item in pixels (assumed fixed)            |
| items              | Peer1\[\]                    | ✅        | \-      | Items to be virtualized                                  |
| renderItem         | (item: Peer1, index: number) | ✅        | \-      | Function to render each item                             |

## Usage Examples

### Basic Usage

```

import { RtkVirtualizedParticipantList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkVirtualizedParticipantList />;

}


```

### With Properties

```

import { RtkVirtualizedParticipantList } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkVirtualizedParticipantList

      bufferedItemsCount={42}

      emptyListElement={htmlelement}

      itemHeight={42}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkvirtualizedparticipantlist/","name":"RtkVirtualizedParticipantList"}}]}
```

---

---
title: RtkWaitingScreen
description: API reference for RtkWaitingScreen component (React Library)
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react/RtkWaitingScreen.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# RtkWaitingScreen

## Properties

| Property | Type     | Required | Default               | Description    |
| -------- | -------- | -------- | --------------------- | -------------- |
| config   | UIConfig | ❌        | createDefaultConfig() | Config         |
| iconPack | IconPack | ❌        | defaultIconPack       | Icon pack      |
| meeting  | Meeting  | ✅        | \-                    | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()         | Language       |

## Usage Examples

### Basic Usage

```

import { RtkWaitingScreen } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return <RtkWaitingScreen />;

}


```

### With Properties

```

import { RtkWaitingScreen } from '@cloudflare/realtimekit-react-ui';


function MyComponent() {

  return (

    <RtkWaitingScreen

      meeting={meeting}

    />

  );

}


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/","name":"Component Reference"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/","name":"React"}},{"@type":"ListItem","position":7,"item":{"@id":"/realtime/realtimekit/ui-kit/api-reference/react/rtkwaitingscreen/","name":"RtkWaitingScreen"}}]}
```

---

---
title: Customise Branding
description: RealtimeKit's UI Kit provides all the necessary UI components to allow complete customization of all its UI Kit components. You can customize your meeting icons such as chat, clock, leave meeting, mic on and off, and more.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/branding/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Customise Branding

RealtimeKit's UI Kit provides all the necessary UI components to allow complete customization of all its UI Kit components. You can customize your meeting icons such as chat, clock, leave meeting, mic on and off, and more.

## Prerequisites

To get started with customizing the icons for your meetings, you need to first integrate RealtimeKit's Web SDK into your web application.

WebMobile

ReactWeb ComponentsAngular

## Customize the default icon pack

RealtimeKit's default icon set is available at [icons.realtime.cloudflare.com ↗](https://icons.realtime.cloudflare.com/). You can modify and generate your custom icon set from there.

To replace RealtimeKit's default icon set with your own, pass the link to your icon set in the UI component.

```

<body>

  <rtk-meeting id="my-meeting"></rtk-meeting>


  <script>

    const init = async () => {

      const meeting = await RealtimeKitClient.init({

        authToken: "<participant_auth_token>",

        defaults: {

          audio: true,

          video: true,

        },

      });


      const meetingEl = document.getElementById("my-meeting");

      meetingEl.meeting = meeting;


      // Pass custom icon pack URL

      meetingEl.iconPackUrl = "https://example.com/my-icon-pack.json";

    };


    init();

  </script>

</body>


```

```

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

} from "@cloudflare/realtimekit-react";

import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";

import { useEffect } from "react";


function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();


  useEffect(() => {

    initMeeting({

      authToken: "<participant_auth_token>",

      defaults: {

        audio: true,

        video: true,

      },

    });

  }, []);


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkMeeting

        meeting={meeting}

        iconPackUrl="https://example.com/my-icon-pack.json"

      />

    </RealtimeKitProvider>

  );

}


```

TypeScript

```

class AppComponent {

  title = "MyProject";

  @ViewChild("myid") meetingComponent: RtkMeeting;

  rtkMeeting: RealtimeKitClient;


  async ngAfterViewInit() {

    const meeting = await RealtimeKitClient.init({

      authToken: "<auth-token>",

    });

    meeting.join();

    this.rtkMeeting = meeting;

    if (this.meetingComponent) {

      this.meetingComponent.meeting = meeting;

      this.meetingComponent.iconPackUrl =

        "https://example.com/my-icon-pack.json";

    }

  }

}


```

## IconPack reference

The IconPack is an object where:

* **Object key** \- Denotes the name of the icon
* **Object value** \- Stores the SVG string

### Available icons

The default icon pack includes the following icons:

* `attach`
* `call_end`
* `chat`
* `checkmark`
* `chevron_down`
* `chevron_left`
* `chevron_right`
* `chevron_up`
* `clock`
* `copy`
* `disconnected`
* `dismiss`
* `download`
* `emoji_multiple`
* `full_screen_maximize`
* `full_screen_minimize`
* `image`
* `image_off`
* `join_stage`
* `leave_stage`
* `mic_off`
* `mic_on`
* `more_vertical`
* `participants`
* `people`
* `pin`
* `pin_off`
* `poll`
* `recording`
* `rocket`
* `search`
* `send`
* `settings`
* `share`
* `share_screen_person`
* `share_screen_start`
* `share_screen_stop`
* `speaker`
* `spinner`
* `spotlight`
* `stop_recording`
* `subtract`
* `vertical_scroll`
* `vertical_scroll_disabled`
* `video_off`
* `video_on`
* `wand`
* `warning`
* `wifi`

Each icon in your custom icon pack JSON file should be defined as a key-value pair where the key matches one of the icon names above, and the value is the SVG string for that icon.

## Next steps

Explore additional customization options:

* [Render Default Meeting UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/) \- Complete meeting experience out of the box
* [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/) \- Create custom meeting interfaces

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/branding/","name":"Customise Branding"}}]}
```

---

---
title: Design System
description: RealtimeKit's UI Kit provides all the necessary UI components to allow complete customization of all its UI Kit components. You can customize your brand colours, fonts, logo and more.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/branding/design-system.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Design System

RealtimeKit's UI Kit provides all the necessary UI components to allow complete customization of all its UI Kit components. You can customize your brand colours, fonts, logo and more.

## Prerequisites

To get started with customizing the icons for your meetings, you need to first [integrate RealtimeKit's Web SDK](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/) into your web application.

WebMobile

ReactWeb ComponentsAngular

## Override Design System

The `provideRtkDesignSystem()` utility allows you to override the exisiting design system with your own custom design system.

### Installation

```

<script type="module">

  import { provideRtkDesignSystem } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/dist/index.js";

</script>


```

JavaScript

```

import { provideRtkDesignSystem } from "@cloudflare/realtimekit-react-ui";


```

JavaScript

```

import { provideRtkDesignSystem } from "@cloudflare/realtimekit-angular-ui";


```

### Usage

```

<div id="app"></div>


<script>

  provideRtkDesignSystem(document.getElementById("app"), {

    googleFont: "Lobster",

    // sets light background colors

    theme: "light",

    colors: {

      danger: "#ffac00",

      brand: {

        300: "#00FFE1",

        400: "#00FFFF",

        500: "#00E1D4",

        600: "#007B74",

        700: "#00655F",

      },

      text: "#071428",

      "text-on-brand": "#ffffff",

      "video-bg": "#E5E7EB",

    },

    borderRadius: "extra-rounded",

  });

</script>


```

```

<div id="app"></div>


<script>

  provideRtkDesignSystem(document.getElementById("app"), {

    googleFont: "Lobster",

    // sets light background colors

    theme: "light",

    colors: {

      danger: "#ffac00",

      brand: {

        300: "#00FFE1",

        400: "#00FFFF",

        500: "#00E1D4",

        600: "#007B74",

        700: "#00655F",

      },

      text: "#071428",

      "text-on-brand": "#ffffff",

      "video-bg": "#E5E7EB",

    },

    borderRadius: "extra-rounded",

  });

</script>


```

JavaScript

```

function Example() {

  const meetingEl = useRef();

  const { meeting } = useRealtimeKitMeeting();


  useEffect(() => {

    provideRtkDesignSystem(meetingEl.current, {

      googleFont: "Lobster",

      // sets light background colors

      theme: "light",

      colors: {

        danger: "#ffac00",

        brand: {

          300: "#00FFE1",

          400: "#00FFFF",

          500: "#00E1D4",

          600: "#007B74",

          700: "#00655F",

        },

        text: "#071428",

        "text-on-brand": "#ffffff",

        "video-bg": "#E5E7EB",

      },

      borderRadius: "extra-rounded",

    });

  }, []);


  return (

    <div style={{ height: "400px" }}>

      <RtkMeeting meeting={meeting} ref={meetingEl} mode="fill" />

    </div>

  );

}


```

## Design Tokens

UI Kit uses [design tokens ↗](https://css-tricks.com/what-are-design-tokens/) for it's design system.

Design tokens are the design related values which are used to maintain a design system, which provides flexibility in customizing the overall design of a system with values such as: typography, spacing, colors etc.

These design tokens are stored and shared among components with the help of [CSS variables ↗](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading%5Fvariables/Using%5Fcustom%5Fproperties).

### Typography

You can tweak the font family used in your UI Kit components easily with this token. You can edit this value in two ways with the provideRtkDesignSystem utility.

```

--rtk-font-family: Inter;


```

#### Usage

Set either of these values in your design tokens.

* With fontFamily - Use a custom font family, you'll have to load the font manually.
* With googleFont - Use a google font, the font is loaded automatically.

JavaScript

```

const designTokens = {

  fontFamily: "Custom Font",

  // or

  googleFont: "A Google Font",

};


```

### Colours

CSS Variables are set in the format: `R G B`.

Here are all the color tokens, along with their default values.

```

--rtk-colors-brand-500: 33 96 253;

--rtk-colors-background-1000: 8 8 8;

/_ ... rest of the shades _/


```

#### Usage

Note

Note the exception of `text` and `text-on-brand` colors, you only specify a single color even though there are the following shades: 1000 - 600.

This is because the `provideRtkDesignSystem()` utility sets the color you pass to text-1000 and calculates lighter shades and sets them as well.

Only pass objects for `brand` and `background` colors.

A set of commonly used `background` shades are available by default with the `theme` property.

Theme values are: `light`, `dark`, `darkest`.

Edit color tokens like this. Only the colors you specify will be set.

JavaScript

```

const designTokens = {

  theme: "darkest",

  colors: {

    brand: { 500: "#0D51FD" },

    background: { 1000: "#080808" },

    text: "#ffffff",

    "text-on-primary": "#ffffff",

    "video-bg": "#181818",

  },

};


```

### Spacing

The spacing scale is used for setting width, height, margins, paddings, positions etc. throughout the components.

* The default value for the spacing scale base is 4px.
* Rest of the values are calculated with this base, set to `--rtk-space-1`.
* Current spacing scale ranges from 0 to 96.

```

--rtk-space-1: 4px;

/* ... rest of the spacing scale */


```

#### Usage

Set the base of the spacing scale with `spacingBase` property.

JavaScript

```

const designTokens = {

  spacingBase: 4, // value in px

};


```

### Borders

Border Width and Border Radius properties can also be customized with design tokens!

| Token Name   | Values                                  |
| ------------ | --------------------------------------- |
| borderWidth  | none, thin, fat                         |
| borderRadius | sharp, rounded, extra-rounded, circular |

#### Usage

JavaScript

```

const designTokens = {

  borderWidth: "thin",

  borderRadius: "rounded",

};


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/branding/","name":"Customise Branding"}},{"@type":"ListItem","position":6,"item":{"@id":"/realtime/realtimekit/ui-kit/branding/design-system/","name":"Design System"}}]}
```

---

---
title: Breakout Rooms
description: If you prefer to learn by seeing examples, please check out the respective example repositories.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/breakout-rooms.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Breakout Rooms

### Code Examples

If you prefer to learn by seeing examples, please check out the respective example repositories.

#### Web Examples

* [Web Components ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/html-examples/examples/default-meeting-ui)
* [React ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/react-examples/examples/default-meeting-ui)
* [Angular ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/angular-examples/examples/default-meeting-ui)

Note

The breakout rooms feature, also known as connected meetings, is currently in beta, which means it is still being tested and evaluated, and may undergo some changes.

Breakout rooms allow participants of a meeting to split into smaller groups for targeted discussions and collaboration. With the rise of remote work and online learning, breakout rooms have become an essential tool for enhancing engagement and building community in virtual settings. They are an ideal choice for workshops, online classrooms, or when you need to speak privately with select participants outside the main meeting.

Note

Breakout rooms are currently supported on web only.

In RealtimeKit, breakout rooms are created as a separate meeting. Each breakout room is an independent meeting and can be managed like any other RealtimeKit meeting. RealtimeKit provides a set of SDK APIs to create, manage, and switch between breakout rooms.

## Key features

The following are some of the key features of RealtimeKit's breakout rooms:

* Manage permissions and privileges of hosts and participants using presets
* Hosts can create breakout rooms, assign participants, start and close the breakout rooms, and switch between rooms
* Participants can start and stop video, interact with other participants using chat and polls, and mute/unmute audio
* Record all breakout sessions individually like any other RealtimeKit meeting

## Roles in a breakout room

Roles in the breakout room are managed by presets.

### Host

Hosts can create breakout rooms, assign participants, start and close the breakout rooms, and switch between rooms.

### Participants

As a participant in a breakout room, you can:

* **Switch to Parent Meeting** \- Switch back to the main meeting (if you have the required permissions)
* **Switch Connected Meetings** \- Move from the main meeting to smaller, focused discussion groups (breakout rooms) for collaboration
* **Collaborate** \- Use tools such as chat and polls during breakout sessions

## Audio and video

Each breakout room functions as an independent meeting. When you switch to a breakout room from the main meeting, it automatically switches to the audio and video of the breakout session. You can mute or unmute your audio and start or stop your video at any time during the breakout session, just as you can in the main meeting.

When the breakout session ends, your audio and video automatically switch back to the main meeting.

* If your video was turned on during a breakout session, it will remain on when you return to the main session
* If your microphone was on during a breakout session, it will stay on when you return to the main session

## Recording breakout sessions

Each breakout session is a separate session. Each breakout session's recording is stored and managed separately, just like any other RealtimeKit meeting. For more information, refer to [Recording](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/).

## Breakout rooms management

Breakout rooms allow the participants to split into separate sessions. The host can create breakout rooms, assign participants, start and close the breakout rooms.

### Create presets

A preset is a set of permissions and UI configurations that are applied to hosts and participants. They determine the look, feel, and behavior of the breakout room.

For breakout rooms, you must provide the following permissions for hosts and participants in Connected Meetings:

#### Host

The host preset should have **Full Access** permission in Connected Meetings. This allows the host to:

* Create breakout rooms
* Assign participants to rooms
* Start and close breakout rooms
* Switch between rooms

#### Participants

You can choose to provide the following permissions to participants:

* **Switch Connected Meetings** \- Allows participants to move between breakout rooms
* **Switch to Parent Meeting** \- Allows participants to return to the main meeting

### Save the preset

1. Once you have made all the changes to your preset, click **Save**
2. Enter a name for your preset and click **Save**
3. Your preset is listed - click **Edit** to make any changes

### Create a meeting

Create a RealtimeKit meeting using the [Create meeting API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/). This API returns a unique identifier for your meeting.

### Add participants

After creating the meeting, add each participant using the [Add participant API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant/). The `presetName` created earlier must be passed in the body of the Add Participant API request.

### Start breakout room

1. In your RealtimeKit meeting, click **Breakout Rooms**
2. In the Create Breakout dialog, add the number of rooms you want and click **Create**

Once you have created breakout rooms, assign participants to the rooms. You can either:

* **Assign participants automatically** \- RealtimeKit splits participants evenly across rooms
* **Assign participants manually** \- Select which participants you want in each room

#### Assign participants automatically

To assign participants automatically:

1. In the Assign Participants dialog, click the shuffle button
2. Participants are assigned to the rooms
3. Edit room names by clicking the pencil icon beside the room name (optional)
4. Move participants to different rooms if needed
5. Click **Start Breakout**
6. Click **Yes, start** in the confirmation dialog

#### Assign participants manually

To assign participants manually:

1. In the Assign Participants dialog, select the participants you want to assign to a room
2. In the Rooms section, click **Assign**
3. Repeat for all participants and rooms
4. Click **Start Breakout**
5. Click **Yes, start** in the confirmation dialog

## Integrate breakout rooms

After setting up breakout rooms via the API, you need to integrate them into your application using the RealtimeKit SDK.

WebMobile

ReactWeb ComponentsAngular

### Initialize the SDK with breakout rooms support

Initialize the SDK and add an event handler for breakout rooms:

```

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

} from "@cloudflare/realtimekit-react";

import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";

import { useEffect, useState } from "react";


function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  const [authToken, setAuthToken] = useState("<participant_auth_token>");


  useEffect(() => {

    if (authToken) {

      initMeeting({

        authToken: authToken,

      });

    }

  }, [authToken]);


  // Add event handler for breakout rooms

  useEffect(() => {

    if (meeting) {

      meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {

        // Meeting object is automatically updated in React

        console.log("Switched to breakout room or main meeting");

      });

    }

  }, [meeting]);


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkMeeting showSetupScreen={true} meeting={meeting} />

    </RealtimeKitProvider>

  );

}


```

The `meetingChanged` event is triggered when a participant switches between the main meeting and breakout rooms. In React, the meeting object is automatically managed by the provider.

```

<script type="module">

  import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";


  let meeting = await RealtimeKitClient.init({

    authToken: "<participant_auth_token>",

  });


  // Add event handler for breakout rooms

  meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {

    meeting = newMeeting;

    document.querySelector("rtk-meeting").meeting = meeting;

  });

</script>


```

The `meetingChanged` event is triggered when a participant switches between the main meeting and breakout rooms. Update the meeting object reference when this event fires.

TypeScript

```

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import RealtimeKitClient from '@cloudflare/realtimekit';

import { RtkMeeting } from '@cloudflare/realtimekit-angular';


@Component({

  selector: 'app-root',

  template: `<rtk-meeting #myid [showSetupScreen]="true"></rtk-meeting>`

})

export class AppComponent implements AfterViewInit {

  @ViewChild('myid') meetingComponent: RtkMeeting;

  rtkMeeting: RealtimeKitClient;


  async ngAfterViewInit() {

    let meeting = await RealtimeKitClient.init({

      authToken: '<participant_auth_token>',

    });


    // Add event handler for breakout rooms

    meeting.connectedMeetings.on('meetingChanged', (newMeeting) => {

      meeting = newMeeting;

      if (this.meetingComponent) {

        this.meetingComponent.meeting = meeting;

      }

    });


    this.rtkMeeting = meeting;

    if (this.meetingComponent) {

      this.meetingComponent.meeting = meeting;

    }

  }

}


```

The `meetingChanged` event is triggered when a participant switches between the main meeting and breakout rooms. Update the meeting object reference when this event fires.

### Render the meeting UI

Use the default meeting UI component which includes built-in breakout room support:

```

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

} from "@cloudflare/realtimekit-react";

import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";

import { useEffect, useState } from "react";


function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  const [authToken, setAuthToken] = useState("<participant_auth_token>");


  useEffect(() => {

    if (authToken) {

      initMeeting({

        authToken: authToken,

      });

    }

  }, [authToken]);


  useEffect(() => {

    if (meeting) {

      meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {

        console.log("Switched to breakout room or main meeting");

      });

    }

  }, [meeting]);


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkMeeting showSetupScreen={true} meeting={meeting} />

    </RealtimeKitProvider>

  );

}


```

Note

The Default Meeting UI (`RtkMeeting` component) automatically joins the session, so you do not need to call `meeting.join()`.

The `showSetupScreen` property controls whether the setup screen is displayed, allowing participants to preview their audio and video before joining the session.

```

<body>

  <rtk-meeting id="my-meeting"></rtk-meeting>


  <script type="module">

    import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";


    let meeting = await RealtimeKitClient.init({

      authToken: "<participant_auth_token>",

    });


    // Add event handler for breakout rooms

    meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {

      meeting = newMeeting;

      document.querySelector("rtk-meeting").meeting = meeting;

    });


    document.querySelector("rtk-meeting").showSetupScreen = true;

    document.querySelector("rtk-meeting").meeting = meeting;

  </script>

</body>


```

Note

The Default Meeting UI (`rtk-meeting` component) automatically joins the session, so you do not need to call `meeting.join()`.

The `showSetupScreen` property controls whether the setup screen is displayed, allowing participants to preview their audio and video before joining the session.

```

<rtk-meeting #myid [showSetupScreen]="true"></rtk-meeting>


```

TypeScript

```

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import RealtimeKitClient from '@cloudflare/realtimekit';

import { RtkMeeting } from '@cloudflare/realtimekit-angular';


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html'

})

export class AppComponent implements AfterViewInit {

  @ViewChild('myid') meetingComponent: RtkMeeting;

  rtkMeeting: RealtimeKitClient;


  async ngAfterViewInit() {

    let meeting = await RealtimeKitClient.init({

      authToken: '<participant_auth_token>',

    });


    // Add event handler for breakout rooms

    meeting.connectedMeetings.on('meetingChanged', (newMeeting) => {

      meeting = newMeeting;

      if (this.meetingComponent) {

        this.meetingComponent.meeting = meeting;

      }

    });


    this.rtkMeeting = meeting;

    if (this.meetingComponent) {

      this.meetingComponent.meeting = meeting;

    }

  }

}


```

Note

The Default Meeting UI (`rtk-meeting` component) automatically joins the session, so you do not need to call `meeting.join()`.

The `showSetupScreen` property controls whether the setup screen is displayed, allowing participants to preview their audio and video before joining the session.

## Next steps

You have successfully integrated breakout rooms into your RealtimeKit application. Participants can now:

* Join the main meeting
* Be assigned to breakout rooms by the host
* Switch between the main meeting and breakout rooms
* Collaborate in smaller focused groups

For more advanced customization, explore the following:

* [UI Kit Components Library](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/) \- Browse available components
* [UI Kit States](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/) \- Learn how components synchronize
* [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/) \- Create custom meeting interfaces

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/breakout-rooms/","name":"Breakout Rooms"}}]}
```

---

---
title: Build Your Own UI
description: This guide explains how to use Cloudflare RealtimeKit SDKs to build fully custom real-time video UIs.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/build-your-own-ui.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Build Your Own UI

This guide explains how to use Cloudflare RealtimeKit SDKs to build fully custom real-time video UIs.

## Prerequisites

This page builds upon the [Initialize SDK](https://developers.cloudflare.com/realtime/realtimekit/core/) and [Render Default Meeting UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/) & [UI Kit States](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/) guides. Make sure you've read those first.

The code examples on this page assume you've already imported the necessary packages and initialized the SDK. We won't repeat those setup steps here for brevity.

## Building Your Own UI, With UI Kit

If default meeting component is not enough, and you need more control over layout or behavior, use [UI Kit components](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/) to build a custom interface. The UI Kit provides pre-built components that sit on top of the Core SDK, letting you mix and match pieces while saving time compared to building from scratch.

Building a custom UI requires managing participant audio, notifications, dialogs, component layout, and screen transitions yourself.

WebMobile

ReactWeb ComponentsAngular

Similar to `rtk-meeting`, `rtk-ui-provider`, another ui-kit component that acts as a provider, also listens to [states](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/) and syncs them with the UI Kit components.

Unlike `rtk-meeting`, `rtk-ui-provider` allows you to pass any child components to it, if any one of the child components is a RealtimeKit component starting with `rtk-`, `rtk-ui-provider` will coordinate with the RealtimeKit component to sync the states.

Similar to `RtkMeeting`, `RtkUiProvider`, another ui-kit component that acts as a provider, also listens to [states](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/) and syncs them with the UI Kit components.

Unlike `RtkMeeting`, `RtkUiProvider` allows you to pass any child components to it. If any one of the child components is a RealtimeKit component starting with `Rtk`, `RtkUiProvider` will coordinate with the RealtimeKit component to sync the states.

Similar to `rtk-meeting`, `rtk-ui-provider`, another ui-kit component that acts as a provider, also listens to [states](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/) and syncs them with the UI Kit components.

Unlike `rtk-meeting`, `rtk-ui-provider` allows you to pass any child components to it, if any one of the child components is a RealtimeKit component starting with `rtk-`, `rtk-ui-provider` will coordinate with the RealtimeKit component to sync the states.

## Example Code

```

<!DOCTYPE html>

<html>

  <head>

    <script type="module">

      import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js";

      defineCustomElements();

    </script>

    <script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>

  </head>


    <body style="margin: 0;">

      <rtk-ui-provider

        id="rtk-ui-provider"

        style="display: flex; flex-direction: column; height: 100vh; margin: 0;"

      >

        <div

          id="meeting-container"

          style="display: flex; flex-direction: column; flex: 1; flex-grow: 1; flex-shrink: 1;"

        >

          Meeting will render here...

        </div>

        <rtk-participants-audio></rtk-participants-audio>

        <rtk-dialog-manager></rtk-dialog-manager>

        <rtk-notifications></rtk-notifications>

      </rtk-ui-provider>

      <script type="module">

        async function initializeMeeting() {

          let currentState = "idle";


          const meeting = await RealtimeKitClient.init({

            authToken: "participant_auth_token",

          });


          function renderSetupScreen() {

            document.querySelector("#meeting-container").innerHTML = `

                    <rtk-setup-screen></rtk-setup-screen>

                `;

          }


          function renderWaitingScreen() {

            document.querySelector("#meeting-container").innerHTML = `

                    <rtk-waiting-screen></rtk-waiting-screen>

                `;

          }


          function renderJoinedScreen() {

            document.querySelector("#meeting-container").innerHTML = `

                    <rtk-header style="display: flex; justify-content: space-between;"></rtk-header>

                    <rtk-stage style="flex: 1; flex-grow: 1; flex-shrink: 1;">

                        <rtk-grid></rtk-grid>

                        <rtk-sidebar style="position: fixed; top:0px;"></rtk-sidebar>

                    </rtk-stage>

                    <rtk-controlbar style="display: flex; justify-content: space-between;"></rtk-controlbar>

                `;

          }


          function renderEndedScreen() {

            document.querySelector("#meeting-container").innerHTML = `

                    <rtk-ended-screen></rtk-ended-screen>

                `;

          }


          // Listen for state updates from rtk-ui-provider

          document

            .querySelector("rtk-ui-provider")

            .addEventListener("rtkStatesUpdate", (event) => {

              // Store states to update your custom UI

              const states = event.detail;


              if (states.meeting === "idle" && currentState !== "idle") {

                currentState = "idle";

                document

                  .querySelector("rtk-ui-provider")

                  .querySelector("#meeting-container").innerHTML =

                  "Meeting is loading...";

              } else if (states.meeting === "setup" && currentState !== "setup") {

                currentState = "setup";

                renderSetupScreen();

              } else if (

                states.meeting === "waiting" &&

                currentState !== "waiting"

              ) {

                currentState = "waiting";

                renderWaitingScreen();

              } else if (

                states.meeting === "joined" &&

                currentState !== "joined"

              ) {

                currentState = "joined";

                renderJoinedScreen();

              } else if (states.meeting === "ended" && currentState !== "ended") {

                currentState = "ended";

                renderEndedScreen();

              }


              const sidebarComponent = document

                .querySelector("rtk-ui-provider")

                .querySelector("#meeting-container")

                .querySelector("rtk-sidebar");

              if (sidebarComponent) {

                if (states.activeSidebar) {

                  sidebarComponent.style.display = "block";

                } else {

                  sidebarComponent.style.display = "none";

                }

              }

            });


          document.querySelector("rtk-ui-provider").showSetupScreen = true;

          document.querySelector("rtk-ui-provider").meeting = meeting;

        }

        initializeMeeting();

      </script>

    </body>


</html>


```

Note

It is advised to always use `rtk-ui-provider` to render a custom UI. Without `rtk-ui-provider`, you will have to set props, such as `meeting`, to all the UI Kit components manually.

`rtk-ui-provider` helps you go from

```

<rtk-header />

<!-- Later do document.querySelector('rtk-header').meeting = meeting; -->


```

to just

```

<rtk-header />


```

It is recommended to use either `rtk-meeting` or `rtk-ui-provider` to render a meeting. Using both will result in unexpected behavior. For custom UIs, it is recommended to use `rtk-ui-provider` always.

First level split of `rtk-meeting` using `rtk-ui-provider` has the following components:

[rtk-header](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-header) is the header component that shows the session name and the session controls.  
[rtk-stage](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-stage) is the container component that contains the grid and sidebar components.  
[rtk-grid](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-grid) is the grid component that shows the participants in the session.  
[rtk-sidebar](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-sidebar) is the sidebar component that shows the sidebar, in which chat, polls content shows up.  
[rtk-controlbar](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-controlbar) is the controlbar component that shows the controls, such as camera, microphone, etc.  
[rtk-notifications](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-notifications) is the notifications component that shows the notifications for the session.  
[rtk-participants-audio](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-participants-audio) is the audio component that helps you listen other participants in the session.  
[rtk-dialog-manager](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-dialog-manager) is the dialog-manager component that shows the all supported dialogs, such as settings, breakout rooms, etc.  

You can split all of these components further. To see more such components, please refer to our [components library](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/).

We have our UI Kit open source on GitHub, you can find it [here ↗](https://github.com/cloudflare/realtimekit-ui).

Note

Please note that you will need to manage the CSS for aligning these components, yourself. This was previously handled entirely by `rtk-meeting`. All these components can be styled using CSS.

Note

You must include `rtk-notifications`, `rtk-participants-audio`, and `rtk-dialog-manager`. If you leave them out, features like settings toggles and notifications won’t work, and you won’t hear other participants in the session.

```

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

} from "@cloudflare/realtimekit-react";

import {

  RtkUiProvider,

  RtkHeader,

  RtkStage,

  RtkGrid,

  RtkSidebar,

  RtkControlbar,

  RtkNotifications,

  RtkParticipantsAudio,

  RtkDialogManager,

  RtkSetupScreen,

  RtkWaitingScreen,

  RtkEndedScreen,

  States,

} from "@cloudflare/realtimekit-react-ui";

import { useEffect, useState } from "react";


function MeetingContainer() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  const [currentState, setCurrentState] = useState("idle");

  const [showSidebar, setShowSidebar] = useState(false);


  useEffect(() => {

    initMeeting({

      authToken: "participant_auth_token",

    });

  }, []);


  const renderSetupScreen = () => {

    return <RtkSetupScreen />;

  };


  const renderWaitingScreen = () => {

    return <RtkWaitingScreen />;

  };


  const renderJoinedScreen = () => {

    return (

      <>

        <RtkHeader

          style={{ display: "flex", justifyContent: "space-between" }}

        />

        <RtkStage style={{ flex: 1, flexGrow: 1, flexShrink: 1 }}>

          <RtkGrid />

          <RtkSidebar

            style={{

              position: "fixed",

              top: "0px",

              display: showSidebar ? "block" : "none",

            }}

          />

        </RtkStage>

        <RtkControlbar

          style={{ display: "flex", justifyContent: "space-between" }}

        />

      </>

    );

  };


  const renderEndedScreen = () => {

    return <RtkEndedScreen />;

  };


  // Listen for state updates from RtkUiProvider

  const handleStatesUpdate = (event: { detail: States }) => {

    const meetingState = event.detail.meeting;

    const states = event.detail;


    // Store states to update your custom UI

    if (meetingState === "idle" && currentState !== "idle") {

      setCurrentState("idle");

    } else if (meetingState === "setup" && currentState !== "setup") {

      setCurrentState("setup");

    } else if (meetingState === "waiting" && currentState !== "waiting") {

      setCurrentState("waiting");

    } else if (meetingState === "joined" && currentState !== "joined") {

      setCurrentState("joined");

    } else if (meetingState === "ended" && currentState !== "ended") {

      setCurrentState("ended");

    }


    // Update sidebar visibility based on state

    if (states.activeSidebar !== undefined) {

      setShowSidebar(states.activeSidebar);

    }

  };


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkUiProvider

        meeting={meeting}

        showSetupScreen={true}

        onRtkStatesUpdate={handleStatesUpdate}

        style={{

          display: "flex",

          flexDirection: "column",

          height: "100vh",

          margin: 0,

        }}

      >

        <div

          id="meeting-container"

          style={{

            display: "flex",

            flexDirection: "column",

            flex: 1,

            flexGrow: 1,

            flexShrink: 1,

          }}

        >

          {currentState === "idle" && <div>Meeting is loading...</div>}

          {currentState === "setup" && renderSetupScreen()}

          {currentState === "waiting" && renderWaitingScreen()}

          {currentState === "joined" && renderJoinedScreen()}

          {currentState === "ended" && renderEndedScreen()}

        </div>

        <RtkParticipantsAudio />

        <RtkDialogManager />

        <RtkNotifications />

      </RtkUiProvider>

    </RealtimeKitProvider>

  );

}


function App() {

  return <MeetingContainer />;

}


```

Note

It is advised to always use `RtkUiProvider` to render a custom UI. Without `RtkUiProvider`, you will have to set props, such as `meeting`, to all the UI Kit components manually.

`RtkUiProvider` helps you go from

```

<RtkHeader meeting={meeting} />


```

to just

```

<RtkHeader />


```

It is recommended to use either `RtkMeeting` or `RtkUiProvider` to render a meeting. Using both will result in unexpected behavior. For custom UIs, it is recommended to use `RtkUiProvider` always.

First level split of `RtkMeeting` using `RtkUiProvider` has the following components:

[RtkHeader](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtkheader) is the header component that shows the session name and the session controls.  
[RtkStage](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtkstage) is the container component that contains the grid and sidebar components.  
[RtkGrid](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtkgrid) is the grid component that shows the participants in the session.  
[RtkSidebar](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtksidebar) is the sidebar component that shows the sidebar, in which chat, polls content shows up.  
[RtkControlbar](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtkcontrolbar) is the controlbar component that shows the controls, such as camera, microphone, etc.  
[RtkNotifications](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtknotifications) is the notifications component that shows the notifications for the session.  
[RtkParticipantsAudio](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtkparticipantsaudio) is the audio component that helps you listen other participants in the session.  
[RtkDialogManager](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtkdialogmanager) is the dialog-manager component that shows the dialogs for the session.  

You can split all of these components further. To see more such components, please refer to our [components library](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/).

We have our UI Kit open source on GitHub, you can find it [here ↗](https://github.com/cloudflare/realtimekit-ui).

Note

Please note that you will need to manage the CSS for aligning these components, yourself. This was previously handled entirely by `RtkMeeting`. All these components can be styled using CSS.

Note

You must include `RtkNotifications`, `RtkParticipantsAudio`, and `RtkDialogManager`. If you leave them out, features like settings toggles and notifications won't work, and you won't hear other participants in the session.

In your app.module.ts, import the RealtimeKitComponentsModule along with all the custom modules you have built using the component library (example shown below).

app.module.ts

```

import { NgModule } from "@angular/core";

import { BrowserModule } from "@angular/platform-browser";

import { FormsModule } from "@angular/forms";


import { AppComponent } from "./app.component";

import { CustomRtkMeetingComponent } from "./components/custom-rtk-meeting.component";

import { SetupScreenComponent } from "./components/setup-screen.component";

import { InMeetingComponent } from "./components/in-meeting.component";

import { MeetingHeaderComponent } from "./components/meeting-header.component";

import { MeetingControlBarComponent } from "./components/meeting-control-bar.component";

import { MeetingSidebarComponent } from "./components/meeting-sidebar.component";

import { MediaPreviewModalComponent } from "./components/media-preview-modal.component";

import { AudioPreviewComponent } from "./components/audio-preview.component";

import { VideoPreviewComponent } from "./components/video-preview.component";


import { RealtimeKitComponentsModule } from "@cloudflare/realtimekit-angular-ui";


@NgModule({

  declarations: [

    AppComponent,

    CustomRtkMeetingComponent,

    SetupScreenComponent,

    InMeetingComponent,

    MeetingHeaderComponent,

    MeetingControlBarComponent,

    MeetingSidebarComponent,

    MediaPreviewModalComponent,

    AudioPreviewComponent,

    VideoPreviewComponent,

  ],

  imports: [BrowserModule, FormsModule, RealtimeKitComponentsModule],

  providers: [],

  bootstrap: [AppComponent],

})

export class AppModule {}


```

Initialize the meeting in your app.component.ts

app.component.ts

```

import { Component, OnInit, Inject } from "@angular/core";

import { DOCUMENT } from "@angular/common";

import { StatesService } from "./services/states.service";

import RealtimeKitClient from "@cloudflare/realtimekit";


@Component({

  selector: "app-root",

  templateUrl: "./app.component.html",

  styleUrls: ["./app.component.css"],

})

export class AppComponent implements OnInit {

  meeting: any = null;


  constructor(

    private statesService: StatesService,

    @Inject(DOCUMENT) private document: Document,

  ) {}


  async ngOnInit() {

    await this.initializeMeeting();

  }


  private async initializeMeeting() {

    const searchParams = new URLSearchParams(

      this.document.defaultView?.location.search,

    );

    const authToken = searchParams.get("authToken");


    if (!authToken) {

      alert(

        "An authToken wasn't passed, please pass an authToken in the URL query to join a meeting.",

      );

      return;

    }


    if (!this.meeting) {

      try {

        // Initialize RealtimeKit client

        const meeting = await RealtimeKitClient.init({

          authToken,

        });


        this.meeting = meeting;


        // Expose meeting object to window for debugging

        Object.assign(this.document.defaultView as any, {

          meeting: this.meeting,

        });

      } catch (error) {

        console.error("Failed to initialize meeting:", error);

      }

    }

  }


  onRtkStatesUpdate(event: any) {

    this.statesService.setStates(event.detail);

  }

}


```

app.component.html

```

<rtk-ui-provider

  [meeting]="meeting"

  (rtkStatesUpdate)="onRtkStatesUpdate($event)"

  [showSetupScreen]="true"

  style="height: 100%; width: 100%; display: block;"

>

  <app-custom-rtk-meeting></app-custom-rtk-meeting>

  <rtk-dialog-manager></rtk-dialog-manager>

</rtk-ui-provider>


```

This is an example of what a custom element built using UI Kit components looks like:

components/custom-rtk-component.ts

```

import { Component, OnInit, OnDestroy } from "@angular/core";

import { Subject, takeUntil } from "rxjs";

import { StatesService, CustomStatesService } from "../services/states.service";

import { States } from "@cloudflare/realtimekit-ui";

import { CustomStates } from "../types";


@Component({

  selector: "app-custom-rtk-meeting",

  template: `

    <rtk-idle-screen *ngIf="states.meeting === 'idle'"></rtk-idle-screen>

    <app-setup-screen *ngIf="states.meeting === 'setup'"></app-setup-screen>

    <rtk-waiting-screen

      *ngIf="states.meeting === 'waiting'"

    ></rtk-waiting-screen>

    <rtk-ended-screen *ngIf="states.meeting === 'ended'"></rtk-ended-screen>

    <app-in-meeting

      *ngIf="states.meeting === 'joined' || !states.meeting"

    ></app-in-meeting>

  `,

})

export class CustomRtkMeetingComponent implements OnInit, OnDestroy {

  states: States = { meeting: "idle" } as States;

  customStates: CustomStates = {};

  private destroy$ = new Subject<void>();


  constructor(

    private statesService: StatesService,

    private customStatesService: CustomStatesService,

  ) {}


  ngOnInit() {

    this.statesService.states$

      .pipe(takeUntil(this.destroy$))

      .subscribe((states) => {

        this.states = states;

        console.log(states, this.customStates);

      });


    this.customStatesService.customStates$

      .pipe(takeUntil(this.destroy$))

      .subscribe((customStates) => {

        this.customStates = customStates;

        console.log(this.states, customStates);

      });

  }


  ngOnDestroy() {

    this.destroy$.next();

    this.destroy$.complete();

  }

}


```

Note

It is advised to always use `rtk-ui-provider` to render a custom UI. Without `rtk-ui-provider`, you will have to set props, such as `meeting`, to all the UI Kit components manually.

`rtk-ui-provider` helps you go from

```

<rtk-header />

<!-- Later do document.querySelector('rtk-header').meeting = meeting; -->


```

to just

```

<rtk-header />


```

It is recommended to use either `rtk-meeting` or `rtk-ui-provider` to render a meeting. Using both will result in unexpected behavior. For custom UIs, it is recommended to use `rtk-ui-provider` always.

First level split of `rtk-meeting` using `rtk-ui-provider` has the following components:

[rtk-header](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-header) is the header component that shows the session name and the session controls.  
[rtk-stage](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-stage) is the container component that contains the grid and sidebar components.  
[rtk-grid](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-grid) is the grid component that shows the participants in the session.  
[rtk-sidebar](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-sidebar) is the sidebar component that shows the sidebar, in which chat, polls content shows up.  
[rtk-controlbar](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-controlbar) is the controlbar component that shows the controls, such as camera, microphone, etc.  
[rtk-notifications](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-notifications) is the notifications component that shows the notifications for the session.  
[rtk-participants-audio](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-participants-audio) is the audio component that helps you listen other participants in the session.  
[rtk-dialog-manager](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-dialog-manager) is the dialog-manager component that shows the all supported dialogs, such as settings, breakout rooms, etc.  

You can split all of these components further. To see more such components, please refer to our [components library](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/).

We have our UI Kit open source on GitHub, you can find it [here ↗](https://github.com/cloudflare/realtimekit-ui).

Note

Please note that you will need to manage the CSS for aligning these components, yourself. This was previously handled entirely by `rtk-meeting`. All these components can be styled using CSS.

Note

You must include `rtk-notifications`, `rtk-participants-audio`, and `rtk-dialog-manager`. If you leave them out, features like settings toggles and notifications won’t work, and you won’t hear other participants in the session.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/build-your-own-ui/","name":"Build Your Own UI"}}]}
```

---

---
title: Component Library
description: The UI Kit components library provides a comprehensive set of pre-built, customizable components that you can use to build your own custom meeting interface.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/component-library.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Component Library

The UI Kit components library provides a comprehensive set of pre-built, customizable components that you can use to build your own custom meeting interface.

WebMobile

ReactWeb ComponentsAngular

Note

All UI Kit components are built on top of Web Components, regardless of which framework (React/Angular) you use. They render as Web Components in the browser DOM.

**Component naming conventions:**

* **Web Components and Angular**: Use kebab-case (e.g., `rtk-meeting`)
* **React**: Use PascalCase (e.g., `RtkMeeting`)

React and Angular components are wrappers around the same underlying Web Components, so functionality is identical across all frameworks.

## Component Gallery

Search through the comoponent gallery for the component you need.

## Basic Components

Small, reusable building blocks for your UI.

![Avatar](https://developers.cloudflare.com/_astro/rtk-avatar.BzbS585E.svg)⛶

`RtkAvatar`

![Audio Visualizer](https://developers.cloudflare.com/_astro/rtk-audio-visualizer.B1vXWRyf.svg)⛶

`RtkAudioVisualizer`

![Button](https://developers.cloudflare.com/_astro/rtk-button.B3s3SIbd.svg)⛶

`RtkButton`

![Clock](https://developers.cloudflare.com/_astro/rtk-clock.Du7EVvO2.svg)⛶

`RtkClock`

![Header](https://developers.cloudflare.com/_astro/rtk-header.BiEsUZBT.svg)⛶

`RtkHeader`

![Logo](https://developers.cloudflare.com/_astro/rtk-logo.CvmveBDG.svg)⛶

`RtkLogo`

![Meeting Title](https://developers.cloudflare.com/_astro/rtk-meeting-title.DUUzO_ih.svg)⛶

`RtkMeetingTitle`

![Recording Indicator](https://developers.cloudflare.com/_astro/rtk-recording-indicator.CT_Ht9Ts.svg)⛶

`RtkRecordingIndicator`

![Spinner](https://developers.cloudflare.com/_astro/rtk-spinner.CiW85bgp.svg)⛶

`RtkSpinner`

![Switch](https://developers.cloudflare.com/_astro/rtk-switch.CzkXUdv9.svg)⛶

`RtkSwitch`

![Tooltip](https://developers.cloudflare.com/_astro/rtk-tooltip.BIfpaD5u.svg)⛶

`RtkTooltip`

## UI Components

Interactive controls and interface elements.

![Control Bar](https://developers.cloudflare.com/_astro/rtk-controlbar.C4YxcYGC.svg)⛶

`RtkControlbar`

![Control Bar Button](https://developers.cloudflare.com/_astro/rtk-controlbar-button.CZQBMnNC.svg)⛶

`RtkControlbarButton`

![Dialog](https://developers.cloudflare.com/_astro/rtk-dialog.SILaBi2G.svg)⛶

`RtkDialog`

![Emoji Picker](https://developers.cloudflare.com/_astro/rtk-emoji-picker.CaX8j3yE.svg)⛶

`RtkEmojiPicker`

![Grid Pagination](https://developers.cloudflare.com/_astro/rtk-grid-pagination.DKJ3X5Kx.svg)⛶

`RtkGridPagination`

![Menu](https://developers.cloudflare.com/_astro/rtk-menu.C9KMWbAX.svg)⛶

`RtkMenu`

![Name Tag](https://developers.cloudflare.com/_astro/rtk-name-tag.wGHTsZWX.svg)⛶

`RtkNameTag`

![Notification](https://developers.cloudflare.com/_astro/rtk-notification.Do3n1g7c.svg)⛶

`RtkNotification`

![Participant Count](https://developers.cloudflare.com/_astro/rtk-participant-count.CxLbd2yH.svg)⛶

`RtkParticipantCount`

![Participant Tile](https://developers.cloudflare.com/_astro/rtk-participant-tile.j_1wiO0S.svg)⛶

`RtkParticipantTile`

![Plugin Main View](https://developers.cloudflare.com/_astro/rtk-plugin-main.DNOO4_Tu.svg)⛶

`RtkPluginMain`

## Composite Components

Complete, feature-rich components combining multiple elements.

![Chat](https://developers.cloudflare.com/_astro/rtk-chat.CA0RiA43.svg)⛶

`RtkChat`

![Grid](https://developers.cloudflare.com/_astro/rtk-grid.CZfeqwyY.svg)⛶

`RtkGrid`

![Image Viewer](https://developers.cloudflare.com/_astro/rtk-image-viewer.B5ltFAER.svg)⛶

`RtkImageViewer`

![Leave Meeting](https://developers.cloudflare.com/_astro/rtk-leave-meeting.UTk-KYGb.svg)⛶

`RtkLeaveMeeting`

![Mixed Grid](https://developers.cloudflare.com/_astro/rtk-mixed-grid.DZr6lVkg.svg)⛶

`RtkMixedGrid`

![Participants](https://developers.cloudflare.com/_astro/rtk-participants.BOkCsJBY.svg)⛶

`RtkParticipants`

![Participants Audio](https://developers.cloudflare.com/_astro/rtk-participants-audio.eIvUPjU6.svg)⛶

`RtkParticipantsAudio`

![Plugins](https://developers.cloudflare.com/_astro/rtk-plugins.4zjg6zHC.svg)⛶

`RtkPlugins`

![Polls](https://developers.cloudflare.com/_astro/rtk-polls.hqdlJT0t.svg)⛶

`RtkPolls`

![Screenshare View](https://developers.cloudflare.com/_astro/rtk-screenshare-view.BrwMCMAU.svg)⛶

`RtkScreenshareView`

![Settings](https://developers.cloudflare.com/_astro/rtk-settings.CsWuIao-.svg)⛶

`RtkSettings`

![Settings Audio](https://developers.cloudflare.com/_astro/rtk-settings-audio.CHFFN2ir.svg)⛶

`RtkSettingsAudio`

![Settings Video](https://developers.cloudflare.com/_astro/rtk-settings-video.CFt8Yu2W.svg)⛶

`RtkSettingsVideo`

![Sidebar](https://developers.cloudflare.com/_astro/rtk-sidebar.aKSWOJhh.svg)⛶

`RtkSidebar`

![Simple Grid](https://developers.cloudflare.com/_astro/rtk-simple-grid.D0tiCEP1.svg)⛶

`RtkSimpleGrid`

![Spotlight Grid](https://developers.cloudflare.com/_astro/rtk-spotlight-grid.2xkkE2_y.svg)⛶

`RtkSpotlightGrid`

## Screen Components

Full-screen views for different meeting states.

![Ended Screen](https://developers.cloudflare.com/_astro/rtk-ended-screen.CYpO8OXh.svg)⛶

`RtkEndedScreen`

![Idle Screen](https://developers.cloudflare.com/_astro/rtk-idle-screen.CN-poFx4.svg)⛶

`RtkIdleScreen`

![Meeting Screen](https://developers.cloudflare.com/_astro/rtk-meeting.CVtrTW4c.svg)⛶

`RtkMeeting`

![Setup Screen](https://developers.cloudflare.com/_astro/rtk-setup-screen.BRYS9Jjp.svg)⛶

`RtkSetupScreen`

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/component-library/","name":"Component Library"}}]}
```

---

---
title: Add Custom Controlbar
description: In this guide, we will learn how to add a custom controlbar for your RealtimeKit meeting experience.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/custom-controlbar.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Add Custom Controlbar

Prerequisite

This guide builds on top of the [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/). It is recommended to read that guide first. Portions of the code will not be repeated here for brevity.

For a complete list of available UI Kit components, refer to the [Component Library](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/).

In this guide, we will learn how to add a custom controlbar for your RealtimeKit meeting experience.

WebMobile

ReactWeb ComponentsAngular

RealtimeKit UI Kit provides the [RtkControlbar](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-controlbar) component for a default controlbar.

If you need additional controls, replace `RtkControlbar` with individual UI Kit components and custom elements.

Import the required components and React hook:

```

import { useRef } from "react";

import {

  RtkFullscreenToggle,

  RtkSettingsToggle,

  RtkScreenShareToggle,

  RtkMicToggle,

  RtkCameraToggle,

  RtkStageToggle,

  RtkLeaveButton,

  RtkMoreToggle,

  RtkPipToggle,

  RtkMuteAllButton,

  RtkBreakoutRoomsToggle,

  RtkRecordingToggle,

  RtkChatToggle,

  RtkPollsToggle,

  RtkParticipantsToggle,

  RtkPluginsToggle,

} from "@cloudflare/realtimekit-ui";


```

In your `RtkUIProvider` from [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/), replace:

```

<RtkControlbar />


```

with:

```

<div

  style={{

    display: "flex",

    width: "100%",

    padding: "8px 12px",

    color: "white",

    justifyContent: "space-between",

  }}

>

  <div

    id="controlbar-left"

    style={{ display: "flex", alignItems: "center", justifyContent: "center" }}

  >

    <RtkFullscreenToggle targetElement={fullScreenRef.current} />

    <RtkSettingsToggle />

    <RtkScreenShareToggle />

  </div>

  <div

    id="controlbar-center"

    style={{ display: "flex", alignItems: "center", justifyContent: "center" }}

  >

    <RtkMicToggle />

    <RtkCameraToggle />

    <RtkStageToggle />

    <RtkLeaveButton />

    <RtkMoreToggle>

      <div slot="more-elements">

        <RtkPipToggle variant="horizontal" />

        <RtkMuteAllButton variant="horizontal" />

        <RtkBreakoutRoomsToggle variant="horizontal" />

        <RtkRecordingToggle variant="horizontal" />

      </div>

    </RtkMoreToggle>

  </div>

  <div

    id="controlbar-right"

    style={{ display: "flex", alignItems: "center", justifyContent: "center" }}

  >

    <RtkChatToggle />

    <RtkPollsToggle />

    <RtkParticipantsToggle />

    <RtkPluginsToggle />

  </div>

</div>


```

Define a ref for the fullscreen target and attach it to your container element:

```

const fullScreenRef = useRef<HTMLDivElement>(null);


// In your RtkUIProvider, add the ref to the container

<RtkUIProvider

  ref={fullScreenRef}

  meeting={meeting}

  showSetupScreen={false}

  style={{

    display: "flex",

    flexDirection: "column",

    height: "100vh",

    margin: 0,

  }}

>

  {/* Your controlbar and other components */}

</RtkUIProvider>


// Pass the ref's current element to RtkFullscreenToggle

<RtkFullscreenToggle targetElement={fullScreenRef.current} />


```

A complete example to build your own UI with custom controlbar can be found [here ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/react-examples/examples/create-your-own-ui) with the custom controlbar component [here ↗](https://github.com/cloudflare/realtimekit-web-examples/blob/main/react-examples/examples/create-your-own-ui/src/components/meeting-control-bar.tsx).

RealtimeKit UI Kit provides the [rtk-controlbar](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-controlbar) component for a default controlbar.

If you need additional controls, replace `rtk-controlbar` with individual UI Kit components and custom elements. In the `renderJoinedScreen` function from [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/), replace:

```

<rtk-controlbar

  style="display: flex; justify-content: space-between;"

></rtk-controlbar>


```

with:

```

<div

  style="display: flex; width: 100%; padding: 8px 12px; color: white; justify-content: space-between;"

>

  <div

    id="controlbar-left"

    style="display: flex; align-items: center; justify-content: center;"

  >

    <rtk-fullscreen-toggle id="fullscreen-toggle"></rtk-fullscreen-toggle>

    <rtk-settings-toggle></rtk-settings-toggle>

    <rtk-screen-share-toggle></rtk-screen-share-toggle>

  </div>

  <div

    id="controlbar-center"

    style="display: flex; align-items: center; justify-content: center;"

  >

    <rtk-mic-toggle></rtk-mic-toggle>

    <rtk-camera-toggle></rtk-camera-toggle>

    <rtk-stage-toggle></rtk-stage-toggle>

    <rtk-leave-button></rtk-leave-button>

    <rtk-more-toggle>

      <div slot="more-elements">

        <rtk-pip-toggle variant="horizontal"></rtk-pip-toggle>

        <rtk-mute-all-button variant="horizontal"></rtk-mute-all-button>

        <rtk-breakout-rooms-toggle

          variant="horizontal"

        ></rtk-breakout-rooms-toggle>

        <rtk-recording-toggle variant="horizontal"></rtk-recording-toggle>

      </div>

    </rtk-more-toggle>

  </div>

  <div

    id="controlbar-right"

    style="display: flex; align-items: center; justify-content: center;"

  >

    <rtk-chat-toggle></rtk-chat-toggle>

    <rtk-polls-toggle></rtk-polls-toggle>

    <rtk-participants-toggle></rtk-participants-toggle>

    <rtk-plugins-toggle></rtk-plugins-toggle>

  </div>

</div>


```

Register the fullscreen target after rendering:

JavaScript

```

const fullscreenToggle = document.querySelector("#fullscreen-toggle");

if (fullscreenToggle) {

  const targetElement = document.querySelector("rtk-ui-provider");

  if (targetElement) {

    fullscreenToggle.targetElement = targetElement;

  }

}


```

A complete example to build your own UI with custom controlbar can be found [here ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/html-examples/examples/create-your-own-ui) with the custom controlbar component [here ↗](https://github.com/cloudflare/realtimekit-web-examples/blob/main/html-examples/examples/create-your-own-ui/components/meeting-control-bar.js).

RealtimeKit UI Kit provides the [rtk-controlbar](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-controlbar) component for a default controlbar.

If you need additional controls, replace `rtk-controlbar` with individual UI Kit components and custom elements. Create a custom controlbar component that uses the RealtimeKit angular components directly.

#### Create Custom Controlbar Component

custom-controlbar.component.ts

```

import { Component, AfterViewInit, ElementRef, ViewChild } from "@angular/core";


@Component({

  selector: "app-custom-controlbar",

  template: `

    <div class="custom-controlbar">

      <div class="controlbar-left">

        <rtk-fullscreen-toggle #fullscreenToggle></rtk-fullscreen-toggle>

        <rtk-settings-toggle></rtk-settings-toggle>

        <rtk-screen-share-toggle></rtk-screen-share-toggle>

      </div>


      <div class="controlbar-center">

        <rtk-mic-toggle></rtk-mic-toggle>

        <rtk-camera-toggle></rtk-camera-toggle>

        <rtk-stage-toggle></rtk-stage-toggle>

        <rtk-leave-button></rtk-leave-button>

        <rtk-more-toggle>

          <div slot="more-elements">

            <rtk-pip-toggle variant="horizontal"></rtk-pip-toggle>

            <rtk-mute-all-button variant="horizontal"></rtk-mute-all-button>

            <rtk-breakout-rooms-toggle

              variant="horizontal"

            ></rtk-breakout-rooms-toggle>

            <rtk-recording-toggle variant="horizontal"></rtk-recording-toggle>

          </div>

        </rtk-more-toggle>

      </div>


      <div class="controlbar-right">

        <rtk-chat-toggle></rtk-chat-toggle>

        <rtk-polls-toggle></rtk-polls-toggle>

        <rtk-participants-toggle></rtk-participants-toggle>

        <rtk-plugins-toggle></rtk-plugins-toggle>

      </div>

    </div>

  `,

  styles: [

    `

      .custom-controlbar {

        display: flex;

        width: 100%;

        padding: 8px 12px;

        color: white;

        justify-content: space-between;

        background-color: rgba(0, 0, 0, 0.8);

        border-radius: 8px;

      }


      .controlbar-left,

      .controlbar-center,

      .controlbar-right {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

      }


      .controlbar-center {

        flex: 1;

        justify-content: center;

      }

    `,

  ],

})

export class CustomControlbarComponent implements AfterViewInit {

  @ViewChild("fullscreenToggle", { static: true })

  fullscreenToggle!: ElementRef;


  ngAfterViewInit() {

    // Register the fullscreen target after rendering

    this.setupFullscreenToggle();

  }


  private setupFullscreenToggle() {

    const fullscreenElement = this.fullscreenToggle?.nativeElement;

    if (fullscreenElement) {

      const targetElement = document.querySelector("rtk-ui-provider");

      if (targetElement) {

        fullscreenElement.targetElement = targetElement;

      }

    }

  }

}


```

#### Use in Your Meeting Component

In your main meeting component template, replace:

```

<rtk-controlbar

  style="display: flex; justify-content: space-between;"

></rtk-controlbar>


```

with:

```

<app-custom-controlbar></app-custom-controlbar>


```

#### Complete Meeting Component Example

meeting.component.ts

```

import {

  Component,

  ElementRef,

  OnInit,

  OnDestroy,

  ViewChild,

} from "@angular/core";


@Component({

  selector: "app-meeting",

  template: `

    <rtk-meeting #meetingComponent id="meeting-component">

      <!-- Other meeting UI components -->

      <rtk-grid></rtk-grid>

      <rtk-sidebar></rtk-sidebar>


      <!-- Custom controlbar replaces rtk-controlbar -->

      <app-custom-controlbar></app-custom-controlbar>

    </rtk-meeting>

  `,

})

export class MeetingComponent implements OnInit, OnDestroy {

  @ViewChild("meetingComponent", { static: true }) meetingElement!: ElementRef;


  meeting: any;

  private authToken = "<participant_auth_token>";


  async ngOnInit() {

    const RealtimeKitClient = await import(

      "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js"

    );


    this.meeting = await RealtimeKitClient.default.init({

      authToken: this.authToken,

    });


    const meetingComponent = this.meetingElement.nativeElement;

    meetingComponent.showSetupScreen = true;

    meetingComponent.meeting = this.meeting;

  }


  ngOnDestroy() {

    // Cleanup logic

  }

}


```

#### Module Configuration

Don't forget to declare your custom controlbar component in your Angular module:

app.module.ts

```

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

import { BrowserModule } from "@angular/platform-browser";


import { AppComponent } from "./app.component";

import { MeetingComponent } from "./meeting.component";

import { CustomControlbarComponent } from "./custom-controlbar.component";


@NgModule({

  declarations: [AppComponent, MeetingComponent, CustomControlbarComponent],

  imports: [BrowserModule],

  providers: [],

  bootstrap: [AppComponent],

  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Required for RTK web components

})

export class AppModule {}


```

#### Advanced Customization

You can further customize the controlbar by adding your own buttons or modifying the layout:

enhanced-controlbar.component.ts

```

import { Component, AfterViewInit, ElementRef, ViewChild } from "@angular/core";


@Component({

  selector: "app-enhanced-controlbar",

  template: `

    <div class="custom-controlbar">

      <div class="controlbar-left">

        <rtk-fullscreen-toggle #fullscreenToggle></rtk-fullscreen-toggle>

        <rtk-settings-toggle></rtk-settings-toggle>

        <button class="custom-button" (click)="onCustomAction()">

          Custom Action

        </button>

      </div>


      <div class="controlbar-center">

        <rtk-mic-toggle></rtk-mic-toggle>

        <rtk-camera-toggle></rtk-camera-toggle>

        <rtk-stage-toggle></rtk-stage-toggle>

        <rtk-leave-button></rtk-leave-button>

      </div>


      <div class="controlbar-right">

        <rtk-chat-toggle></rtk-chat-toggle>

        <rtk-participants-toggle></rtk-participants-toggle>

      </div>

    </div>

  `,

  styles: [

    `

      .custom-controlbar {

        display: flex;

        width: 100%;

        padding: 8px 12px;

        color: white;

        justify-content: space-between;

        background-color: rgba(0, 0, 0, 0.8);

        border-radius: 8px;

      }


      .controlbar-left,

      .controlbar-center,

      .controlbar-right {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

      }


      .custom-button {

        background: #0051c3;

        border: none;

        color: white;

        padding: 8px 12px;

        border-radius: 4px;

        cursor: pointer;

        font-size: 12px;

      }


      .custom-button:hover {

        background: #003d99;

      }

    `,

  ],

})

export class EnhancedControlbarComponent implements AfterViewInit {

  @ViewChild("fullscreenToggle", { static: true })

  fullscreenToggle!: ElementRef;


  ngAfterViewInit() {

    this.setupFullscreenToggle();

  }


  private setupFullscreenToggle() {

    const fullscreenElement = this.fullscreenToggle?.nativeElement;

    if (fullscreenElement) {

      const targetElement = document.querySelector("rtk-ui-provider");

      if (targetElement) {

        fullscreenElement.targetElement = targetElement;

      }

    }

  }


  onCustomAction() {

    console.log("Custom action triggered");

    // Add your custom logic here

  }

}


```

This approach gives you complete control over the controlbar layout while maintaining Angular's component architecture and leveraging RealtimeKit's built-in functionality.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/custom-controlbar/","name":"Add Custom Controlbar"}}]}
```

---

---
title: Add Custom Header
description: In this guide, we will learn how to add a custom header for your RealtimeKit meeting experience.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/custom-header.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Add Custom Header

Prerequisite

This guide builds on top of the [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/). It is recommended to read that guide first. Portions of the code will not be repeated here for brevity.

For a complete list of available UI Kit components, refer to the [Component Library](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/).

In this guide, we will learn how to add a custom header for your RealtimeKit meeting experience.

WebMobile

ReactWeb ComponentsAngular

RealtimeKit UI Kit provides the [RtkHeader](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-header) component for a default header.

If you need additional controls, replace `RtkHeader` with individual UI Kit components and custom elements.

Import the required components:

```

import {

  RtkLogo,

  RtkRecordingIndicator,

  RtkLivestreamIndicator,

  RtkMeetingTitle,

  RtkGridPagination,

  RtkParticipantCount,

  RtkViewerCount,

  RtkClock,

} from "@cloudflare/realtimekit-ui";


```

In your `RtkUIProvider` from [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/), replace:

```

<RtkHeader />


```

with:

```

<div

  style={{

    display: "flex",

    justifyContent: "space-between",

    backgroundColor: "black",

    color: "white",

  }}

>

  <div

    id="header-left"

    style={{ display: "flex", alignItems: "center", height: "48px" }}

  >

    <RtkLogo />

    <RtkRecordingIndicator />

    <RtkLivestreamIndicator />

  </div>

  <div

    id="header-center"

    style={{ display: "flex", alignItems: "center", height: "48px" }}

  >

    <RtkMeetingTitle />

  </div>

  <div

    id="header-right"

    style={{ display: "flex", alignItems: "center", height: "48px" }}

  >

    <RtkGridPagination />

    <RtkParticipantCount />

    <RtkViewerCount />

    <RtkClock />

    <button onClick={handleReportBugClick}>Report Bug</button>

  </div>

</div>


```

Define the click handler:

```

const handleReportBugClick = () => {

  console.log("Report Bug Clicked");

};


```

A complete example to build your own UI with custom header can be found [here ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/react-examples/examples/create-your-own-ui) with the custom header component [here ↗](https://github.com/cloudflare/realtimekit-web-examples/blob/main/react-examples/examples/create-your-own-ui/src/components/meeting-header.tsx).

RealtimeKit UI Kit provides the [rtk-header](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-header) component for a default header.

If you need additional controls, replace `rtk-header` with individual UI Kit components and custom elements. In the `renderJoinedScreen` function from [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/), replace:

```

<rtk-header style="display: flex; justify-content: space-between;"></rtk-header>


```

with:

```

<div

  style="display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 12px; background-color: black; color: white;"

>

  <div style="display: flex; align-items: center; gap: 8px;">

    <rtk-logo></rtk-logo>

    <rtk-recording-indicator></rtk-recording-indicator>

    <rtk-livestream-indicator></rtk-livestream-indicator>

  </div>


  <div style="display: flex; align-items: center;">

    <rtk-meeting-title></rtk-meeting-title>

  </div>


  <div style="display: flex; align-items: center; gap: 8px;">

    <rtk-grid-pagination></rtk-grid-pagination>

    <rtk-participant-count></rtk-participant-count>

    <rtk-viewer-count></rtk-viewer-count>

    <rtk-clock></rtk-clock>

    <button id="report-bug-button" type="button">Report Bug</button>

  </div>

</div>


```

Register the click handler after rendering:

JavaScript

```

document.querySelector("#report-bug-button").addEventListener("click", () => {

  console.log("Report Bug Clicked");

});


```

A complete example to build your own UI with custom header can be found [here ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/html-examples/examples/create-your-own-ui) with the custom header component [here ↗](https://github.com/cloudflare/realtimekit-web-examples/blob/main/html-examples/examples/create-your-own-ui/components/meeting-header.js).

RealtimeKit UI Kit provides the [rtk-header](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#rtk-header) component for a default header.

If you need additional controls, replace `rtk-header` with individual UI Kit components and custom elements. Create a custom header component that uses the RealtimeKit angular components directly.

#### Create Custom Header Component

custom-header.component.ts

```

import { Component, AfterViewInit } from "@angular/core";


@Component({

  selector: "app-custom-header",

  template: `

    <div class="custom-header">

      <div class="header-left">

        <rtk-logo></rtk-logo>

        <rtk-recording-indicator></rtk-recording-indicator>

        <rtk-livestream-indicator></rtk-livestream-indicator>

      </div>


      <div class="header-center">

        <rtk-meeting-title></rtk-meeting-title>

      </div>


      <div class="header-right">

        <rtk-grid-pagination></rtk-grid-pagination>

        <rtk-participant-count></rtk-participant-count>

        <rtk-viewer-count></rtk-viewer-count>

        <rtk-clock></rtk-clock>

        <button

          type="button"

          class="report-bug-button"

          (click)="onReportBugClick()"

        >

          Report Bug

        </button>

      </div>

    </div>

  `,

  styles: [

    `

      .custom-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        height: 48px;

        padding: 0 12px;

        background-color: black;

        color: white;

      }


      .header-left,

      .header-right {

        display: flex;

        align-items: center;

        gap: 8px;

      }


      .header-center {

        display: flex;

        align-items: center;

      }


      .report-bug-button {

        background: none;

        border: 1px solid white;

        color: white;

        padding: 4px 8px;

        border-radius: 4px;

        cursor: pointer;

        font-size: 12px;

      }


      .report-bug-button:hover {

        background-color: rgba(255, 255, 255, 0.1);

      }

    `,

  ],

})

export class CustomHeaderComponent implements AfterViewInit {

  ngAfterViewInit() {

    console.log("Custom header initialized");

  }


  onReportBugClick() {

    console.log("Report Bug Clicked");

    // Add your custom logic here

    // For example: open a modal, navigate to a form, etc.

  }

}


```

#### Use in Your Meeting Component

In your main meeting component template, replace:

```

<rtk-header style="display: flex; justify-content: space-between;"></rtk-header>


```

with:

```

<app-custom-header></app-custom-header>


```

#### Complete Meeting Component Example

meeting.component.ts

```

import {

  Component,

  ElementRef,

  OnInit,

  OnDestroy,

  ViewChild,

} from "@angular/core";


@Component({

  selector: "app-meeting",

  template: `

    <rtk-meeting #meetingComponent id="meeting-component">

      <!-- Custom header replaces rtk-header -->

      <app-custom-header></app-custom-header>


      <!-- Other meeting UI components -->

      <rtk-grid></rtk-grid>

      <rtk-sidebar></rtk-sidebar>

    </rtk-meeting>

  `,

})

export class MeetingComponent implements OnInit, OnDestroy {

  @ViewChild("meetingComponent", { static: true }) meetingElement!: ElementRef;


  meeting: any;

  private authToken = "<participant_auth_token>";


  async ngOnInit() {

    const RealtimeKitClient = await import(

      "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js"

    );


    this.meeting = await RealtimeKitClient.default.init({

      authToken: this.authToken,

    });


    const meetingComponent = this.meetingElement.nativeElement;

    meetingComponent.showSetupScreen = true;

    meetingComponent.meeting = this.meeting;

  }


  ngOnDestroy() {

    // Cleanup logic

  }

}


```

#### Module Configuration

Don't forget to declare your custom header component in your Angular module:

app.module.ts

```

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

import { BrowserModule } from "@angular/platform-browser";


import { AppComponent } from "./app.component";

import { MeetingComponent } from "./meeting.component";

import { CustomHeaderComponent } from "./custom-header.component";


@NgModule({

  declarations: [AppComponent, MeetingComponent, CustomHeaderComponent],

  imports: [BrowserModule],

  providers: [],

  bootstrap: [AppComponent],

  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Required for RTK web components

})

export class AppModule {}


```

This approach gives you full control over the header layout while maintaining Angular's component architecture and event handling patterns.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/custom-header/","name":"Add Custom Header"}}]}
```

---

---
title: Meeting Locale
description: RealtimeKit's UI Kit allows you to customize all the text within the video call interface. You can personalize the text to align with your specific locale needs.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/meeting-locale.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Meeting Locale

RealtimeKit's UI Kit allows you to customize all the text within the video call interface. You can personalize the text to align with your specific locale needs.

Prerequisites

This page builds upon the [Render Default Meeting UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/) & [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/) guides. Make sure you have read them first and understand how to use the default meeting UI components.

This page is not available for the **iOS, Android**platform.

WebMobile

ReactWeb ComponentsAngular

## Customize the language pack

RealtimeKit's default language pack can be customized to match your application's locale requirements. You can override any text string used in the UI Kit components.

The Flutter UI Kit loads string overrides from an ARB (Application Resource Bundle) JSON file. You provide the asset path when building the UI Kit, and the SDK replaces all matching string keys with your custom values.

The React Native UI Kit uses a language dictionary object to store all UI strings. You can override any key by passing a partial dictionary to the `useLanguage()` function, then pass the result to the `RtkMeeting` component via the `t` prop.

## Import the language utilities

RealtimeKit's default language pack can be imported like this:

```

<script type="module">

  import {

    useLanguage,

    defaultLanguage,

  } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui/dist/esm/index.js";

</script>


```

RealtimeKit's default language pack can be imported like this:

```

import { defaultLanguage, useLanguage } from "@cloudflare/realtimekit-react-ui";


```

RealtimeKit's default language pack can be imported like this:

TypeScript

```

import {

  defaultLanguage,

  useLanguage,

} from "@cloudflare/realtimekit-angular-ui";


```

Dart

```

import 'package:realtimekit_ui/realtimekit_ui.dart';


```

No additional imports are required. The `arbPath` parameter is available on `RealtimeKitUIBuilder.build()`.

TypeScript

```

import {

  defaultLanguage,

  useLanguage,

} from "@cloudflare/realtimekit-react-native-ui";


```

## Create your custom language pack

To replace RealtimeKit's default locale with your own, create a custom language pack by spreading the `defaultLanguage` object and overriding specific keys:

```

<body>

  <rtk-meeting id="my-meeting"></rtk-meeting>


  <script type="module">

    import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";

    import {

      useLanguage,

      defaultLanguage,

    } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui/dist/esm/index.js";


    // Customize RealtimeKit's default locale object

    const myLanguagePack = useLanguage({

      ...defaultLanguage,

      mute_all: "Mute All Users",

      leave: "Exit Call",

      join: "Join Now",

    });


    const init = async () => {

      const meeting = await RealtimeKitClient.init({

        authToken: "<participant_auth_token>",

      });


      const meetingEl = document.getElementById("my-meeting");

      meetingEl.meeting = meeting;

      meetingEl.showSetupScreen = true;


      // Pass custom language pack

      meetingEl.t = myLanguagePack;

    };


    init();

  </script>

</body>


```

The `useLanguage` function takes in your custom locale object as an argument and generates a function that retrieves the value associated with the provided key.

```

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

} from "@cloudflare/realtimekit-react";

import {

  RtkMeeting,

  defaultLanguage,

  useLanguage,

} from "@cloudflare/realtimekit-react-ui";

import { useEffect, useState } from "react";


function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  const [authToken, setAuthToken] = useState("<participant_auth_token>");


  // Customize RealtimeKit's default locale object

  const myLanguagePack = useLanguage({

    ...defaultLanguage,

    mute_all: "Mute All Users",

    leave: "Exit Call",

    join: "Join Now",

  });


  useEffect(() => {

    if (authToken) {

      initMeeting({

        authToken: authToken,

      });

    }

  }, [authToken]);


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkMeeting showSetupScreen={true} meeting={meeting} t={myLanguagePack} />

    </RealtimeKitProvider>

  );

}


```

The `useLanguage` hook takes in your custom locale object as an argument and generates a function that retrieves the value associated with the provided key.

TypeScript

```

import { Component, OnInit } from "@angular/core";

import RealtimeKitClient from "@cloudflare/realtimekit-angular";

import {

  defaultLanguage,

  useLanguage,

} from "@cloudflare/realtimekit-angular-ui";


@Component({

  selector: "app-meeting",

  template: `

    <rtk-meeting [meeting]="meeting" [t]="myLanguagePack"></rtk-meeting>

  `,

})

export class MeetingComponent implements OnInit {

  meeting: any;

  myLanguagePack: any;


  async ngOnInit() {

    // Customize RealtimeKit's default locale object

    this.myLanguagePack = useLanguage({

      ...defaultLanguage,

      mute_all: "Mute All Users",

      leave: "Exit Call",

      join: "Join Now",

    });


    this.meeting = await RealtimeKitClient.init({

      authToken: "<participant_auth_token>",

    });

  }

}


```

The `useLanguage` function takes in your custom locale object as an argument and generates a function that retrieves the value associated with the provided key.

Create an ARB JSON file with a `@locale` key and the string keys you want to override. Add the file to your Flutter assets.

**1\. Create the ARB file** at `assets/lang/es.arb`:

```

{

  "@locale": "es",

  "join": "Unirse",

  "leave": "Salir",

  "cancel": "Cancelar",

  "micOn": "Mic Encendido",

  "micOff": "Mic Apagado",

  "videoOn": "Video Encendido",

  "videoOff": "Video Apagado",

  "mute": "Silenciar",

  "participants": "Participantes",

  "chat": "Chat",

  "settings": "Configuración"

}


```

**2\. Register the asset** in `pubspec.yaml`:

```

flutter:

  assets:

    - assets/lang/


```

**3\. Pass `arbPath`** when building the UI Kit:

Dart

```

final rtkUI = RealtimeKitUIBuilder.build(

  uiKitInfo: uiKitInfo,

  arbPath: 'assets/lang/es.arb',

);

Navigator.push(context, MaterialPageRoute(builder: (_) => rtkUI));


```

You only need to include the keys you want to override. Any key not present in the ARB file falls back to its English default.

Spread the `defaultLanguage` object and override specific keys. Pass the result to `RtkMeeting` via the `t` prop.

TypeScript

```

import {

  RtkMeeting,

  defaultLanguage,

  useLanguage,

} from '@cloudflare/realtimekit-react-native-ui';


function App() {

  const myLanguagePack = useLanguage({

    ...defaultLanguage,

    mute_all: 'Silenciar todo',

    leave: 'Salir',

    join: 'Unirse',

    participants: 'Participantes',

    chat: 'Chat',

    settings: 'Configuración',

  });


  return (

    <RtkMeeting

      meeting={meeting}

      t={myLanguagePack}

      showSetupScreen={true}

    />

  );

}


```

The `useLanguage` function merges your overrides with the defaults. Any key you do not override keeps its English default value.

## Use custom locale with UI provider

You can also pass the custom language pack to the UI provider component when building your own custom UI:

```

<body>

  <rtk-ui-provider id="ui-provider">

    <!-- Your custom UI components -->

  </rtk-ui-provider>


  <script type="module">

    import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";

    import {

      useLanguage,

      defaultLanguage,

    } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui/dist/esm/index.js";


    const myLanguagePack = useLanguage({

      ...defaultLanguage,

      mute_all: "Mute All Users",

    });


    const meeting = await RealtimeKitClient.init({

      authToken: "<participant_auth_token>",

    });


    const uiProvider = document.getElementById("ui-provider");

    uiProvider.meeting = meeting;

    uiProvider.t = myLanguagePack;

  </script>

</body>


```

```

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

} from "@cloudflare/realtimekit-react";

import {

  RtkUIProvider,

  defaultLanguage,

  useLanguage,

} from "@cloudflare/realtimekit-react-ui";

import { useEffect, useState } from "react";


function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  const [authToken, setAuthToken] = useState("<participant_auth_token>");


  const myLanguagePack = useLanguage({

    ...defaultLanguage,

    mute_all: "Mute All Users",

  });


  useEffect(() => {

    if (authToken) {

      initMeeting({

        authToken: authToken,

      });

    }

  }, [authToken]);


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkUIProvider meeting={meeting} t={myLanguagePack}>

        {/* Your custom UI components */}

      </RtkUIProvider>

    </RealtimeKitProvider>

  );

}


```

TypeScript

```

import { Component, OnInit } from "@angular/core";

import RealtimeKitClient from "@cloudflare/realtimekit-angular";

import {

  defaultLanguage,

  useLanguage,

} from "@cloudflare/realtimekit-angular-ui";


@Component({

  selector: "app-meeting",

  template: `

    <rtk-ui-provider [meeting]="meeting" [t]="myLanguagePack">

      <!-- Your custom UI components -->

    </rtk-ui-provider>

  `,

})

export class MeetingComponent implements OnInit {

  meeting: any;

  myLanguagePack: any;


  async ngOnInit() {

    this.myLanguagePack = useLanguage({

      ...defaultLanguage,

      mute_all: "Mute All Users",

    });


    this.meeting = await RealtimeKitClient.init({

      authToken: "<participant_auth_token>",

    });

  }

}


```

## Default language reference

RealtimeKit provides a comprehensive default language pack with all the text strings used throughout the UI Kit. You can override any of these keys to customize the text displayed in your meeting interface.

Here is the complete default language pack offered by RealtimeKit:

```

{

  "about_call": "About Call",

  "screen": "Screen",

  "camera": "Camera",

  "leave": "Leave",

  "dismiss": "Dismiss",

  "logo": "Logo",

  "page": "Page",

  "more": "More",

  "page.prev": "Previous Page",

  "page.next": "Next Page",

  "layout": "Layout",

  "layout.auto": "Auto Layout",

  "settings": "Settings",

  "file": "File",

  "image": "Image",

  "connection": "Connection",

  "leave_confirmation": "Are you sure you want to leave the call?",

  "cancel": "Cancel",

  "yes": "Yes",

  "(you)": "(you)",

  "you": "You",

  "everyone": "Everyone",

  "to": "To",

  "mute": "Mute",

  "kick": "Kick",

  "pin": "Pin",

  "pinned": "Pinned",

  "accept": "Accept",

  "unpin": "Unpin",

  "pip_on": "Show PiP",

  "pip_off": "Hide PiP",

  "viewers": "Viewers",

  "join": "Join",

  "joined": "Joined",

  "create": "Create",

  "close": "Close",

  "ask": "Ask",

  "type": "Type",

  "activate": "Activate",

  "requests": "Requests",

  "mic_off": "Mic Off",

  "disable_mic": "Disable Mic",

  "mic_on": "Mic On",

  "enable_mic": "Enable Mic",

  "audio": "Audio",

  "test": "Test",

  "minimize": "Hide Tile",

  "maximize": "Show Tile",

  "mute_all": "Mute all",

  "mute_all.description": "Everyone else in the meeting will be muted.",

  "mute_all.header": "Are you sure?",

  "mute_all.allow_unmute": "Allow others to unmute",

  "video_off": "Video Off",

  "disable_video": "Disable Video",

  "video_on": "Video On",

  "enable_video": "Enable Video",

  "video": "Video",

  "offline": "You're offline",

  "offline.description": "Please ensure that you are connected to the internet.",

  "disconnected": "You haven't joined the meeting.",

  "failed": "You've been disconnected",

  "failed.description": "We could not connect you back to the meeting room. Please try rejoining the meeting.",

  "disconnected.description": "Please join the meeting in order to see and interact with other participants.",

  "participants": "Participants",

  "participants.errors.empty_results": "Couldn't find a participant with the specified name or ID.",

  "participants.empty_list": "It looks like nobody is here.",

  "participants.no_pending_requests": "There are no pending requests.",

  "participants.turn_off_video": "Turn off video",

  "polls": "Polls",

  "polls.by": "Poll by",

  "polls.question": "Poll Question",

  "polls.question.placeholder": "What is your poll for?",

  "polls.answers": "Answers",

  "polls.option": "Add an option.",

  "polls.option.placeholder": "Enter an option",

  "polls.results.anon": "Anonymous",

  "polls.results.hide": "Hide results before voting",

  "polls.create": "Create Poll",

  "polls.cancel": "Cancel Poll Creation",

  "polls.empty": "No polls available",

  "polls.errors.question_required": "Question is required.",

  "polls.errors.empty_option": "Empty options not allowed.",

  "screenshare": "Screen Share",

  "screenshare.min_preview": "Minimize Preview",

  "screenshare.max_preview": "Expand Preview",

  "screenshare.shared": "Your screen is being shared.",

  "screenshare.start": "Share Screen",

  "screenshare.stop": "Stop Sharing",

  "screenshare.error.unknown": "An error occurred while starting screenshare.",

  "screenshare.error.max_count": "Maximum screen share limit reached.",

  "plugins": "Plugins",

  "perm_denied": "Permission denied by browser.",

  "perm_denied.audio": "Mic Permission denied by browser",

  "perm_denied.video": "Camera Permission denied by browser",

  "perm_denied.screenshare": "Screenshare Permission denied by browser",

  "perm_denied.audio.chrome.message": "In the top navigation bar, click on the icon left to the URL and ensure  'Microphone' permission is checked",

  "perm_denied.video.chrome.message": "In the top navigation bar, click on the icon left to the URL and ensure  'Camera' permission is checked",

  "perm_denied.screenshare.chrome.message": "Under Chrome settings, navigate to 'Privacy and Security > Site Settings > Permissions'. Select 'Screenshare', provide permission and reload this application.",

  "perm_denied.audio.safari.message": "Under Safari settings, navigate to 'Websites > Microphone', provide permission and reload this application.",

  "perm_denied.video.safari.message": "Under Safari settings, navigate to 'Websites > Camera', provide permission and reload this application.",

  "perm_denied.screenshare.safari.message": "Under Safari settings, navigate to 'Websites > Screenshare', provide permission and reload this application.",

  "perm_denied.audio.edge.message": "Under Edge settings, navigate to 'Site Permissions > Microphone', provide permission and reload this application.",

  "perm_denied.video.edge.message": "Under Edge settings, navigate to 'Site Permissions > Camera', provide permission and reload this application.",

  "perm_denied.screenshare.edge.message": "Under Edge settings, navigate to 'Site Permissions > Screenshare', provide permission and reload this application.",

  "perm_denied.audio.microsoft edge.message": "Under Edge settings, navigate to 'Site Permissions > Microphone', provide permission and reload this application.",

  "perm_denied.video.microsoft edge.message": "Under Edge settings, navigate to 'Site Permissions > Camera', provide permission and reload this application.",

  "perm_denied.screenshare.microsoft edge.message": "Under Edge settings, navigate to 'Site Permissions > Screenshare', provide permission and reload this application.",

  "perm_denied.audio.firefox.message": "Under Firefox settings, navigate to 'Privacy and Security > Permissions > Microphone', provide permission and reload this application.",

  "perm_denied.video.firefox.message": "Under Firefox settings, navigate to 'Privacy and Security > Permissions > Camera', provide permission and reload this application.",

  "perm_denied.screenshare.firefox.message": "Under Firefox settings, navigate to 'Privacy and Security > Permissions > Screenshare', provide permission and reload this application.",

  "perm_denied.audio.others.message": "From your browser settings, enable 'Microphone' permissions and reload this application.",

  "perm_denied.video.others.message": "From your browser settings, enable 'Camera' permissions and reload this application.",

  "perm_denied.screenshare.others.message": "From your browser settings, enable 'Screenshare' permissions and reload this application.",

  "perm_sys_denied": "Permission denied by system",

  "perm_sys_denied.audio": "Mic permission denied by system",

  "perm_sys_denied.video": "Camera permission denied by system",

  "perm_sys_denied.screenshare": "Screenshare permission denied by system",

  "perm_sys_denied.audio.macos.message": "Open Apple Menu, Navigate to 'System Settings > Privacy & Security > Microphone'. Allow access to your browser and reload this application.",

  "perm_sys_denied.video.macos.message": "Open Apple Menu, Navigate to 'System Settings > Privacy & Security > Camera'. Allow access to your browser and reload this application.",

  "perm_sys_denied.screenshare.macos.message": "Open Apple Menu, Navigate to 'System Settings > Privacy & Security > Screenshare'. Allow access to your browser and reload this application.",

  "perm_sys_denied.audio.ios.message": "On your iPhone, navigate to 'Settings > Privacy > Microphone', allow access to your browser and reload this application.",

  "perm_sys_denied.video.ios.message": "On your iPhone, navigate to 'Settings > Privacy > Camera', allow access to your browser and reload this application.",

  "perm_sys_denied.screenshare.ios.message": "On your iPhone, navigate to 'Settings > Privacy > Screenshare', allow access to your browser and reload this application.",

  "perm_sys_denied.audio.windows.message": "Go to windows settings, select 'Settings > Privacy > Microphone'. Allow permissions to your browser and reload this application.",

  "perm_sys_denied.video.windows.message": "Go to windows settings, select 'Settings > Privacy > Camera'. Allow permissions to your browser and reload this application.",

  "perm_sys_denied.screenshare.windows.message": "Go to windows settings, select 'Settings > Privacy > Screenshare'. Allow permissions to your browser and reload this application.",

  "perm_sys_denied.audio.android.message": "On your device, navigate to 'Settings > Apps'. Select your browser, allow Microphone permissions and reload this application.",

  "perm_sys_denied.video.android.message": "On your device, navigate to 'Settings > Apps'. Select your browser, allow Camera permissions and reload this application.",

  "perm_sys_denied.screenshare.android.message": "On your device, navigate to 'Settings > Apps'. Select your browser, allow Screenshare permissions and reload this application.",

  "perm_sys_denied.audio.others.message": "Navigate to your system settings. Allow 'Microphone' permissions for your browser and reload this application.",

  "perm_sys_denied.video.others.message": "Navigate to your system settings. Allow 'Camera' permissions for your browser and reload this application.",

  "perm_sys_denied.screenshare.others.message": "Navigate to your system settings. Allow 'Screenshare' permissions for your browser and reload this application.",

  "perm_could_not_start": "Could not capture device.",

  "perm_could_not_start.audio": "Unable to start your Microphone",

  "perm_could_not_start.video": "Unable to start your Camera",

  "perm_could_not_start.screenshare": "Unable to start your Screenshare",

  "perm_could_not_start.audio.message": "Looks like the system could not capture your microphone. Please restart your device or upgrade your browser to fix this.",

  "perm_could_not_start.video.message": "Looks like the system could not capture your camera. Please restart your device or upgrade your browser to fix this.",

  "perm_could_not_start.screenshare.message": "Looks like the system could not capture your screenshare. Please restart your device or upgrade your browser to fix this.",

  "full_screen": "Full Screen",

  "full_screen.exit": "Exit Full Screen",

  "waitlist.header_title": "Waiting",

  "waitlist.body_text": "You are in the waiting room, the host will let you in soon.",

  "waitlist.deny_request": "Deny request",

  "waitlist.accept_request": "Accept request",

  "waitlist.accept_all": "Accept all",

  "stage_request.header_title": "Join Stage Requests",

  "stage_request.deny_request": "Deny request",

  "stage_request.accept_request": "Accept request",

  "stage_request.accept_all": "Accept all",

  "stage_request.deny_all": "Deny all",

  "stage_request.approval_pending": "Pending",

  "stage_request.denied": "Denied",

  "stage_request.request": "Join stage",

  "stage_request.requested": "Requested",

  "stage_request.cancel_request": "Cancel request",

  "stage_request.leave_stage": "Leave stage",

  "stage_request.request_tip": "Request to join the discussion",

  "stage_request.leave_tip": "Leave the stage",

  "stage_request.pending_tip": "Request pending",

  "stage_request.denied_tip": "Rejected request",

  "stage.empty_host": "The stage is empty",

  "stage.empty_host_summary": "You are off stage. You can manage stage request from the participants tab.",

  "stage.empty_viewer": "There is no one on stage",

  "stage.remove_from_stage": "Remove from stage",

  "stage.invited_notification": "has been invited to join stage.",

  "stage.add_to_stage": "Invite to stage",

  "stage.join_title": "Join Stage",

  "stage.join_summary": "You are about to join the stage, your video & audio as shown above will be visible to all participants.",

  "stage.join_cancel": "Cancel",

  "stage.join_confirm": "Join",

  "setup_screen.join_in_as": "Joining as",

  "setup_screen.your_name": "Your name",

  "stage.reconnecting": "Reconnecting...",

  "recording.label": "REC",

  "recording.indicator": "This meeting is being recorded.",

  "recording.started": "This meeting is being recorded.",

  "recording.stopped": "Recording for this meeting has been stopped.",

  "recording.paused": "Recording for this meeting has been paused.",

  "recording.error.start": "Error while starting recording.",

  "recording.error.stop": "Error while stopping recording",

  "recording.error.resume": "Error while resuming recording",

  "recording.start": "Start Recording",

  "recording.stop": "Stop Recording",

  "recording.resume": "Resume Recording",

  "recording.starting": "Starting",

  "recording.stopping": "Stopping",

  "recording.loading": "Loading",

  "recording.idle": "Record",

  "audio_playback": "Play Audio",

  "audio_playback.title": "Allow Audio Playback",

  "audio_playback.description": "In order to play audio properly on your device, click the button below.",

  "breakout_rooms": "Breakout Rooms",

  "breakout_rooms.room_config_header": "Create Breakout",

  "breakout_rooms.join_breakout_header": "Join Breakout",

  "breakout_rooms.empty": "Nobody here yet.",

  "breakout_rooms.delete": "Delete Room",

  "breakout_rooms.switch": "Switch",

  "breakout_rooms.main_room": "Main Room",

  "breakout_rooms.shuffle_participants": "Shuffle Participants",

  "breakout_rooms.deselect": "Deselect",

  "breakout_rooms.selected": "selected",

  "breakout_rooms.num_of_rooms": "No. of Rooms",

  "breakout_rooms.approx": "Approx.",

  "breakout_rooms.participants_per_room": "participants/room",

  "breakout_rooms.division_text": "when equally divided.",

  "breakout_rooms.start_breakout": "Start Breakout",

  "breakout_rooms.close_breakout": "Close Breakout",

  "breakout_rooms.update_breakout": "Update Breakout",

  "breakout_rooms.discard_changes": "Discard Changes",

  "breakout_rooms.room": "Room",

  "breakout_rooms.rooms": "Rooms",

  "breakout_rooms.room_name": "Room Name",

  "breakout_rooms.edit_room_name": "Edit Room Name",

  "breakout_rooms.save_room_name": "Save Room Name",

  "breakout_rooms.add_room": "Add",

  "breakout_rooms.add_room_brief": "Add Room",

  "breakout_rooms.select_all": "Select all",

  "breakout_rooms.unassign_all": "Unassign all",

  "breakout_rooms.assign": "Assign",

  "breakout_rooms.assign_participants": "Assign Participants",

  "breakout_rooms.none_assigned": "No participants assigned yet",

  "breakout_rooms.drag_drop_participants": "Drag and drop participants",

  "breakout_rooms.click_drop_participants": "Click here to assign",

  "breakout_rooms.status.assign_multiple": "Assign multiple participants at once by clicking and selecting them",

  "breakout_rooms.status.select_room": "Select a room to assign",

  "breakout_rooms.ephemeral_status.participants_assigned": "Participants assigned",

  "breakout_rooms.ephemeral_status.participants_assigned_randomly": "Participants assigned randomly",

  "breakout_rooms.ephemeral_status.changes_discarded": "Changes discarded",

  "breakout_rooms.confirm_modal.start_breakout.header": "Start breakout rooms?",

  "breakout_rooms.confirm_modal.start_breakout.content": "Once started, all participants will be moved to their assigned rooms.",

  "breakout_rooms.confirm_modal.start_breakout.cancelText": "No, go back",

  "breakout_rooms.confirm_modal.start_breakout.ctaText": "Yes, start",

  "breakout_rooms.confirm_modal.close_breakout.header": "Close breakout rooms?",

  "breakout_rooms.confirm_modal.close_breakout.content": "All breakout rooms will be closed & participants will be moved back to the main room.",

  "breakout_rooms.confirm_modal.close_breakout.ctaText": "Yes, close breakout",

  "breakout_rooms.move_reason.started_msg": "Starting breakout rooms...",

  "breakout_rooms.move_reason.started_desc": "You are being moved to your assigned room",

  "breakout_rooms.move_reason.closed_msg": "Closing Breakout rooms...",

  "breakout_rooms.move_reason.closed_desc": "You are being moved back to the main room",

  "breakout_rooms.move_reason.switch_room": "Joining Breakout Room...",

  "breakout_rooms.move_reason.switch_main_room": "Joining Main Room...",

  "breakout_rooms.all_assigned": "All participants have been assigned",

  "breakout_rooms.empty_main_room": "No more participants in the main room.",

  "breakout_rooms.leave_confirmation": "Are you sure you want to leave the call? You are in a breakout room, you can join the main room too.",

  "breakout_rooms.leave_confirmation.main_room_btn": "Go back to main room",

  "ai": "AI",

  "ai.meeting_ai": "MeetingAI",

  "ai.home": "Home",

  "ai.transcriptions": "Transcriptions",

  "ai.personal": "Personal",

  "ai.caption_view": "Caption View",

  "ai.chat.tooltip": "This conversation will just be visible to you and not to others in the call.",

  "ai.chat.summerise": "Hey AI, summarise this call",

  "ai.chat.agenda": "Hey AI, what is today's agenda?",

  "search": "Search",

  "search.could_not_find": "Couldn't find a participant with the specified name or ID.",

  "search.empty": "It looks like nobody is here.",

  "end": "End Meeting",

  "end.all": "End meeting for all",

  "ended": "The meeting ended.",

  "ended.rejected": "Your request to join the meeting was denied.",

  "ended.left": "You left the meeting.",

  "ended.kicked": "You were removed from the meeting.",

  "ended.disconnected": "The call ended because the connection was lost.",

  "ended.network": "Please check your internet connection and try again.",

  "ended.unauthorized": "You are not authorized to join this meeting.",

  "network": "Network",

  "network.reconnecting": "Connection lost. Trying to reconnect.",

  "network.delay_extended": "Taking too long to reconnect. Please check your network connection.",

  "network.disconnected": "Could not reconnect. Please leave the meeting and try refreshing the window.",

  "network.leaving": "Automatically leaving the meeting in 10 seconds.",

  "network.restored": "Connection restored",

  "network.delay": "Taking too long to reconnect.",

  "network.lost": "Connection lost",

  "network.lost_extended": "Connection lost. Please check your network connection.",

  "livestream": "Livestream",

  "livestream.indicator": "This meeting is being livestreamed.",

  "livestream.skip": "Skip to Live",

  "livestream.idle": "Waiting to go live.",

  "livestream.starting": "Livestream is starting...",

  "livestream.stopping": "Livestream is stopping...",

  "livestream.waiting_on_manual_ingestion": "Please ingest livestream media.",

  "livestream.error.not_supported": "Player not supported.",

  "livestream.error.not_found": "Playback URL not found.",

  "livestream.error.unknown": "An unknown error occurred.",

  "livestream.error.sync": "Could not sync livestream please try again later.",

  "livestream.error.start": "Error while starting livestream.",

  "livestream.error.stop": "Error while stopping livestream.",

  "livestream.go_live": "Go Live",

  "livestream.end_live": "End Live",

  "livestream.error": "Error",

  "cta.help": "Need help on how to do this?",

  "cta.continue": "Ignore",

  "cta.reload": "Reload",

  "cta.confirmation": "Are you sure?",

  "cta.system_settings": "Open Settings",

  "remote_access.empty": "There are no remote requests, yet.",

  "remote_access.requests": "The following people have requested remote control to your screen share.",

  "remote_access.allow": "Please select whom you want to give access to.",

  "remote_access.grant": "Grant acess",

  "remote_access.indicator": "Any plugin or screenshare you switch to will sync the change across the meeting",

  "chat": "Chat",

  "chat.new": "New",

  "chat.max_limit_warning": "Max Character Limit",

  "chat.rate_limit_error": "Please wait before you can send another message",

  "chat.new_channel": "Create new channel",

  "chat.channel_name": "Enter channel name",

  "chat.member_name": "Enter member name",

  "chat.add_members": "Add members",

  "chat.delete_msg": "Delete",

  "chat.edit_msg": "Edit",

  "chat.send_msg": "Send message",

  "chat.send_attachment": "Drop files/images to send",

  "chat.send_img": "Send an image",

  "chat.send_file": "Send a file",

  "chat.send_emoji": "Send an emoji",

  "chat.update_msg": "Update message",

  "chat.channel_members": "Channel Members",

  "chat.img.loading": "Loading image",

  "chat.error.img_not_found": "Image not found",

  "chat.error.empty_results": "Couldn't find a member with the specified name.",

  "chat.img.shared_by": "Shared by",

  "chat.reply": "Reply",

  "chat.message_placeholder": "Message..",

  "chat.click_to_send": "Click to send as message",

  "chat.search_msgs": "Search messages",

  "chat.search_conversations": "Search conversations",

  "chat.start_conversation": "Start a conversation..",

  "chat.empty_search": "No messages found",

  "chat.empty_channel": "Send a message to get started",

  "chat.cancel_upload": "Cancel upload",

  "chat.view_chats": "View chats",

  "chat.everyone": "everyone",

  "chat.pinned_msgs": "Pinned messages",

  "chat.toggle_pinned_msgs": "Toggle pinned messages",

  "date.today": "Today",

  "date.yesteday": "Yesterday",

  "date.sunday": "Sunday",

  "date.monday": "Monday",

  "date.tuesday": "Tuesday",

  "date.wednesday": "Wednesday",

  "date.thursday": "Thursday",

  "date.friday": "Friday",

  "date.saturday": "Saturday",

  "list.empty": "No items found",

  "grid.listening": "Listening",

  "transcript.off": "Turn off Transcripts",

  "transcript.on": "Turn on Transcripts",

  "settings.notification_sound": "Notification sound",

  "settings.microphone_input": "Microphone",

  "settings.speaker_output": "Speaker",

  "settings.mirror_video": "Mirror my Video",

  "settings.camera_off": "Camera is off",

  "dialog.close": "Close dialog",

  "notifications.joined": "just joined",

  "notifications.left": "left",

  "notifications.requesting_to_join_meeting": "is requesting to join the meeting",

  "notifications.requested_to_join_stage": "has requested to join stage",

  "notifications.joined_stage": "has joined stage",

  "notifications.request_to_join_accepted": "Request to join accepted",

  "notifications.request_to_join_rejected": "Request to join rejected",

  "notifications.accept": "Accept",

  "notifications.new_poll_created_by": "New poll created by",

  "notifications.connected_to": "Connected to",

  "notifications.plugin_switched_to": "Plugin switched to",

  "notifications.remote_control_requested": "has requested for remote control",

  "notifications.remote_control_request_sent": "Sent remote control request to",

  "notifications.remote_control_request_accepted": "has granted remote control",

  "notifications.remote_control_granted": "Granted remote control to",

  "notifications.remote_control_terminated": "Existing remote control has been terminated",

  "debugger.troubleshooting.label": "Troubleshooting",

  "debugger.quality.good": "Good",

  "debugger.quality.average": "Average",

  "debugger.quality.poor": "Poor",

  "debugger.stats.bitrate.label": "Bitrate",

  "debugger.stats.bitrate.description": "Data transmitted per second, affects quality and file size.",

  "debugger.stats.packet_loss.label": "Packet Loss",

  "debugger.stats.packet_loss.description": "Amount of data lost during transfer",

  "debugger.stats.jitter.label": "Jitter",

  "debugger.stats.jitter.description": "Variance or fluctuation in latency",

  "debugger.stats.cpu_limitations.label": "CPU Limitations",

  "debugger.stats.cpu_limitations.description": "CPU limitations can impact WebRTC call quality and performance.",

  "debugger.stats.bandwidth_limitations.label": "Bandwidth Limitations",

  "debugger.stats.bandwidth_limitations.description": "Slow internet speeds can degrade video quality.",

  "debugger.audio.label": "Audio",

  "debugger.audio.troubleshooting.label": "Audio Troubleshooting",

  "debugger.audio.messages.generating_report": "Generating report. Please wait for a few seconds.",

  "debugger.audio.messages.enable_media": "Please enable mic to see the report.",

  "debugger.audio.sections.network_media": "Network & Media",

  "debugger.video.label": "Video",

  "debugger.video.troubleshooting.label": "Video Troubleshooting",

  "debugger.video.messages.generating_report": "Generating report. Please wait for a few seconds.",

  "debugger.video.messages.enable_media": "Please enable camera to see the report.",

  "debugger.video.sections.network_media": "Network & Media",

  "debugger.screenshare.label": "Screenshare",

  "debugger.screenshare.troubleshooting.label": "Screenshare Troubleshooting",

  "debugger.screenshare.sections.network_media": "Network & Media",

  "debugger.screenshare.messages.generating_report": "Generating report. Please wait for a few seconds.",

  "debugger.screenshare.messages.enable_media": "Please share screen to see the report.",

  "debugger.system.label": "System",

  "debugger.system.troubleshooting.label": "System Troubleshooting",

  "debugger.system.sections.battery": "Battery",

  "debugger.system.battery.level.label": "Battery Level",

  "debugger.system.battery.level.description": "A low battery charge may result in reduced performance.",

  "debugger.system.battery.charging.label": "Battery Charging Status",

  "debugger.system.battery.charging.description": "A device running on power performs optimally.",

  "debugger.system.battery.charging.is_charging": "Charging",

  "debugger.system.battery.charging.is_not_charging": "Not charging"

}


```

You can override any of these keys in your custom language pack. For example, to translate the interface to Spanish:

JavaScript

```

const spanishLanguagePack = useLanguage({

  ...defaultLanguage,

  leave: "Salir",

  join: "Unirse",

  mute: "Silenciar",

  participants: "Participantes",

  chat: "Chat",

  settings: "Configuración",

});


```

The following table lists all overridable string keys for the Flutter UI Kit. Use these keys in your ARB file to override the corresponding UI text.

| Key                             | Default                                  |
| ------------------------------- | ---------------------------------------- |
| join                            | Join                                     |
| joinInAs                        | Join in as                               |
| enterYourName                   | Enter your name                          |
| micOn                           | Mic On                                   |
| micOff                          | Mic Off                                  |
| leave                           | Leave                                    |
| cancel                          | Cancel                                   |
| areYouSureYouWantToLeaveTheCall | Are you sure you want to leave the call? |
| more                            | more                                     |
| selectAudioDevice               | Select Audio Device                      |
| selectVideoDevice               | Select Video Device                      |
| videoOn                         | Video On                                 |
| videoOff                        | Video Off                                |
| mute                            | Mute                                     |
| unmute                          | Muted                                    |
| unpin                           | Unpin                                    |
| pin                             | Pin                                      |
| kick                            | Kick                                     |
| removeFromStage                 | Remove from stage                        |
| inviteToStage                   | Invite to stage                          |
| screenShare                     | Screen Share                             |
| plugins                         | Plugins                                  |
| createPoll                      | Create Poll                              |
| question                        | Question                                 |
| askAQuestion                    | Ask a question                           |
| options                         | Options                                  |
| enterAnOption                   | Enter an option                          |
| addOption                       | Add an Option                            |
| anonymous                       | Anonymous                                |
| hideResultsBeforeVoting         | Hide Results before voting               |
| questionAndOptionsCantBeEmpty   | Question and options can not be empty!   |
| polls                           | Polls                                    |
| pollBy                          | Poll by                                  |
| vote                            | Vote                                     |
| voted                           | Voted                                    |
| viewVoters                      | View Voters                              |
| stopRecording                   | Stop Recording                           |
| startRecording                  | Start Recording                          |
| muteAll                         | Mute All                                 |
| disableAllVideos                | Disable all videos                       |
| settings                        | Settings                                 |
| rec                             | REC                                      |
| camera                          | Camera                                   |
| microphoneInput                 | Microphone (input)                       |
| chat                            | Chat                                     |
| noMessages                      | No messages                              |
| chatMessagesWillAppearHere      | Chat messages will appear here           |
| file                            | File                                     |
| image                           | Image                                    |
| send                            | Send                                     |
| participants                    | Participants                             |
| waitlisted                      | Waitlisted                               |
| inCall                          | In Call                                  |
| you                             | you                                      |
| turnOffVideo                    | Turn off video                           |
| videoAlreadyOff                 | Video already off                        |
| back                            | Back                                     |
| waitingForTheHostToLetYouIn     | Wait for the host to let you in!         |
| shareScreen                     | Share Screen                             |
| stopSharing                     | Stop Sharing                             |
| endMeetingForAll                | End Meeting for All                      |
| message                         | Message                                  |
| newPollCreated                  | New Poll created                         |
| waitingToGoLive                 | Waiting to go live                       |
| frontCamera                     | Front Camera                             |
| rearCamera                      | Rear Camera                              |
| externalCamera                  | External Camera                          |
| headset                         | Headset                                  |
| speaker                         | Speaker                                  |
| bluetooth                       | Bluetooth                                |
| earpiece                        | Earpiece                                 |

The React Native UI Kit exposes approximately 195 overridable string keys via the `defaultLanguage` object. The table below lists commonly used keys. For the full list, refer to the `defaultLanguage` export from `@cloudflare/realtimekit-react-native-ui`.

| Key                        | Default                                  |
| -------------------------- | ---------------------------------------- |
| join                       | Join                                     |
| leave                      | Leave                                    |
| cancel                     | Cancel                                   |
| leave\_confirmation        | Are you sure you want to leave the call? |
| mic\_on                    | Mic On                                   |
| mic\_off                   | Mic Off                                  |
| video\_on                  | Video On                                 |
| video\_off                 | Video Off                                |
| mute                       | Mute                                     |
| mute\_all                  | Mute all                                 |
| participants               | Participants                             |
| chat                       | Chat                                     |
| settings                   | Settings                                 |
| polls                      | Polls                                    |
| screenshare                | Screen Share                             |
| screenshare.start          | Share Screen                             |
| screenshare.stop           | Stop Sharing                             |
| recording.start            | Start Recording                          |
| recording.stop             | Stop Recording                           |
| end                        | End Meeting                              |
| end.all                    | End meeting for all                      |
| setup\_screen.join\_in\_as | Join in as                               |
| setup\_screen.your\_name   | Your name                                |
| network.reconnecting       | Connection lost. Trying to reconnect...  |
| network.restored           | Connection restored                      |
| ended                      | The meeting ended.                       |
| ended.left                 | You left the meeting.                    |
| ended.kicked               | You were removed from the meeting.       |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/meeting-locale/","name":"Meeting Locale"}}]}
```

---

---
title: State Management
description: This page builds upon the Basic Implementation Guide. Make sure you've read those first.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/realtimekit/ui-kit/state-management.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# State Management

## Prerequisites

This page builds upon the [Basic Implementation Guide](https://developers.cloudflare.com/realtime/realtimekit/ui-kit). Make sure you've read those first.

The code examples on this page assume you've already imported the necessary packages and initialized the SDK.

WebMobile

ReactWeb ComponentsAngular

## How UI Kit Components Communicate

The UI Kit components are able to understand and synchronize with each other because they are nested under the `RtkMeeting` component. The `RtkMeeting` component acts as the central coordinator that ensures all components under it stay in sync when it comes to meeting state, participant updates, and other real-time changes.

The UI Kit components are able to understand and synchronize with each other because they are nested under the `rtk-meeting` component. The `rtk-meeting` component acts as the central coordinator that ensures all components under it stay in sync when it comes to meeting state, participant updates, and other real-time changes.

The UI Kit components are able to understand and synchronize with each other because they are nested under the `rtk-meeting` component. The `rtk-meeting` component acts as the central coordinator that ensures all components under it stay in sync when it comes to meeting state, participant updates, and other real-time changes.

The Android UI Kit manages component communication internally. When you build the UI Kit using `RealtimeKitUIBuilder`, it creates and coordinates all the necessary UI components. To observe meeting state changes from your application, attach event listeners to the Core SDK's `meeting` object.

The iOS UI Kit manages component communication internally through the `RealtimeKitUI` module. To observe meeting state changes from your application, implement event listener protocols and register them on the Core SDK's `meeting` object.

The Flutter UI Kit manages component communication internally through the `RealtimeKitUIBuilder`. To observe meeting state changes from your application, create event listener classes and attach them to the Core SDK's meeting object.

The React Native UI Kit components communicate and synchronize with each other because they are nested under the `RtkMeeting` component, wrapped in `RealtimeKitProvider` and `RtkUIProvider`. To observe state changes, use hooks from the Core SDK such as `useRealtimeKitSelector`.

Here's an example of how state synchronization works when opening the participants sidebar:

flowchart LR
    accTitle: Sidebar State Synchronization Example
    accDescr: Example showing how clicking participants toggle updates sidebar through meeting coordination

    Toggle["👤 ParticipantsToggle<br/>(User clicks)"]
    Meeting["Meeting Component<br/>(State Coordinator)"]
    Sidebar["Sidebar<br/>(Opens/Closes)"]
    App["Your App<br/>(Gets notified)"]

    Toggle -->|"emits rtkStateUpdate<br/>{activeSidebar: true,<br/>sidebar: 'participants'}"|Meeting
    Meeting -->|"propagates state"|Sidebar
    Meeting -->|"emits rtkStatesUpdate"|App

    style Meeting fill:#F48120,stroke:#333,stroke-width:2px,color:#fff
    style App fill:#0051C3,stroke:#333,stroke-width:2px,color:#fff

## State Flow

1. **Child components emit state updates**: When any UI component needs to update state, it emits a `rtkStateUpdate` event
2. **Meeting component listens and coordinates**: The meeting component listens to all these state update events from its children
3. **State propagation**: The meeting component propagates the updated state to all other child components to keep them synchronized
4. **External notification**: The meeting component also emits a `rtkStatesUpdate` event that your application can listen to for updating your custom UI or performing actions based on state changes

1. **UI Kit manages internal state**: The UI Kit handles all component communication and state synchronization internally
2. **Your app registers event listeners**: You attach event listeners (such as `RtkMeetingRoomEventListener` and `RtkSelfEventListener`) to the Core SDK's `meeting` object
3. **Callbacks fire on state changes**: When the meeting state changes (for example, a participant joins or audio is toggled), the corresponding listener callback is invoked
4. **You update your UI**: Use the callback data to update your application's UI or trigger other actions

1. **UI Kit manages internal state**: The `RtkMeeting` component handles all internal component communication and state synchronization
2. **Your app observes state via hooks**: Use `useRealtimeKitSelector` to select specific meeting properties and re-render when they change
3. **React re-renders on changes**: When the selected value changes, React automatically re-renders the component with the new state
4. **You update your UI**: Use the observed state values to conditionally render UI elements or trigger side effects

## Listening to State Updates

To build custom UI or perform actions based on meeting state changes, you need to observe state updates from the UI Kit.

Listen to the `rtkStatesUpdate` event emitted by the meeting component. This event provides you with the current state of the UI Kit, including sidebar state, screen sharing status, view type, and more.

Note

Store the states in a state management solution (like React's `useState` or a plain JavaScript object) to alter your UI based on meeting state changes.

Attach event listeners to the Core SDK's `meeting` object to observe meeting state changes. The mobile UI Kit handles its own internal state, and your app interacts with the underlying meeting object directly.

Note

Use your platform's state management (for example, LiveData or StateFlow on Android, `@Published` properties on iOS, Riverpod or ChangeNotifier on Flutter) to propagate state changes to your UI.

Use the `useRealtimeKitSelector` hook from `@cloudflare/realtimekit-react-native` to observe specific properties on the meeting object. This hook re-renders your component whenever the selected value changes, similar to how selectors work in state management libraries.

Note

Store the states using React's `useState` to alter your UI based on meeting state changes.

## Example Code

For React, you can use the `onRtkStatesUpdate` prop on the `RtkMeeting` component to listen for state updates.

```

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

} from "@cloudflare/realtimekit-react";

import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";

import { useEffect, useState } from "react";


function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  const [authToken, setAuthToken] = useState("<participant_auth_token>");

  const [states, setStates] = useState({});


  useEffect(() => {

    if (authToken) {

      initMeeting({

        authToken: authToken,

      });

    }

  }, [authToken]);


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkMeeting

        showSetupScreen={true}

        meeting={meeting}

        onRtkStatesUpdate={(e) => {

          // Update states when rtk-meeting emits state updates

          setStates(e.detail);


          // Example: Access various state properties

          console.log("Meeting state:", e.detail.meeting); // 'idle', 'setup', 'joined', 'ended', 'waiting'

          console.log("Is sidebar active:", e.detail.activeSidebar);

          console.log("Current sidebar section:", e.detail.sidebar);

          console.log("Is screen sharing:", e.detail.activeScreenShare);

        }}

      />


      {/* Use states to build custom UI */}

      <div className="custom-ui">

        <p>Meeting State: {states.meeting}</p>

        <p>Sidebar Open: {states.activeSidebar ? "Yes" : "No"}</p>

      </div>

    </RealtimeKitProvider>

  );

}


```

**Alternative: Using Refs (Multiple Meetings)**

If you're building an experience with multiple meetings on the same page or back-to-back meetings, using refs is recommended to avoid state conflicts between different meeting instances:

```

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

} from "@cloudflare/realtimekit-react";

import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";

import { useEffect, useState, useRef } from "react";


function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();

  const [authToken, setAuthToken] = useState("<participant_auth_token>");

  const [states, setStates] = useState({});

  const meetingRef = useRef(null);


  useEffect(() => {

    if (authToken) {

      initMeeting({

        authToken: authToken,

      });

    }

  }, [authToken]);


  useEffect(() => {

    if (!meetingRef.current) return;


    const handleStatesUpdate = (e) => {

      setStates(e.detail);

      console.log("Meeting state:", e.detail.meeting);

      console.log("Is sidebar active:", e.detail.activeSidebar);

    };


    // Add event listener via ref

    meetingRef.current.addEventListener("rtkStatesUpdate", handleStatesUpdate);


    // Cleanup listener when component unmounts or meeting changes

    return () => {

      meetingRef.current?.removeEventListener(

        "rtkStatesUpdate",

        handleStatesUpdate,

      );

    };

  }, [meetingRef.current]);


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkMeeting ref={meetingRef} showSetupScreen={true} meeting={meeting} />


      {/* Use states to build custom UI */}

      <div className="custom-ui">

        <p>Meeting State: {states.meeting}</p>

        <p>Sidebar Open: {states.activeSidebar ? "Yes" : "No"}</p>

      </div>

    </RealtimeKitProvider>

  );

}


```

Note

Using refs with event listeners provides better control and isolation when handling multiple `RtkMeeting` instances. This approach ensures that state updates from one meeting don't interfere with another, which is crucial for back-to-back meetings or multi-meeting interfaces.

For Web Components, you need to add an event listener to the `rtk-meeting` component to listen for `rtkStatesUpdate` events.

```

<body>

  <rtk-meeting id="meeting-component"></rtk-meeting>

</body>

<script type="module">

  import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";


  const meeting = await RealtimeKitClient.init({

    authToken: "<participant_auth_token>",

  });


  // Add <rtk-meeting id="meeting-component" /> to your HTML, otherwise you will get error

  const meetingComponent = document.querySelector("#meeting-component");


  // Listen for state updates from rtk-meeting

  meetingComponent.addEventListener("rtkStatesUpdate", (event) => {

    console.log("RTK states updated:", event.detail);


    // Store states to update your custom UI

    const states = event.detail;


    // Example: Access various state properties

    console.log("Meeting state:", states.meeting); // 'idle', 'setup', 'joined', 'ended', 'waiting'

    console.log("Is sidebar active:", states.activeSidebar);

    console.log("Current sidebar section:", states.sidebar); // 'chat', 'participants', 'polls', etc.

    console.log("Is screen sharing:", states.activeScreenShare);


    // Update your custom UI based on states

    // For example: Show/hide elements based on meeting state

    if (states.meeting === "joined") {

      // Show meeting controls

    }

  });


  meetingComponent.showSetupScreen = true;

  meetingComponent.meeting = meeting;

</script>


```

For Angular, you need to add an event listener to the `rtk-meeting` component to listen for `rtkStatesUpdate` events.

meeting.component.ts

```

import {

  Component,

  ElementRef,

  OnInit,

  OnDestroy,

  ViewChild,

} from "@angular/core";


@Component({

  selector: "app-meeting",

  template: `

    <rtk-meeting #meetingComponent id="meeting-component"></rtk-meeting>


    <!-- Use states to build custom UI -->

    <div class="custom-ui" *ngIf="states">

      <p>Meeting State: {{ states.meeting }}</p>

      <p>Sidebar Open: {{ states.activeSidebar ? "Yes" : "No" }}</p>

      <div *ngIf="states.meeting === 'joined'" class="meeting-controls">

        <!-- Show meeting controls when joined -->

        <p>Meeting controls would go here</p>

      </div>

    </div>

  `,

  styleUrls: ["./meeting.component.css"],

})

export class MeetingComponent implements OnInit, OnDestroy {

  @ViewChild("meetingComponent", { static: true }) meetingElement!: ElementRef;


  meeting: any;

  states: any = {};

  private authToken = "<participant_auth_token>";

  private stateUpdateListener?: (event: any) => void;


  async ngOnInit() {

    // Import RealtimeKit client dynamically

    const RealtimeKitClient = await import(

      "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js"

    );


    // Initialize the meeting

    this.meeting = await RealtimeKitClient.default.init({

      authToken: this.authToken,

    });


    // Set up the meeting component

    const meetingComponent = this.meetingElement.nativeElement;


    // Create the event listener

    this.stateUpdateListener = (event: any) => {

      console.log("RTK states updated:", event.detail);


      // Store states to update your custom UI

      this.states = event.detail;


      // Example: Access various state properties

      console.log("Meeting state:", this.states.meeting); // 'idle', 'setup', 'joined', 'ended', 'waiting'

      console.log("Is sidebar active:", this.states.activeSidebar);

      console.log("Current sidebar section:", this.states.sidebar); // 'chat', 'participants', 'polls', etc.

      console.log("Is screen sharing:", this.states.activeScreenShare);


      // Update your custom UI based on states

      // For example: Show/hide elements based on meeting state

      if (this.states.meeting === "joined") {

        // Show meeting controls

        console.log("Meeting joined - showing controls");

      }

    };


    // Listen for state updates from rtk-meeting

    meetingComponent.addEventListener(

      "rtkStatesUpdate",

      this.stateUpdateListener,

    );


    // Configure the meeting component

    meetingComponent.showSetupScreen = true;

    meetingComponent.meeting = this.meeting;

  }


  ngOnDestroy() {

    // Clean up event listener when component is destroyed

    if (this.stateUpdateListener && this.meetingElement) {

      this.meetingElement.nativeElement.removeEventListener(

        "rtkStatesUpdate",

        this.stateUpdateListener,

      );

    }

  }

}


```

For Android, attach event listeners to the `meeting` object to observe state changes. Use `RtkMeetingRoomEventListener` for meeting lifecycle events and `RtkSelfEventListener` for local participant state changes.

Kotlin

```

import android.os.Bundle

import android.util.Log

import androidx.appcompat.app.AppCompatActivity


class MeetingActivity : AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)


        // After initializing the meeting and UI Kit (see Getting Started guide),

        // add event listeners to observe state changes.


        // Listen for meeting room state changes

        meeting.addMeetingRoomEventListener(object : RtkMeetingRoomEventListener {

            override fun onMeetingRoomJoinStarted() {

                Log.d("Meeting", "Join started")

            }


            override fun onMeetingRoomJoinCompleted(meeting: RealtimeKitClient) {

                Log.d("Meeting", "Joined the meeting")

                // Update UI to show meeting controls

            }


            override fun onMeetingRoomJoinFailed(exception: Exception) {

                Log.e("Meeting", "Join failed: ${exception.message}")

            }


            override fun onMeetingRoomLeaveStarted() {

                Log.d("Meeting", "Leave started")

            }


            override fun onMeetingRoomLeft() {

                Log.d("Meeting", "Left the meeting")

            }


            override fun onMeetingEnded() {

                Log.d("Meeting", "Meeting ended for all participants")

            }


            override fun onActiveTabUpdate(activeTab: ActiveTab) {

                Log.d("Meeting", "Active tab changed: $activeTab")

            }

        })


        // Listen for local participant state changes

        meeting.addSelfEventListener(object : RtkSelfEventListener {

            override fun onAudioUpdate(isEnabled: Boolean) {

                Log.d("Meeting", "Audio: ${if (isEnabled) "on" else "off"}")

            }


            override fun onVideoUpdate(isEnabled: Boolean) {

                Log.d("Meeting", "Video: ${if (isEnabled) "on" else "off"}")

            }


            override fun onRemovedFromMeeting() {

                Log.d("Meeting", "Removed from meeting by host")

            }

        })

    }

}


```

For iOS, implement event listener protocols and register them on the `meeting` object. Use `RtkMeetingRoomEventListener` for meeting lifecycle events and `RtkSelfEventListener` for local participant state changes.

Swift

```

// Listen for meeting room state changes

extension MeetingViewModel: RtkMeetingRoomEventListener {

    func onMeetingRoomJoinCompleted(meeting: RealtimeKitClient) {

        // Successfully joined the meeting (equivalent to 'joined' state)

    }


    func onMeetingRoomLeft() {

        // Successfully left the meeting

    }


    func onMeetingEnded() {

        // The meeting has ended for all participants (equivalent to 'ended' state)

    }


    func onActiveTabUpdate(activeTab: ActiveTab) {

        // Active tab changed (e.g., chat, polls, participants)

        // Use this to sync your custom UI with the active sidebar section

    }

}


// Listen for local participant state changes

extension MeetingViewModel: RtkSelfEventListener {

    func onAudioUpdate(isEnabled: Bool) {

        // Audio toggled on/off

    }


    func onVideoUpdate(isEnabled: Bool) {

        // Video toggled on/off

    }


    func onRemovedFromMeeting() {

        // Local user was removed from the meeting by host

    }

}


// Register the listeners

meeting.addMeetingRoomEventListener(meetingRoomEventListener: self)

meeting.addSelfEventListener(selfEventListener: self)


```

For Flutter, create event listener classes and attach them to the `meeting` object. Use `RtkMeetingRoomEventListener` for meeting lifecycle events and `RtkSelfEventListener` for local participant state changes.

Dart

```

import 'package:realtimekit_ui/realtimekit_ui.dart';

import 'package:flutter/material.dart';


// Create a listener for meeting room state changes

class MeetingRoomListener extends RtkMeetingRoomEventListener {

  final Function(String) onStateChange;


  MeetingRoomListener({required this.onStateChange});


  @override

  void onMeetingRoomJoinStarted() {

    onStateChange('joining');

  }


  @override

  void onMeetingRoomJoinCompleted() {

    onStateChange('joined');

  }


  @override

  void onMeetingRoomJoinFailed(exception) {

    onStateChange('failed');

  }


  @override

  void onMeetingRoomLeaveStarted() {

    onStateChange('leaving');

  }


  @override

  void onMeetingRoomLeft() {

    onStateChange('left');

  }


  @override

  void onMeetingEnded() {

    onStateChange('ended');

  }


  @override

  void onActiveTabUpdate(activeTab) {

    // Sidebar/tab state changed (chat, polls, participants)

  }

}


// Create a listener for local participant state changes

class SelfListener extends RtkSelfEventListener {

  final Function(bool) onAudioChange;

  final Function(bool) onVideoChange;


  SelfListener({

    required this.onAudioChange,

    required this.onVideoChange,

  });


  @override

  void onAudioUpdate(bool isEnabled) {

    onAudioChange(isEnabled);

  }


  @override

  void onVideoUpdate(bool isEnabled) {

    onVideoChange(isEnabled);

  }


  @override

  void onRemovedFromMeeting() {

    // Local user was removed by host

  }

}


// Register listeners after building the UI Kit

final meeting = realtimeKitUI.meeting;

meeting.addMeetingRoomEventListener(MeetingRoomListener(

  onStateChange: (state) {

    debugPrint('Meeting state: $state');

  },

));

meeting.addSelfEventListener(SelfListener(

  onAudioChange: (enabled) {

    debugPrint('Audio: ${enabled ? "on" : "off"}');

  },

  onVideoChange: (enabled) {

    debugPrint('Video: ${enabled ? "on" : "off"}');

  },

));


```

For React Native, use the `useRealtimeKitSelector` hook to observe specific properties on the meeting object. This pattern is similar to the web Core SDK.

```

import { useEffect } from "react";

import { View, Text } from "react-native";

import {

  RealtimeKitProvider,

  useRealtimeKitClient,

  useRealtimeKitMeeting,

  useRealtimeKitSelector,

} from "@cloudflare/realtimekit-react-native";

import {

  RtkUIProvider,

  RtkMeeting,

} from "@cloudflare/realtimekit-react-native-ui";


function App() {

  const [meeting, initMeeting] = useRealtimeKitClient();


  useEffect(() => {

    initMeeting({

      authToken: "<participant_auth_token>",

      defaults: { audio: true, video: true },

    });

  }, []);


  return (

    <RealtimeKitProvider value={meeting}>

      <RtkUIProvider>

        <MeetingWithState />

      </RtkUIProvider>

    </RealtimeKitProvider>

  );

}


function MeetingWithState() {

  const { meeting } = useRealtimeKitMeeting();


  // Use selectors to observe meeting state

  const roomState = useRealtimeKitSelector((m) => m.self.roomState);

  const audioEnabled = useRealtimeKitSelector((m) => m.self.audioEnabled);

  const videoEnabled = useRealtimeKitSelector((m) => m.self.videoEnabled);


  useEffect(() => {

    console.log("Room state:", roomState);

    console.log("Audio:", audioEnabled);

    console.log("Video:", videoEnabled);

  }, [roomState, audioEnabled, videoEnabled]);


  return (

    <View>

      {meeting && <RtkMeeting meeting={meeting} showSetupScreen={true} />}


      {/* Use state to build custom UI */}

      <View>

        <Text>Room State: {roomState}</Text>

        <Text>Audio: {audioEnabled ? "On" : "Off"}</Text>

        <Text>Video: {videoEnabled ? "On" : "Off"}</Text>

      </View>

    </View>

  );

}


```

**Alternative: Using Event Listeners**

You can also use event-based listeners for more fine-grained control, similar to the web Core SDK:

```

import { useEffect } from "react";


function MeetingEvents() {

  const { meeting } = useRealtimeKitMeeting();


  useEffect(() => {

    if (!meeting) return;


    const handleRoomJoined = () => {

      console.log("Successfully joined the meeting");

    };


    const handleRoomLeft = ({ state }) => {

      if (state === "ended") {

        console.log("Meeting ended");

      }

    };


    meeting.self.on("roomJoined", handleRoomJoined);

    meeting.self.on("roomLeft", handleRoomLeft);


    return () => {

      meeting.self.removeListener("roomJoined", handleRoomJoined);

      meeting.self.removeListener("roomLeft", handleRoomLeft);

    };

  }, [meeting]);


  return null;

}


```

## State Properties

The `rtkStatesUpdate` event provides detailed information about the UI Kit's internal state. Key properties include:

* **`meeting`**: Current meeting state - `'idle'`, `'setup'`, `'joined'`, `'ended'`, or `'waiting'`
* **`activeSidebar`**: Whether the sidebar is currently open (boolean)
* **`sidebar`**: Current sidebar section - `'chat'`, `'participants'`, `'polls'`, `'plugins'`, etc.
* **`activeScreenShare`**: Whether screen sharing UI is active (boolean)
* **`activeMoreMenu`**: Whether the more menu is open (boolean)
* **`activeSettings`**: Whether settings panel is open (boolean)
* **`viewType`**: Current video grid view type (string)
* **`prefs`**: User preferences object (e.g., `mirrorVideo`, `muteNotificationSounds`)
* **`roomLeftState`**: State when leaving the room
* **`activeOverlayModal`**: Active overlay modal configuration object
* **`activeConfirmationModal`**: Active confirmation modal configuration object
* **And many more UI state properties**

Note

These are **UI Kit internal states** for managing the interface. For meeting data like participants, active speaker, or recording status, use the [Core SDK's meeting object](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/) directly.

On mobile platforms, state is observed through Core SDK event listeners rather than a single state object. The key event listeners and their callbacks include:

**`RtkMeetingRoomEventListener`** \- Meeting lifecycle:

* **`onMeetingRoomJoinStarted`**: Meeting join process has started
* **`onMeetingRoomJoinCompleted`**: Successfully joined the meeting
* **`onMeetingRoomJoinFailed`**: Meeting join failed (provides exception details)
* **`onMeetingRoomLeaveStarted`**: Leave process has started
* **`onMeetingRoomLeft`**: Successfully left the meeting
* **`onMeetingEnded`**: Meeting ended for all participants
* **`onActiveTabUpdate`**: Active sidebar tab changed (chat, polls, participants)

**`RtkSelfEventListener`** \- Local participant:

* **`onAudioUpdate`**: Audio toggled on or off
* **`onVideoUpdate`**: Video toggled on or off
* **`onRemovedFromMeeting`**: Local user was removed by host

**`RtkParticipantsEventListener`** \- Remote participants:

* **`onParticipantJoin`**: A participant joined the meeting
* **`onParticipantLeave`**: A participant left the meeting
* **`onActiveParticipantsChanged`**: Active participants list changed
* **`onAudioUpdate`**: A remote participant's audio state changed
* **`onVideoUpdate`**: A remote participant's video state changed

Note

For the full list of event listeners and their callbacks, refer to the [Core SDK meeting object documentation](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/).

On React Native, use the `useRealtimeKitSelector` hook to observe specific properties on the meeting object. Key properties include:

* **`m.self.roomState`**: Current room state (`'init'`, `'joined'`, `'left'`, etc.)
* **`m.self.audioEnabled`**: Whether local audio is enabled (boolean)
* **`m.self.videoEnabled`**: Whether local video is enabled (boolean)
* **`m.self.screenShareEnabled`**: Whether screen share is active (boolean)
* **`m.self.name`**: Local participant display name
* **`m.self.id`**: Local participant peer ID
* **`m.participants.joined`**: List of joined participants
* **`m.participants.active`**: List of active participants

Note

For the full list of available properties, refer to the [Core SDK meeting object documentation](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/).

## Best Practices

* **Store states appropriately**: Use React's `useState` hook or a state management library (like Zustand or Redux) for React apps. For vanilla JavaScript, use a reactive state management solution or simple object storage.
* **Avoid excessive re-renders**: Only update your UI when necessary. In React, consider using `useMemo` or `useCallback` to optimize performance.
* **Access nested properties safely**: Always check if nested properties exist before accessing them (e.g., `states.sidebar`, `states.prefs?.mirrorVideo`).
* **Use states for conditional rendering**: Leverage the UI states to show/hide UI elements or respond to interface changes (e.g., showing custom indicators when `states.activeScreenShare` is true).
* **Understand the difference**: `rtkStatesUpdate` provides **UI Kit internal states** for interface management. For meeting data (participants, active speaker, recording status), use the Core SDK's `meeting` object and its events directly.

* **Remove listeners on cleanup**: Always remove event listeners in `onDestroy()` to prevent memory leaks. Store listener references so you can unregister them later.
* **Use appropriate threading**: Event listener callbacks may fire on background threads. Use `runOnUiThread` or post to the main handler when updating UI elements.
* **Store state in observable patterns**: Use `LiveData`, `StateFlow`, or `MutableState` (Compose) to propagate state changes to your UI reactively.
* **Understand the difference**: Event listeners provide **meeting lifecycle and participant state** changes. The UI Kit manages its own internal UI state separately.

* **Remove listeners on cleanup**: Always remove event listeners when your view controller or view model is deallocated to prevent retain cycles and memory leaks.
* **Use `@Published` for reactive UI**: In SwiftUI, mark state properties as `@Published` in your `ObservableObject` to automatically re-render views when meeting state changes.
* **Handle threading**: Event listener callbacks may fire on background threads. Use `DispatchQueue.main.async` when updating UI elements from callbacks.
* **Understand the difference**: Event listeners provide **meeting lifecycle and participant state** changes. The UI Kit manages its own internal UI state separately.

* **Remove listeners on cleanup**: Always remove event listeners in your widget's `dispose()` method to prevent memory leaks.
* **Use Riverpod or ChangeNotifier**: Propagate meeting state changes through Riverpod providers or `ChangeNotifier` classes to keep your widget tree in sync.
* **Rebuild only what changed**: Use `Consumer` widgets or `select` on Riverpod providers to minimize unnecessary widget rebuilds when meeting state changes.
* **Understand the difference**: Event listeners provide **meeting lifecycle and participant state** changes. The UI Kit manages its own internal UI state separately.

* **Use selectors for efficiency**: The `useRealtimeKitSelector` hook only re-renders your component when the selected value changes. Select only the specific properties you need rather than the entire meeting object.
* **Clean up event listeners**: When using `meeting.self.on()` event listeners, always return a cleanup function from `useEffect` that calls `removeListener`.
* **Combine with `useMemo` and `useCallback`**: Use React memoization hooks to prevent unnecessary re-renders when meeting state changes frequently.
* **Understand the difference**: `useRealtimeKitSelector` provides access to **Core SDK meeting state** (participants, media, room state). The UI Kit handles its own internal UI state through the `RtkMeeting` component.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/state-management/","name":"State Management"}}]}
```

---

---
title: Realtime SFU
description: Cloudflare Realtime SFU is infrastructure for real-time audio/video/data applications. It allows you to build real-time apps without worrying about scaling or regions. It can act as a selective forwarding unit (WebRTC SFU), as a fanout delivery system for broadcasting (WebRTC CDN) or anything in between.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Realtime SFU

Build real-time serverless video, audio and data applications.

Cloudflare Realtime SFU is infrastructure for real-time audio/video/data applications. It allows you to build real-time apps without worrying about scaling or regions. It can act as a selective forwarding unit (WebRTC SFU), as a fanout delivery system for broadcasting (WebRTC CDN) or anything in between.

Cloudflare Realtime SFU runs on [Cloudflare's global cloud network ↗](https://www.cloudflare.com/network/) in hundreds of cities worldwide.

[ Get started ](https://developers.cloudflare.com/realtime/sfu/get-started/) [ Realtime dashboard ](https://dash.cloudflare.com/?to=/:account/calls) [ Orange Meets demo app ](https://github.com/cloudflare/orange) 

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}}]}
```

---

---
title: Realtime vs Regular SFUs
description: Cloudflare Realtime represents a paradigm shift in building real-time applications by leveraging a distributed real-time data plane. It creates a seamless experience in real-time communication, transcending traditional geographical limitations and scalability concerns. Realtime is designed for developers looking to integrate WebRTC functionalities in a server-client architecture without delving deep into the complexities of regional scaling or server management.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/calls-vs-sfus.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Realtime vs Regular SFUs

## Cloudflare Realtime vs. Traditional SFUs

Cloudflare Realtime represents a paradigm shift in building real-time applications by leveraging a distributed real-time data plane. It creates a seamless experience in real-time communication, transcending traditional geographical limitations and scalability concerns. Realtime is designed for developers looking to integrate WebRTC functionalities in a server-client architecture without delving deep into the complexities of regional scaling or server management.

### The Limitations of Centralized SFUs

Selective Forwarding Units (SFUs) play a critical role in managing WebRTC connections by selectively forwarding media streams to participants in a video call. However, their centralized nature introduces inherent limitations:

* **Regional Dependency:** A centralized SFU requires a specific region for deployment, leading to latency issues for global users except for those in proximity to the selected region.
* **Scalability Concerns:** Scaling a centralized SFU to meet global demand can be challenging and inefficient, often requiring additional infrastructure and complexity.

### How is Cloudflare Realtime different?

Cloudflare Realtime addresses these limitations by leveraging Cloudflare's global network infrastructure:

* **Global Distribution Without Regions:** Unlike traditional SFUs, Cloudflare Realtime operates on a global scale without regional constraints. It utilizes Cloudflare's extensive network of over 250 locations worldwide to ensure low-latency video forwarding, making it fast and efficient for users globally.
* **Decentralized Architecture:** There are no dedicated servers for Realtime. Every server within Cloudflare's network contributes to handling Realtime, ensuring scalability and reliability. This approach mirrors the distributed nature of Cloudflare's products such as 1.1.1.1 DNS or Cloudflare's CDN.

Tip 

**See it in action:** Explore our [interactive Global SFU visualization ↗](https://realtime-sfu.dev-demos.workers.dev) to see how participants connect to their nearest Cloudflare datacenter and how media flows across the global backbone.

## How Cloudflare Realtime Works

### Establishing Peer Connections

To initiate a real-time communication session, an end user's client establishes a WebRTC PeerConnection to the nearest Cloudflare location. This connection benefits from anycast routing, optimizing for the lowest possible latency.

### Signaling and Media Stream Management

* **HTTPS API for Signaling:** Cloudflare Realtime simplifies signaling with a straightforward HTTPS API. This API manages the initiation and coordination of media streams, enabling clients to push new MediaStreamTracks or request these tracks from the server.
* **Efficient Media Handling:** Unlike traditional approaches that require multiple connections for different media streams from different clients, Cloudflare Realtime maintains a single PeerConnection per client. This streamlined process reduces complexity and improves performance by handling both the push and pull of media through a singular connection.

### Application-Level Management

Cloudflare Realtime delegates the responsibility of state management and participant tracking to the application layer. Developers are empowered to design their logic for handling events such as participant joins or media stream updates, offering flexibility to create tailored experiences in applications.

## Getting Started with Cloudflare Realtime

Integrating Cloudflare Realtime into your application promises a straightforward and efficient process, removing the hurdles of regional scalability and server management so you can focus on creating engaging real-time experiences for users worldwide.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/calls-vs-sfus/","name":"Realtime vs Regular SFUs"}}]}
```

---

---
title: Changelog
description: Subscribe to RSS
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/changelog.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Changelog

[ Subscribe to RSS ](https://developers.cloudflare.com/realtime/sfu/changelog/index.xml)

## 2025-11-21

**WebSocket adapter video (JPEG) support**

Updated Media Transport Adapters (WebSocket adapter) to support video egress as JPEG frames in addition to audio.

* Stream audio and video between WebRTC tracks and WebSocket endpoints
* Video egress-only as JPEG at approximately 1 FPS for snapshots, thumbnails, and computer vision pipelines
* Clarified media formats for PCM audio and JPEG video over Protocol Buffers
* Updated docs: [Adapters](https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/), [WebSocket adapter](https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/websocket-adapter/)

## 2025-08-29

**Media Transport Adapters (WebSocket) open beta**

Open beta for Media Transport Adapters (WebSocket adapter) to bridge audio between WebRTC and WebSocket.

* Ingest (WebSocket → WebRTC) and Stream (WebRTC → WebSocket)
* Opus for WebRTC tracks; PCM over WebSocket via Protocol Buffers

Docs: [Adapters](https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/), [WebSocket adapter](https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/websocket-adapter/)

## 2024-09-25

**TURN service is generally available (GA)**

Cloudflare Realtime TURN service is generally available and helps address common challenges with real-time communication. For more information, refer to the [blog post](https://blog.cloudflare.com/webrtc-turn-using-anycast/) or [TURN documentation](https://developers.cloudflare.com/realtime/turn/).

## 2024-04-04

**Orange Meets availability**

Orange Meets, Cloudflare's internal video conferencing app, is open source and available for use from [Github](https://github.com/cloudflare/orange?cf%5Ftarget%5Fid=40DF7321015C5928F9359DD01303E8C2).

## 2024-04-04

**Cloudflare Realtime open beta**

Cloudflare Realtime is in open beta and available from the Cloudflare Dashboard.

## 2022-09-27

**Cloudflare Realtime closed beta**

Cloudflare Realtime is available as a closed beta for users who request an invitation. Refer to the [blog post](https://blog.cloudflare.com/announcing-cloudflare-calls/) for more information.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/changelog/","name":"Changelog"}}]}
```

---

---
title: DataChannels
description: DataChannels are a way to send arbitrary data, not just audio or video data, between client in low latency. DataChannels are useful for scenarios like chat, game state, or any other data that doesn't need to be encoded as audio or video but still needs to be sent between clients in real time.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/datachannels.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# DataChannels

DataChannels are a way to send arbitrary data, not just audio or video data, between client in low latency. DataChannels are useful for scenarios like chat, game state, or any other data that doesn't need to be encoded as audio or video but still needs to be sent between clients in real time.

While it is possible to send audio and video over DataChannels, it's not optimal because audio and video transfer includes media specific optimizations that DataChannels do not have, such as simulcast, forward error correction, better caching across the Cloudflare network for retransmissions.

graph LR
    A[Publisher] -->|Arbitrary data| B[Cloudflare Realtime SFU]
    B -->|Arbitrary data| C@{ shape: procs, label: "Subscribers"}

DataChannels on Cloudflare Realtime can scale up to many subscribers per publisher, there is no limit to the number of subscribers per publisher.

### How to use DataChannels

1. Create two Realtime sessions, one for the publisher and one for the subscribers.
2. Create a DataChannel by calling /datachannels/new with the location set to "local" and the dataChannelName set to the name of the DataChannel.
3. Create a DataChannel by calling /datachannels/new with the location set to "remote" and the sessionId set to the sessionId of the publisher.
4. Use the DataChannel to send data from the publisher to the subscribers.

### Unidirectional DataChannels

Cloudflare Realtime SFU DataChannels are one way only. This means that you can only send data from the publisher to the subscribers. Subscribers cannot send data back to the publisher. While regular MediaStream WebRTC DataChannels are bidirectional, this introduces a problem for Cloudflare Realtime because the SFU does not know which session to send the data back to. This is especially problematic for scenarios where you have multiple subscribers and you want to send data from the publisher to all subscribers at scale, such as distributing game score updates to all players in a multiplayer game.

To send data in a bidirectional way, you can use two DataChannels, one for sending data from the publisher to the subscribers and one for sending data the opposite direction.

## Example

An example of DataChannels in action can be found in the [Realtime Examples github repo ↗](https://github.com/cloudflare/calls-examples/tree/main/echo-datachannels).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/datachannels/","name":"DataChannels"}}]}
```

---

---
title: Demos
description: Learn how you can use Realtime within your existing architecture.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/demos.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Demos

Learn how you can use Realtime within your existing architecture.

## Demos

Explore the following demo applications for Realtime.

* [Realtime Echo Demo: ↗](https://github.com/cloudflare/calls-examples/tree/main/echo) Demonstrates a local stream alongside a remote echo stream.
* [Orange Meets: ↗](https://github.com/cloudflare/orange) Orange Meets is a demo WebRTC application built using Cloudflare Realtime.
* [WHIP-WHEP Server: ↗](https://github.com/cloudflare/calls-examples/tree/main/whip-whep-server) WHIP and WHEP server implemented on top of Realtime API.
* [Realtime DataChannel Test: ↗](https://github.com/cloudflare/calls-examples/tree/main/echo-datachannels) This example establishes two datachannels, one publishes data and the other one subscribes, the test measures how fast a message travels to and from the server.

## Interactive Demos

### Global SFU Network Visualization

An interactive visualization showing how Realtime uses Cloudflare's global network as a distributed SFU. Click anywhere on the map to add participants and watch them connect to their nearest datacenter via anycast routing, with media tracks flowing along Cloudflare's private backbone.

[View Global SFU Visualization ↗](https://realtime-sfu.dev-demos.workers.dev)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/demos/","name":"Demos"}}]}
```

---

---
title: Example architecture
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/example-architecture.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Example architecture

![Example Architecture](https://developers.cloudflare.com/_astro/video-calling-application.CIYa-lzM_2b10aI.webp)

1. Clients connect to the backend service
2. Backend service manages the relationship between the clients and the tracks they should subscribe to
3. Backend service contacts the Cloudflare Realtime API to pass the SDP from the clients to establish the WebRTC connection.
4. Realtime API relays back the Realtime API SDP reply and renegotiation messages.
5. If desired, headless clients can be used to record the content from other clients or publish content.
6. Admin manages the rooms and room members.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/example-architecture/","name":"Example architecture"}}]}
```

---

---
title: Quickstart guide
description: Every Realtime App is a separate environment, so you can make one for development, staging and production versions for your product.
Either using Dashboard, or the API create a Realtime App. When you create a Realtime App, you will get:
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/get-started.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Quickstart guide

Before you get started:

You must first [create a Cloudflare account](https://developers.cloudflare.com/fundamentals/account/create-account/).

## Create your first app

Every Realtime App is a separate environment, so you can make one for development, staging and production versions for your product. Either using [Dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/sfu), or the [API](https://developers.cloudflare.com/api/resources/calls/subresources/sfu/methods/create/) create a Realtime App. When you create a Realtime App, you will get:

* App ID
* App Secret

These two combined will allow you to make API Realtime from your backend server to Realtime.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/get-started/","name":"Quickstart guide"}}]}
```

---

---
title: Connection API
description: Cloudflare Realtime simplifies the management of peer connections and media tracks through HTTPS API endpoints. These endpoints allow developers to efficiently manage sessions, add or remove tracks, and gather session information.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/https-api.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Connection API

Cloudflare Realtime simplifies the management of peer connections and media tracks through HTTPS API endpoints. These endpoints allow developers to efficiently manage sessions, add or remove tracks, and gather session information.

## API Endpoints

* **Create a New Session**: Initiates a new session on Cloudflare Realtime, which can be modified with other endpoints below.  
   * `POST /apps/{appId}/sessions/new`
* **Add a New Track**: Adds a media track (audio or video) to an existing session.  
   * `POST /apps/{appId}/sessions/{sessionId}/tracks/new`
* **Renegotiate a Session**: Updates the session's negotiation state to accommodate new tracks or changes in the existing ones.  
   * `PUT /apps/{appId}/sessions/{sessionId}/renegotiate`
* **Close a Track**: Removes a specified track from the session.  
   * `PUT /apps/{appId}/sessions/{sessionId}/tracks/close`
* **Retrieve Session Information**: Fetches detailed information about a specific session.  
   * `GET /apps/{appId}/sessions/{sessionId}`

[View full API and schema (OpenAPI format)](https://developers.cloudflare.com/realtime/static/calls-api-2024-05-21.yaml)

## Handling Secrets

It is vital to manage App ID and its secret securely. While track and session IDs can be public, they should be protected to prevent misuse. An attacker could exploit these IDs to disrupt service if your backend server does not authenticate request origins properly, for example by sending requests to close tracks on sessions other than their own. Ensuring the security and authenticity of requests to your backend server is crucial for maintaining the integrity of your application.

## Using STUN and TURN Servers

Cloudflare Realtime is designed to operate efficiently without the need for TURN servers in most scenarios, as Cloudflare exposes a publicly routable IP address for Realtime. However, integrating a STUN server can be necessary for facilitating peer discovery and connectivity.

* **Cloudflare STUN Server**: `stun.cloudflare.com:3478`

Utilizing Cloudflare's STUN server can help the connection process for Realtime applications.

## Lifecycle of a Simple Session

This section provides an overview of the typical lifecycle of a simple session, focusing on audio-only applications. It illustrates how clients are notified by the backend server as new remote clients join or leave, incorporating video would introduce additional tracks and considerations into the session.

sequenceDiagram
    participant WA as WebRTC Agent
    participant BS as Backend Server
    participant CA as Realtime API

    Note over BS: Client Joins

    WA->>BS: Request
    BS->>CA: POST /sessions/new
    CA->>BS: newSessionResponse
    BS->>WA: Response

    WA->>BS: Request
    BS->>CA: POST /sessions/<ID>/tracks/new (Offer)
    CA->>BS: newTracksResponse (Answer)
    BS->>WA: Response

    WA-->>CA: ICE Connectivity Check
    Note over WA: iceconnectionstatechange (connected)
    WA-->>CA: DTLS Handshake
    Note over WA: connectionstatechange (connected)

    WA<<->>CA: *Media Flow*

    Note over BS: Remote Client Joins

    WA->>BS: Request
    BS->>CA: POST /sessions/<ID>/tracks/new
    CA->>BS: newTracksResponse (Offer)
    BS->>WA: Response

    WA->>BS: Request
    BS->>CA: PUT /sessions/<ID>/renegotiate (Answer)
    CA->>BS: OK
    BS->>WA: Response

    Note over BS: Remote Client Leaves

    WA->>BS: Request
    BS->>CA: PUT /sessions/<ID>/tracks/close
    CA->>BS: closeTracksResponse
    BS->>WA: Response

    Note over BS: Client Leaves

    WA->>BS: Request
    BS->>CA: PUT /sessions/<ID>/tracks/close
    CA->>BS: closeTracksResponse
    BS->>WA: Response

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/https-api/","name":"Connection API"}}]}
```

---

---
title: Introduction
description: Cloudflare Realtime can be used to add realtime audio, video and data into your applications. Cloudflare Realtime uses WebRTC, which is the lowest latency way to communicate across a broad range of platforms like browsers, mobile, and native apps.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/introduction.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Introduction

Cloudflare Realtime can be used to add realtime audio, video and data into your applications. Cloudflare Realtime uses WebRTC, which is the lowest latency way to communicate across a broad range of platforms like browsers, mobile, and native apps.

Realtime integrates with your backend and frontend application to add realtime functionality.

## Why Cloudflare Realtime exists

* **It is difficult to scale WebRTC**: Many struggle scaling WebRTC servers. Operators run into issues about how many users can be in the same "room" or want to build unique solutions that do not fit into the current concepts in high level APIs.
* **High egress costs**: WebRTC is expensive to use as managed solutions charge a high premium on cloud egress and running your own servers incur system administration and scaling overhead. Cloudflare already has 300+ locations with upwards of 1,000 servers in some locations. Cloudflare Realtime scales easily on top of this architecture and can offer the lowest WebRTC usage costs.
* **WebRTC is growing**: Developers are realizing that WebRTC is not just for video conferencing. WebRTC is supported on many platforms, it is mature and well understood.

## What makes Cloudflare Realtime unique

* **Unopinionated**: Cloudflare Realtime does not offer a SDK. It instead allows you to access raw WebRTC to solve unique problems that might not fit into existing concepts. The API is deliberately simple.
* **No rooms**: Unlike other WebRTC products, Cloudflare Realtime lets you be in charge of each track (audio/video/data) instead of offering abstractions such as rooms. You define the presence protocol on top of simple pub/sub. Each end user can publish and subscribe to audio/video/data tracks as they wish.
* **No lock-in**: You can use Cloudflare Realtime to solve scalability issues with your SFU. You can use in combination with peer-to-peer architecture. You can use Cloudflare Realtime standalone. To what extent you use Cloudflare Realtime is up to you.

## What exactly does Cloudflare Realtime do?

* **SFU**: Realtime is a special kind of pub/sub server that is good at forwarding media data to clients that subscribe to certain data. Each client connects to Cloudflare Realtime via WebRTC and either sends data, receives data or both using WebRTC. This can be audio/video tracks or DataChannels.
* **It scales**: All Cloudflare servers act as a single server so millions of WebRTC clients can connect to Cloudflare Realtime. Each can send data, receive data or both with other clients.

## How most developers get started

1. Get started with the echo example, which you can download from the Cloudflare dashboard when you create a Realtime App or from [demos](https://developers.cloudflare.com/realtime/sfu/demos/). This will show you how to send and receive audio and video.
2. Understand how you can manipulate who can receive what media by passing around session and track ids. Remember, you control who receives what media. Each media track is represented by a unique ID. It is your responsibility to save and distribute this ID.

Realtime is not a presence protocol

Realtime does not know what a room is. It only knows media tracks. It is up to you to make a room by saving who is in a room along with track IDs that unique identify media tracks. If each participant publishes their audio/video, and receives audio/video from each other, you have got yourself a video conference!

1. Create an app where you manage each connection to Cloudflare Realtime and the track IDs created by each connection. You can use any tool to save and share tracks. Check out the example apps at [demos](https://developers.cloudflare.com/realtime/sfu/demos/), such as [Orange Meets ↗](https://github.com/cloudflare/orange), which is a full-fledged video conferencing app that uses [Workers Durable Objects](https://developers.cloudflare.com/durable-objects/) to keep track of track IDs.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/introduction/","name":"Introduction"}}]}
```

---

---
title: Limits, timeouts and quotas
description: Understanding the limits and timeouts of Cloudflare Realtime is crucial for optimizing the performance and reliability of your applications. This section outlines the key constraints and behaviors you should be aware of when integrating Cloudflare Realtime into your app.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/limits.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Limits, timeouts and quotas

Understanding the limits and timeouts of Cloudflare Realtime is crucial for optimizing the performance and reliability of your applications. This section outlines the key constraints and behaviors you should be aware of when integrating Cloudflare Realtime into your app.

## Free

* Each account gets 1,000GB/month of data transfer from Cloudflare to your client for free.
* Data transfer from your client to Cloudflare is always free of charge.

## Limits

* **API Realtime per Session**: You can make up to 50 API calls per second for each session. There is no ratelimit on a App basis, just sessions.
* **Tracks per API Call**: Up to 64 tracks can be added with a single API call. If you need to add more tracks to a session, you should distribute them across multiple API calls.
* **Tracks per Session**: There's no upper limit to the number of tracks a session can contain, the practical limit is governed by your connection's bandwidth to and from Cloudflare.

## Inactivity Timeout

* **Track Timeout**: Tracks will automatically timeout and be garbage collected after 30 seconds of inactivity, where inactivity is defined as no media packets being received by Cloudflare. This mechanism ensures efficient use of resources and session cleanliness across all Sessions that use a track.

## PeerConnection Requirements

* **Session State**: For any operation on a session (e.g., pulling or pushing tracks), the PeerConnection state must be `connected`. Operations will block for up to 5 seconds awaiting this state before timing out. This ensures that only active and viable sessions are engaged in media transmission.

## Handling Connectivity Issues

* **Internet Connectivity Considerations**: The potential for internet connectivity loss between the client and Cloudflare is an operational reality that must be addressed. Implementing a detection and reconnection strategy is recommended to maintain session continuity. This could involve periodic 'heartbeat' signals to your backend server to monitor connectivity status. Upon detecting connectivity issues, automatically attempting to reconnect and establish a new session is advised. Sessions and tracks will remain available for reuse for 30 seconds before timing out, providing a brief window for reconnection attempts.

Adhering to these limits and understanding the timeout behaviors will help ensure that your applications remain responsive and stable while providing a seamless user experience.

## Supported Codecs

Cloudflare Realtime supports the following codecs:

### Supported video codecs

* **H264**
* **H265**
* **VP8**
* **VP9**
* **AV1**

### Supported audio codecs

* **Opus**
* **G.711 PCM (A-law)**
* **G.711 PCM (µ-law)**

Note

For external 48kHz PCM support refer to the [WebSocket adapter](https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/websocket-adapter/)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/limits/","name":"Limits, timeouts and quotas"}}]}
```

---

---
title: Media Transport Adapters
description: Media Transport Adapters bridge WebRTC and other transport protocols. Adapters handle protocol conversion, codec transcoding, and bidirectional media flow between WebRTC sessions and external endpoints.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/media-transport-adapters/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Media Transport Adapters

Media Transport Adapters bridge WebRTC and other transport protocols. Adapters handle protocol conversion, codec transcoding, and bidirectional media flow between WebRTC sessions and external endpoints.

## What adapters do

Adapters extend Realtime beyond WebRTC-to-WebRTC communication:

* Ingest audio/video from external sources into WebRTC sessions
* Stream WebRTC media to external systems for processing or storage
* Integrate with AI services for transcription, translation, or generation
* Bridge WebRTC applications with legacy communication systems

## Available adapters

### WebSocket adapter (beta)

Stream audio and video between WebRTC tracks and WebSocket endpoints. Video is egress-only and is converted to JPEG. Currently in beta; the API may change.

[Learn more](https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/websocket-adapter/)

## Architecture

Media Transport Adapters operate as intermediaries between Cloudflare Realtime SFU sessions and external endpoints:

graph LR
    A[WebRTC Client] <--> B[Realtime SFU Session]
    B <--> C[Media Transport Adapter]
    C <--> D[External Endpoint]

### Key concepts

**Adapter instance**: Each connection creates a unique instance with an `adapterId` to manage its lifecycle.

**Location types**:

* `local` (Ingest): Receives media from external endpoints to create new WebRTC tracks
* `remote` (Stream): Sends media from existing WebRTC tracks to external endpoints

**Codec support**: Adapters convert between WebRTC and external system formats.

## Common use cases

### AI processing

* Speech-to-text transcription
* Text-to-speech generation
* Real-time translation
* Audio enhancement

### Media recording

* Cloud recording
* Content delivery networks
* Media processing pipelines

### Legacy integration

* Traditional telephony
* Broadcasting infrastructure
* Custom media servers

## API overview

Media Transport Adapters are managed through the Realtime SFU API:

```

POST /v1/apps/{appId}/adapters/{adapterType}/new

POST /v1/apps/{appId}/adapters/{adapterType}/close


```

Each adapter type has specific configuration requirements and capabilities. Refer to individual adapter documentation for detailed API specifications.

## Best practices

* Close adapter instances when no longer needed
* Implement reconnection logic for network failures
* Choose codecs based on bandwidth and quality requirements
* Secure endpoints with authentication for sensitive media

## Limitations

* Each adapter type has specific codec and format support
* Network latency between Cloudflare edge and external endpoints affects real-time performance
* Maximum message size and streaming modes vary by adapter type

## Get started

[WebSocket adapter (beta)](https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/websocket-adapter/) \- Stream audio and video between WebRTC and WebSocket endpoints (video egress to JPEG)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/media-transport-adapters/","name":"Media Transport Adapters"}}]}
```

---

---
title: WebSocket adapter
description: Stream audio and video between WebRTC tracks and WebSocket endpoints. Supports ingesting audio from WebSocket sources and sending WebRTC audio and video to WebSocket consumers. Video egress is supported as JPEG at approximately 1 FPS.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/media-transport-adapters/websocket-adapter.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# WebSocket adapter

Note

WebSocket adapter is in beta. The API may change.

Stream audio and video between WebRTC tracks and WebSocket endpoints. Supports ingesting audio from WebSocket sources and sending WebRTC audio and video to WebSocket consumers. Video egress is supported as JPEG at approximately 1 FPS.

## What you can build

* AI services with WebSocket APIs for audio processing
* Custom audio processing pipelines
* Legacy system bridges
* Server-side audio generation and consumption
* Video snapshotting and thumbnails
* Computer vision ingestion (low FPS)

## How it works

* [ Ingest (WebSocket → WebRTC) ](#tab-panel-5977)
* [ Stream (WebRTC → WebSocket) ](#tab-panel-5978)

### Create WebRTC tracks from external audio

Ingest audio from external sources via WebSocket to create WebRTC tracks for distribution.

graph LR
    A[External System] -->|Audio Data| B[WebSocket Endpoint]
    B -->|Adapter| C[Realtime SFU]
    C -->|New Session| D[WebRTC Track]
    D -->|WebRTC| E[WebRTC Clients]

**Use cases:**

* AI text-to-speech generation streaming into WebRTC
* Audio from backend services or databases
* Live audio feeds from external systems

**Key characteristics:**

* Creates a new session ID automatically
* Uses `buffer` mode for chunked audio transmission
* Maximum 32 KB per WebSocket message

### Stream WebRTC audio and video to external systems

Stream audio and video from existing WebRTC tracks to external systems via WebSocket for processing or storage.

graph LR
    A[WebRTC Source] -->|WebRTC| B[Realtime SFU Session]
    B -->|Adapter| C[WebSocket Endpoint]
    C -->|Media Data| D[External System]

**Use cases:**

* Real-time speech-to-text transcription
* Audio recording and archival
* Live audio processing pipelines
* Video snapshotting and thumbnails
* Computer vision ingestion (low FPS)

**Key characteristics:**

* Requires existing session ID with track
* Audio: Sends individual PCM frames as they are produced; each includes timestamp and sequence number
* Video: Sends individual JPEG frames at approximately 1 FPS; each includes timestamp (sequence number may be unset)

## API reference

### Create adapter

```

POST /v1/apps/{appId}/adapters/websocket/new


```

* [ Ingest ](#tab-panel-5979)
* [ Stream ](#tab-panel-5980)

#### Request body

```

{

  "tracks": [

    {

      "location": "local",

      "trackName": "string",

      "endpoint": "wss://...",

      "inputCodec": "pcm",

      "mode": "buffer"

    }

  ]

}


```

#### Parameters

| Parameter  | Type   | Description                                                 |
| ---------- | ------ | ----------------------------------------------------------- |
| location   | string | **Required**. Must be "local" for ingesting audio           |
| trackName  | string | **Required**. Name for the new WebRTC track to create       |
| endpoint   | string | **Required**. WebSocket URL to receive audio from           |
| inputCodec | string | **Required**. Codec of incoming audio. Currently only "pcm" |
| mode       | string | **Required**. Must be "buffer" for local mode               |

#### Response

```

{

  "tracks": [

    {

      "trackName": "string",

      "adapterId": "string",

      "sessionId": "string",    // New session ID generated

      "endpoint": "string"      // Echo of the requested endpoint

    }

  ]

}


```

Important

* A new session ID is automatically generated.
* The `sessionId` field in the request is ignored if provided.
* Send audio in chunks up to 32 KB per WebSocket message.

#### Request body

```

{

  "tracks": [

    {

      "location": "remote",

      "sessionId": "string",

      "trackName": "string",

      "endpoint": "wss://...",

      "outputCodec": "pcm"

    }

  ]

}


```

#### Parameters

| Parameter   | Type   | Description                                                                                 |
| ----------- | ------ | ------------------------------------------------------------------------------------------- |
| location    | string | **Required**. Must be "remote" for streaming media out                                      |
| sessionId   | string | **Required**. Existing session ID containing the track                                      |
| trackName   | string | **Required**. Name of the existing track to stream                                          |
| endpoint    | string | **Required**. WebSocket URL to send media to                                                |
| outputCodec | string | **Required**. Codec for outgoing media. Use "pcm" for audio, "jpeg" for video (egress only) |

#### Response

```

{

  "tracks": [

    {

      "trackName": "string",

      "adapterId": "string",

      "sessionId": "string",    // Same as request sessionId

      "endpoint": "string"      // Echo of the requested endpoint

    }

  ]

}


```

Important

* Requires an existing session with the specified track.
* Audio frames are sent individually with timestamp and sequence number.
* Video frames are sent individually as JPEG at approximately 1 FPS with timestamp; sequence number may be unset.
* Each frame is a separate WebSocket message.
* No mode parameter; frames are sent as produced.

### Close adapter

```

POST /v1/apps/{appId}/adapters/websocket/close


```

#### Request body

```

{

  "tracks": [

    {

      "adapterId": "string"

    }

  ]

}


```

## Media formats

### WebRTC tracks

* **Codec**: Opus
* **Sample rate**: 48 kHz
* **Channels**: Stereo

### WebSocket binary format

Media uses Protocol Buffers. Audio uses PCM payloads; video uses JPEG payloads:

* 16-bit signed little-endian PCM
* 48 kHz sample rate
* Stereo (left/right interleaved)
* Video: JPEG image payload (one frame per message)

```

message Packet {

    uint32 sequenceNumber = 1;  // Used in Stream mode only

    uint32 timestamp = 2;       // Used in Stream mode only

    bytes payload = 5;          // Media data

}


```

**Ingest mode (buffer)**: Only the `payload` field is used, containing chunks of audio data.

**Stream mode (egress)**:

* For audio frames:  
   * `sequenceNumber`: Incremental packet counter  
   * `timestamp`: Timestamp for synchronization  
   * `payload`: Individual PCM audio frame data
* For video frames (JPEG):  
   * `timestamp`: Timestamp for synchronization  
   * `payload`: JPEG image data (one frame per message)  
   * Note: `sequenceNumber` may be unset for video frames

### Video (JPEG)

* Supported WebRTC input codecs: H264, H265, VP8, VP9
* Output over WebSocket: JPEG images at approximately 1 FPS

## Connection protocol

Connects to your WebSocket endpoint:

1. WebSocket upgrade handshake
2. Secure connection for `wss://` URLs
3. Media streaming begins

### Message format

#### Buffer mode (ingest)

* **Binary messages**: PCM audio data in chunks
* **Maximum message size**: 32 KB per WebSocket message
* **Important**: Account for serialization overhead when chunking audio buffers
* Send audio in small, frequent chunks rather than large batches

#### Stream mode (egress)

* **Binary messages**: Individual frames with metadata (audio or video)
* Audio frames include:  
   * Timestamp information  
   * Sequence number  
   * PCM audio frame data
* Video frames include:  
   * Timestamp information  
   * JPEG image data  
   * Note: Sequence number may be unset for video frames
* Frames are sent individually as they arrive from the WebRTC track
* Video frames are emitted at approximately 1 FPS

### Connection lifecycle

1. Connects to the WebSocket endpoint
2. Audio streaming begins
3. Video streaming begins (if configured)
4. Connection closes when closed or on error

## Pricing

Currently in beta and free to use.

Once generally available, billing will follow standard Cloudflare Realtime pricing at $0.05 per GB egress. Only traffic originating from Cloudflare towards WebSocket endpoints incurs charges. Traffic ingested from WebSocket endpoints into Cloudflare incurs no charge.

Usage counts towards your Cloudflare Realtime free tier of 1,000 GB.

## Best practices

### Connection management

* Closing an already-closed instance returns success
* Close when sessions end
* Implement reconnection logic for network failures

### Performance

* Deploy WebSocket endpoints close to Cloudflare edge
* Use appropriate buffer sizes
* Monitor connection quality

### Security

* Secure WebSocket endpoints with authentication
* Use `wss://` for production
* Implement rate limiting

## Limitations

* **WebSocket payloads**: PCM (audio) for ingest and stream; JPEG (video) for stream
* **Beta status**: API may change in future releases
* **Video support**: Egress only (JPEG)
* **Video frame rate**: Approximately 1 FPS (beta; not configurable)
* **Unidirectional flow**: Each instance handles one direction

## Error handling

| Error Code | Description                              |
| ---------- | ---------------------------------------- |
| 400        | Invalid request parameters               |
| 404        | Session or track not found               |
| 503        | Adapter not found (for close operations) |

## Reference implementations

* Audio (PCM over WebSocket): [Cloudflare Realtime Examples – ai-tts-stt ↗](https://github.com/cloudflare/realtime-examples/tree/main/ai-tts-stt)
* Video (JPEG egress): [Cloudflare Realtime Examples – video-to-jpeg ↗](https://github.com/cloudflare/realtime-examples/tree/main/video-to-jpeg)

## Migration from custom bridges

1. Replace custom signaling with adapter API calls
2. Update WebSocket endpoints to handle PCM format
3. Implement adapter lifecycle management
4. Remove custom STUN/TURN configuration

## FAQ

**Q: Can I use the same adapter for bidirectional audio?**A: No, each instance is unidirectional. Create separate adapters for send and receive.

**Q: What happens if the WebSocket connection drops?**A: The adapter closes and must be recreated. Implement reconnection logic in your app.

**Q: Is there a limit on concurrent adapters?**A: Limits follow standard Cloudflare Realtime quotas. Contact support for specific requirements.

**Q: Can I change the audio format after creating an adapter?**A: No, audio format is fixed at creation time. Create a new adapter for different formats.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/media-transport-adapters/","name":"Media Transport Adapters"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/sfu/media-transport-adapters/websocket-adapter/","name":"WebSocket adapter"}}]}
```

---

---
title: Pricing
description: Cloudflare Realtime billing is based on data sent from Cloudflare edge to your application.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/pricing.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Pricing

Cloudflare Realtime billing is based on data sent from Cloudflare edge to your application.

Cloudflare Realtime SFU and TURN services cost $0.05 per GB of data egress.

There is a free tier of 1,000 GB before any charges start. This free tier includes usage from both SFU and TURN services, not two independent free tiers. Cloudflare Realtime billing appears as a single line item on your Cloudflare bill, covering both SFU and TURN.

Traffic between Cloudflare Realtime TURN and Cloudflare Realtime SFU or Cloudflare Stream (WHIP/WHEP) does not get double charged, so if you are using both SFU and TURN at the same time, you will get charged for only one.

### TURN

Please see the [TURN FAQ page](https://developers.cloudflare.com/realtime/turn/faq), where there is additional information on specifically which traffic path from RFC8656 is measured and counts towards billing.

### SFU

Only traffic originating from Cloudflare towards clients incurs charges. Traffic pushed to Cloudflare incurs no charge even if there is no client pulling same traffic from Cloudflare.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/pricing/","name":"Pricing"}}]}
```

---

---
title: Sessions and Tracks
description: Cloudflare Realtime offers a simple yet powerful framework for building real-time experiences. At the core of this system are three key concepts: Applications,  Sessions and Tracks. Familiarizing yourself with these concepts is crucial for using Realtime.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/sessions-tracks.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Sessions and Tracks

Cloudflare Realtime offers a simple yet powerful framework for building real-time experiences. At the core of this system are three key concepts: **Applications**, **Sessions** and **Tracks**. Familiarizing yourself with these concepts is crucial for using Realtime.

## Application

A Realtime Application is an environment within different Sessions and Tracks can interact. Examples of this could be production, staging or different environments where you'd want separation between Sessions and Tracks. Cloudflare Realtime usage can be queried at Application, Session or Track level.

## Sessions

A **Session** in Cloudflare Realtime correlates directly to a WebRTC PeerConnection. It represents the establishment of a communication channel between a client and the nearest Cloudflare data center, as determined by Cloudflare's anycast routing. Typically, a client will maintain a single Session, encompassing all communications between the client and Cloudflare.

* **One-to-One Mapping with PeerConnection**: Each Session is a direct representation of a WebRTC PeerConnection, facilitating real-time media data transfer.
* **Anycast Routing**: The client connects to the closest Cloudflare data center, optimizing latency and performance.
* **Unified Communication Channel**: A single Session can handle all types of communication between a client and Cloudflare, ensuring streamlined data flow.

## Tracks

Within a Session, there can be one or more **Tracks**.

* **Tracks map to MediaStreamTrack**: Tracks align with the MediaStreamTrack concept, facilitating audio, video, or data transmission.
* **Globally Unique Ids**: When you push a track to Cloudflare, it is assigned a unique ID, which can then be used to pull the track into another session elsewhere.
* **Available globally**: The ability to push and pull tracks is central to what makes Realtime a versatile tool for real-time applications. Each track is available globally to be retrieved from any Session within an App.

## Realtime as a Programmable "Switchboard"

The analogy of a switchboard is apt for understanding Realtime. Historically, switchboard operators connected calls by manually plugging in jacks. Similarly, Realtime allows for the dynamic routing of media streams, acting as a programmable switchboard for modern real-time communication.

## Beyond "Rooms", "Users", and "Participants"

While many SFUs utilize concepts like "rooms" to manage media streams among users, this approach has scalability and flexibility limitations. Cloudflare Realtime opts for a more granular and flexible model with Sessions and Tracks, enabling a wide range of use cases:

* Large-scale remote events, like 'fireside chats' with thousands of participants.
* Interactive conversations with the ability to bring audience members "on stage."
* Educational applications where an instructor can present to multiple virtual classrooms simultaneously.

### Presence Protocol vs. Media Flow

Realtime distinguishes between the presence protocol and media flow, allowing for scalability and flexibility in real-time applications. This separation enables developers to craft tailored experiences, from intimate calls to massive, low-latency broadcasts.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/sessions-tracks/","name":"Sessions and Tracks"}}]}
```

---

---
title: Simulcast
description: Simulcast is a feature of WebRTC that allows a publisher to send multiple video streams of the same media at different qualities. For example, this is useful for scenarios where you want to send a high quality stream for desktop users and a lower quality stream for mobile users.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/sfu/simulcast.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Simulcast

Simulcast is a feature of WebRTC that allows a publisher to send multiple video streams of the same media at different qualities. For example, this is useful for scenarios where you want to send a high quality stream for desktop users and a lower quality stream for mobile users.

graph LR
    A[Publisher] -->|Low quality| B[Cloudflare Realtime SFU]
    A -->|Medium quality| B
    A -->|High quality| B
B -->|Low quality| C@{ shape: procs, label: "Subscribers"}
B -->|Medium quality| D@{ shape: procs, label: "Subscribers"}
B -->|High quality| E@{ shape: procs, label: "Subscribers"}

### How it works

Simulcast in WebRTC allows a single video source, like a camera or screen share, to be encoded at multiple quality levels and sent simultaneously, which is beneficial for subscribers with varying network conditions and device capabilities. The video source is encoded into multiple streams, each identified by RIDs (RTP Stream Identifiers) for different quality levels, such as low, medium, and high. These simulcast streams are described in the SDP you send to Cloudflare Realtime SFU. It's the responsibility of the Cloudflare Realtime SFU to ensure that the appropriate quality stream is delivered to each subscriber based on their network conditions and device capabilities.

Cloudflare Realtime SFU will automatically handle the simulcast configuration based on the SDP you send to it from the publisher. The SFU will then automatically switch between the different quality levels based on the subscriber's network conditions, or the quality level can be controlled manually via the API. You can control the quality switching behavior using the `simulcast` configuration object when you send an API call to start pulling a remote track.

### Quality Control

The `simulcast` configuration object in the API call when you start pulling a remote track allows you to specify:

* `preferredRid`: The preferred quality level for the video stream (RID for the simulcast stream. [RIDs can be specified by the publisher. ↗](https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpSender/setParameters#encodings))
* `priorityOrdering`: Controls how the SFU handles bandwidth constraints.  
   * `none`: Keep sending the preferred layer, set via the preferredRid, even if there's not enough bandwidth.  
   * `asciibetical`: Use alphabetical ordering (a-z) to determine priority, where 'a' is most desirable and 'z' is least desirable.
* `ridNotAvailable`: Controls what happens when the preferred RID is no longer available, for example when the publisher stops sending it.  
   * `none`: Do nothing.  
   * `asciibetical`: Switch to the next available RID based on the priority ordering, where 'a' is most desirable and 'z' is least desirable.  
You will likely want to order the asciibetical RIDs based on your desired metric, such as higest resoltion to lowest or highest bandwidth to lowest.

### Bandwidth Management across media tracks

Cloudflare Realtime treats all media tracks equally at the transport level. For example, if you have multiple video tracks (cameras, screen shares, etc.), they all have equal priority for bandwidth allocation. This means:

1. Each track's simulcast configuration is handled independently
2. The SFU performs automatic bandwidth estimation and layer switching based on network conditions independently for each track

### Layer Switching Behavior

When a layer switch is requested (through updating `preferredRid`) with the `/tracks/update` API:

1. The SFU will automatically generate a Full Intraframe Request (FIR)
2. PLI generation is debounced to prevent excessive requests

### Publisher Configuration

For publishers (local tracks), you only need to include the simulcast attributes in your SDP. The SFU will automatically handle the simulcast configuration based on the SDP. For example, the SDP should contain a section like this:

```

a=simulcast:send f;h;q

a=rid:f send

a=rid:h send

a=rid:q send


```

If the publisher endpoint is a browser you can include these by specifying `sendEncodings` when creating the transceiver like this:

JavaScript

```

const transceiver = peerConnection.addTransceiver(track, {

  direction: "sendonly",

  sendEncodings: [

    { scaleResolutionDownBy: 1, rid: "f" },

    { scaleResolutionDownBy: 2, rid: "h" },

    { scaleResolutionDownBy: 4, rid: "q" },

  ],

});


```

## Example

Here's an example of how to use simulcast with Cloudflare Realtime:

1. Create a new local track with simulcast configuration. There should be a section in the SDP with `a=simulcast:send`.
2. Use the [Cloudflare Realtime API](https://developers.cloudflare.com/realtime/sfu/https-api) to push this local track, by calling the /tracks/new endpoint.
3. Use the [Cloudflare Realtime API](https://developers.cloudflare.com/realtime/sfu/https-api) to start pulling a remote track (from another browser or device), by calling the /tracks/new endpoint and specifying the `simulcast` configuration object along with the remote track ID you get from step 2.

For more examples, check out the [Realtime Examples GitHub repository ↗](https://github.com/cloudflare/calls-examples/tree/main/echo-simulcast).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/sfu/","name":"Realtime SFU"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/sfu/simulcast/","name":"Simulcast"}}]}
```

---

---
title: TURN Service
description: Separately from the SFU, Realtime offers a managed TURN service. TURN acts as a relay point for traffic between WebRTC clients like the browser and SFUs, particularly in scenarios where direct communication is obstructed by NATs or firewalls. TURN maintains an allocation of public IP addresses and ports for each session, ensuring connectivity even in restrictive network environments.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/turn/index.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# TURN Service

Separately from the SFU, Realtime offers a managed TURN service. TURN acts as a relay point for traffic between WebRTC clients like the browser and SFUs, particularly in scenarios where direct communication is obstructed by NATs or firewalls. TURN maintains an allocation of public IP addresses and ports for each session, ensuring connectivity even in restrictive network environments.

Using Cloudflare Realtime TURN service is available free of charge when used together with the Realtime SFU. Otherwise, it costs $0.05/real-time GB outbound from Cloudflare to the TURN client.

## Service address and ports

| Protocol      | Primary address     | Primary port | Alternate port |
| ------------- | ------------------- | ------------ | -------------- |
| STUN over UDP | stun.cloudflare.com | 3478/udp     | 53/udp         |
| TURN over UDP | turn.cloudflare.com | 3478/udp     | 53 udp         |
| TURN over TCP | turn.cloudflare.com | 3478/tcp     | 80/tcp         |
| TURN over TLS | turn.cloudflare.com | 5349/tcp     | 443/tcp        |

Note

Use of alternate port 53 only by itself is not recommended. Port 53 is blocked by many ISPs, and by popular browsers such as [Chrome ↗](https://chromium.googlesource.com/chromium/src.git/+/refs/heads/master/net/base/port%5Futil.cc#44) and [Firefox ↗](https://github.com/mozilla/gecko-dev/blob/master/netwerk/base/nsIOService.cpp#L132). It is useful only in certain specific scenerios.

## Regions

Cloudflare Realtime TURN service runs on [Cloudflare's global network ↗](https://www.cloudflare.com/network) \- a growing global network of thousands of machines distributed across hundreds of locations, with the notable exception of the Cloudflare's [China Network](https://developers.cloudflare.com/china-network/).

When a client tries to connect to `turn.cloudflare.com`, it _automatically_ connects to the Cloudflare location closest to them. We achieve this using [anycast routing ↗](https://www.cloudflare.com/learning/cdn/glossary/anycast-network/).

To learn more about the architecture that makes this possible, read this [technical deep-dive about Realtime ↗](https://blog.cloudflare.com/cloudflare-calls-anycast-webrtc).

## Protocols and Ciphers for TURN over TLS

TLS versions supported include TLS 1.1, TLS 1.2, and TLS 1.3.

| OpenSSL Name                  | TLS 1.1 | TLS 1.2 | TLS 1.3 |
| ----------------------------- | ------- | ------- | ------- |
| AEAD-AES128-GCM-SHA256        | No      | No      | ✅       |
| AEAD-AES256-GCM-SHA384        | No      | No      | ✅       |
| AEAD-CHACHA20-POLY1305-SHA256 | No      | No      | ✅       |
| ECDHE-ECDSA-AES128-GCM-SHA256 | No      | ✅       | No      |
| ECDHE-RSA-AES128-GCM-SHA256   | No      | ✅       | No      |
| ECDHE-RSA-AES128-SHA          | ✅       | ✅       | No      |
| AES128-GCM-SHA256             | No      | ✅       | No      |
| AES128-SHA                    | ✅       | ✅       | No      |
| AES256-SHA                    | ✅       | ✅       | No      |

## MTU

There is no specific MTU limit for Cloudflare Realtime TURN service.

## Limits

Cloudflare Realtime TURN service places limits on:

* Unique IP address you can communicate with per relay allocation (>5 new IP/sec)
* Packet rate outbound and inbound to the relay allocation (>5-10 kpps)
* Data rate outbound and inbound to the relay allocation (>50-100 Mbps)

Limits apply to each TURN allocation independently

Each limit is for a single TURN allocation (single TURN user) and not account wide. Same limit will apply to each user regardless of the number of unique TURN users.

These limits are suitable for high-demand applications and also have burst rates higher than those documented above. Hitting these limits will result in packet drops.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/turn/","name":"TURN Service"}}]}
```

---

---
title: Analytics
description: Cloudflare Realtime TURN service counts ingress and egress usage in bytes. You can access this real-time and historical data using the TURN analytics API. You can see TURN usage data in a time series or aggregate that shows traffic in bytes over time.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/turn/analytics.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Analytics

Cloudflare Realtime TURN service counts ingress and egress usage in bytes. You can access this real-time and historical data using the TURN analytics API. You can see TURN usage data in a time series or aggregate that shows traffic in bytes over time.

Cloudflare TURN analytics is available over the GraphQL API only.

API token permissions

You will need the "Account Analytics" permission on your API token to make queries to the Realtime GraphQL API.

Note

See [GraphQL API](https://developers.cloudflare.com/analytics/graphql-api/) for more information on how to set up your GraphQL client. The examples below use the same GraphQL endpoint at `https://api.cloudflare.com/client/v4/graphql`.

## Available metrics and dimensions

TURN analytics provides rich data that you can query and aggregate in various ways.

### Metrics

You can query the following metrics:

* **egressBytes**: Total bytes sent from TURN servers to clients
* **ingressBytes**: Total bytes received by TURN servers from clients
* **concurrentConnections**: Average number of concurrent connections

These metrics support aggregations using `sum` and `avg` functions.

### Dimensions

You can break down your data by the following dimensions:

* **Time aggregations**: `datetime`, `datetimeMinute`, `datetimeFiveMinutes`, `datetimeFifteenMinutes`, `datetimeHour`
* **Geographic**: `datacenterCity`, `datacenterCountry`, `datacenterRegion` (Cloudflare data center location)
* **Identity**: `keyId`, `customIdentifier`, `username`

### Filters

You can filter the data in TURN analytics on:

* Datetime range
* TURN Key ID
* TURN Username
* Custom identifier

Note

[Custom identifiers](https://developers.cloudflare.com/realtime/turn/replacing-existing/#tag-users-with-custom-identifiers) are useful for accounting usage for different users in your system.

## GraphQL clients

GraphQL is a self-documenting protocol. You can use any GraphQL client to explore the schema and available fields. Popular options include:

* **[Altair ↗](https://altairgraphql.dev/)**: A feature-rich GraphQL client with schema documentation explorer
* **[GraphiQL ↗](https://github.com/graphql/graphiql)**: The original GraphQL IDE
* **[Postman ↗](https://www.postman.com/)**: Supports GraphQL queries with schema introspection

To explore the full schema, configure your client to connect to `https://api.cloudflare.com/client/v4/graphql` with your API credentials. Refer to [Explore the GraphQL schema](https://developers.cloudflare.com/analytics/graphql-api/getting-started/explore-graphql-schema/) for detailed instructions.

## Useful TURN analytics queries

Below are some example queries for common usecases. You can modify them to adapt your use case and get different views to the analytics data.

### Concurrent connections with data usage over time

This comprehensive query shows how to retrieve multiple metrics simultaneously, including concurrent connections, egress, and ingress bytes in 5-minute intervals. This is useful for building dashboards and monitoring real-time usage.

```

query concurrentConnections {

  viewer {

    accounts(filter: { accountTag: $accountId }) {

      callsTurnUsageAdaptiveGroups(

        limit: 10000

        filter: { date_geq: $dateFrom, date_leq: $dateTo }

      ) {

        dimensions {

          datetimeFiveMinutes

        }

        avg {

          concurrentConnectionsFiveMinutes

        }

        sum {

          egressBytes

          ingressBytes

        }

      }

    }

  }

}


```

Example response:

```

{

  "data": {

    "viewer": {

      "accounts": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "avg": {

                "concurrentConnectionsFiveMinutes": 816

              },

              "dimensions": {

                "datetimeFiveMinutes": "2025-12-02T03:45:00Z"

              },

              "sum": {

                "egressBytes": 207314144,

                "ingressBytes": 8534200

              }

            },

            {

              "avg": {

                "concurrentConnectionsFiveMinutes": 1945

              },

              "dimensions": {

                "datetimeFiveMinutes": "2025-12-02T16:00:00Z"

              },

              "sum": {

                "egressBytes": 462909020,

                "ingressBytes": 128434592

              }

            },


          ]

        }

      ]

    }

  ]

}


```

### Top TURN keys by egress

```

query egressByTurnKey{

  viewer {

    usage: accounts(filter: { accountTag: $accountId }) {

        callsTurnUsageAdaptiveGroups(

          filter: {

          date_geq: $dateFrom,

          date_leq: $dateTo

        }

          limit: 2

          orderBy: [sum_egressBytes_DESC]

        ) {

          dimensions {

            keyId

          }

          sum {

            egressBytes

          }

        }

      }

    },

    "errors": null

  }


```

Example response:

```

{

  "data": {

    "viewer": {

      "usage": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "dimensions": {

                "keyId": "82a58d0aeabfa8f4a4e0c4a9efc9cda5"

              },

              "sum": {

                "egressBytes": 160040068147

              }

            }

          ]

        }

      ]

    }

  },

  "errors": null

}


```

### Top TURN custom identifiers

```

query topTurnCustomIdentifiers {

  viewer {

    accounts(filter: { accountTag: $accountId }) {

      callsTurnUsageAdaptiveGroups(

        filter: { date_geq: $dateFrom, date_leq: $dateTo }

        limit: 1

        orderBy: [sum_egressBytes_DESC]

      ) {

        dimensions {

          customIdentifier

        }

        sum {

          egressBytes

        }

      }

    }

  }

}


```

Example response:

```

{

  "data": {

    "viewer": {

      "accounts": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "dimensions": {

                "customIdentifier": "some identifier"

              },

              "sum": {

                "egressBytes": 160040068147

              }

            }

          ]

        }

      ]

    }

  },

  "errors": null

}


```

### Usage for a specific custom identifier

```

query {

  viewer {

    accounts(filter: { accountTag: $accountId }) {

      callsTurnUsageAdaptiveGroups(

        filter: {

          date_geq: $dateFrom

          date_leq: $dateTo

          customIdentifier: "tango"

        }

        limit: 100

        orderBy: []

      ) {

        dimensions {

          keyId

          customIdentifier

        }

        sum {

          egressBytes

        }

      }

    }

  }

}


```

Example response:

```

{

  "data": {

    "viewer": {

      "usage": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "dimensions": {

                "customIdentifier": "tango",

                "keyId": "74007022d80d7ebac4815fb776b9d3ed"

              },

              "sum": {

                "egressBytes": 162641324

              }

            }

          ]

        }

      ]

    }

  },

  "errors": null

}


```

### Usage as a timeseries (for graphs)

```

query {

  viewer {

    accounts(filter: { accountTag: $accountId }) {

      callsTurnUsageAdaptiveGroups(

        filter: { date_geq: $dateFrom, date_leq: $dateTo }

        limit: 100

        orderBy: [datetimeMinute_ASC]

      ) {

        dimensions {

          datetimeMinute

        }

        sum {

          egressBytes

        }

      }

    }

  }

}


```

Example response:

```

{

  "data": {

    "viewer": {

      "accounts": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "dimensions": {

                "datetimeMinute": "2025-12-01T00:00:00Z"

              },

              "sum": {

                "egressBytes": 159512

              }

            },

            {

              "dimensions": {

                "datetimeMinute": "2025-12-01T00:01:00Z"

              },

              "sum": {

                "egressBytes": 133818

              }

            },

            ... (more data here)

           ]

        }

      ]

    }

  },

  "errors": null

}


```

### Usage breakdown by geographic location

You can break down usage data by Cloudflare data center location to understand where your TURN traffic is being served. This is useful for optimizing regional capacity and understanding geographic distribution of your users.

```

query {

  viewer {

    accounts(filter: { accountTag: $accountId }) {

      callsTurnUsageAdaptiveGroups(

        limit: 100

        filter: { date_geq: $dateFrom, date_leq: $dateTo }

        orderBy: [sum_egressBytes_DESC]

      ) {

        dimensions {

          datacenterCity

          datacenterCode

          datacenterRegion

          datacenterCountry

        }

        sum {

          egressBytes

          ingressBytes

        }

        avg {

          concurrentConnectionsFiveMinutes

        }

      }

    }

  }

}


```

Example response:

```

{

  "data": {

    "viewer": {

      "accounts": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "avg": {

                "concurrentConnectionsFiveMinutes": 3135

              },

              "dimensions": {

                "datacenterCity": "Columbus",

                "datacenterCode": "CMH",

                "datacenterCountry": "US",

                "datacenterRegion": "ENAM"

              },

              "sum": {

                "egressBytes": 47720931316,

                "ingressBytes": 19351966366

              }

            },

            ...

          ]

        }

      ]

    }

  },

  "errors": null

}


```

### Filter by specific key or identifier

You can filter data to analyze a specific TURN key or custom identifier. This is useful for debugging specific connections or analyzing usage patterns for particular clients.

```

query {

  viewer {

    accounts(filter: { accountTag: $accountId }) {

      callsTurnUsageAdaptiveGroups(

        limit: 1000

        filter: {

          keyId: "82a58d0aeabfa8f4a4e0c4a9efc9cda5"

          date_geq: $dateFrom

          date_leq: $dateTo

        }

        orderBy: [datetimeFiveMinutes_ASC]

      ) {

        dimensions {

          datetimeFiveMinutes

          keyId

        }

        sum {

          egressBytes

          ingressBytes

        }

        avg {

          concurrentConnectionsFiveMinutes

        }

      }

    }

  }

}


```

Example response:

```

{

  "data": {

    "viewer": {

      "accounts": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "avg": {

                "concurrentConnectionsFiveMinutes": 130

              },

              "dimensions": {

                "datetimeFiveMinutes": "2025-12-01T00:00:00Z",

                "keyId": "82a58d0aeabfa8f4a4e0c4a9efc9cda5"

              },

              "sum": {

                "egressBytes": 609156,

                "ingressBytes": 464326

              }

            },

            {

              "avg": {

                "concurrentConnectionsFiveMinutes": 118

              },

              "dimensions": {

                "datetimeFiveMinutes": "2025-12-01T00:05:00Z",

                "keyId": "82a58d0aeabfa8f4a4e0c4a9efc9cda5"

              },

              "sum": {

                "egressBytes": 534948,

                "ingressBytes": 401286

              }

            },

            ...

          ]

        }

      ]

    }

  },

  "errors": null

}


```

### Time aggregation options

You can choose different time aggregation intervals depending on your analysis needs:

* **`datetimeMinute`**: 1-minute intervals (most granular)
* **`datetimeFiveMinutes`**: 5-minute intervals (recommended for dashboards)
* **`datetimeFifteenMinutes`**: 15-minute intervals
* **`datetimeHour`**: Hourly intervals (best for long-term trends)

Example query with hourly aggregation:

```

query {

  viewer {

    accounts(filter: { accountTag: $accountId }) {

      callsTurnUsageAdaptiveGroups(

        limit: 1000

        filter: {

          keyId: "82a58d0aeabfa8f4a4e0c4a9efc9cda5"

          date_geq: $dateFrom

          date_leq: $dateTo

        }

        orderBy: [datetimeFiveMinutes_ASC]

      ) {

        dimensions {

          datetimeFiveMinutes

          keyId

        }

        sum {

          egressBytes

          ingressBytes

        }

        avg {

          concurrentConnectionsFiveMinutes

        }

      }

    }

  }

}


```

Example response:

```

{

  "data": {

    "viewer": {

      "accounts": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "avg": {

                "concurrentConnectionsFiveMinutes": 130

              },

              "dimensions": {

                "datetimeFiveMinutes": "2025-12-01T00:00:00Z",

                "keyId": "82a58d0aeabfa8f4a4e0c4a9efc9cda5"

              },

              "sum": {

                "egressBytes": 609156,

                "ingressBytes": 464326

              }

            },

            {

              "avg": {

                "concurrentConnectionsFiveMinutes": 118

              },

              "dimensions": {

                "datetimeFiveMinutes": "2025-12-01T00:05:00Z",

                "keyId": "82a58d0aeabfa8f4a4e0c4a9efc9cda5"

              },

              "sum": {

                "egressBytes": 534948,

                "ingressBytes": 401286

              }

            },

            ...

          ]

        }

      ]

    }

  },

  "errors": null

}


```

## Advanced use cases

### Combining multiple dimensions

You can combine multiple dimensions in a single query to get more detailed breakdowns. For example, to see usage by both time and location:

```

query {

  viewer {

    accounts(filter: { accountTag: $accountId }) {

      callsTurnUsageAdaptiveGroups(

        limit: 10000

        filter: { date_geq: $dateFrom, date_leq: $dateTo }

        orderBy: [datetimeHour_ASC, sum_egressBytes_DESC]

      ) {

        dimensions {

          datetimeHour

          datacenterCity

          datacenterCountry

        }

        sum {

          egressBytes

          ingressBytes

        }

      }

    }

  }

}


```

Example response:

```

{

  "data": {

    "viewer": {

      "accounts": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "dimensions": {

                "datacenterCity": "Chennai",

                "datacenterCountry": "IN",

                "datetimeHour": "2025-12-01T00:00:00Z"

              },

              "sum": {

                "egressBytes": 3416216,

                "ingressBytes": 498927214

              }

            },

            {

              "dimensions": {

                "datacenterCity": "Mumbai",

                "datacenterCountry": "IN",

                "datetimeHour": "2025-12-01T00:00:00Z"

              },

              "sum": {

                "egressBytes": 1267076,

                "ingressBytes": 1140140

              }

            },

            ...

          ]

        }

      ]

    }

  },

  "errors": null

}


```

### Identifying top consumers

To find which keys or custom identifiers are using the most bandwidth:

```

query {

  viewer {

    accounts(filter: { accountTag: $accountId }) {

      callsTurnUsageAdaptiveGroups(

        limit: 10

        filter: { date_geq: $dateFrom, date_leq: $dateTo }

        orderBy: [sum_egressBytes_DESC, sum_ingressBytes_DESC]

      ) {

        dimensions {

          keyId

          customIdentifier

        }

        sum {

          egressBytes

          ingressBytes

        }

        avg {

          concurrentConnectionsFiveMinutes

        }

      }

    }

  }

}


```

Example response:

```

{

  "data": {

    "viewer": {

      "accounts": [

        {

          "callsTurnUsageAdaptiveGroups": [

            {

              "avg": {

                "concurrentConnectionsFiveMinutes": 837305

              },

              "dimensions": {

                "customIdentifier": "",

                "keyId": "82a58d0aeabfa8f4a4e0c4a9efc9cda5"

              },

              "sum": {

                "egressBytes": 160040068147,

                "ingressBytes": 154955460564

              }

            }

          ]

        }

      ]

    }

  },

  "errors": null

}


```

## Schema exploration

The GraphQL Analytics API is self-documenting. You can use introspection to discover all available fields, filters, and capabilities for `callsTurnUsageAdaptiveGroups`. Using a GraphQL client like Altair or GraphiQL, you can browse the schema interactively to find additional dimensions and metrics that may be useful for your specific use case.

For more information on GraphQL introspection and schema exploration, refer to:

* [Explore the GraphQL schema](https://developers.cloudflare.com/analytics/graphql-api/getting-started/explore-graphql-schema/)
* [GraphQL introspection](https://developers.cloudflare.com/analytics/graphql-api/features/discovery/introspection/)

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/turn/","name":"TURN Service"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/turn/analytics/","name":"Analytics"}}]}
```

---

---
title: Custom TURN domains
description: Cloudflare Realtime TURN service supports using custom domains for UDP, and TCP - but not TLS protocols. Custom domains do not affect any of the performance of Cloudflare Realtime TURN and is set up via a simple CNAME DNS record on your domain.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/turn/custom-domains.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Custom TURN domains

Cloudflare Realtime TURN service supports using custom domains for UDP, and TCP - but not TLS protocols. Custom domains do not affect any of the performance of Cloudflare Realtime TURN and is set up via a simple CNAME DNS record on your domain.

| Protocol      | Custom domains | Primary port | Alternate port |
| ------------- | -------------- | ------------ | -------------- |
| STUN over UDP | ✅              | 3478/udp     | 53/udp         |
| TURN over UDP | ✅              | 3478/udp     | 53 udp         |
| TURN over TCP | ✅              | 3478/tcp     | 80/tcp         |
| TURN over TLS | No             | 5349/tcp     | 443/tcp        |

## Setting up a CNAME record

To use custom domains for TURN, you must create a CNAME DNS record pointing to `turn.cloudflare.com`.

Warning

Do not resolve the address of `turn.cloudflare.com` or `stun.cloudflare.com` or use an IP address as the value you input to your DNS record. Only CNAME records are supported.

Any DNS provider, including Cloudflare DNS can be used to set up a CNAME for custom domains.

Note

If Cloudflare's authoritative DNS service is used, the record must be set to [DNS-only or "grey cloud" mode](https://developers.cloudflare.com/dns/proxy-status/#dns-only-records).\`

There is no additional charge to using a custom hostname with Cloudflare Realtime TURN.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/turn/","name":"TURN Service"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/turn/custom-domains/","name":"Custom TURN domains"}}]}
```

---

---
title: FAQ
description: Cloudflare TURN pricing is based on the data sent from the Cloudflare edge to the TURN client, as described in RFC 8656 Figure 1. This means data sent from the TURN server to the TURN client and captures all data, including TURN overhead, following successful authentication.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/turn/faq.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# FAQ

## General

### What is Cloudflare Realtime TURN pricing? How exactly is it calculated?

Cloudflare TURN pricing is based on the data sent from the Cloudflare edge to the TURN client, as described in [RFC 8656 Figure 1 ↗](https://datatracker.ietf.org/doc/html/rfc8656#fig-turn-model). This means data sent from the TURN server to the TURN client and captures all data, including TURN overhead, following successful authentication.

Pricing for Cloudflare Realtime TURN service is $0.05 per GB of data used.

Cloudflare's STUN service at `stun.cloudflare.com` is free and unlimited.

There is a free tier of 1,000 GB before any charges start. Cloudflare Realtime billing appears as a single line item on your Cloudflare bill, covering both SFU and TURN.

Traffic between Cloudflare Realtime TURN and Cloudflare Realtime SFU or Cloudflare Stream (WHIP/WHEP) does not incur any charges.

---
title: Cloudflare Realtime TURN pricing
---
flowchart LR
    Client[TURN Client]
    Server[TURN Server]

    Client -->|"Ingress (free)"| Server
    Server -->|"Egress (charged)"| Client

    Server <-->|Not part of billing| PeerA[Peer A]

### Is Realtime TURN HIPAA/GDPR/FedRAMP compliant?

Please view Cloudflare's [certifications and compliance resources ↗](https://www.cloudflare.com/trust-hub/compliance-resources/) and contact your Cloudflare enterprise account manager for more information.

### What data can Cloudflare access when TURN is used with WebRTC?

When Cloudflare Realtime TURN is used in conjunction with WebRTC, Cloudflare cannot access the contents of the media being relayed. This is because WebRTC employs Datagram Transport Layer Security (DTLS) encryption for all media streams, which encrypts the data end-to-end between the communicating peers before it reaches the TURN server. As a result, Cloudflare only relays encrypted packets and cannot decrypt or inspect the media content, which may include audio, video, or data channel information.

From a data privacy perspective, the only information Cloudflare processes to operate the TURN service is the metadata necessary for establishing and maintaining the relay connection. This includes IP addresses of the TURN clients, port numbers, and session timing information. Cloudflare does not have access to any personally identifiable information contained within the encrypted media streams themselves.

This architecture ensures that media communications relayed through Cloudflare Realtime TURN maintain end-to-end encryption between participants, with Cloudflare functioning solely as an intermediary relay service without visibility into the encrypted content.

### Is Realtime TURN end-to-end encrypted?

TURN protocol, [RFC 8656 ↗](https://datatracker.ietf.org/doc/html/rfc8656), does not discuss encryption beyond wrapper protocols such as TURN over TLS. If you are using TURN with WebRTC will encrypt data at the WebRTC level.

### What regions does Cloudflare Realtime TURN operate at?

Cloudflare Realtime TURN server runs on [Cloudflare's global network ↗](https://www.cloudflare.com/network) \- a growing global network of thousands of machines distributed across hundreds of locations, with the notable exception of the Cloudflare's [China Network](https://developers.cloudflare.com/china-network/).

### Does Cloudflare Realtime TURN use the Cloudflare Backbone or is there any "magic" Cloudflare do to speed connection up?

Cloudflare Realtime TURN allocations are homed in the nearest available Cloudflare data center to the TURN client via anycast routing. If both ends of a connection are using Cloudflare Realtime TURN, Cloudflare will be able to control the routing and, if possible, route TURN packets through the Cloudflare backbone.

### What is the difference between Cloudflare Realtime TURN with a enterprise plan vs self-serve (pay with your credit card) plans?

There is no performance or feature level difference for Cloudflare Realtime TURN service in enterprise or self-serve plans, however those on [enterprise plans ↗](https://www.cloudflare.com/enterprise/) will get the benefit of priority support, predictable flat-rate pricing and SLA guarantees.

### Does Cloudflare Realtime TURN run in the Cloudflare China Network?

Cloudflare's [China Network](https://developers.cloudflare.com/china-network/) does not participate in serving Realtime traffic and TURN traffic from China will connect to Cloudflare locations outside of China.

### How long does it take for TURN activity to be available in analytics?

TURN usage shows up in analytics in 30 seconds.

## Technical

### I need to allowlist (whitelist) Cloudflare Realtime TURN IP addresses. Which IP addresses should I use?

Cloudflare Realtime TURN is easy to use by IT administrators who have strict firewalls because it requires very few IP addresses to be allowlisted compared to other providers. You must allowlist both IPv6 and IPv4 addresses.

Please allowlist the following IP addresses:

* `2a06:98c1:3200::1/128`
* `2606:4700:48::1/128`
* `141.101.90.1/32`
* `162.159.207.1/32`

Watch for IP changes

Cloudflare tries to, but cannot guarantee that the IP addresses used for the TURN service won't change. If you are allowlisting IP addresses and do not have a enterprise contract, you must set up alerting that detects changes the DNS response from `turn.cloudflare.com` (A and AAAA records) and update the hardcoded IP address(es) accordingly within 14 days of the DNS change.

For more details about static IPs, guarantees and other arrangements please discuss with your enterprise account team.

Your enterprise team will be able to provide additional addresses to allowlist as future backup to achieve address diversity while still keeping a short list of IPs.

### I would like to hardcode IP addresses used for TURN in my application to save a DNS lookup

Although this is not recommended, we understand there is a very small set of circumstances where hardcoding IP addresses might be useful. In this case, you must set up alerting that detects changes the DNS response from `turn.cloudflare.com` (A and AAAA records) and update the hardcoded IP address(es) accordingly within 14 days of the DNS change. Note that this DNS response could return more than one IP address. In addition, you must set up a failover to a DNS query if there is a problem connecting to the hardcoded IP address. Cloudflare tries to, but cannot guarantee that the IP address used for the TURN service won't change unless this is in your enterprise contract. For more details about static IPs, guarantees and other arrangements please discuss with your enterprise account team.

### I see that TURN IP are published above. Do you also publish IPs for STUN?

TURN service at `turn.cloudflare.com` will also respond to binding requests ("STUN requests").

### Does Cloudflare Realtime TURN support the expired IETF RFC draft "draft-uberti-behave-turn-rest-00"?

The Cloudflare Realtime credential generation function returns a JSON structure similar to the [expired RFC draft "draft-uberti-behave-turn-rest-00" ↗](https://datatracker.ietf.org/doc/html/draft-uberti-behave-turn-rest-00), but it does not include the TTL value. If you need a response in this format, you can modify the JSON from the Cloudflare Realtime credential generation endpoint to the required format in your backend server or Cloudflare Workers.

### I am observing packet loss when using Cloudflare Realtime TURN - how can I debug this?

Packet loss is normal in UDP and can happen occasionally even on reliable connections. However, if you observe systematic packet loss, consider the following:

* Are you sending or receiving data at a high rate (>50-100Mbps) from a single TURN client? Realtime TURN might be dropping packets to signal you to slow down.
* Are you sending or receiving large amounts of data with very small packet sizes (high packet rate > 5-10kpps) from a single TURN client? Cloudflare Realtime might be dropping packets.
* Are you sending packets to new unique addresses at a high rate resembling to [port scanning ↗](https://en.wikipedia.org/wiki/Port%5Fscanner) behavior?

### I plan to use Realtime TURN at scale. What is the rate at which I can issue credentials?

There is no defined limit for credential issuance. Start at 500 credentials/sec and scale up linearly. Ensure you use more than 50% of the issued credentials.

### What is the maximum value I can use for TURN credential expiry time?

You can set a expiration time for a credential up to 48 hours in the future. If you need your TURN allocation to last longer than this, you will need to [update ↗](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setConfiguration) the TURN credentials.

### Does Realtime TURN support IPv6?

Yes. Cloudflare Realtime is available over both IPv4 and IPv6 for TURN Client to TURN server communication, however it does not issue relay addresses in IPv6 as described in [RFC 6156 ↗](https://datatracker.ietf.org/doc/html/rfc6156).

### Does Realtime TURN issue IPv6 relay addresses?

No. Realtime TURN will not respect `REQUESTED-ADDRESS-FAMILY` STUN attribute if specified and will issue IPv4 addresses only.

### Does Realtime TURN support TCP relaying?

No. Realtime does not implement [RFC6062 ↗](https://datatracker.ietf.org/doc/html/rfc6062) and will not respect `REQUESTED-TRANSPORT` STUN attribute.

### I am unable to make CreatePermission or ChannelBind requests with certain IP addresses. Why is that?

Cloudflare Realtime denies CreatePermission or ChannelBind requests if private IP ranges (e.g loopback addresses, linklocal unicast or multicast blocks) or IP addresses that are part of [BYOIP](https://developers.cloudflare.com/byoip/) are used.

If you are a Cloudflare BYOIP customer and wish to connect to your BYOIP ranges with Realtime TURN, please reach out to your account manager for further details.

### What is the maximum duration limit for a TURN allocation?

There is no maximum duration limit for a TURN allocation. Per [RFC 8656 Section 3.2 ↗](https://datatracker.ietf.org/doc/html/rfc8656#section-3.2), once a relayed transport address is allocated, a client must keep the allocation alive. To do this, the client periodically sends a Refresh request to the server. The Refresh request needs to be authenticated with a valid TURN credential. The maximum duration for a credential is 48 hours. If a longer allocation is required, a new credential must be generated at least every 48 hours.

### How often does Cloudflare perform maintenance on a server that is actively handling a TURN allocation? What is the impact of this?

Even though this is not common, in certain scenarios TURN allocations may be disrupted. This could be caused by maintenance on the Cloudflare server handling the allocation or could be related to Internet network topology changes that cause TURN packets to arrive at a different Cloudflare datacenter. Regardless of the reason, [ICE restart ↗](https://datatracker.ietf.org/doc/html/rfc8445#section-2.4) support by clients is highly recommended.

### What will happen if TURN credentials expire while the TURN allocation is in use?

Cloudflare Realtime will immediately stop billing and recording usage for analytics. After a short delay, the connection will be disconnected.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/turn/","name":"TURN Service"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/turn/faq/","name":"FAQ"}}]}
```

---

---
title: Generate Credentials
description: Cloudflare will issue TURN keys, but these keys cannot be used as credentials with turn.cloudflare.com. To use TURN, you need to create credentials with a expiring TTL value.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/turn/generate-credentials.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Generate Credentials

Cloudflare will issue TURN keys, but these keys cannot be used as credentials with `turn.cloudflare.com`. To use TURN, you need to create credentials with a expiring TTL value.

## Create a TURN key

To create a TURN credential, you first need to create a TURN key using [Dashboard ↗](https://dash.cloudflare.com/?to=/:account/calls), or the [API](https://developers.cloudflare.com/api/resources/calls/subresources/turn/methods/create/).

You should keep your TURN key on the server side (don't share it with the browser/app). A TURN key is a long-term secret that allows you to generate unlimited, shorter lived TURN credentials for TURN clients.

With a TURN key you can:

* Generate TURN credentials that expire
* Revoke previously issued TURN credentials

## Create credentials

You should generate short-lived credentials for each TURN user. In order to create credentials, you should have a back-end service that uses your TURN Token ID and API token to generate credentials. It will make an API call like this:

Terminal window

```

curl https://rtc.live.cloudflare.com/v1/turn/keys/$TURN_KEY_ID/credentials/generate-ice-servers \

--header "Authorization: Bearer $TURN_KEY_API_TOKEN" \

--header "Content-Type: application/json" \

--data '{"ttl": 86400}'


```

The **201 (Created)** response below can then be passed on to your front-end application:

```

{

  "iceServers": [

    {

      "urls": [

        "stun:stun.cloudflare.com:3478",

        "stun:stun.cloudflare.com:53"

      ]

    },

    {

      "urls": [

        "turn:turn.cloudflare.com:3478?transport=udp",

        "turn:turn.cloudflare.com:53?transport=udp",

        "turn:turn.cloudflare.com:3478?transport=tcp",

        "turn:turn.cloudflare.com:80?transport=tcp",

        "turns:turn.cloudflare.com:5349?transport=tcp",

        "turns:turn.cloudflare.com:443?transport=tcp"

      ],

      "username": "bc91b63e2b5d759f8eb9f3b58062439e0a0e15893d76317d833265ad08d6631099ce7c7087caabb31ad3e1c386424e3e",

      "credential": "ebd71f1d3edbc2b0edae3cd5a6d82284aeb5c3b8fdaa9b8e3bf9cec683e0d45fe9f5b44e5145db3300f06c250a15b4a0"

    }

  ]

}


```

Note

The list of returned URLs contains URLs with the primary and alternate ports. The alternate port 53 is known to be blocked by web browsers, and the TURN URL will time out if used in browsers. If you are using trickle ICE, this will not cause issues. Without trickle ICE you might want to filter out the URL with port 53 to avoid waiting for a timeout.

Use `iceServers` as follows when instantiating the `RTCPeerConnection`:

JavaScript

```

const myPeerConnection = new RTCPeerConnection({

  iceServers: [

    {

      urls: [

        "stun:stun.cloudflare.com:3478",

        "stun:stun.cloudflare.com:53"

      ]

    },

    {

      urls: [

        "turn:turn.cloudflare.com:3478?transport=udp",

        "turn:turn.cloudflare.com:53?transport=udp",

        "turn:turn.cloudflare.com:3478?transport=tcp",

        "turn:turn.cloudflare.com:80?transport=tcp",

        "turns:turn.cloudflare.com:5349?transport=tcp",

        "turns:turn.cloudflare.com:443?transport=tcp"

      ],

      "username": "bc91b63e2b5d759f8eb9f3b58062439e0a0e15893d76317d833265ad08d6631099ce7c7087caabb31ad3e1c386424e3e",

      "credential": "ebd71f1d3edbc2b0edae3cd5a6d82284aeb5c3b8fdaa9b8e3bf9cec683e0d45fe9f5b44e5145db3300f06c250a15b4a0"

    },

  ],

});


```

The `ttl` value can be adjusted to expire the short lived key in a certain amount of time. This value should be larger than the time you'd expect the users to use the TURN service. For example, if you're using TURN for a video conferencing app, the value should be set to the longest video call you'd expect to happen in the app.

When using short-lived TURN credentials with WebRTC, credentials can be refreshed during a WebRTC session using the `RTCPeerConnection` [setConfiguration() ↗](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setConfiguration) API.

## Revoke credentials

Short lived credentials can also be revoked before their TTL expires with a API call like this:

Terminal window

```

curl --request POST \

https://rtc.live.cloudflare.com/v1/turn/keys/$TURN_KEY_ID/credentials/$USERNAME/revoke \

--header "Authorization: Bearer $TURN_KEY_API_TOKEN"


```

A **204 (No Content)** response is returned if the credential is successfully revoked.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/turn/","name":"TURN Service"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/turn/generate-credentials/","name":"Generate Credentials"}}]}
```

---

---
title: Replacing existing TURN servers
description: If you are a existing TURN provider but would like to switch to providing Cloudflare Realtime TURN for your customers, there is a few considerations.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/turn/replacing-existing.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Replacing existing TURN servers

If you are a existing TURN provider but would like to switch to providing Cloudflare Realtime TURN for your customers, there is a few considerations.

## Benefits

Cloudflare Realtime TURN service can reduce tangible and untangible costs associated with TURN servers:

* Server costs (AWS EC2 etc)
* Bandwidth costs (Egress, load balancing etc)
* Time and effort to set up a TURN process and maintenance of server
* Scaling the servers up and down
* Maintain the TURN server with security and feature updates
* Maintain high availability

## Recommendations

### Separate environments with TURN keys

When using Cloudflare Realtime TURN service at scale, consider separating environments such as "testing", "staging" or "production" with TURN keys. You can create up to 1,000 TURN keys in your account, which can be used to generate end user credentials.

There is no limit to how many end-user credentials you can create with a particular TURN key.

### Tag users with custom identifiers

Cloudflare Realtime TURN service lets you tag each credential with a custom identifier as you generate a credential like below:

Terminal window

```

curl https://rtc.live.cloudflare.com/v1/turn/keys/$TURN_KEY_ID/credentials/generate \

--header "Authorization: Bearer $TURN_KEY_API_TOKEN" \

--header "Content-Type: application/json" \

--data '{"ttl": 864000, "customIdentifier": "user4523958"}'


```

Use this field to aggregate usage for a specific user or group of users and collect analytics.

### Monitor usage

You can monitor account wide usage with the [GraphQL analytics API](https://developers.cloudflare.com/realtime/turn/analytics/). This is useful for keeping track of overall usage for billing purposes, watching for unexpected changes. You can get timeseries data from TURN analytics with various filters in place.

### Monitor for credential abuse

If you share TURN credentials with end users, credential abuse is possible. You can monitor for abuse by tagging each credential with custom identifiers and monitoring for top custom identifiers in your application via the [GraphQL analytics API](https://developers.cloudflare.com/realtime/turn/analytics/).

## How to bill end users for their TURN usage

When billing for TURN usage in your application, it's crucial to understand and account for adaptive sampling in TURN analytics. This system employs adaptive sampling to efficiently handle large datasets while maintaining accuracy.

The sampling process in TURN analytics works on two levels:

* At data collection: Usage data points may be sampled if they are generated too quickly.
* At query time: Additional sampling may occur if the query is too complex or covers a large time range.

To ensure accurate billing, write a single query that sums TURN usage per customer per time period, returning a single value. Avoid using queries that list usage for multiple customers simultaneously.

By following these guidelines and understanding how TURN analytics handles sampling, you can ensure more accurate billing for your end users based on their TURN usage.

Note

Cloudflare Realtime only bills for traffic from Cloudflare's servers to your client, called `egressBytes`.

### Example queries

Incorrect approach example

Querying TURN usage for multiple customers in a single query can lead to inaccurate results. This is because the usage pattern of one customer could affect the sampling rate applied to another customer's data, potentially skewing the results.

```

query{

  viewer {

    usage: accounts(filter: { accountTag: "8846293bd06d1af8c106d89ec1454fe6" }) {

        callsTurnUsageAdaptiveGroups(

          filter: {

          datetimeMinute_gt: "2024-07-15T02:07:07Z"

          datetimeMinute_lt: "2024-08-10T02:07:05Z"

        }

          limit: 100

          orderBy: [customIdentifier_ASC]

        ) {

          dimensions {

            customIdentifier

          }

          sum {

            egressBytes

          }

        }

      }

    }

  }


```

Below is a query that queries usage only for a single customer.

```

query{

  viewer {

    usage: accounts(filter: { accountTag: "8846293bd06d1af8c106d89ec1454fe6" }) {

        callsTurnUsageAdaptiveGroups(

          filter: {

          datetimeMinute_gt: "2024-07-15T02:07:07Z"

          datetimeMinute_lt: "2024-08-10T02:07:05Z"

          customIdentifier: "myCustomer1111"

        }

          limit: 1

          orderBy: [customIdentifier_ASC]

        ) {

          dimensions {

            customIdentifier

          }

          sum {

            egressBytes

          }

        }

      }

    }

  }


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/turn/","name":"TURN Service"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/turn/replacing-existing/","name":"Replacing existing TURN servers"}}]}
```

---

---
title: TURN Feature Matrix
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/turn/rfc-matrix.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# TURN Feature Matrix

## TURN client to TURN server protocols

| Protocol | Support | Relevant specification                                                                                      |
| -------- | ------- | ----------------------------------------------------------------------------------------------------------- |
| UDP      | ✅       | [RFC 5766 ↗](https://datatracker.ietf.org/doc/html/rfc5766)                                                 |
| TCP      | ✅       | [RFC 5766 ↗](https://datatracker.ietf.org/doc/html/rfc5766)                                                 |
| TLS      | ✅       | [RFC 5766 ↗](https://datatracker.ietf.org/doc/html/rfc5766)                                                 |
| DTLS     | No      | [draft-petithuguenin-tram-turn-dtls-00 ↗](http://tools.ietf.org/html/draft-petithuguenin-tram-turn-dtls-00) |

## TURN client to TURN server protocols

| Protocol                                        | Support                                                                                                                                                               | Relevant specification                                                                                                 |
| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| TURN (base RFC)                                 | ✅                                                                                                                                                                     | [RFC 5766 ↗](https://datatracker.ietf.org/doc/html/rfc5766)                                                            |
| TURN REST API                                   | ✅ (See [FAQ](https://developers.cloudflare.com/realtime/turn/faq/#does-cloudflare-realtime-turn-support-the-expired-ietf-rfc-draft-draft-uberti-behave-turn-rest-00)) | [draft-uberti-behave-turn-rest-00 ↗](http://tools.ietf.org/html/draft-uberti-behave-turn-rest-00)                      |
| Origin field in TURN (Multi-tenant TURN Server) | ✅                                                                                                                                                                     | [draft-ietf-tram-stun-origin-06 ↗](https://tools.ietf.org/html/draft-ietf-tram-stun-origin-06)                         |
| ALPN support for STUN & TURN                    | ✅                                                                                                                                                                     | [RFC 7443 ↗](https://datatracker.ietf.org/doc/html/rfc7443)                                                            |
| TURN Bandwidth draft specs                      | No                                                                                                                                                                    | [draft-thomson-tram-turn-bandwidth-01 ↗](http://tools.ietf.org/html/draft-thomson-tram-turn-bandwidth-01)              |
| TURN-bis (with dual allocation) draft specs     | No                                                                                                                                                                    | [draft-ietf-tram-turnbis-04 ↗](http://tools.ietf.org/html/draft-ietf-tram-turnbis-04)                                  |
| TCP relaying TURN extension                     | No                                                                                                                                                                    | [RFC 6062 ↗](https://datatracker.ietf.org/doc/html/rfc6062)                                                            |
| IPv6 extension for TURN                         | No                                                                                                                                                                    | [RFC 6156 ↗](https://datatracker.ietf.org/doc/html/rfc6156)                                                            |
| oAuth third-party TURN/STUN authorization       | No                                                                                                                                                                    | [RFC 7635 ↗](https://datatracker.ietf.org/doc/html/rfc7635)                                                            |
| DTLS support (for TURN)                         | No                                                                                                                                                                    | [draft-petithuguenin-tram-stun-dtls-00 ↗](https://datatracker.ietf.org/doc/html/draft-petithuguenin-tram-stun-dtls-00) |
| Mobile ICE (MICE) support                       | No                                                                                                                                                                    | [draft-wing-tram-turn-mobility-02 ↗](http://tools.ietf.org/html/draft-wing-tram-turn-mobility-02)                      |

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/turn/","name":"TURN Service"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/turn/rfc-matrix/","name":"TURN Feature Matrix"}}]}
```

---

---
title: What is TURN?
description: TURN (Traversal Using Relays around NAT) is a protocol that assists in traversing Network Address Translators (NATs) or firewalls in order to facilitate peer-to-peer communications. It is an extension of the STUN (Session Traversal Utilities for NAT) protocol and is defined in RFC 8656.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/turn/what-is-turn.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# What is TURN?

## What is TURN?

TURN (Traversal Using Relays around NAT) is a protocol that assists in traversing Network Address Translators (NATs) or firewalls in order to facilitate peer-to-peer communications. It is an extension of the STUN (Session Traversal Utilities for NAT) protocol and is defined in [RFC 8656 ↗](https://datatracker.ietf.org/doc/html/rfc8656).

## How do I use TURN?

Just like you would use a web browser or cURL to use the HTTP protocol, you need to use a tool or a library to use TURN protocol in your application.

Most users of TURN will use it as part of a WebRTC library, such as the one in their browser or part of [Pion ↗](https://github.com/pion/webrtc), [webrtc-rs ↗](https://github.com/webrtc-rs/webrtc) or [libwebrtc ↗](https://webrtc.googlesource.com/src/).

You can use TURN directly in your application too. [Pion ↗](https://github.com/pion/turn) offers a TURN client library in Golang, so does [webrtc-rs ↗](https://github.com/webrtc-rs/webrtc/tree/master/turn) in Rust.

## Key concepts to know when understanding TURN

1. **NAT (Network Address Translation)**: A method used by routers to map multiple private IP addresses to a single public IP address. This is commonly done by home internet routers so multiple computers in the same network can share a single public IP address.
2. **TURN Server**: A relay server that acts as an intermediary for traffic between clients behind NATs. Cloudflare Realtime TURN service is a example of a TURN server.
3. **TURN Client**: An application or device that uses the TURN protocol to communicate through a TURN server. This is your application. It can be a web application using the WebRTC APIs or a native application running on mobile or desktop.
4. **Allocation**: When a TURN server creates an allocation, the TURN server reserves an IP and a port unique to that client.
5. **Relayed Transport Address**: The IP address and port reserved on the TURN server that others on the Internet can use to send data to the TURN client.

## How TURN Works

1. A TURN client sends an Allocate request to a TURN server.
2. The TURN server creates an allocation and returns a relayed transport address to the client.
3. The client can then give this relayed address to its peers.
4. When a peer sends data to the relayed address, the TURN server forwards it to the client.
5. When the client wants to send data to a peer, it sends it through the TURN server, which then forwards it to the peer.

## TURN vs VPN

TURN works similar to a VPN (Virtual Private Network). However TURN servers and VPNs serve different purposes and operate in distinct ways.

A VPN is a general-purpose tool that encrypts all internet traffic from a device, routing it through a VPN server to enhance privacy, security, and anonymity. It operates at the network layer, affects all internet activities, and is often used to bypass geographical restrictions or secure connections on public Wi-Fi.

A TURN server is a specialized tool used by specific applications, particularly for real-time communication. It operates at the application layer, only affecting traffic for applications that use it, and serves as a relay to traverse NATs and firewalls when direct connections between peers are not possible. While a VPN impacts overall internet speed and provides anonymity, a TURN server only affects the performance of specific applications using it.

## Why is TURN Useful?

TURN is often valuable in scenarios where direct peer-to-peer communication is impossible due to NAT or firewall restrictions. Here are some key benefits:

1. **NAT Traversal**: TURN provides a way to establish connections between peers that are both behind NATs, which would otherwise be challenging or impossible.
2. **Firewall Bypassing**: In environments with strict firewall policies, TURN can enable communication that would otherwise be blocked.
3. **Consistent Connectivity**: TURN offers a reliable fallback method when direct or NAT-assisted connections fail.
4. **Privacy**: By relaying traffic through a TURN server, the actual IP addresses of the communicating parties can be hidden from each other.
5. **VoIP and Video Conferencing**: TURN is crucial for applications like Voice over IP (VoIP) and video conferencing, ensuring reliable connections regardless of network configuration.
6. **Online Gaming**: TURN can help online games establish peer-to-peer connections between players behind different types of NATs.
7. **IoT Device Communication**: Internet of Things (IoT) devices can use TURN to communicate when they're behind NATs or firewalls.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/turn/","name":"TURN Service"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/turn/what-is-turn/","name":"What is TURN?"}}]}
```

---

---
title: Getting started
description: Deploy your first Realtime Agent using the CLI.
image: https://developers.cloudflare.com/dev-products-preview.png
---

[Skip to content](#%5Ftop) 

Was this helpful?

YesNo

[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/realtime/agents/getting-started.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) 

Copy page

# Getting started

Warning

This guide is experimental, Realtime agents will be consolidated into the [Agents SDK](https://developers.cloudflare.com/agents/) in a future release

This guide will instruct you through setting up and deploying your first Realtime Agents project. You will use [Workers](https://developers.cloudflare.com/workers/), the Realtime Agents SDK, a Workers AI binding, and a large language model (LLM) to deploy your first AI-powered application on the Cloudflare global network.

1. Sign up for a [Cloudflare account ↗](https://dash.cloudflare.com/sign-up/workers-and-pages).
2. Install [Node.js ↗](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).

Node.js version manager

Use a Node version manager like [Volta ↗](https://volta.sh/) or [nvm ↗](https://github.com/nvm-sh/nvm) to avoid permission issues and change Node.js versions. [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/), discussed later in this guide, requires a Node version of `16.17.0` or later.

## 1\. Create a Worker project

You will create a new Worker project using the `create-cloudflare` CLI (C3). [C3 ↗](https://github.com/cloudflare/workers-sdk/tree/main/packages/create-cloudflare) is a command-line tool designed to help you set up and deploy new applications to Cloudflare.

Create a new project named `hello-agent` by running:

 npm  yarn  pnpm 

```
npm create cloudflare@latest -- hello-agent
```

```
yarn create cloudflare hello-agent
```

```
pnpm create cloudflare@latest hello-agent
```

Running `npm create cloudflare@latest` will prompt you to install the [create-cloudflare package ↗](https://www.npmjs.com/package/create-cloudflare), and lead you through setup. C3 will also install [Wrangler](https://developers.cloudflare.com/workers/wrangler/), the Cloudflare Developer Platform CLI.

For setup, select the following options:

* For _What would you like to start with?_, choose `Hello World example`.
* For _Which template would you like to use?_, choose `Worker only`.
* For _Which language do you want to use?_, choose `TypeScript`.
* For _Do you want to use git for version control?_, choose `Yes`.
* For _Do you want to deploy your application?_, choose `No` (we will be making some changes before deploying).

This will create a new `hello-agent` directory. Your new `hello-agent` directory will include:

* A `"Hello World"` [Worker](https://developers.cloudflare.com/workers/get-started/guide/#3-write-code) at `src/index.ts`.
* A [wrangler.jsonc](https://developers.cloudflare.com/workers/wrangler/configuration/) configuration file.

Go to your application directory:

Terminal window

```

cd hello-agent


```

## 2\. Install the Realtime Agents SDK

Terminal window

```

npm i @cloudflare/realtime-agents


```

## 3\. Connect your Worker to Workers AI

You must create an AI binding for your Worker to connect to Workers AI. [Bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/) allow your Workers to interact with resources, like Workers AI, on the Cloudflare Developer Platform.

To bind Workers AI to your Worker, add the following to the end of your Wrangler file:

* [  wrangler.jsonc ](#tab-panel-5961)
* [  wrangler.toml ](#tab-panel-5962)

```

{

  "ai": {

    "binding": "AI"

  }

}


```

```

[ai]

binding = "AI"


```

Your binding is [available in your Worker code](https://developers.cloudflare.com/workers/reference/migrate-to-module-workers/#bindings-in-es-modules-format) on [env.AI](https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/).

## 4\. Implement the Worker

Update the `index.ts` file in your `hello-agent` application directory with the following code:

* [  JavaScript ](#tab-panel-5963)
* [  TypeScript ](#tab-panel-5964)

index.js

```

import {

  DeepgramSTT,

  TextComponent,

  RealtimeKitTransport,

  ElevenLabsTTS,

  RealtimeAgent,

} from "@cloudflare/realtime-agents";


class MyTextProcessor extends TextComponent {

  env;


  constructor(env) {

    super();

    this.env = env;

  }


  async onTranscript(text, reply) {

    const { response } = await this.env.AI.run(

      "@cf/meta/llama-3.1-8b-instruct",

      {

        prompt: text,

      },

    );

    reply(response);

  }

}


export class MyAgent extends RealtimeAgent {

  constructor(ctx, env) {

    super(ctx, env);

  }


  async init(agentId, meetingId, authToken, workerUrl, accountId, apiToken) {

    // Construct your text processor for generating responses to text

    const textProcessor = new MyTextProcessor(this.env);

    // Construct a Meeting object to join the RTK meeting

    const rtkTransport = new RealtimeKitTransport(meetingId, authToken);


    // Construct a pipeline to take in meeting audio, transcribe it using

    // Deepgram, and pass our generated responses through ElevenLabs to

    // be spoken in the meeting

    await this.initPipeline(

      [

        rtkTransport,

        new DeepgramSTT(this.env.DEEPGRAM_API_KEY),

        textProcessor,

        new ElevenLabsTTS(this.env.ELEVENLABS_API_KEY),

        rtkTransport,

      ],

      agentId,

      workerUrl,

      accountId,

      apiToken,

    );


    const { meeting } = rtkTransport;


    // The RTK meeting object is accessible to us, so we can register handlers

    // on various events like participant joins/leaves, chat, etc.

    // This is optional

    meeting.participants.joined.on("participantJoined", (participant) => {

      textProcessor.speak(`Participant Joined ${participant.name}`);

    });

    meeting.participants.joined.on("participantLeft", (participant) => {

      textProcessor.speak(`Participant Left ${participant.name}`);

    });


    // Make sure to actually join the meeting after registering all handlers

    await meeting.join();

  }


  async deinit() {

    // Add any other cleanup logic required

    await this.deinitPipeline();

  }

}


export default {

  async fetch(request, env, _ctx) {

    const url = new URL(request.url);

    const meetingId = url.searchParams.get("meetingId");

    if (!meetingId) {

      return new Response(null, { status: 400 });

    }


    const agentId = meetingId;

    const agent = env.MY_AGENT.idFromName(meetingId);

    const stub = env.MY_AGENT.get(agent);

    // The fetch method is implemented for handling internal pipeline logic

    if (url.pathname.startsWith("/agentsInternal")) {

      return stub.fetch(request);

    }


    // Your logic continues here

    switch (url.pathname) {

      case "/init":

        // This is the authToken for joining a meeting, it can be passed

        // in query parameters as well if needed

        const authHeader = request.headers.get("Authorization");

        if (!authHeader) {

          return new Response(null, { status: 401 });

        }


        // We just need the part after `Bearer `

        await stub.init(

          agentId,

          meetingId,

          authHeader.split(" ")[1],

          url.host,

          env.ACCOUNT_ID,

          env.API_TOKEN,

        );


        return new Response(null, { status: 200 });

      case "/deinit":

        await stub.deinit();

        return new Response(null, { status: 200 });

    }


    return new Response(null, { status: 404 });

  },

};


```

index.ts

```

import { DeepgramSTT, TextComponent, RealtimeKitTransport, ElevenLabsTTS, RealtimeAgent } from '@cloudflare/realtime-agents';


class MyTextProcessor extends TextComponent {

  env: Env;


  constructor(env: Env) {

    super();

    this.env = env;

  }


  async onTranscript(text: string, reply: (text: string) => void) {

    const { response } = await this.env.AI.run('@cf/meta/llama-3.1-8b-instruct', {

      prompt: text,

    });

    reply(response!);

  }

}


export class MyAgent extends RealtimeAgent<Env> {

  constructor(ctx: DurableObjectState, env: Env) {

    super(ctx, env);

  }


  async init(agentId: string, meetingId: string, authToken: string, workerUrl: string, accountId: string, apiToken: string) {

    // Construct your text processor for generating responses to text

    const textProcessor = new MyTextProcessor(this.env);

    // Construct a Meeting object to join the RTK meeting

    const rtkTransport = new RealtimeKitTransport(meetingId, authToken);


    // Construct a pipeline to take in meeting audio, transcribe it using

    // Deepgram, and pass our generated responses through ElevenLabs to

    // be spoken in the meeting

    await this.initPipeline(

      [

        rtkTransport,

        new DeepgramSTT(this.env.DEEPGRAM_API_KEY),

        textProcessor,

        new ElevenLabsTTS(this.env.ELEVENLABS_API_KEY),

        rtkTransport,

      ],

      agentId,

      workerUrl,

      accountId,

      apiToken,

    );


    const { meeting } = rtkTransport;


    // The RTK meeting object is accessible to us, so we can register handlers

    // on various events like participant joins/leaves, chat, etc.

    // This is optional

    meeting.participants.joined.on('participantJoined', (participant) => {

      textProcessor.speak(`Participant Joined ${participant.name}`);

    });

    meeting.participants.joined.on('participantLeft', (participant) => {

      textProcessor.speak(`Participant Left ${participant.name}`);

    });


    // Make sure to actually join the meeting after registering all handlers

    await meeting.join();

  }


  async deinit() {

    // Add any other cleanup logic required

    await this.deinitPipeline();

  }

}


export default {

  async fetch(request, env, _ctx): Promise<Response> {

    const url = new URL(request.url);

    const meetingId = url.searchParams.get('meetingId');

    if (!meetingId) {

      return new Response(null, { status: 400 });

    }


    const agentId = meetingId;

    const agent = env.MY_AGENT.idFromName(meetingId);

    const stub = env.MY_AGENT.get(agent);

    // The fetch method is implemented for handling internal pipeline logic

    if (url.pathname.startsWith('/agentsInternal')) {

      return stub.fetch(request);

    }


    // Your logic continues here

    switch (url.pathname) {

      case '/init':

        // This is the authToken for joining a meeting, it can be passed

        // in query parameters as well if needed

        const authHeader = request.headers.get('Authorization');

        if (!authHeader) {

          return new Response(null, { status: 401 });

        }


        // We just need the part after `Bearer `

        await stub.init(agentId, meetingId, authHeader.split(' ')[1], url.host, env.ACCOUNT_ID, env.API_TOKEN);


        return new Response(null, { status: 200 });

      case '/deinit':

        await stub.deinit();

        return new Response(null, { status: 200 });

    }


    return new Response(null, { status: 404 });

  },

} satisfies ExportedHandler<Env>;


```

The Realtime Agents SDK provides several elements that work together to create an end-to-end pipeline

* `RealtimeKitTransport`: Represents a RealtimeKit meeting that will be joined by the agent
* `DeepgramSTT`: Takes in meeting audio and provides transcripts powered by Deepgram
* `TextComponent`: A concrete implementation for this element needs to be provided by the user as it is responsible for processing the text generated in the meeting and sending back responses. We have implemented it in the `MyTextProcessor` class
* `ElevenLabsTTS`: Converts the generated responses to audio to be spoken in the meeting

We use all of these elements together to create a simple chatbot-like pipeline. As a pre-requisite, we require the meeting ID to be joined along with an authorization token for joining the meeting, which is passed during the worker invocation. Additionally, our class must extend `RealtimeAgent` as it contains certain internal logic to handle interactions with our pipeline backend

In `wrangler.jsonc`, append the following fields to enable the [Node.js Compatibility ↗](https://developers.cloudflare.com/workers/runtime-apis/nodejs/) flag and create our Durable Object:

```

  "compatibility_flags": ["nodejs_compat"],

  "migrations": [

    {

      "new_sqlite_classes": ["MyAgent"],

      "tag": "v1",

    },

  ],

  "durable_objects": {

    "bindings": [

      {

        "class_name": "MyAgent",

        "name": "MY_AGENT",

      },

    ],

  },


```

You must also setup a few [secrets ↗](https://developers.cloudflare.com/workers/configuration/secrets/):

* `ACCOUNT_ID`: Your Cloudflare account ID
* `API_TOKEN`: Cloudflare API token scoped for `Admin` access to `Realtime`
* `ELEVENLABS_API_KEY`, `DEEPGRAM_API_KEY`: ElevenLabs & Deepgram API keys

## 5\. Deploy your AI Worker

Before deploying your AI Worker globally, log in with your Cloudflare account by running:

Terminal window

```

npx wrangler login


```

You will be directed to a web page asking you to log in to the Cloudflare dashboard. After you have logged in, you will be asked if Wrangler can make changes to your Cloudflare account. Scroll down and select **Allow** to continue.

Finally, deploy your Worker to make your project accessible on the Internet. To deploy your Worker, run:

Terminal window

```

npx wrangler deploy


```

```

https://hello-agent.<YOUR_SUBDOMAIN>.workers.dev


```

## 6\. Generate a RealtimeKit token

Finally, to invoke the worker, we need to generate a RealtimeKit token from the [dashboard ↗](https://dash.realtime.cloudflare.com/dashboard):

1. Go to the `Meetings` tab and click on `Create Meeting`:
![Meetings Tab](https://developers.cloudflare.com/_astro/create-meeting.Bb-QE-kr_ZK6Lqz.webp) 
1. Click on `Join` next to the meeting and generate the RealtimeKit link. This contains the `meetingId` (`bbbb2fac-953c-4239-9ba8-75ba912d76fc`) and the `authToken` to be passed in the final step:

`https://demo.realtime.cloudflare.com/v2/meeting?id=bbbb2fac-953c-4239-9ba8-75ba912d76fc&authToken=ey...`

![Join Flow](https://developers.cloudflare.com/_astro/join-meeting.BktFJKMb_24O415.webp) 
1. Repeat the same `Join` flow to join the meeting yourself before adding in the Agent

Finally, invoke the worker to make the agent join a meeting:

Terminal window

```

curl -X POST https://hello-agent.<YOUR_SUBDOMAIN>.workers.dev/init?meetingId=<REALTIME_KIT_MEETING_ID> -H "Authorization: Bearer <REALTIME_KIT_AUTH_TOKEN>"


```

## Related resources

* [Cloudflare Developers community on Discord ↗](https://discord.cloudflare.com) \- Submit feature requests, report bugs, and share your feedback directly with the Cloudflare team by joining the Cloudflare Discord server.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/agents/","name":"Realtime Agents"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/agents/getting-started/","name":"Getting started"}}]}
```