---
description: Build scalable real-time applications with Cloudflare Realtime products including RealtimeKit, SFU, and TURN.
title: Cloudflare Realtime
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Cloudflare Realtime

Last updated Jul 28, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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/#build-with-realtimekit)

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/#page","headline":"Overview · Cloudflare Realtime docs","description":"Build scalable real-time applications with Cloudflare Realtime products including RealtimeKit, SFU, and TURN.","url":"https://developers.cloudflare.com/realtime/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-28","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Add live video and voice to web or mobile apps with RealtimeKit SDKs and APIs.
title: RealtimeKit
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RealtimeKit

Last updated Jun 12, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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://examples.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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/#page","headline":"Overview · Cloudflare Realtime docs","description":"Add live video and voice to web or mobile apps with RealtimeKit SDKs and APIs.","url":"https://developers.cloudflare.com/realtime/realtimekit/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-12","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Add AI-powered transcription and summarization to RealtimeKit meetings.
title: AI
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# AI

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ai/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

Turn on post-meeting transcription and automatic summaries when creating a meeting:

```json
{
	"title": "Team Standup",
	"transcribe_on_end": true,
	"summarize_on_end": true,
	"ai_config": {
		"transcription": {
			"language": "en"
		},
		"summarization": {
			"word_limit": 500,
			"text_format": "markdown",
			"summary_type": "team_meeting"
		}
	}
}
```

Use `transcribe_on_end` for post-meeting transcripts. Use `summarize_on_end` for AI-generated summaries. For real-time transcription, make sure 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** after the meeting ends
* Files are stored in R2 with presigned URLs for secure access
* Delivered via [webhooks](https://developers.cloudflare.com/realtime/realtimekit/webhooks/) or REST API

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ai/#page","headline":"AI · Cloudflare Realtime docs","description":"Add AI-powered transcription and summarization to RealtimeKit meetings.","url":"https://developers.cloudflare.com/realtime/realtimekit/ai/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Generate AI-powered meeting summaries from transcript data in RealtimeKit.
title: Summary
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Summary

Last updated Jun 8, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ai/summary/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

RealtimeKit generates AI-powered meeting summaries from transcript data.

Note

Summarization requires a transcript. To generate summaries automatically when a meeting ends, turn on [real-time transcription](https://developers.cloudflare.com/realtime/realtimekit/ai/transcription/#real-time-transcription) or [post-meeting transcription](https://developers.cloudflare.com/realtime/realtimekit/ai/transcription/#post-meeting-transcription), and set `summarize_on_end: true`. With post-meeting transcription, RealtimeKit generates the summary after the transcript is available.

## Turn on summarization

Set `summarize_on_end: true` when [creating a meeting](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/create/). For post-meeting summaries, also set `transcribe_on_end: true` so RealtimeKit generates the summary automatically after the transcript is available:

```bash
curl -X POST "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings" \
  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Product Review",
    "transcribe_on_end": true,
    "summarize_on_end": true,
    "ai_config": {
      "transcription": {
        "language": "en-US"
      },
      "summarization": {
        "word_limit": 500,
        "text_format": "markdown",
        "summary_type": "team_meeting"
      }
    }
  }'
```

## Configuration

| Option        | Type   | Default  | Description                            |
| ------------- | ------ | -------- | -------------------------------------- |
| word\_limit   | number | 500      | Summary length (150-1000 words)        |
| text\_format  | string | markdown | 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 the `meeting.summary` event in [RealtimeKit webhooks](https://developers.cloudflare.com/realtime/realtimekit/webhooks/#meetingsummary) to receive the summary download URL when it is ready:

```json
{
	"event": "meeting.summary",
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	},
	"summaryDownloadUrl": "https://example.com/summary.txt",
	"summaryDownloadUrlExpiry": "2026-06-10T10:30:00.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/).

```bash
curl -X GET "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID/summary" \
  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Trigger manually

Use the [Generate summary of transcripts for the session](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/sessions/methods/generate%5Fsummary%5Fof%5Ftranscripts/) API if `summarize_on_end` was not set and you want to generate a summary manually after the transcript is available.

```bash
curl -X POST "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID/summary" \
  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

## Example output

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

```markdown
## 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** after the meeting ends.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ai/summary/#page","headline":"Summary · Cloudflare Realtime docs","description":"Generate AI-powered meeting summaries from transcript data in RealtimeKit.","url":"https://developers.cloudflare.com/realtime/realtimekit/ai/summary/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-08","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Turn on real-time and post-meeting speech-to-text transcription in RealtimeKit.
title: Transcription
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Transcription

Last updated Jun 8, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ai/transcription/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

RealtimeKit provides two transcription modes powered by [Cloudflare Workers AI](https://developers.cloudflare.com/workers-ai/):

| Mode                                            | Model                                                                                                 | Processing time        | Use case                                                                                                             |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
| [**Real-time**](#real-time-transcription)       | [Deepgram Nova-3](https://developers.cloudflare.com/workers-ai/models/nova-3/)                        | During the meeting     | Live captions for attendees                                                                                          |
| [**Post-meeting**](#post-meeting-transcription) | [Whisper Large v3 Turbo](https://developers.cloudflare.com/workers-ai/models/whisper-large-v3-turbo/) | After the meeting ends | [Transcript files](#output-formats) and [webhooks](https://developers.cloudflare.com/realtime/realtimekit/webhooks/) |

RealtimeKit processes each participant audio stream separately. This helps identify each speaker in the final transcript.

We recommend upgrading to the Workers Paid plan to avoid Workers AI processing limits on the Free plan. Learn more in [Billing and Free plan limits](#billing-and-free-plan-limits).

## Real-time transcription

Real-time transcription streams participant audio to [Deepgram Nova-3](https://developers.cloudflare.com/workers-ai/models/nova-3/) on Workers AI and sends [transcript events](#consume-real-time-transcripts) to meeting participants during the meeting.

### Turn on real-time transcription

You can turn on real-time transcription for participants by setting `permissions.transcription_enabled: true` in the participant's [preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/). This lets you decide which participant audio is transcribed. For example, you can transcribe speaker audio without transcribing audience audio.

To update an existing preset, use the [Update a preset API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/presets/methods/update/):

```bash
curl -X PATCH "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/presets/$PRESET_ID" \
  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "permissions": {
      "transcription_enabled": true
    }
  }'
```

To create a preset, refer to the [Create a preset API reference](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/presets/methods/create/).

RealtimeKit transcribes audio only for participants who join with a preset that has `permissions.transcription_enabled: true`.

During the meeting, RealtimeKit streams transcript updates to the client SDK. To access existing transcripts from `meeting.ai.transcripts` or listen for new transcript events with `meeting.ai.on("transcript", ...)`, refer to [Consume real-time transcripts](#consume-real-time-transcripts).

### Configure transcription settings

The preset controls whose audio is transcribed. The meeting configuration controls how RealtimeKit transcribes that audio. Use `ai_config.transcription` to set the [spoken language](#real-time-supported-languages), boost recognition for custom terms, and control profanity filtering for a specific meeting.

```bash
curl -X POST "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings" \
  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Weekly product review",
    "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                  |

### Real-time 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 real-time transcripts

Real-time transcription sends interim and final transcript updates to the client SDK. Use interim updates for live captions, and use final updates for transcript history or saved UI state.

#### Client SDK

```js
// Get transcript entries already received by the client.
const transcripts = meeting.ai.transcripts;

// Listen for transcript updates during the meeting.
meeting.ai.on("transcript", (transcript) => {
	if (transcript.isPartialTranscript) {
		updateLiveCaption(transcript.peerId, transcript.transcript);
		return;
	}

	appendFinalTranscript(transcript);
});
```

#### Transcript payload

```json
{
	"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,
	"timestamp": 1716700000000
}
```

| Field               | Description                                                   |
| ------------------- | ------------------------------------------------------------- |
| id                  | Unique transcript entry ID                                    |
| name                | Display name of the participant who spoke                     |
| peerId              | Peer ID of the participant who spoke. Changes if they rejoin. |
| userId              | Persistent participant ID                                     |
| customParticipantId | Participant identifier set when the participant was added     |
| transcript          | Transcribed text                                              |
| isPartialTranscript | true for interim updates, false for final updates             |
| timestamp           | Unix epoch timestamp in milliseconds                          |

---

## Post-meeting transcription

Post-meeting transcription generates a transcript after the meeting ends using [Whisper Large v3 Turbo](https://developers.cloudflare.com/workers-ai/models/whisper-large-v3-turbo/) on Workers AI and delivers it through a [webhook](https://developers.cloudflare.com/realtime/realtimekit/webhooks/) or [REST API](#rest-api). To identify speakers, RealtimeKit processes each participant's audio separately before creating the [final transcript](#output-formats).

### Turn on post-meeting transcription

You can turn on post-meeting transcription when you create a meeting. Set `transcribe_on_end: true` to generate a transcript after the meeting ends. To also generate a [summary](https://developers.cloudflare.com/realtime/realtimekit/ai/summary/) automatically after the transcript is available, set `summarize_on_end: true`.

```bash
curl -X POST "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings" \
  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Weekly product review",
    "transcribe_on_end": true,
    "summarize_on_end": true,
    "ai_config": {
      "transcription": {
        "language": "en"
      }
    }
  }'
```

Use `ai_config.transcription.language` to set the transcript language. For supported values, refer to [Post-meeting supported languages](#post-meeting-supported-languages). If `transcribe_on_end` is not set, RealtimeKit does not generate a post-meeting transcript.

### Post-meeting supported languages

Post-meeting transcription supports [Whisper Large v3 Turbo](https://developers.cloudflare.com/workers-ai/models/whisper-large-v3-turbo/) language codes. Omit `ai_config.transcription.language` to let Whisper detect the spoken language.

Common language codes include:

| Language | Code | Language | Code | Language   | Code |
| -------- | ---- | -------- | ---- | ---------- | ---- |
| English  | en   | Spanish  | es   | French     | fr   |
| German   | de   | Hindi    | hi   | Portuguese | pt   |
| Japanese | ja   | Italian  | it   | Dutch      | nl   |
| Russian  | ru   | Chinese  | zh   | Cantonese  | yue  |

Additional post-meeting language codes

| Language          | Code |
| ----------------- | ---- |
| Afrikaans         | af   |
| Albanian          | sq   |
| Amharic           | am   |
| Arabic            | ar   |
| Assamese          | as   |
| Azerbaijani       | az   |
| Bashkir           | ba   |
| Basque            | eu   |
| Belarusian        | be   |
| Bengali           | bn   |
| Bosnian           | bs   |
| Breton            | br   |
| Bulgarian         | bg   |
| Catalan           | ca   |
| Croatian          | hr   |
| Czech             | cs   |
| Danish            | da   |
| Estonian          | et   |
| Faroese           | fo   |
| Finnish           | fi   |
| Galician          | gl   |
| Georgian          | ka   |
| Greek             | el   |
| Gujarati          | gu   |
| Haitian Creole    | ht   |
| Hausa             | ha   |
| Hawaiian          | haw  |
| Hebrew            | he   |
| Hungarian         | hu   |
| Icelandic         | is   |
| Indonesian        | id   |
| Javanese          | jw   |
| Kannada           | kn   |
| Kazakh            | kk   |
| Khmer             | km   |
| Korean            | ko   |
| Lao               | lo   |
| Latin             | la   |
| Latvian           | lv   |
| Lingala           | ln   |
| Lithuanian        | lt   |
| Luxembourgish     | lb   |
| Macedonian        | mk   |
| Malagasy          | mg   |
| Malay             | ms   |
| Malayalam         | ml   |
| Maltese           | mt   |
| Maori             | mi   |
| Marathi           | mr   |
| Mongolian         | mn   |
| Myanmar           | my   |
| Nepali            | ne   |
| Norwegian         | no   |
| Norwegian Nynorsk | nn   |
| Occitan           | oc   |
| Pashto            | ps   |
| Persian           | fa   |
| Polish            | pl   |
| Punjabi           | pa   |
| Romanian          | ro   |
| Sanskrit          | sa   |
| Serbian           | sr   |
| Shona             | sn   |
| Sindhi            | sd   |
| Sinhala           | si   |
| Slovak            | sk   |
| Slovenian         | sl   |
| Somali            | so   |
| Sundanese         | su   |
| Swahili           | sw   |
| Swedish           | sv   |
| Tagalog           | tl   |
| Tajik             | tg   |
| Tamil             | ta   |
| Tatar             | tt   |
| Telugu            | te   |
| Thai              | th   |
| Tibetan           | bo   |
| Turkmen           | tk   |
| Turkish           | tr   |
| Ukrainian         | uk   |
| Urdu              | ur   |
| Uzbek             | uz   |
| Vietnamese        | vi   |
| Welsh             | cy   |
| Yiddish           | yi   |
| Yoruba            | yo   |

### Output formats

Post-meeting transcripts are available in multiple formats. Use CSV or JSON for application workflows, and use SRT or VTT when you need subtitle files.

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

#### Examples

```csv
"1000","peer-123","user-456","cust-789","Alice","Hello everyone"
"3000","peer-234","user-567","cust-890","Bob","Hi Alice"
```

CSV rows use the following field order: start time in milliseconds, peer ID, user ID, custom participant ID, participant name, and transcript text.

```json
[
	{
		"startTime": 1000,
		"endTime": 2500,
		"sentence": "Hello everyone",
		"peerData": {
			"id": "peer-123",
			"userId": "user-456",
			"displayName": "Alice",
			"cpi": "cust-789",
			"joinedAt": "2024-08-07T10:15:29.000Z",
			"leftAt": ""
		}
	}
]
```

```txt
1
00:00:01,000 --> 00:00:02,500
Alice: Hello everyone

2
00:00:03,000 --> 00:00:04,500
Bob: Hi Alice
```

### Consume post-meeting transcripts

After RealtimeKit finishes processing a post-meeting transcript, you can receive the transcript download URL through a webhook or fetch it with the REST API. Use webhooks for asynchronous backend workflows, and use the REST API when you need to retrieve the transcript for a specific session.

#### Webhook

Configure the `meeting.transcript` event in [RealtimeKit webhooks](https://developers.cloudflare.com/realtime/realtimekit/webhooks/#meetingtranscript):

```json
{
	"event": "meeting.transcript",
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"title": "Weekly sync",
		"endedAt": "2026-06-03T10:30:00.000Z",
		"createdAt": "2026-06-03T10:00:00.000Z",
		"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
		"startedAt": "2026-06-03T10:00:00.000Z",
		"status": "LIVE",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	},
	"transcriptDownloadUrl": "https://example.com/transcript.csv",
	"transcriptDownloadUrlExpiry": "2026-06-10T10:30:00.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/).

```bash
curl -X GET "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID/transcript" \
  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Transcript availability

Transcripts are available for **7 days** after the meeting ends. Download or copy transcript files before the URL expiry time returned by the webhook or REST API.

## Billing and Free plan limits

RealtimeKit's default transcription records each participant's audio track and processes it with Workers AI. Workers AI usage is billed to your Cloudflare account using [audio model pricing](https://developers.cloudflare.com/workers-ai/platform/pricing/#audio-model-pricing), which scales by participant audio minutes, not meeting duration.

On the Workers Free plan, Workers AI includes 10,000 Neurons per day. To use more than 10,000 Neurons per day, upgrade to the [Workers Paid plan](https://developers.cloudflare.com/workers/platform/pricing/#workers). Workers Paid includes the same 10,000 daily free Neurons, then bills additional usage at `$0.011` per 1,000 Neurons.

You can upgrade to the Workers Paid plan in the Cloudflare dashboard under **Manage account**.

RealtimeKit transcription uses these Workers AI audio model rates:

| Transcription mode | Workers AI model                  | Neurons per audio minute |
| ------------------ | --------------------------------- | ------------------------ |
| Post-meeting       | @cf/openai/whisper-large-v3-turbo | 46.63                    |
| Real-time          | @cf/deepgram/nova-3 WebSocket     | 836.36                   |

## Data processing and storage

RealtimeKit transcription is a managed transcription workflow. When transcription is turned on, RealtimeKit processes participant audio with Workers AI and stores [transcript outputs](#output-formats) in RealtimeKit-managed storage.

For real-time transcription, RealtimeKit streams audio from participants with transcription turned on to Workers AI and sends transcript updates to meeting participants during the meeting.

For post-meeting transcription, RealtimeKit processes each participant's audio separately after the meeting ends, creates the final transcript files, and makes them available through a webhook or REST API.

Storage for sensitive workloads

Post-meeting transcription uses RealtimeKit-managed storage for intermediate participant audio tracks and transcript outputs. If you configured external storage for regular recordings, that storage configuration is not used for transcription processing.

For workloads with stricter storage, retention, or processing requirements, use [RealtimeKit recording with custom cloud storage](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/custom-cloud-storage/) instead of managed transcription. You can then run your own transcription pipeline with your preferred infrastructure, access controls, and retention policy.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ai/transcription/#page","headline":"Transcription · Cloudflare Realtime docs","description":"Turn on real-time and post-meeting speech-to-text transcription in RealtimeKit.","url":"https://developers.cloudflare.com/realtime/realtimekit/ai/transcription/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-08","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Build audio-only experiences like voice rooms and support lines with RealtimeKit.
title: Audio Only Calls
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Audio Only Calls

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/audio-calls/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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/).

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/audio-calls/#page","headline":"Audio Only Calls · Cloudflare Realtime docs","description":"Build audio-only experiences like voice rooms and support lines with RealtimeKit.","url":"https://developers.cloudflare.com/realtime/realtimekit/audio-calls/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Choose the right video resolution, simulcast settings, and frame rate for your RealtimeKit use case to optimize quality and bandwidth.
title: Video resolution and simulcast
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Video resolution and simulcast

Last updated Jun 12, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/best-practices/video-and-simulcast/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Configure video resolution, simulcast, and frame rate in RealtimeKit to balance quality against bandwidth. The right settings depend on your grid layout, participant count, and use case.

Note

Bitrate estimates on this page are approximate ranges for typical WebRTC video. The lower end of each range reflects low-motion content such as a talking head. The upper end reflects high-motion content such as gaming, virtual property tours, or fitness classes. Actual bitrate varies with codec, scene complexity, and encoder settings.

## Choose the right resolution for your layout

Video resolution directly affects bandwidth and CPU usage. Sending higher resolution than the display tile requires wastes upload bandwidth and decoding resources on every receiver.

Configure the video resolution in your [preset](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/) based on the layout each participant type will see.

### 1:1 calls (two participants)

Each participant occupies a large portion of the screen. Use `1280×720` (720p) as the default. For use cases where visual detail matters — coaching sessions, design reviews, or remote consultations — use `1920×1080` (1080p).

Turn off simulcast for 1:1 calls. With only one receiver, encoding multiple layers adds CPU cost with no benefit.

In a 1:1 call, each participant uploads one stream and downloads one stream. Upload and download bandwidth are equal.

The following table shows per-participant bandwidth and hourly data transfer at 24 FPS for a 1:1 call:

| Resolution        | Bitrate (upload = download) | Upload per hour | Download per hour |
| ----------------- | --------------------------- | --------------- | ----------------- |
| 1280×720 (720p)   | 1.5–6 Mbps                  | 675 MB–2.7 GB   | 675 MB–2.7 GB     |
| 1920×1080 (1080p) | 3.5–14 Mbps                 | 1.6–6.3 GB      | 1.6–6.3 GB        |

### Podcast or broadcast (one to two speakers)

When one or two speakers are the primary focus, push resolution higher. Use `1920×1080` (1080p) as the baseline. Use `3840×2160` (4K) when the host has sufficient upload bandwidth and the content benefits from high fidelity — product showcases, studio interviews, or live art demonstrations.

Turn on simulcast so that viewers on constrained networks automatically receive a lower layer.

The following table shows per-sender upload bandwidth and hourly data transfer at 24 FPS:

| Resolution        | Sender upload bitrate | Sender upload per hour |
| ----------------- | --------------------- | ---------------------- |
| 1920×1080 (1080p) | 3.5–14 Mbps           | 1.6–6.3 GB             |
| 3840×2160 (4K)    | 14–56 Mbps            | 6.3–25.2 GB            |

Each viewer downloads one stream. The download bitrate matches the sender upload bitrate, or a lower simulcast layer if the viewer's network is constrained.

Caution

4K requires 14–56 Mbps upload bandwidth per sender depending on scene complexity. Verify that the host network supports this before selecting it in the preset.

### Small group grid (3×3, nine participants)

In a 3×3 grid, each tile is roughly one-third of the screen width. Turn on simulcast and set the sending resolution to `640×480` (480p).

Each participant uploads one stream and downloads eight streams (one from each other participant). The following table shows per-participant bandwidth and hourly data transfer at 24 FPS:

| Resolution     | Upload bitrate (one stream) | Upload per hour | Download bitrate (8 streams) | Download per hour |
| -------------- | --------------------------- | --------------- | ---------------------------- | ----------------- |
| 640×480 (480p) | 500 Kbps–2 Mbps             | 225–900 MB      | 4–16 Mbps                    | 1.8–7.2 GB        |

### Large grids (4×4, 5×5, 6×4, or more)

With 16 or more visible tiles, each tile is small. Set the sending resolution to `320×240` (240p) and turn on simulcast.

Each participant uploads one stream and downloads one stream from every other participant. The following table shows per-participant bandwidth for a 4×4 grid (16 participants, 15 incoming streams) at 24 FPS:

| Resolution        | Upload bitrate (one stream) | Upload per hour | Download bitrate (15 streams) | Download per hour |
| ----------------- | --------------------------- | --------------- | ----------------------------- | ----------------- |
| 320×240 (240p)    | 130–520 Kbps                | 58–234 MB       | 1.9–7.8 Mbps                  | 870 MB–3.5 GB     |
| 640×480 (480p)    | 500 Kbps–2 Mbps             | 225–900 MB      | 7.5–30 Mbps                   | 3.4–13.5 GB       |
| 1280×720 (720p)   | 1.5–6 Mbps                  | 675 MB–2.7 GB   | 22.5–90 Mbps                  | 10.1–40.5 GB      |
| 1920×1080 (1080p) | 3.5–14 Mbps                 | 1.6–6.3 GB      | 52.5–210 Mbps                 | 23.6–94.5 GB      |

At `320×240`, each participant needs 2–8 Mbps download. The lower end is practical even on mobile networks. At `1920×1080`, the same grid requires 52–210 Mbps download, which exceeds most residential connections.

Tip

For grids with 16 or more participants, `320×240` with simulcast keeps the session usable across a wide range of networks. The visual difference on small tiles is negligible.

### Pinned speaker with gallery (all participants send video)

For layouts where all participants send video but one speaker is pinned at a larger size — town halls, classrooms, or team standups — use different presets for each role.

Set the speaker preset resolution to `1280×720` or `1920×1080` because the speaker tile is large and benefits from higher quality. Set the participant preset resolution to `320×240` because participant tiles are small thumbnails.

The following table shows bandwidth for a town hall with one speaker at 720p and 15 participants at 240p, all at 24 FPS. Every participant sends video:

| Role                                                                               | Upload bitrate | Upload per hour | Download bitrate | Download per hour |
| ---------------------------------------------------------------------------------- | -------------- | --------------- | ---------------- | ----------------- |
| Speaker (one stream at 720p, receives 15 streams at 240p)                          | 1.5–6 Mbps     | 675 MB–2.7 GB   | 1.9–7.8 Mbps     | 870 MB–3.5 GB     |
| Participant (one stream at 240p, receives one stream at 720p + 14 streams at 240p) | 130–520 Kbps   | 58–234 MB       | 3.3–13.3 Mbps    | 1.5–6 GB          |

### Webinar (audience is view-only)

In a webinar, audience members do not send audio or video unless they are invited on stage. Only the speaker uploads a stream. Use a high-resolution preset for the speaker and a view-only preset for the audience.

The following example shows a webinar with one speaker at 720p and 15 view-only audience members, all at 24 FPS:

| Role                                                         | Upload bitrate | Upload per hour | Download bitrate | Download per hour |
| ------------------------------------------------------------ | -------------- | --------------- | ---------------- | ----------------- |
| Speaker (one stream at 720p, no other on-stage participants) | 1.5–6 Mbps     | 675 MB–2.7 GB   | 0                | 0                 |
| Audience member (view-only, receives one stream at 720p)     | 0              | 0               | 1.5–6 Mbps       | 675 MB–2.7 GB     |

## Turn on simulcast for multi-participant sessions

Simulcast encodes the sender's video at multiple resolutions simultaneously (for example, 720p, 360p, and 180p). The SFU selects the best layer for each receiver based on available bandwidth and tile size.

**Turn on simulcast when:**

* The session has three or more participants
* Participants have varying network conditions (mobile and desktop mix)
* The session is a webinar or event with audience on constrained networks

**Turn off simulcast** for 1:1 calls (one receiver, no benefit from multiple layers) and for audio-only sessions.

Simulcast increases CPU usage on the sender because the device encodes multiple layers. If your use case targets low-powered devices in remote regions with limited bandwidth, consider turning off simulcast and setting a single lower resolution (such as `320×240`) for all participants instead. This avoids the extra encoding cost while still keeping bandwidth low. For sessions where participants have a mix of device capabilities and network conditions, simulcast provides the best experience because the SFU delivers the appropriate layer to each receiver.

## Choose the right frame rate

Frame rate (FPS) directly multiplies bandwidth. Doubling the frame rate roughly doubles the required bitrate at the same resolution. Choose the lowest frame rate that meets your use case.

| FPS    | Bandwidth impact         | Best for                                                                 |
| ------ | ------------------------ | ------------------------------------------------------------------------ |
| 15 FPS | Lowest                   | Slide presentations, screen shares of static content, surveillance feeds |
| 24 FPS | Moderate                 | Standard video calls, webinars, online classrooms, telemedicine          |
| 30 FPS | Higher                   | Interactive workshops, live product demos, fitness classes               |
| 60 FPS | Highest (\~2x of 30 FPS) | Live sports broadcasting, real-time music performances, esports          |

### Industry examples

* **Education**: Use 15 FPS for lecture screen shares and 24 FPS for the instructor camera. Students on mobile networks benefit from lower bandwidth.
* **Healthcare**: Use 24 FPS for telemedicine consultations. Higher frame rates provide minimal benefit for conversation-style video.
* **Fitness and wellness**: Use 30 FPS for live workout classes. Participants need smooth motion to follow physical movements.
* **Media and entertainment**: Use 60 FPS for live music performances or sports watch parties where motion clarity matters.
* **Corporate meetings**: Use 24 FPS for all-hands and standups. Talking-head video does not benefit from higher frame rates.
* **Customer support**: Use 15 FPS for support sessions that involve mostly screen sharing. Lower bandwidth reduces dropped frames on the customer end.

### Combine resolution and frame rate

Resolution and frame rate compound. The following table shows per-participant bandwidth for a 4×4 grid (15 incoming streams) at different combinations:

| Configuration  | Upload bitrate  | Upload per hour | Download bitrate (15 streams) | Download per hour |
| -------------- | --------------- | --------------- | ----------------------------- | ----------------- |
| 720p at 30 FPS | 1.9–8 Mbps      | 855 MB–3.6 GB   | 29–116 Mbps                   | 13–52.2 GB        |
| 480p at 24 FPS | 500 Kbps–2 Mbps | 225–900 MB      | 7.5–30 Mbps                   | 3.4–13.5 GB       |
| 240p at 15 FPS | 80–320 Kbps     | 36–144 MB       | 1.2–4.8 Mbps                  | 540 MB–2.2 GB     |

For large-grid use cases like virtual classrooms or all-hands meetings, `320×240` at 15 FPS with simulcast keeps total download bandwidth under 5 Mbps per participant even for high-motion content.

## Summary

| Use case                 | Resolution                                 | Simulcast | FPS   | Notes                                                      |
| ------------------------ | ------------------------------------------ | --------- | ----- | ---------------------------------------------------------- |
| 1:1 call                 | 720p–1080p                                 | Off       | 24–30 | Upload and download are equal (one stream each)            |
| Podcast or broadcast     | 1080p–4K                                   | On        | 24–30 | Verify host upload supports 4K (14–56 Mbps)                |
| 3×3 group call           | 480p                                       | On        | 24    | 500 Kbps–2 Mbps upload, 4–16 Mbps download per participant |
| 4×4+ large grid          | 240p                                       | On        | 15–24 | 130–520 Kbps upload, 2–8 Mbps download per participant     |
| Pinned speaker + gallery | 720p–1080p (speaker), 240p (participants)  | On        | 24    | All participants send video, use separate presets per role |
| Webinar                  | 720p–1080p (speaker), view-only (audience) | On        | 24    | Audience does not upload unless invited on stage           |
| Screen sharing           | Source resolution                          | Off       | 15    | Low FPS is sufficient for static content                   |

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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/best-practices/video-and-simulcast/#page","headline":"Video resolution and simulcast · Cloudflare Realtime docs","description":"Choose the right video resolution, simulcast settings, and frame rate for your RealtimeKit use case to optimize quality and bandwidth.","url":"https://developers.cloudflare.com/realtime/realtimekit/best-practices/video-and-simulcast/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-12","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Send custom broadcast messages to all participants in a RealtimeKit meeting.
title: Message Broadcast APIs
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Message Broadcast APIs

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/broadcast-apis/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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).

```ts
const participants = useRealtimeKitSelector((m) => m.participants);
participants.broadcastMessage(
  type: Exclude<string, 'spotlight'>,
  payload: BroadcastMessagePayload,
  target?: BroadcastMessageTarget,
): Promise<void>
```

```ts
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).

```ts
meeting.participants.broadcastMessage(
  type: Exclude<string, 'spotlight'>,
  payload: BroadcastMessagePayload,
  target?: BroadcastMessageTarget,
): Promise<void>
```

```ts
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).

```ts
meeting.participants.broadcastMessage(
  type: Exclude<string, 'spotlight'>,
  payload: BroadcastMessagePayload,
  target?: BroadcastMessageTarget,
): Promise<void>
```

```ts
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.

```ts
const participants = useRealtimeKitSelector((m) => m.participants);
participants.on("broadcastedMessage", ({ type, payload, timestamp }) => {
	// handle message
});
```

```ts
meeting.participants.on(
	"broadcastedMessage",
	({ type, payload, timestamp }) => {
		// handle message
	},
);
```

```ts
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

```ts
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
}
},
);
```

```ts
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
}
},
);
```

```ts
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.

```ts
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"],
	},
);
```

```ts
await meeting.participants.broadcastMessage(
	"PRIVATE_NOTE",
	{ message: "You are on stage in 30 seconds" },
	{
		participantIds: ["peer-id-1", "peer-id-2"],
	},
);
```

```ts
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.

```ts
const participants = useRealtimeKitSelector((m) => m.participants);
await participants.broadcastMessage(
	"STAGE_INSTRUCTION",
	{ text: "Prepare for Q&A" },
	{
		presetNames: ["speaker"],
	},
);
```

```ts
await meeting.participants.broadcastMessage(
	"STAGE_INSTRUCTION",
	{ text: "Prepare for Q&A" },
	{
		presetNames: ["speaker"],
	},
);
```

```ts
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.

```ts
const participants = useRealtimeKitSelector((m) => m.participants);
await participants.broadcastMessage(
	"GLOBAL_ANNOUNCEMENT",
	{ text: "The event will end in 5 minutes." },
	{
		meetingIds: ["meeting-1", "meeting-2"],
	},
);
```

```ts
await meeting.participants.broadcastMessage(
	"GLOBAL_ANNOUNCEMENT",
	{ text: "The event will end in 5 minutes." },
	{
		meetingIds: ["meeting-1", "meeting-2"],
	},
);
```

```ts
await meeting.participants.broadcastMessage(
	"GLOBAL_ANNOUNCEMENT",
	{ text: "The event will end in 5 minutes." },
	{
		meetingIds: ["meeting-1", "meeting-2"],
	},
);
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/broadcast-apis/#page","headline":"Message Broadcast APIs · Cloudflare Realtime docs","description":"Send custom broadcast messages to all participants in a RealtimeKit meeting.","url":"https://developers.cloudflare.com/realtime/realtimekit/broadcast-apis/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Create real-time key-value stores and broadcast messages to participants in RealtimeKit.
title: Storage and Broadcast
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Storage and Broadcast

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/collaborative-stores/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```ts
const stores = useRealtimeKitSelector((m) => m.stores);
const store = stores.create('myStore');
```

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

```ts
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 entries 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 against a key                      | Yes      |

```ts
type StoreValue = string | number | object | array;
```

```ts
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");
```

```ts
type StoreValue = string | number | object | array;
```

```ts
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");
```

```ts
type StoreValue = string | number | object | array;
```

```ts
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.

```ts
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');
```

```ts
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');
```

```ts
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:

```ts
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();
```

```ts
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();
```

```ts
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()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/collaborative-stores/#page","headline":"Storage and Broadcast · Cloudflare Realtime docs","description":"Create real-time key-value stores and broadcast messages to participants in RealtimeKit.","url":"https://developers.cloudflare.com/realtime/realtimekit/collaborative-stores/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Core concepts and terminology for RealtimeKit including apps, meetings, participants, and presets.
title: Concepts
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Concepts

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/concepts/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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/).

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/concepts/#page","headline":"Concepts · Cloudflare Realtime docs","description":"Core concepts and terminology for RealtimeKit including apps, meetings, participants, and presets.","url":"https://developers.cloudflare.com/realtime/realtimekit/concepts/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: RealtimeKit meetings are reusable virtual rooms for real-time audio and video interaction.
title: Meeting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Meeting

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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 participants-row2 [ ]
          direction TB
          P3["<br>Participant 3
          <br>
          "]
          P4["<br>Participant 4
          <br>
          "]
      end
      subgraph participants-row1 [ ]
          direction TB
          P1["<br>Participant 1
          <br>
          "]
          P2["<br>Participant 2
          <br>
          "]
      end
  end

  style participants-row1 fill:none,stroke:none
  style participants-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/cdn-cgi/image/onerror=redirect,width=3024,height=1616,format=webp/_astro/dashboard-sessions.dvN7oDwZ.png) 

### 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.

```bash
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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting/#page","headline":"Meeting · Cloudflare Realtime docs","description":"RealtimeKit meetings are reusable virtual rooms for real-time audio and video interaction.","url":"https://developers.cloudflare.com/realtime/realtimekit/concepts/meeting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Add and manage participants in RealtimeKit meetings with tokens and presets.
title: Participant
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Participant

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/concepts/participant/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/concepts/participant/#page","headline":"Participant · Cloudflare Realtime docs","description":"Add and manage participants in RealtimeKit meetings with tokens and presets.","url":"https://developers.cloudflare.com/realtime/realtimekit/concepts/participant/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Configure participant roles, permissions, and meeting experience with RealtimeKit presets.
title: Preset
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Preset

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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/).

```bash
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/cdn-cgi/image/onerror=redirect,width=3452,height=1898,format=webp/_astro/preset-editor.CoEtzs7E.png) 

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/#page","headline":"Preset · Cloudflare Realtime docs","description":"Configure participant roles, permissions, and meeting experience with RealtimeKit presets.","url":"https://developers.cloudflare.com/realtime/realtimekit/concepts/preset/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Understand the lifecycle of a peer in a RealtimeKit session from setup to disconnect.
title: Session Lifecycle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Session Lifecycle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/concepts/session-lifecycle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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/cdn-cgi/image/onerror=redirect,width=545,height=326,format=svg/_astro/peer-lifecycle.ChUtQdVP.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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/concepts/session-lifecycle/#page","headline":"Session Lifecycle · Cloudflare Realtime docs","description":"Understand the lifecycle of a peer in a RealtimeKit session from setup to disconnect.","url":"https://developers.cloudflare.com/realtime/realtimekit/concepts/session-lifecycle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Initialize and build with the RealtimeKit Core SDK for full control over video calls.
title: Build using Core SDK
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Build using Core SDK

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

### 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

```bash
npm i @cloudflare/realtimekit-react
```

Use the `useRealtimeKitClient` hook to initialise the SDK.

```ts
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.

```bash
npm i @cloudflare/realtimekit
```

Alternatively, you can also use the CDN.

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

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

```js
	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.

```bash
npm i @cloudflare/realtimekit-angular
```

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

```ts
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.

```js
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.

```ts
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    |

Note

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:

```ts
interface AudioQualityConstraints {
	echoCancellation?: boolean;
	noiseSuppression?: 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/#page","headline":"Build using Core SDK · Cloudflare Realtime docs","description":"Initialize and build with the RealtimeKit Core SDK for full control over video calls.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for the RealtimeKit Core SDK methods, events, and properties.
title: API Reference
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# API Reference

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/#page","headline":"API Reference · Cloudflare Realtime docs","description":"API reference for the RealtimeKit Core SDK methods, events, and properties.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RealtimeKitClient
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RealtimeKitClient

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/realtimekitclient/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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)  
  * _instance_  
    * [.participants](#module%5FRealtimeKitClient+participants)
    * [.self](#module%5FRealtimeKitClient+self)
    * [.meta](#module%5FRealtimeKitClient+meta)
    * [.ai](#module%5FRealtimeKitClient+ai)
    * [.plugins](#module%5FRealtimeKitClient+plugins)
    * [.chat](#module%5FRealtimeKitClient+chat)
    * [.polls](#module%5FRealtimeKitClient+polls)
    * [.connectedMeetings](#module%5FRealtimeKitClient+connectedMeetings)
    * [.**internals**](#module%5FRealtimeKitClient+%5F%5Finternals%5F%5F)
    * [.join()](#module%5FRealtimeKitClient+join)
    * [.leave()](#module%5FRealtimeKitClient+leave)
  * _static_  
    * [.initMedia(\[options\], \[skipAwaits\], \[cachedUserDetails\])](#module%5FRealtimeKitClient.initMedia)
    * [.init(options)](#module%5FRealtimeKitClient.init)

### meeting.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 [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.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 [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.meta

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

**Kind**: instance property of [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.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 [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.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 [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.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 [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.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 [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.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 [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.\_\_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 [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.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 [RealtimeKitClient](#module%5FRealtimeKitClient)  

### meeting.leave()

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

**Kind**: instance method of [RealtimeKitClient](#module%5FRealtimeKitClient)  

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

**Kind**: static method of [RealtimeKitClient](#module%5FRealtimeKitClient)

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

### meeting.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 [RealtimeKitClient](#module%5FRealtimeKitClient)

| 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.           |

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/realtimekitclient/#page","headline":"RealtimeKitClient · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/realtimekitclient/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKAi
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKAi

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkai/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

### meeting.ai.onTranscript(transcript)

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

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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkai/#page","headline":"RTKAi · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkai/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKChat
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKChat

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkchat/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

* [RTKChat](#module%5FRTKChat)  
  * ~~[.messages](#module%5FRTKChat+messages)~~
  * [.setMaxTextLimit(limit)](#module%5FRTKChat+setMaxTextLimit)
  * [.updateRateLimits(num, period)](#module%5FRTKChat+updateRateLimits)
  * [.sendTextMessage(message, \[peerIds\])](#module%5FRTKChat+sendTextMessage)
  * [.sendCustomMessage(message, \[peerIds\])](#module%5FRTKChat+sendCustomMessage)
  * [.sendImageMessage(image, \[peerIds\])](#module%5FRTKChat+sendImageMessage)
  * [.sendFileMessage(file, \[peerIds\])](#module%5FRTKChat+sendFileMessage)
  * [.sendMessage(message, \[participantIds\])](#module%5FRTKChat+sendMessage)
  * [.editTextMessage(messageId, message)](#module%5FRTKChat+editTextMessage)
  * [.editImageMessage(messageId, image)](#module%5FRTKChat+editImageMessage)
  * [.editFileMessage(messageId, file)](#module%5FRTKChat+editFileMessage)
  * [.editMessage(messageId, message)](#module%5FRTKChat+editMessage)
  * [.deleteMessage(messageId)](#module%5FRTKChat+deleteMessage)
  * [.pin(id)](#module%5FRTKChat+pin)
  * [.unpin(id)](#module%5FRTKChat+unpin)
  * [.fetchPublicMessages(options)](#module%5FRTKChat+fetchPublicMessages)
  * [.fetchPrivateMessages(options)](#module%5FRTKChat+fetchPrivateMessages)
  * [.fetchPinnedMessages(options)](#module%5FRTKChat+fetchPinnedMessages)

### ~~meeting.chat.messages~~

_**Deprecated**_

**Kind**: instance property of [RTKChat](#module%5FRTKChat)  

### meeting.chat.setMaxTextLimit(limit)

Set the max character limit of a text message

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.updateRateLimits(num, period)

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.sendTextMessage(message, \[peerIds\])

Sends a chat text message to the room.

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.sendCustomMessage(message, \[peerIds\])

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.sendImageMessage(image, \[peerIds\])

Sends an image message to the meeting.

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.sendFileMessage(file, \[peerIds\])

Sends a file to the meeting.

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.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 [RTKChat](#module%5FRTKChat)

| 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.      |

### meeting.chat.editTextMessage(messageId, message)

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.editImageMessage(messageId, image)

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.editFileMessage(messageId, file)

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.editMessage(messageId, message)

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.deleteMessage(messageId)

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.pin(id)

Pins a chat message

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.unpin(id)

Unpins a chat message

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.fetchPublicMessages(options)

Fetches messages from the chat with pagination.

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.fetchPrivateMessages(options)

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

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

### meeting.chat.fetchPinnedMessages(options)

Fetches pinned messages with pagination.

**Kind**: instance method of [RTKChat](#module%5FRTKChat)

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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkchat/#page","headline":"RTKChat · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkchat/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKConnectedMeetings
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKConnectedMeetings

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkconnectedmeetings/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

This consists of the methods to facilitate connected meetings

* [RTKConnectedMeetings](#module%5FRTKConnectedMeetings)  
  * [.getConnectedMeetings()](#module%5FRTKConnectedMeetings+getConnectedMeetings)
  * [.createMeetings(request)](#module%5FRTKConnectedMeetings+createMeetings)
  * [.updateMeetings(request)](#module%5FRTKConnectedMeetings+updateMeetings)
  * [.deleteMeetings(meetingIds)](#module%5FRTKConnectedMeetings+deleteMeetings)
  * [.moveParticipants(sourceMeetingId, destinationMeetingId, participantIds)](#module%5FRTKConnectedMeetings+moveParticipants)
  * [.moveParticipantsWithCustomPreset(sourceMeetingId, destinationMeetingId, participants)](#module%5FRTKConnectedMeetings+moveParticipantsWithCustomPreset)

### meeting.connectedMeetings.getConnectedMeetings()

get connected meeting state

**Kind**: instance method of [RTKConnectedMeetings](#module%5FRTKConnectedMeetings)  

### meeting.connectedMeetings.createMeetings(request)

create connected meetings

**Kind**: instance method of [RTKConnectedMeetings](#module%5FRTKConnectedMeetings)

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

### meeting.connectedMeetings.updateMeetings(request)

update meeting title

**Kind**: instance method of [RTKConnectedMeetings](#module%5FRTKConnectedMeetings)

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

### meeting.connectedMeetings.deleteMeetings(meetingIds)

delete connected meetings

**Kind**: instance method of [RTKConnectedMeetings](#module%5FRTKConnectedMeetings)

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

### meeting.connectedMeetings.moveParticipants(sourceMeetingId, destinationMeetingId, participantIds)

Trigger event to move participants

**Kind**: instance method of [RTKConnectedMeetings](#module%5FRTKConnectedMeetings)

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

### meeting.connectedMeetings.moveParticipantsWithCustomPreset(sourceMeetingId, destinationMeetingId, participants)

Trigger event to move participants with custom preset

**Kind**: instance method of [RTKConnectedMeetings](#module%5FRTKConnectedMeetings)

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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkconnectedmeetings/#page","headline":"RTKConnectedMeetings · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkconnectedmeetings/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKLivestream
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKLivestream

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtklivestream/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

* [RTKLivestream](#module%5FRTKLivestream)  
  * [.start(\[livestreamConfig\])](#module%5FRTKLivestream+start)
  * [.stop()](#module%5FRTKLivestream+stop)

### meeting.livestream.start(\[livestreamConfig\])

Starts livestreaming the meeting.

**Kind**: instance method of [RTKLivestream](#module%5FRTKLivestream)

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

### meeting.livestream.stop()

Stops livestreaming the meeting.

**Kind**: instance method of [RTKLivestream](#module%5FRTKLivestream)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtklivestream/#page","headline":"RTKLivestream · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtklivestream/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKMeta
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKMeta

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkmeta/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

* [RTKMeta](#module%5FRTKMeta)  
  * [.selfActiveTab](#module%5FRTKMeta+selfActiveTab)
  * [.broadcastTabChanges](#module%5FRTKMeta+broadcastTabChanges)
  * [.viewType](#module%5FRTKMeta+viewType)
  * [.meetingStartedTimestamp](#module%5FRTKMeta+meetingStartedTimestamp)
  * [.meetingTitle](#module%5FRTKMeta+meetingTitle)
  * [.sessionId](#module%5FRTKMeta+sessionId)
  * [.meetingId](#module%5FRTKMeta+meetingId)
  * [.setBroadcastTabChanges(broadcastTabChanges)](#module%5FRTKMeta+setBroadcastTabChanges)
  * [.setSelfActiveTab(spotlightTab, tabChangeSource)](#module%5FRTKMeta+setSelfActiveTab)

### meeting.meta.selfActiveTab

Represents the current active tab

**Kind**: instance property of [RTKMeta](#module%5FRTKMeta)  

### meeting.meta.broadcastTabChanges

Represents whether current user is spotlighted

**Kind**: instance property of [RTKMeta](#module%5FRTKMeta)  

### meeting.meta.viewType

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

**Kind**: instance property of [RTKMeta](#module%5FRTKMeta)  

### meeting.meta.meetingStartedTimestamp

The timestamp of the time when the meeting started.

**Kind**: instance property of [RTKMeta](#module%5FRTKMeta)  

### meeting.meta.meetingTitle

The title of the meeting.

**Kind**: instance property of [RTKMeta](#module%5FRTKMeta)  

### meeting.meta.sessionId

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

**Kind**: instance property of [RTKMeta](#module%5FRTKMeta)  

### meeting.meta.meetingId

The room name of the meeting.

**Kind**: instance property of [RTKMeta](#module%5FRTKMeta)  

### meeting.meta.setBroadcastTabChanges(broadcastTabChanges)

Sets current user as broadcasting tab changes

**Kind**: instance method of [RTKMeta](#module%5FRTKMeta)

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

### meeting.meta.setSelfActiveTab(spotlightTab, tabChangeSource)

Sets current active tab for user

**Kind**: instance method of [RTKMeta](#module%5FRTKMeta)

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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkmeta/#page","headline":"RTKMeta · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkmeta/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKParticipant
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKParticipant

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkparticipant/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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,

```ts
const participant1 = meeting.participants.active.get(participantId);
const participant2 = meeting.participants.joined.get(participantId);
const participant3 = meeting.participants.active.toArray()[0];
const participantsNamedJohn = meeting.participants.active.toArray()
  .filter((p) => p.name === 'John');
```

* [RTKParticipant](#module%5FRTKParticipant)  
  * [.id](#module%5FRTKParticipant+id)
  * [.userId](#module%5FRTKParticipant+userId)
  * [.name](#module%5FRTKParticipant+name)
  * [.picture](#module%5FRTKParticipant+picture)
  * [.customParticipantId](#module%5FRTKParticipant+customParticipantId)
  * [.device](#module%5FRTKParticipant+device)
  * [.videoTrack](#module%5FRTKParticipant+videoTrack)
  * [.audioTrack](#module%5FRTKParticipant+audioTrack)
  * [.screenShareTracks](#module%5FRTKParticipant+screenShareTracks)
  * [.videoEnabled](#module%5FRTKParticipant+videoEnabled)
  * [.audioEnabled](#module%5FRTKParticipant+audioEnabled)
  * [.screenShareEnabled](#module%5FRTKParticipant+screenShareEnabled)
  * [.producers](#module%5FRTKParticipant+producers)
  * [.manualProducerConfig](#module%5FRTKParticipant+manualProducerConfig)
  * [.supportsRemoteControl](#module%5FRTKParticipant+supportsRemoteControl)
  * [.presetName](#module%5FRTKParticipant+presetName)
  * [.stageStatus](#module%5FRTKParticipant+stageStatus)
  * [.isPinned](#module%5FRTKParticipant+isPinned)
  * [.pin()](#module%5FRTKParticipant+pin)
  * [.unpin()](#module%5FRTKParticipant+unpin)
  * [.disableAudio()](#module%5FRTKParticipant+disableAudio)
  * [.kick()](#module%5FRTKParticipant+kick)
  * [.disableVideo()](#module%5FRTKParticipant+disableVideo)
  * [.registerVideoElement(videoElem)](#module%5FRTKParticipant+registerVideoElement)
  * [.deregisterVideoElement(\[videoElem\])](#module%5FRTKParticipant+deregisterVideoElement)

### participant.id

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

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.userId

The user ID of the participant.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.name

The name of the participant.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.picture

The picture of the participant.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.customParticipantId

The custom id of the participant set during [https://developers.cloudflare.com/api/resources/realtime\_kit/subresources/meetings/methods/add\_participant ↗](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/meetings/methods/add%5Fparticipant) REST API

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.device

The device configuration of the participant.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.videoTrack

The participant's video track.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.audioTrack

The participant's audio track.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.screenShareTracks

The participant's screenshare video and audio track.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.videoEnabled

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

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.audioEnabled

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

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.screenShareEnabled

This is true if the participant is screensharing.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.producers

producers created by participant

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.manualProducerConfig

producer config passed during manual subscription

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.supportsRemoteControl

This is true if the participant supports remote control.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.presetName

The preset of the participant.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.stageStatus

Denotes the participants's current stage status.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.isPinned

Returns true if the participant is pinned.

**Kind**: instance property of [RTKParticipant](#module%5FRTKParticipant)  

### participant.pin()

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

**Kind**: instance method of [RTKParticipant](#module%5FRTKParticipant)  

### participant.unpin()

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

**Kind**: instance method of [RTKParticipant](#module%5FRTKParticipant)  

### participant.disableAudio()

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

**Kind**: instance method of [RTKParticipant](#module%5FRTKParticipant)  

### participant.kick()

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

**Kind**: instance method of [RTKParticipant](#module%5FRTKParticipant)  

### participant.disableVideo()

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

**Kind**: instance method of [RTKParticipant](#module%5FRTKParticipant)  

### participant.registerVideoElement(videoElem)

**Kind**: instance method of [RTKParticipant](#module%5FRTKParticipant)

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

### participant.deregisterVideoElement(\[videoElem\])

**Kind**: instance method of [RTKParticipant](#module%5FRTKParticipant)

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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkparticipant/#page","headline":"RTKParticipant · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkparticipant/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKParticipants
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKParticipants

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkparticipants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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)  
  * [.waitlisted](#module%5FRTKParticipants+waitlisted)
  * [.joined](#module%5FRTKParticipants+joined)
  * [.active](#module%5FRTKParticipants+active)
  * [.videoSubscribed](#module%5FRTKParticipants+videoSubscribed)
  * [.audioSubscribed](#module%5FRTKParticipants+audioSubscribed)
  * [.pinned](#module%5FRTKParticipants+pinned)
  * [.all](#module%5FRTKParticipants+all)
  * [.pip](#module%5FRTKParticipants+pip)
  * [.viewMode](#module%5FRTKParticipants+viewMode)
  * [.currentPage](#module%5FRTKParticipants+currentPage)
  * [.lastActiveSpeaker](#module%5FRTKParticipants+lastActiveSpeaker)
  * [.selectedPeers](#module%5FRTKParticipants+selectedPeers)
  * [.count](#module%5FRTKParticipants+count)
  * [.maxActiveParticipantsCount](#module%5FRTKParticipants+maxActiveParticipantsCount)
  * [.pageCount](#module%5FRTKParticipants+pageCount)
  * [.setMaxActiveParticipantsCount(limit)](#module%5FRTKParticipants+setMaxActiveParticipantsCount)
  * [.acceptWaitingRoomRequest(id)](#module%5FRTKParticipants+acceptWaitingRoomRequest)
  * [.acceptAllWaitingRoomRequest(userIds)](#module%5FRTKParticipants+acceptAllWaitingRoomRequest)
  * [.rejectWaitingRoomRequest(id)](#module%5FRTKParticipants+rejectWaitingRoomRequest)
  * [.setViewMode(viewMode)](#module%5FRTKParticipants+setViewMode)
  * [.subscribe(peerIds, \[kinds\])](#module%5FRTKParticipants+subscribe)
  * [.unsubscribe(peerIds, \[kinds\])](#module%5FRTKParticipants+unsubscribe)
  * [.setPage(page)](#module%5FRTKParticipants+setPage)
  * [.disableAllAudio(allowUnmute)](#module%5FRTKParticipants+disableAllAudio)
  * [.disableAllVideo()](#module%5FRTKParticipants+disableAllVideo)
  * [.kickAll()](#module%5FRTKParticipants+kickAll)
  * [.broadcastMessage(type, payload, target)](#module%5FRTKParticipants+broadcastMessage)
  * [.getAllJoinedPeers(searchQuery, limit, offset)](#module%5FRTKParticipants+getAllJoinedPeers)
  * [.getParticipantsInMeetingPreJoin()](#module%5FRTKParticipants+getParticipantsInMeetingPreJoin)

### meeting.participants.waitlisted

Returns a list of participants waiting to join the meeting.

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.joined

Returns a list of all participants in the meeting.

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.active

Returns a list of participants whose streams are currently consumed.

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.videoSubscribed

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

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.audioSubscribed

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

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.pinned

Returns a list of participants who have been pinned.

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.all

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

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.pip

Return the controls for Picture-in-Picture

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.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 [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.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 [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.lastActiveSpeaker

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

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.selectedPeers

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

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.count

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

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.maxActiveParticipantsCount

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

**Kind**: instance property of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.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 [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.setMaxActiveParticipantsCount(limit)

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

**Kind**: instance method of [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.acceptWaitingRoomRequest(id)

Accepts requests from waitlisted participants if user has appropriate permissions.

**Kind**: instance method of [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.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 [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.rejectWaitingRoomRequest(id)

Rejects requests from waitlisted participants if user has appropriate permissions.

**Kind**: instance method of [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.setViewMode(viewMode)

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

**Kind**: instance method of [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.subscribe(peerIds, \[kinds\])

**Kind**: instance method of [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.unsubscribe(peerIds, \[kinds\])

**Kind**: instance method of [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.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 [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.disableAllAudio(allowUnmute)

Disables audio for all participants in the meeting.

**Kind**: instance method of [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.disableAllVideo()

Disables video for all participants in the meeting.

**Kind**: instance method of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.kickAll()

Kicks all participants from the meeting.

**Kind**: instance method of [RTKParticipants](#module%5FRTKParticipants)  

### meeting.participants.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 [RTKParticipants](#module%5FRTKParticipants)

| 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 |

### meeting.participants.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 [RTKParticipants](#module%5FRTKParticipants)

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

### meeting.participants.getParticipantsInMeetingPreJoin()

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 [RTKParticipants](#module%5FRTKParticipants)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkparticipants/#page","headline":"RTKParticipants · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkparticipants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKPermissionsPreset
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKPermissionsPreset

Last updated Jul 20, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkpermissionspreset/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The PermissionPreset class represents the meeting permissions for the current participant

* [PermissionPreset](#module%5FPermissionPreset)  
  * [.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)
  * [.waitingRoomBehaviour](#module%5FPermissionPreset+waitingRoomBehaviour)
  * [.plugins](#module%5FPermissionPreset+plugins)
  * [.polls](#module%5FPermissionPreset+polls)
  * [.canProduceVideo](#module%5FPermissionPreset+canProduceVideo)
  * [.canProduceScreenshare](#module%5FPermissionPreset+canProduceScreenshare)
  * [.canProduceAudio](#module%5FPermissionPreset+canProduceAudio)
  * [.chatPublic](#module%5FPermissionPreset+chatPublic)
  * [.chatPrivate](#module%5FPermissionPreset+chatPrivate)
  * [.hiddenParticipant](#module%5FPermissionPreset+hiddenParticipant)
  * [.showParticipantList](#module%5FPermissionPreset+showParticipantList)
  * [.canChangeParticipantPermissions](#module%5FPermissionPreset+canChangeParticipantPermissions)
  * [.canLivestream](#module%5FPermissionPreset+canLivestream)

### 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 dictates how a user interacts with the stage. The 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.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.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.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.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.canChangeParticipantPermissions

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

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

### meeting.self.permissions.canLivestream

Livestream

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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkpermissionspreset/#page","headline":"RTKPermissionsPreset · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkpermissionspreset/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-20","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKPip
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKPip

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkpip/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Modules

[RTKPip](#module%5FRTKPip)

## Functions

[getInitials()](#getInitials)

Code from ui-kit. Same method used in the avatar component

* [RTKPip](#module%5FRTKPip)  
  * [.disable](#module%5FRTKPip+disable)
  * [.init(\[options\])](#module%5FRTKPip+init)
  * [.disableSource(source)](#module%5FRTKPip+disableSource)
  * [.addSource(id, element, enabled, \[displayText\])](#module%5FRTKPip+addSource)
  * [.updateSource(id, source)](#module%5FRTKPip+updateSource)
  * [.removeSource(id)](#module%5FRTKPip+removeSource)
  * [.removePinnedSource(id)](#module%5FRTKPip+removePinnedSource)
  * [.removeAllSources()](#module%5FRTKPip+removeAllSources)
  * [.enable()](#module%5FRTKPip+enable)

### meeting.participants.pip.disable

Disable PiP

**Kind**: instance property of [RTKPip](#module%5FRTKPip)  

### meeting.participants.pip.init(\[options\])

Initialize PiP and prepare sources

**Kind**: instance method of [RTKPip](#module%5FRTKPip)

| Param              | Type   |
| ------------------ | ------ |
| \[options\]        | Object |
| \[options.height\] | number |
| \[options.width\]  | number |

### meeting.participants.pip.disableSource(source)

**Kind**: instance method of [RTKPip](#module%5FRTKPip)

| Param  | Type   |
| ------ | ------ |
| source | string |

### meeting.participants.pip.addSource(id, element, enabled, \[displayText\])

Add a video source from the participant grid

**Kind**: instance method of [RTKPip](#module%5FRTKPip)

| 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             |

### meeting.participants.pip.updateSource(id, source)

Update a video source

**Kind**: instance method of [RTKPip](#module%5FRTKPip)

| Param  | Type   |
| ------ | ------ |
| id     | string |
| source | any    |

### meeting.participants.pip.removeSource(id)

Remove the video source for the participant

**Kind**: instance method of [RTKPip](#module%5FRTKPip)

| Param | Description                            |
| ----- | -------------------------------------- |
| id    | id for the source (ex. participant id) |

### meeting.participants.pip.removePinnedSource(id)

Remove the pinned source

**Kind**: instance method of [RTKPip](#module%5FRTKPip)

| Param | Description                            |
| ----- | -------------------------------------- |
| id    | id for the source (ex. participant id) |

### meeting.participants.pip.removeAllSources()

Remove all sources

**Kind**: instance method of [RTKPip](#module%5FRTKPip)  

### meeting.participants.pip.enable()

Enable PiP

**Kind**: instance method of [RTKPip](#module%5FRTKPip)  

Code from ui-kit. Same method used in the avatar component

**Kind**: global function

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkpip/#page","headline":"RTKPip · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkpip/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKPlugin
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKPlugin

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkplugin/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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,

```ts
const plugin1 = meeting.plugins.active.get(pluginId);
const plugin2 = meeting.plugins.all.get(pluginId);
```

* [RTKPlugin](#module%5FRTKPlugin)  
  * [.component](#module%5FRTKPlugin+component)
  * [.activateForSelf()](#module%5FRTKPlugin+activateForSelf)
  * [.deactivateForSelf()](#module%5FRTKPlugin+deactivateForSelf)
  * [.activate()](#module%5FRTKPlugin+activate)
  * [.deactivate()](#module%5FRTKPlugin+deactivate)

### plugin.component

The component for this plugin, as provided in the plugin config.

**Kind**: instance property of [RTKPlugin](#module%5FRTKPlugin)  

### plugin.activateForSelf()

**Kind**: instance method of [RTKPlugin](#module%5FRTKPlugin)  

### plugin.deactivateForSelf()

**Kind**: instance method of [RTKPlugin](#module%5FRTKPlugin)  

### plugin.activate()

Activate this plugin for all participants.

**Kind**: instance method of [RTKPlugin](#module%5FRTKPlugin)  

### plugin.deactivate()

Deactivate this plugin for all participants.

**Kind**: instance method of [RTKPlugin](#module%5FRTKPlugin)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkplugin/#page","headline":"RTKPlugin · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkplugin/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKPlugins
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKPlugins

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkplugins/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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)  
  * [.all](#module%5FRTKPlugins+all)
  * [.active](#module%5FRTKPlugins+active)

### meeting.plugins.all

All plugins accessible by the current user.

**Kind**: instance property of [RTKPlugins](#module%5FRTKPlugins)  

### meeting.plugins.active

All plugins that are currently enabled in the room.

**Kind**: instance property of [RTKPlugins](#module%5FRTKPlugins)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkplugins/#page","headline":"RTKPlugins · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkplugins/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKPolls
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKPolls

Last updated Jul 20, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkpolls/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.                   |

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkpolls/#page","headline":"RTKPolls · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkpolls/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-20","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKRecording
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKRecording

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkrecording/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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)  
  * [.start()](#module%5FRTKRecording+start)
  * [.stop()](#module%5FRTKRecording+stop)
  * [.pause()](#module%5FRTKRecording+pause)
  * [.resume()](#module%5FRTKRecording+resume)

### 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)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkrecording/#page","headline":"RTKRecording · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkrecording/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKSelf
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKSelf

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkself/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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)  
  * [.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)
  * [.pin()](#module%5FRTKSelf+pin)
  * [.unpin()](#module%5FRTKSelf+unpin)
  * [.hide()](#module%5FRTKSelf+hide)
  * [.show()](#module%5FRTKSelf+show)
  * [.setDevice(device)](#module%5FRTKSelf+setDevice)

### 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 - Initial 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 privileged 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.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. |

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkself/#page","headline":"RTKSelf · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkself/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKSelfMedia
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKSelfMedia

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkselfmedia/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The RTKSelfMedia class provides methods to manage the local participant's media.

* [RTKSelfMedia](#module%5FRTKSelfMedia)  
  * [.audioTrack](#module%5FRTKSelfMedia+audioTrack)
  * [.rawAudioTrack](#module%5FRTKSelfMedia+rawAudioTrack)
  * [.mediaPermissions](#module%5FRTKSelfMedia+mediaPermissions)
  * [.videoTrack](#module%5FRTKSelfMedia+videoTrack)
  * [.rawVideoTrack](#module%5FRTKSelfMedia+rawVideoTrack)
  * [.screenShareTracks](#module%5FRTKSelfMedia+screenShareTracks)
  * [.audioEnabled](#module%5FRTKSelfMedia+audioEnabled)
  * [.videoEnabled](#module%5FRTKSelfMedia+videoEnabled)
  * [.screenShareEnabled](#module%5FRTKSelfMedia+screenShareEnabled)
  * [.addAudioMiddleware(audioMiddleware)](#module%5FRTKSelfMedia+addAudioMiddleware)
  * [.removeAudioMiddleware(audioMiddleware)](#module%5FRTKSelfMedia+removeAudioMiddleware)
  * [.removeAllAudioMiddlewares()](#module%5FRTKSelfMedia+removeAllAudioMiddlewares)
  * [.addVideoMiddleware(videoMiddleware)](#module%5FRTKSelfMedia+addVideoMiddleware)
  * [.setVideoMiddlewareGlobalConfig(config)](#module%5FRTKSelfMedia+setVideoMiddlewareGlobalConfig)
  * [.removeVideoMiddleware(videoMiddleware)](#module%5FRTKSelfMedia+removeVideoMiddleware)
  * [.removeAllVideoMiddlewares()](#module%5FRTKSelfMedia+removeAllVideoMiddlewares)
  * [.getCurrentDevices()](#module%5FRTKSelfMedia+getCurrentDevices)
  * [.getAudioDevices()](#module%5FRTKSelfMedia+getAudioDevices)
  * [.getVideoDevices()](#module%5FRTKSelfMedia+getVideoDevices)
  * [.getSpeakerDevices()](#module%5FRTKSelfMedia+getSpeakerDevices)
  * [.getDeviceById(deviceId, kind)](#module%5FRTKSelfMedia+getDeviceById)
  * [.setDevice(device)](#module%5FRTKSelfMedia+setDevice)

### meeting.self.audioTrack

Returns the `audioTrack`.

**Kind**: instance property of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.rawAudioTrack

Returns the `rawAudioTrack` having no middleware executed on it.

**Kind**: instance property of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.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).

**Kind**: instance property of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.videoTrack

Returns the `videoTrack`.

**Kind**: instance property of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.rawVideoTrack

Returns the `videoTrack` having no middleware executed on it.

**Kind**: instance property of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.screenShareTracks

Returns the screen share tracks.

**Kind**: instance property of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.audioEnabled

Returns true if audio is enabled.

**Kind**: instance property of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.videoEnabled

Returns true if video is enabled.

**Kind**: instance property of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.screenShareEnabled

Returns true if screen share is enabled.

**Kind**: instance property of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.addAudioMiddleware(audioMiddleware)

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**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)

| Param           | Type            |
| --------------- | --------------- |
| audioMiddleware | AudioMiddleware |

### meeting.self.removeAudioMiddleware(audioMiddleware)

Removes the audio middleware, if it is there.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)

| Param           | Type            |
| --------------- | --------------- |
| audioMiddleware | AudioMiddleware |

### meeting.self.removeAllAudioMiddlewares()

Removes all audio middlewares, if they are there.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.addVideoMiddleware(videoMiddleware)

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**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)

| Param           | Type            |
| --------------- | --------------- |
| videoMiddleware | VideoMiddleware |

### meeting.self.setVideoMiddlewareGlobalConfig(config)

Sets global config to be used by video middlewares.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)

| 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. |

### meeting.self.removeVideoMiddleware(videoMiddleware)

Removes the video middleware, if it is there.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)

| Param           | Type            |
| --------------- | --------------- |
| videoMiddleware | VideoMiddleware |

### meeting.self.removeAllVideoMiddlewares()

Removes all video middlewares, if they are there.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.getCurrentDevices()

Returns the media devices currently being used.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.getAudioDevices()

Returns the local participant's audio devices.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.getVideoDevices()

Returns the local participant's video devices.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.getSpeakerDevices()

Returns the local participant's speaker devices.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)  

### meeting.self.getDeviceById(deviceId, kind)

Returns the local participant's device, indexed by ID and kind.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)

| Param    | Type               | Description           |                                                   |
| -------- | ------------------ | --------------------- | ------------------------------------------------- |
| deviceId | string             | The ID of the device. |                                                   |
| kind     | 'audio' \| 'video' | 'speaker'             | The kind of the device: audio, video, or speaker. |

### meeting.self.setDevice(device)

Change the current media device that is being used by the local participant.

**Kind**: instance method of [RTKSelfMedia](#module%5FRTKSelfMedia)

| Param  | Type            | Description                                                                                    |
| ------ | --------------- | ---------------------------------------------------------------------------------------------- |
| device | MediaDeviceInfo | The device that is to be used. A device of the same kind will be replaced. the primary stream. |

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkselfmedia/#page","headline":"RTKSelfMedia · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkselfmedia/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKStage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKStage

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkstage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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)  
  * [.peerId](#module%5FRTKStage+peerId)
  * [.getAccessRequests()](#module%5FRTKStage+getAccessRequests)
  * [.requestAccess()](#module%5FRTKStage+requestAccess)
  * [.cancelRequestAccess()](#module%5FRTKStage+cancelRequestAccess)
  * [.grantAccess()](#module%5FRTKStage+grantAccess)
  * [.denyAccess()](#module%5FRTKStage+denyAccess)
  * [.join()](#module%5FRTKStage+join)
  * [.leave()](#module%5FRTKStage+leave)
  * [.kick(userIds)](#module%5FRTKStage+kick)

### meeting.stage.peerId

Returns the peerId of the current user

**Kind**: instance property of [RTKStage](#module%5FRTKStage)  

### meeting.stage.getAccessRequests()

Method to fetch all RTKStage access requests from viewers

**Kind**: instance method of [RTKStage](#module%5FRTKStage)  

### meeting.stage.requestAccess()

Method to send a request to privileged users to join the stage

**Kind**: instance method of [RTKStage](#module%5FRTKStage)  

### meeting.stage.cancelRequestAccess()

Method to cancel a previous RTKStage join request

**Kind**: instance method of [RTKStage](#module%5FRTKStage)  

### meeting.stage.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.acceptStageRequests` privilege required

**Kind**: instance method of [RTKStage](#module%5FRTKStage)  

### meeting.stage.denyAccess()

Method to deny access to RTKStage. This should be called in response to a RTKStage Join request

**Kind**: instance method of [RTKStage](#module%5FRTKStage)  

### meeting.stage.join()

Method to join the stage Users either need to have the permission in the preset or must be accepted by a privileged user to call this method

**Kind**: instance method of [RTKStage](#module%5FRTKStage)  

### meeting.stage.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 [RTKStage](#module%5FRTKStage)  

### meeting.stage.kick(userIds)

Method to kick a user off the stage

`permissions.acceptStageRequests` privilege required

**Kind**: instance method of [RTKStage](#module%5FRTKStage)

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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkstage/#page","headline":"RTKStage · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkstage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKStore
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKStore

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkstore/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

This module represents a single global store. The store can be accessed from the `meeting.stores` module.

**Returns**: An instance of RTKStore.  
**Example**

```js
const handRaiseStore = meeting.stores.stores.get('handRaise');
```

* [RTKStore](#module%5FRTKStore) ⇒  
  * [.set(key, value, \[sync\], \[emit\])](#module%5FRTKStore+set) ⇒ `Promise.<void>`
  * [.bulkSet(data)](#module%5FRTKStore+bulkSet) ⇒ `Promise.<void>`
  * [.update(key, value, \[sync\])](#module%5FRTKStore+update) ⇒ `Promise.<void>`
  * [.delete(key, \[sync\], \[emit\])](#module%5FRTKStore+delete) ⇒ `Promise.<void>`
  * [.bulkDelete(data)](#module%5FRTKStore+bulkDelete) ⇒ `Promise.<void>`
  * [.get(key)](#module%5FRTKStore+get) ⇒ `any`
  * [.getAll()](#module%5FRTKStore+getAll) ⇒ `RTKStoreData`
  * [.clear()](#module%5FRTKStore+clear)
  * [.updateRateLimits(num, period)](#module%5FRTKStore+updateRateLimits)
  * [.updateBulkRateLimits(num, period)](#module%5FRTKStore+updateBulkRateLimits)
  * [.subscribe(key, cb)](#module%5FRTKStore+subscribe) ⇒ `void`
  * [.unsubscribe(key, \[cb\])](#module%5FRTKStore+unsubscribe) ⇒ `void`
  * [.populate(data)](#module%5FRTKStore+populate)

### store.set(key, value, \[sync\], \[emit\]) ⇒ `Promise.<void>`

Sets a value in the store.

**Kind**: instance method of [RTKStore](#module%5FRTKStore)  
**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.   |

### store.bulkSet(data) ⇒ `Promise.<void>`

Sets multiple values in the store.

**Kind**: instance method of [RTKStore](#module%5FRTKStore)  
**Returns**: `Promise.<void>` \- A promise.

| Param | Type                                |
| ----- | ----------------------------------- |
| data  | Array.<{key: string, payload: any}> |

### store.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 [RTKStore](#module%5FRTKStore)  
**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. |

### store.delete(key, \[sync\], \[emit\]) ⇒ `Promise.<void>`

Deletes a key value pair form the store.

**Kind**: instance method of [RTKStore](#module%5FRTKStore)  
**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.   |

### store.bulkDelete(data) ⇒ `Promise.<void>`

Deletes multiple values from the store.

**Kind**: instance method of [RTKStore](#module%5FRTKStore)  
**Returns**: `Promise.<void>` \- A promise.

| Param | Type                  |
| ----- | --------------------- |
| data  | Array.<{key: string}> |

### store.get(key) ⇒ `any`

Returns value for the given key.

**Kind**: instance method of [RTKStore](#module%5FRTKStore)  
**Returns**: `any` \- Value for the given key.

| Param | Type   | Description                            |
| ----- | ------ | -------------------------------------- |
| key   | string | Unique identifier used to store value. |

### store.getAll() ⇒ `RTKStoreData`

Returns the entire store.

**Kind**: instance method of [RTKStore](#module%5FRTKStore)  
**Returns**: `RTKStoreData` \- An instance of RTKStoreData.  

### store.clear()

Clears all data in the store.

**Kind**: instance method of [RTKStore](#module%5FRTKStore)  

### store.updateRateLimits(num, period)

**Kind**: instance method of [RTKStore](#module%5FRTKStore)

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

### store.updateBulkRateLimits(num, period)

**Kind**: instance method of [RTKStore](#module%5FRTKStore)

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

### store.subscribe(key, cb) ⇒ `void`

Listens for data change on a store key.

**Kind**: instance method of [RTKStore](#module%5FRTKStore)  
**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. |

### store.unsubscribe(key, \[cb\]) ⇒ `void`

Removes all listeners for a key on the store.

**Kind**: instance method of [RTKStore](#module%5FRTKStore)  
**Returns**: `void` \- void

| Param  | Type     | Description                            |
| ------ | -------- | -------------------------------------- |
| key    | string   | Unique identifier used to store value. |
| \[cb\] | function | Callback to be removed.                |

### store.populate(data)

**Kind**: instance method of [RTKStore](#module%5FRTKStore)

| Param | Type         |
| ----- | ------------ |
| data  | RTKStoreData |

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkstore/#page","headline":"RTKStore · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkstore/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
title: RTKThemePreset
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RTKThemePreset

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkthemepreset/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The RTKThemePreset class represents the meeting theme for the current participant

* [RTKThemePreset](#module%5FRTKThemePreset)  
  * ~~[.setupScreen](#module%5FRTKThemePreset+setupScreen)~~
  * ~~[.waitingRoom](#module%5FRTKThemePreset+waitingRoom)~~
  * ~~[.controlBar](#module%5FRTKThemePreset+controlBar)~~
  * ~~[.header](#module%5FRTKThemePreset+header)~~
  * ~~[.pipMode](#module%5FRTKThemePreset+pipMode)~~
  * [.viewType](#module%5FRTKThemePreset+viewType)
  * [.livestreamViewerQualities](#module%5FRTKThemePreset+livestreamViewerQualities)
  * [.maxVideoStreams](#module%5FRTKThemePreset+maxVideoStreams)
  * [.maxScreenShareCount](#module%5FRTKThemePreset+maxScreenShareCount)
  * ~~[.plugins](#module%5FRTKThemePreset+plugins)~~
  * [.disabledPlugins](#module%5FRTKThemePreset+disabledPlugins)

### ~~meeting.self.config.setupScreen~~

_**Deprecated**_

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### ~~meeting.self.config.waitingRoom~~

_**Deprecated**_

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### ~~meeting.self.config.controlBar~~

_**Deprecated**_

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### ~~meeting.self.config.header~~

_**Deprecated**_

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### ~~meeting.self.config.pipMode~~

_**Deprecated**_

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### meeting.self.config.viewType

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

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### meeting.self.config.livestreamViewerQualities

The `livestreamViewerQualities` specifies the allowed qualities of a stream, that can be viewed by a livestream viewer

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### meeting.self.config.maxVideoStreams

The `maxVideoStreams` contains the maximum video streams for mobile and desktop

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### meeting.self.config.maxScreenShareCount

The `maxScreenShareCount` contains the maximum possible concurrent screen shares

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### ~~meeting.self.config.plugins~~

_**Deprecated**_

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)  

### meeting.self.config.disabledPlugins

The `disabledPlugins` property returns id of all disabled plugins

**Kind**: instance property of [RTKThemePreset](#module%5FRTKThemePreset)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkthemepreset/#page","headline":"RTKThemePreset · Cloudflare Realtime docs","url":"https://developers.cloudflare.com/realtime/realtimekit/core/api-reference/rtkthemepreset/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Create and manage breakout rooms to split participants into smaller groups in RealtimeKit.
title: Breakout Rooms
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Breakout Rooms

Last updated Jul 9, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/breakout-rooms/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

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.

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.

```js
// 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;
```

```js
// 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;
```

```js
// 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;
```

```kotlin
val connectedMeetings = meeting.connectedMeetings

// Check if breakout rooms are active
val areBreakoutRoomsActive = connectedMeetings.isActive

// Check permissions on the local participant
val permissions = meeting.self.permissions.connectedMeetings

// Check if the current participant has permission to create/alter breakout rooms
val hasPermissionToAlterBreakoutRooms = permissions.canAlterConnectedMeetings

// Check if the current participant has permission to switch between breakout rooms
val hasPermissionToSwitchConnectedMeetings = permissions.canSwitchConnectedMeetings

// Check if the current participant has permission to switch back to the parent meeting
val hasPermissionToSwitchToParentMeeting = permissions.canSwitchToParentMeeting
```

```swift
let connectedMeetings = meeting.connectedMeetings

// Check if breakout rooms are active
let areBreakoutRoomsActive = connectedMeetings.isActive

// Check permissions on the local participant
let permissions = meeting.self.permissions.connectedMeetings

// Check if the current participant has permission to create/alter breakout rooms
let hasPermissionToAlterBreakoutRooms = permissions.canAlterConnectedMeetings

// Check if the current participant has permission to switch between breakout rooms
let hasPermissionToSwitchConnectedMeetings = permissions.canSwitchConnectedMeetings

// Check if the current participant has permission to switch back to the parent meeting
let hasPermissionToSwitchToParentMeeting = permissions.canSwitchToParentMeeting
```

```tsx
const [meeting] = useRealtimeKitClient();

// Check if any breakout rooms are currently active
const areBreakoutRoomsActive = meeting?.connectedMeetings.isActive;

// Check whether the local participant can create, rename, or delete rooms and move any participant
const canAlterBreakoutRooms = meeting?.self.permissions.connectedMeetings.canAlterConnectedMeetings;

// Check whether the local participant can move themselves to any breakout room
const canSwitchRooms = meeting?.self.permissions.connectedMeetings.canSwitchConnectedMeetings;

// Check whether the local participant can return to the parent meeting
const canReturnToParent = meeting?.self.permissions.connectedMeetings.canSwitchToParentMeeting;
```

### Create breakout rooms

```js
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.

```js
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.

```js
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.

```kotlin
meeting.connectedMeetings.createMeetings(
    titles = listOf("Breakout Room 1", "Breakout Room 2", "Breakout Room 3")
) { result ->
    result.onSuccess { breakoutRooms ->
        val roomInfo = breakoutRooms.joinToString("\n") { "Id:: ${it.id} --- Title:: ${it.title}" }
        println("Created Breakout Rooms: $roomInfo")
    }.onFailure { error ->
        println("Failed to create breakout rooms: ${error.value.message}")
    }
}
```

`breakoutRooms` is a list of basic meeting information such as `id` and `title`. You can use the `id` of these objects to move participants to the breakout room.

```swift
meeting.connectedMeetings.createMeetings(titles: ["Breakout Room 1", "Breakout Room 2", "Breakout Room 3"]) { result in
    switch result {
    case .success(let breakoutRooms):
        let roomInfo = breakoutRooms.map { "Id:: \($0.id) --- Title:: \($0.title)" }.joined(separator: "\n")
        print("Created Breakout Rooms: \(roomInfo)")
    case .failure(let error):
        print("Failed to create breakout rooms: \(error.value.message)")
    }
}
```

`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.

```js
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.

```js
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.

```js
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);
});
```

```js
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.

```js
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);
});
```

```js
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.

```kotlin
meeting.connectedMeetings.getConnectedMeetings { result ->
    result.onSuccess { breakoutRoomsInfo ->
        println("Parent Meeting: ${breakoutRoomsInfo.parentMeeting}")
        println("Breakout Rooms: ${breakoutRoomsInfo.meetings}")
    }.onFailure { error ->
        println("Failed to fetch breakout rooms: ${error.value.message}")
    }
}
```

`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 and participants in the UI. This API refetches the list of breakout rooms and participants, and can therefore be considered the source of truth. It is advised to call this API to get the latest state if a lot of changes are in progress.

You can also listen to the `onStateUpdate` event to receive real-time updates to the list of breakout rooms and participants.

```kotlin
meeting.addConnectedMeetingsEventListener(object : RtkConnectedMeetingsEventListener {
    override fun onStateUpdate(meetings: List<RtkConnectedMeeting>, parentMeeting: RtkConnectedMeeting?) {
        println("State updated. Meetings: $meetings, Parent: $parentMeeting")

        // Alternatively, access state directly from the connectedMeetings object
        println("Meetings List: ${meeting.connectedMeetings.meetings}")
        println("Parent Meeting: ${meeting.connectedMeetings.parentMeeting}")
    }

    override fun onChangingMeeting(meetingId: String) {}
    override fun onMeetingChanged(error: MeetingError?) {}
})
```

```swift
meeting.connectedMeetings.getConnectedMeetings { result in
    switch result {
    case .success(let breakoutRoomsInfo):
        print("Parent Meeting: \(String(describing: breakoutRoomsInfo.parentMeeting))")
        print("Breakout Rooms: \(breakoutRoomsInfo.meetings)")
    case .failure(let error):
        print("Failed to fetch breakout rooms: \(error.value.message)")
    }
}
```

`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 and participants in the UI. This API refetches the list of breakout rooms and participants, and can therefore be considered the source of truth. It is advised to call this API to get the latest state if a lot of changes are in progress.

You can also listen to the `onStateUpdate` event to receive real-time updates to the list of breakout rooms and participants.

```swift
class MyListener: RtkConnectedMeetingsEventListener {
    func onStateUpdate(meetings: [RtkConnectedMeeting], parentMeeting: RtkConnectedMeeting?) {
        print("State updated. Meetings: \(meetings), Parent: \(String(describing: parentMeeting))")

        // Alternatively, access state directly from the connectedMeetings object
        print("Meetings List: \(meeting.connectedMeetings.meetings)")
        print("Parent Meeting: \(String(describing: meeting.connectedMeetings.parentMeeting))")
    }

    func onChangingMeeting(meetingId: String) {}
    func onMeetingChanged(error: MeetingError?) {}
}

meeting.addConnectedMeetingsEventListener(MyListener())
```

```js
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.

```js
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);
});
```

### Move participants to breakout rooms

Once you have created breakout rooms, assign participants to the rooms.

```js
// 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
);
```

```js
// 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
);
```

```js
// 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
);
```

```kotlin
// Retrieve list of breakout rooms & participants
meeting.connectedMeetings.getConnectedMeetings { result ->
    result.onSuccess { breakoutRoomsInfo ->
        /*
         * You can retrieve meetingIds and participantIds from breakoutRoomsInfo.
         * Based on where the participant currently is, decide the sourceMeetingId and targetMeetingId.
         */

        // Move participants to a breakout room
        meeting.connectedMeetings.moveParticipants(
            sourceMeetingId = "SOURCE_MEETING_ID",
            destinationMeetingId = "TARGET_MEETING_ID",
            participantIds = listOf("PARTICIPANT_ID_1", "PARTICIPANT_ID_2")
        ) { error ->
            if (error != null) {
                println("Failed to move participants: $error")
            } else {
                println("Participants moved successfully")
            }
        }
    }
}
```

```swift
// Retrieve list of breakout rooms & participants
meeting.connectedMeetings.getConnectedMeetings { result in
    switch result {
    case .success(let breakoutRoomsInfo):
        /*
         * You can retrieve meetingIds and participantIds from breakoutRoomsInfo.
         * Based on where the participant currently is, decide the fromMeetingId and toMeetingId.
         */

        // Move participants to a breakout room
        meeting.connectedMeetings.moveParticipants(
            sourceMeetingId: "SOURCE_MEETING_ID",
            destinationMeetingId: "TARGET_MEETING_ID",
            participantIds: ["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"]
        ) { error in
            if let error = error {
                print("Failed to move participants: \(error)")
            } else {
                print("Participants moved successfully")
            }
        }
    case .failure(let error):
        print("Failed to fetch breakout rooms: \(error.value.message)")
    }
}
```

```js
// 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.

```js
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
);
```

```js
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
);
```

```js
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
);
```

```kotlin
meeting.connectedMeetings.moveParticipantsWithCustomPreset(
    sourceMeetingId = "SOURCE_MEETING_ID",
    destinationMeetingId = "TARGET_MEETING_ID",
    participants = listOf(
        MoveParticipantPayload(id = "PARTICIPANT_ID_1", presetId = "PRESET_ID_1"),
        MoveParticipantPayload(id = "PARTICIPANT_ID_2", presetId = "PRESET_ID_2")
    )
) { error ->
    if (error != null) {
        println("Failed to move participants: $error")
    } else {
        println("Participants moved with custom preset successfully")
    }
}
```

```swift
meeting.connectedMeetings.moveParticipantsWithCustomPreset(
    sourceMeetingId: "SOURCE_MEETING_ID",
    destinationMeetingId: "TARGET_MEETING_ID",
    participants: [
        MoveParticipantPayload(id: "PARTICIPANT_ID_1", presetId: "PRESET_ID_1"),
        MoveParticipantPayload(id: "PARTICIPANT_ID_2", presetId: "PRESET_ID_2")
    ]
) { error in
    if let error = error {
        print("Failed to move participants: \(error)")
    } else {
        print("Participants moved with custom preset successfully")
    }
}
```

```js
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.

```js
// 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");
});
```

```js
// 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");
});
```

```js
// 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");
});
```

```kotlin
meeting.addConnectedMeetingsEventListener(object : RtkConnectedMeetingsEventListener {
    // Triggered when a meeting switch is initiated — use this to show a loading UI
    override fun onChangingMeeting(meetingId: String) {
        println("Switching to breakout room or main meeting with id: $meetingId")
        println("Show a custom UI to indicate that a meeting switch is happening")
    }

    // Triggered when the meeting switch is complete
    override fun onMeetingChanged(error: MeetingError?) {
        if (error != null) {
            println("Failed to switch meeting: $error")
        } else {
            println("Switched to breakout room or main meeting successfully")
        }
    }

    override fun onStateUpdate(meetings: List<RtkConnectedMeeting>, parentMeeting: RtkConnectedMeeting?) {}
})
```

```swift
class MyListener: RtkConnectedMeetingsEventListener {
    // Triggered when a meeting switch is initiated — use this to show a loading UI
    func onChangingMeeting(meetingId: String) {
        print("Switching to breakout room or main meeting with id: \(meetingId)")
        print("Show a custom UI to indicate that a meeting switch is happening")
    }

    // Triggered when the meeting switch is complete
    func onMeetingChanged(error: MeetingError?) {
        if let error = error {
            print("Failed to switch meeting: \(error)")
        } else {
            print("Switched to breakout room or main meeting successfully")
        }
    }

    func onStateUpdate(meetings: [RtkConnectedMeeting], parentMeeting: RtkConnectedMeeting?) {}
}

meeting.addConnectedMeetingsEventListener(MyListener())
```

The `useRealtimeKitClient` hook automatically handles the `meetingChanged` event and swaps the active client reference when the local participant is moved to a breakout room or back to the main meeting. No additional setup is needed.

If you are using the `RtkMeeting` UI Kit component, the transition UI (the "Joining…" screen) is also handled automatically.

To show a custom loading screen during the switch, listen to the `changingMeeting` event:

```tsx
useEffect(() => {
  if (!meeting) return;

  const onChangingMeeting = (meetingId: string) => {
    console.log("Switching to meeting:", meetingId);
    // Show a loading indicator
  };

  meeting.connectedMeetings.on("changingMeeting", onChangingMeeting);
  return () => meeting.connectedMeetings.removeListener("changingMeeting", onChangingMeeting);
}, [meeting]);
```

### Close breakout rooms

You can close/delete the breakout rooms. This will force participants in those meetings to come to the main room.

```js
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.

```js
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);
```

```js
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.

```js
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);
```

```js
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.

```js
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);
```

```kotlin
meeting.connectedMeetings.deleteMeetings(
    meetingIds = listOf("MEETING_ID_TO_CLOSE_1", "MEETING_ID_TO_CLOSE_2")
) { error ->
    if (error != null) {
        println("Failed to close breakout rooms: $error")
    } else {
        println("Breakout rooms closed successfully")
    }
}
```

This will also trigger the `onStateUpdate` event, updating the list of breakout rooms and participants.

```kotlin
meeting.addConnectedMeetingsEventListener(object : RtkConnectedMeetingsEventListener {
    override fun onStateUpdate(meetings: List<RtkConnectedMeeting>, parentMeeting: RtkConnectedMeeting?) {
        println("State updated. Meetings: $meetings, Parent: $parentMeeting")

        // Alternatively, access state directly from the connectedMeetings object
        println("Meetings List: ${meeting.connectedMeetings.meetings}")
        println("Parent Meeting: ${meeting.connectedMeetings.parentMeeting}")
    }

    override fun onChangingMeeting(meetingId: String) {}
    override fun onMeetingChanged(error: MeetingError?) {}
})
```

```swift
meeting.connectedMeetings.deleteMeetings(meetingIds: ["MEETING_ID_TO_CLOSE_1", "MEETING_ID_TO_CLOSE_2"]) { error in
    if let error = error {
        print("Failed to close breakout rooms: \(error)")
    } else {
        print("Breakout rooms closed successfully")
    }
}
```

This will also trigger the `onStateUpdate` event, updating the list of breakout rooms and participants.

```swift
class MyListener: RtkConnectedMeetingsEventListener {
    func onStateUpdate(meetings: [RtkConnectedMeeting], parentMeeting: RtkConnectedMeeting?) {
        print("State updated. Meetings: \(meetings), Parent: \(String(describing: parentMeeting))")

        // Alternatively, access state directly from the connectedMeetings object
        print("Meetings List: \(meeting.connectedMeetings.meetings)")
        print("Parent Meeting: \(String(describing: meeting.connectedMeetings.parentMeeting))")
    }

    func onChangingMeeting(meetingId: String) {}
    func onMeetingChanged(error: MeetingError?) {}
}

meeting.addConnectedMeetingsEventListener(MyListener())
```

```js
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.

```js
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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/breakout-rooms/#page","headline":"Breakout Rooms · Cloudflare Realtime docs","description":"Create and manage breakout rooms to split participants into smaller groups in RealtimeKit.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/breakout-rooms/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-09","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Send and receive chat messages in RealtimeKit meetings using the Core SDK.
title: Chat
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Chat

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/chat/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```js
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`.

```js
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.

```jsx
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`.

```jsx
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.

```plaintext
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`.

```plaintext
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.

```plaintext
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`.

```plaintext
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.

```plaintext
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`.

```plaintext
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.

```jsx
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`.

```jsx
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.

```js
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.

```jsx
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.

```jsx
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.

```html
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*" />
<button onclick="onSendImage()">Send Image</button>
```

```js
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.

```jsx
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.

```jsx
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()`.

```html
<label for="file">Select file:</label>
<input type="file" id="file" name="file" />
<button onclick="onSendFile()">Send File</button>
```

```js
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()`.

```jsx
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()`.

```jsx
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:

```js
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:

```jsx
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:

```jsx
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.

```js
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.

```js
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.

```jsx
import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";

// useRealtimeKitSelector hooks only works when `RealtimeKitProvider` is used.
const messages = useRealtimeKitSelector((m) => m.chat.messages);
```

Alternatively:

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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`).

```js
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`).

```jsx
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`).

```jsx
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`.

```html
<label for="img">Edit image:</label>
<input type="file" id="img" name="img" accept="image/*" />
<button onclick="onEditImage()">Edit Image</button>
```

```js
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`.

```jsx
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.

```jsx
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()`.

```html
<label for="file">Edit file:</label>
<input type="file" id="file" name="file" />
<button onclick="onEditFile()">Edit File</button>
```

```js
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()`.

```jsx
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()`.

```jsx
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:

```js
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:

```jsx
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:

```jsx
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.

```js
// 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.

```jsx
// 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.

```jsx
// 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:

```js
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:

```jsx
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:

```jsx
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:

```js
// 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`.

```js
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.

```js
// 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.

```js
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:

```jsx
// 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`.

```jsx
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.

```jsx
// 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.

```jsx
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:

```jsx
// 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`.

```jsx
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.

```jsx
// 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.

```jsx
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`.

```js
const messageId = "...";
await meeting.chat.deleteMessage(messageId);
```

The `meeting.chat` namespace exposes a method called `deleteMessage()`. It takes a parameter `messageId` of type `string`.

```jsx
const messageId = "...";
await meeting.chat.deleteMessage(messageId);
```

The `meeting.chat` namespace exposes a method called `deleteMessage()`. It takes a parameter `messageId` of type `string`.

```jsx
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:

```json
{
	"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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/chat/#page","headline":"Chat · Cloudflare Realtime docs","description":"Send and receive chat messages in RealtimeKit meetings using the Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/chat/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Detect and display active speakers in RealtimeKit meetings using the Core SDK.
title: Display active speakers
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Display active speakers

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/display-active-speakers/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```ts
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:

```ts
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:

```ts
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:

```ts
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:

```ts
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:

```ts
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:

```tsx
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:

```tsx
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:

```ts
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:

```ts
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.

```ts
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.

```ts
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:

```ts
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.

```ts
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.

```ts
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:

```ts
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.

```ts
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:

```tsx
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:

```tsx
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:

```tsx
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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/display-active-speakers/#page","headline":"Display active speakers · Cloudflare Realtime docs","description":"Detect and display active speakers in RealtimeKit meetings using the Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/display-active-speakers/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: End a RealtimeKit session for all participants and stop active recordings.
title: End a session
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# End a session

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/end-a-session/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.  
```ts  
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.  
}  
```  
```ts  
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.  
}  
```  
```ts  
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`.  
```ts  
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`.  
```ts  
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`.  
```ts  
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`.  
```ts  
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`.  
```ts  
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`.  
```ts  
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`

```bash
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`

```bash
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`

```bash
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/).

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/end-a-session/#page","headline":"End a session · Cloudflare Realtime docs","description":"End a RealtimeKit session for all participants and stop active recordings.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/end-a-session/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: RealtimeKit error codes for identifying and troubleshooting SDK and API issues.
title: Error Codes
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Error Codes

Last updated May 28, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/error-codes/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

#### Error code: 0014

* **Error message**: Media connection failed
* **Possible reason**: ICE (Interactive Connectivity Establishment) connection failed
* **Possible solution**: Make sure your network allows WebRTC connections and turn.cloudflare.com & stun.cloudflare.com are accessible.

## 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/error-codes/#page","headline":"Error Codes · Cloudflare Realtime docs","description":"RealtimeKit error codes for identifying and troubleshooting SDK and API issues.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/error-codes/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-05-28","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Manage local user media devices, audio, video, and screenshare in RealtimeKit meetings.
title: Local Participant
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Local Participant

Last updated Jul 9, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/local-participant/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```js
// 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
```

```jsx
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
```

```jsx
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:

```js
// 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
```

```jsx
// 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
```

```jsx
// 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:

```js
// 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

```jsx
// 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**

```jsx
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
```

```jsx
// 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**

```jsx
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:

```js
// Enable audio (unmute)
await meeting.self.enableAudio();

// Disable audio (mute)
await meeting.self.disableAudio();

// Check current status
const isAudioEnabled = meeting.self.audioEnabled;
```

```jsx
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
```

```jsx
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:

```js
// Enable video
await meeting.self.enableVideo();

// Disable video
await meeting.self.disableVideo();

// Check current status
const isVideoEnabled = meeting.self.videoEnabled;
```

```jsx
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
```

```jsx
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:

```js
// Enable screen share
await meeting.self.enableScreenShare();

// Disable screen share
await meeting.self.disableScreenShare();

// Check current status
const isScreenShareEnabled = meeting.self.screenShareEnabled;
```

```jsx
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:

```plaintext
<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.

```jsx
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:

```xml
<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:

```js
await meeting.self.setName("New Name");
```

Note

Name changes only reflect across all participants if done before joining the meeting.

```jsx
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.

```jsx
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

```js
// 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 }
```

```jsx
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:

```jsx
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()
```

```jsx
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:

```jsx
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:

```js
// 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.

```js
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:

```html
<video id="local-video" autoplay playsinline></video>
```

```js
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:

```js
meeting.self.deregisterVideoElement(videoElement);
```

### Use UI Kit component

Display local video with the UI Kit video tile component:

```jsx
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:

```jsx
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)
}
```

```jsx
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:

```xml
<key>RTKRTCAppGroupIdentifier</key>
<string>(name of the group you have created)</string>
```

Add this key inside the Info.plist of the main App:

```xml
<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:

```xml
<key>RTKRTCAppGroupIdentifier</key>
<string>(name of the group you have created)</string>
```

Add this key inside the Info.plist of the main App:

```xml
<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 **Signing & Capabilities** tab, click **+** and add **App Groups**.
3. Add the same App Group to your main app target, using the same identifier for both.

### Add screenshare sources via Podfile

The SDK ships a Ruby helper script that adds the required screenshare Swift source files directly to your Broadcast Upload Extension target. Add the following to your `Podfile`:

```ruby
# Add this line at the top
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "@cloudflare/realtimekit-react-native/ios/scripts/screenshare_sources.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

target 'YourApp' do
  ...
  post_install do |installer|
    ...
	  # Add this line here
    add_screenshare_sources(
      installer,
      project_name: 'YourApp',              # your Xcode project name (without .xcodeproj)
      extension_target_name: 'YourAppScreenshare' # your Broadcast Upload Extension target name
    )
	  ...
  end
end

target 'YourAppScreenshare' do
# Remove the old steps added if any
end
```

Then run:

```bash
pod install
```

### Configure SampleHandler

In your Broadcast Upload Extension, edit `SampleHandler.swift`:

```swift
class SampleHandler: RTKScreenshareHandler {
  override init() {
    super.init(
      appGroupIdentifier: "<YOUR_APP_GROUP_IDENTIFIER>",
      bundleIdentifier: "<YOUR_APP_BUNDLE_IDENTIFIER>"
    )
  }
}
```

Replace `<YOUR_APP_GROUP_IDENTIFIER>` with the App Group you created (for example, `group.com.yourcompany.yourapp`) and `<YOUR_APP_BUNDLE_IDENTIFIER>` with your main app's bundle identifier.

### Update Info.plist

Add the following key to **both** your main app and extension `Info.plist` files:

```xml
<key>RTCAppGroupIdentifier</key>
<string>(YOUR_APP_GROUP_IDENTIFIER)</string>
```

Add this key to the main app `Info.plist` only:

```xml
<key>RTCAppScreenSharingExtension</key>
<string>(Bundle Identifier of the Broadcast upload extension)</string>
```

### Enable screen share

```js
meeting.self.enableScreenShare();
```

To stop the screen share:

```js
meeting.self.disableScreenShare();
```

## Events

### Room joined

Fires when the local user joins the meeting:

```js
meeting.self.on("roomJoined", () => {
	console.log("Successfully joined the meeting");
});
```

```jsx
const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);

useEffect(() => {
	if (roomJoined) {
		console.log("Successfully joined the meeting");
	}
}, [roomJoined]);
```

Or use event listener:

```jsx
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.

```jsx
const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);

useEffect(() => {
	if (roomJoined) {
		console.log("Successfully joined the meeting");
	}
}, [roomJoined]);
```

Or use event listener:

```jsx
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:

```js
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'`

```jsx
const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);

useEffect(() => {
	if (!roomJoined) {
		console.log("Left the meeting");
	}
}, [roomJoined]);
```

Or use event listener for detailed state:

```jsx
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.

```jsx
const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);

useEffect(() => {
	if (!roomJoined) {
		console.log("Left the meeting");
	}
}, [roomJoined]);
```

Or use event listener for detailed state:

```jsx
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:

```js
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();
	}
});
```

```jsx
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
        }
    }
}
```

```jsx
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:

```js
meeting.self.on("audioUpdate", ({ audioEnabled, audioTrack }) => {
	console.log("Audio state:", audioEnabled);

	if (audioEnabled) {
		// Audio track is available
		console.log("Microphone is on");
	}
});
```

```jsx
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
        }
    }
}
```

```jsx
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:

```js
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();
		}
	},
);
```

```jsx
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
```

```jsx
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:

```js
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);
	}
});
```

```jsx
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)")
}
```

```jsx
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):

```js
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);
});
```

```jsx
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
    }
})
```

```jsx
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:

```js
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:

```js
// 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
  }
}
```

```jsx
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.

```jsx
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:

```js
// 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:

```jsx
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:

```jsx
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:

```js
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'`

```jsx
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
```

```jsx
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.

```jsx
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
    }
}
```

```jsx
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
```

```jsx
// 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:

```jsx
meeting.self.updateVideoConstraints({
	width: { ideal: 1920 },
	height: { ideal: 1080 },
});
```

### Update Screenshare Constraints

Update screenshare resolution while already streaming:

```jsx
meeting.self.updateScreenshareConstraints({
	width: { ideal: 1920 },
	height: { ideal: 1080 },
});
```

Flutter SDK does not currently expose runtime constraint updates.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/local-participant/#page","headline":"Local Participant · Cloudflare Realtime docs","description":"Manage local user media devices, audio, video, and screenshare in RealtimeKit meetings.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/local-participant/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-09","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Use RealtimeKit host controls to mute, pin, or remove participants in a live session.
title: Manage Participants in a Session
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Manage Participants in a Session

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/manage-participants-in-a-session/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```ts
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.

```ts
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.

```ts
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`.

```jsx
const joinedParticipants = meeting.participants.joined;
const participant = joinedParticipants.toArray()[0];
if (!participant) {
	// No remote participants are currently joined.
}
```

Or use the `useRealtimeKitSelector` hook:

```jsx
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("audioUpdate", ({ audioEnabled, audioTrack }) => {  
	// audioEnabled is false  
	// Update UI for the participant  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("audioUpdate", ({ audioEnabled, audioTrack }) => {  
	// audioEnabled is false  
	// Update UI for the participant  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("audioUpdate", ({ audioEnabled, audioTrack }) => {  
	// audioEnabled is false  
	// Update UI for the participant  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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.

```jsx
const canDisableParticipantAudio = meeting.self.permissions.canDisableParticipantAudio;
if (!canDisableParticipantAudio) {
	// Disable the control in your UI.
}
```

1. Call `disableAudio()` on the target participant.

```jsx
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`.

```jsx
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.  
```ts  
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`.  
```ts  
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:  
```ts  
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`:  
```ts  
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.  
```ts  
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`.  
```ts  
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:  
```ts  
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`:  
```ts  
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.  
```ts  
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`.  
```ts  
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:  
```ts  
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`:  
```ts  
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.

```jsx
const canDisableParticipantAudio = meeting.self.permissions.canDisableParticipantAudio;
if (!canDisableParticipantAudio) {
	// Disable the control in your UI.
}
```

1. Call `disableAllAudio()` on the participants object.

```jsx
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`.

```jsx
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("videoUpdate", ({ videoEnabled, videoTrack }) => {  
	// videoEnabled is false  
	// Update UI for the participant  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("videoUpdate", ({ videoEnabled, videoTrack }) => {  
	// videoEnabled is false  
	// Update UI for the participant  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("videoUpdate", ({ videoEnabled, videoTrack }) => {  
	// videoEnabled is false  
	// Update UI for the participant  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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.

```jsx
const canDisableParticipantVideo = meeting.self.permissions.canDisableParticipantVideo;
if (!canDisableParticipantVideo) {
	// Disable the control in your UI.
}
```

1. Call `disableVideo()` on the target participant.

```jsx
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`.

```jsx
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.  
```ts  
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`.  
```ts  
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:  
```ts  
meeting.participants.joined.on(  
	"videoUpdate",  
	(participant, { videoEnabled, videoTrack }) => {  
		// videoEnabled is false  
		// Update UI for the participant  
	},  
);  
```  
Listen to local participant update on `meeting.self`:  
```ts  
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.  
```ts  
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`.  
```ts  
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:  
```ts  
meeting.participants.joined.on(  
	"videoUpdate",  
	(participant, { videoEnabled, videoTrack }) => {  
		// videoEnabled is false  
		// Update UI for the participant  
	},  
);  
```  
Listen to local participant update on `meeting.self`:  
```ts  
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.  
```ts  
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`.  
```ts  
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:  
```ts  
meeting.participants.joined.on(  
	"videoUpdate",  
	(participant, { videoEnabled, videoTrack }) => {  
		// videoEnabled is false  
		// Update UI for the participant  
	},  
);  
```  
Listen to local participant update on `meeting.self`:  
```ts  
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.

```jsx
const canDisableParticipantVideo = meeting.self.permissions.canDisableParticipantVideo;
if (!canDisableParticipantVideo) {
	// Disable the control in your UI.
}
```

1. Call `disableAllVideo()` on the participants object.

```jsx
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`.

```jsx
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("pinned", (updatedParticipant) => {  
	// updatedParticipant.isPinned is true  
	// Update your UI.  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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`:  
```ts  
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("pinned", (updatedParticipant) => {  
	// updatedParticipant.isPinned is true  
	// Update your UI.  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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`:  
```ts  
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("pinned", (updatedParticipant) => {  
	// updatedParticipant.isPinned is true  
	// Update your UI.  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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`:  
```ts  
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.

```jsx
const canPinParticipant = meeting.self.permissions.pinParticipant;
if (!canPinParticipant) {
	// Disable the control in your UI.
}
```

1. Call `pin()` on the target participant.

```jsx
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`.

```jsx
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("unpinned", (updatedParticipant) => {  
	// updatedParticipant.isPinned is false  
	// Update your UI.  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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`:  
```ts  
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("unpinned", (updatedParticipant) => {  
	// updatedParticipant.isPinned is false  
	// Update your UI.  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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`:  
```ts  
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.  
```ts  
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`.  
```ts  
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  
```ts  
participant.on("unpinned", (updatedParticipant) => {  
	// updatedParticipant.isPinned is false  
	// Update your UI.  
});  
```

**Option B**: Listen on the `joined` map  
```ts  
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`:  
```ts  
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.

```jsx
const canPinParticipant = meeting.self.permissions.pinParticipant;
if (!canPinParticipant) {
	// Disable the control in your UI.
}
```

1. Call `unpin()` on the target participant.

```jsx
participant.unpin();
```

1. Handle the result by listening for updates. After the call succeeds, the target participant's `isPinned` becomes `false`.

```jsx
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.  
```ts  
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`.  
```ts  
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`.  
```ts  
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`.  
```ts  
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.  
```ts  
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`.  
```ts  
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`.  
```ts  
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`.  
```ts  
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.  
```ts  
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`.  
```ts  
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`.  
```ts  
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`.  
```ts  
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.

```jsx
const canKickParticipant = meeting.self.permissions.kickParticipant;
if (!canKickParticipant) {
	// Disable the control in your UI.
}
```

1. Call `kick()` on the target participant.

```jsx
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`.

```jsx
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.  
```ts  
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`.  
```ts  
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`.  
```ts  
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.  
```ts  
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`.  
```ts  
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`.  
```ts  
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.  
```ts  
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`.  
```ts  
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`.  
```ts  
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.

```jsx
const canKickParticipant = meeting.self.permissions.kickParticipant;
if (!canKickParticipant) {
	// Disable the control in your UI.
}
```

1. Call `kickAll()` on the participants object.

```jsx
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.

```jsx
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/).

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/manage-participants-in-a-session/#page","headline":"Manage Participants in a Session · Cloudflare Realtime docs","description":"Use RealtimeKit host controls to mute, pin, or remove participants in a live session.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/manage-participants-in-a-session/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Acquire and manage participant audio and video tracks in RealtimeKit using different approaches.
title: Media Acquisition Approaches
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Media Acquisition Approaches

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/media-acquisition-approaches/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

Caution

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.

```ts
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>;

}
```

```js
const authToken = "<auth-token>";
const meeting = await RealtimeKitClient.init({
	authToken,
});

console.log("audioTrack:: ", meeting.self.audioTrack);
console.log("videoTrack:: ", meeting.self.videoTrack);
```

```ts
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.

```ts
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.

```js
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.

```ts
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:

```ts
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>;

}
```

```js
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);
```

```ts
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);
	}
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/media-acquisition-approaches/#page","headline":"Media Acquisition Approaches · Cloudflare Realtime docs","description":"Acquire and manage participant audio and video tracks in RealtimeKit using different approaches.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/media-acquisition-approaches/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Access meeting state, type, and connection metadata in the RealtimeKit Core SDK.
title: Meeting Metadata
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Meeting Metadata

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-metadata/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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}.`,
	);
}
```

```jsx
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}.");
```

```tsx
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.

```jsx
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.

```tsx
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.

```jsx
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.

```tsx
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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/meeting-metadata/#page","headline":"Meeting Metadata · Cloudflare Realtime docs","description":"Access meeting state, type, and connection metadata in the RealtimeKit Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/meeting-metadata/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Explore the RealtimeKit meeting object and its namespaces for participants, chat, polls, and media.
title: Meeting Object Explained
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Meeting Object Explained

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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://developers.cloudflare.com/realtime/realtimekit/core/plugins/) manages meeting plugins (collaborative apps). Activation lives on the `Plugin` object.

```javascript
// Get all available plugins
const allPlugins = meeting.plugins.all.toArray();

// Get active plugins
const activePlugins = meeting.plugins.active.toArray();

// Activate a plugin for all participants
await meeting.plugins.all.get(pluginId).activate();

// Deactivate a plugin for all participants
await meeting.plugins.all.get(pluginId).deactivate();
```

The [meeting.plugins](https://developers.cloudflare.com/realtime/realtimekit/core/plugins/) manages meeting plugins (collaborative apps). Activation lives on the `Plugin` object.

```javascript
// Get all available plugins
const allPlugins = meeting.plugins.all.toArray();

// Get active plugins
const activePlugins = meeting.plugins.active.toArray();

// Activate a plugin for all participants
await meeting.plugins.all.get(pluginId).activate();

// Deactivate a plugin for all participants
await meeting.plugins.all.get(pluginId).deactivate();
```

The [meeting.plugins](https://developers.cloudflare.com/realtime/realtimekit/core/plugins/) manages meeting plugins (collaborative apps). Activation lives on the `Plugin` object.

```javascript
// Get all available plugins
const allPlugins = meeting.plugins.all.toArray();

// Get active plugins
const activePlugins = meeting.plugins.active.toArray();

// Activate a plugin for all participants
await meeting.plugins.all.get(pluginId).activate();

// Deactivate a plugin for all participants
await meeting.plugins.all.get(pluginId).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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/#page","headline":"Meeting Object Explained · Cloudflare Realtime docs","description":"Explore the RealtimeKit meeting object and its namespaces for participants, chat, polls, and media.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/meeting-object-explained/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Register and control plugins in RealtimeKit meetings.
title: Plugins
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Plugins

Last updated Jul 9, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/plugins/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

This guide explains how to register, activate, and render plugins in a meeting using the Cloudflare RealtimeKit Core SDK.

Plugins are interactive real-time applications that run inside a meeting, such as a shared whiteboard or a document viewer. When a participant activates a plugin, it becomes active for everyone in the session.

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

WebMobile

ReactWeb ComponentsAngular

Note

You must register a plugin with the same `id` on every platform your participants use. A plugin is only visible to a participant who has registered it, and activation state only syncs across participants who share the same plugin `id`. If a web participant registers a plugin under one `id` and a mobile participant uses a different `id`, the plugin will not be visible or synced across both platforms.

## The Plugins module

The meeting plugins object is available at `meeting.plugins`. It exposes two collections of [Plugin](#the-plugin-object) objects:

* `all`: every plugin available to the local participant.
* `active`: the plugins that are currently running in the session.

```js
// All plugins available to you
const allPlugins = meeting.plugins.all.toArray();

// Plugins currently active in the session
const activePlugins = meeting.plugins.active.toArray();

// Get a single plugin by its id
const plugin = meeting.plugins.all.get(pluginId);
```

Use the `useRealtimeKitSelector` hook to read plugins reactively. The hook only works when your component tree is wrapped in `RealtimeKitProvider`.

```jsx
import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";

const allPlugins = useRealtimeKitSelector((m) => m.plugins.all.toArray());
const activePlugins = useRealtimeKitSelector((m) => m.plugins.active.toArray());
```

```kotlin
// All plugins available to you
val allPlugins = meeting.plugins.all

// Plugins currently active in the session
val activePlugins = meeting.plugins.active

// Get a single plugin by its id
val plugin = meeting.plugins.all.firstOrNull { it.id == pluginId }
```

```swift
// All plugins available to you
let allPlugins = meeting.plugins.all

// Plugins currently active in the session
let activePlugins = meeting.plugins.active

// Get a single plugin by its id
let plugin = meeting.plugins.all.first { $0.id == pluginId }
```

Use the `useRealtimeKitSelector` hook to read plugins reactively.

```tsx
import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";

const allPlugins = useRealtimeKitSelector((m) => m.plugins.all.toArray());
const activePlugins = useRealtimeKitSelector((m) => m.plugins.active.toArray());

// Get a single plugin by its namespaced id
const plugin = useRealtimeKitSelector((m) => m.plugins.all.get(pluginId));
```

## Register a plugin

You register the plugins available in a session when you initialize the SDK. Each configuration provides the metadata RealtimeKit uses to list the plugin and the location it loads.

Pass an array of plugin configurations as `defaults.plugins`. Each configuration provides the metadata RealtimeKit uses to list the plugin and the `component` it renders.

```ts
RealtimeKitClient.init({
	authToken: "<auth_token>",
	defaults: {
		plugins: [
			{
				// User-provided unique id. The SDK prefixes it with
				// `{meetingId}:` to create the namespaced `plugin.id`.
				id: "whiteboard",
				// Display name shown in the plugins panel
				name: "Whiteboard",
				// Icon URL or data URI shown next to the name
				icon: "https://example.com/whiteboard.png",
				// Per-plugin permissions for the local participant
				permissions: {
					canActivate: true,
					canDeactivate: true,
				},
				// The element rendered when the plugin is active
				component: document.createElement("my-whiteboard"),
			},
		],
	},
});
```

The `component` is an `HTMLElement`. The [rtk-plugin-main](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugin-main/) component projects it into the meeting layout, so your application styles continue to apply.

Each plugin configuration accepts the following fields:

| Field       | Description                                                                                | Type                                             | Required |
| ----------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------- |
| id          | Unique identifier for the plugin. The SDK prefixes it with {meetingId}: to form plugin.id. | string                                           | true     |
| name        | Display name shown in the plugins panel.                                                   | string                                           | true     |
| icon        | Icon URL or data URI shown next to the name.                                               | string                                           | true     |
| permissions | Controls whether the local participant can activate or deactivate the plugin.              | { canActivate: boolean; canDeactivate: boolean } | true     |
| component   | Element rendered when the plugin is active.                                                | HTMLElement                                      | true     |

Pass plugin configurations as `defaults.plugins` when calling `initMeeting`. In React Native, `component` should be an object with a `src` property containing the URL to render — you can load this in a `WebView` or use the UI Kit to handle rendering automatically.

```tsx
const [meeting, initMeeting] = useRealtimeKitClient();

await initMeeting({
  authToken: "<auth_token>",
  defaults: {
    plugins: [
      {
        // User-provided unique id. The SDK prefixes it with
        // `{meetingId}:` to create the namespaced `plugin.id`.
        id: "whiteboard",
        // Display name shown in the plugins panel
        name: "Whiteboard",
        // Icon URL shown next to the name
        icon: "https://example.com/whiteboard.png",
        // Per-plugin permissions for the local participant
        permissions: {
          canActivate: true,
          canDeactivate: true,
        },
        // URL to render when the plugin is active.
        // Pass an object with a src property: { src: string }.
        component: { src: "https://example.com/whiteboard/" },
      },
    ],
  },
});
```

Each plugin configuration accepts the following fields:

| Field       | Description                                                                                | Type                                             | Required |
| ----------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------- |
| id          | Unique identifier for the plugin. The SDK prefixes it with {meetingId}: to form plugin.id. | string                                           | true     |
| name        | Display name shown in the plugins panel.                                                   | string                                           | true     |
| icon        | Icon URL shown next to the name.                                                           | string                                           | true     |
| permissions | Controls whether the local participant can activate or deactivate the plugin.              | { canActivate: boolean; canDeactivate: boolean } | true     |
| component   | Object with a src URL to render when the plugin is active.                                 | { src: string }                                  | true     |

Pass a `pluginConfigs` list to `RtkMeetingInfo`. The SDK loads each plugin's `url` directly into a WebView when the plugin is activated.

```kotlin
val meetingInfo = RtkMeetingInfo(
	authToken = "<auth_token>",
	pluginConfigs = listOf(
		RtkClientPluginConfig(
			// User-provided unique id. The SDK prefixes it with
			// `{meetingId}:` to create the namespaced `plugin.id`.
			id = "whiteboard",
			// Display name shown in the plugins list
			name = "Whiteboard",
			// Icon URL shown next to the name
			icon = "https://example.com/whiteboard.png",
			// URL loaded into the plugin WebView when the plugin is active
			url = "https://example.com/whiteboard/",
			// Per-plugin permissions for the local participant
			permissions = RtkClientPluginPermissions(
				canActivate = true,
				canDeactivate = true,
			),
		),
	),
)
```

Each plugin configuration accepts the following fields:

| Field       | Description                                                                                | Type                       | Required |
| ----------- | ------------------------------------------------------------------------------------------ | -------------------------- | -------- |
| id          | Unique identifier for the plugin. The SDK prefixes it with {meetingId}: to form plugin.id. | String                     | true     |
| name        | Display name shown in the plugins list.                                                    | String                     | true     |
| icon        | Icon URL shown next to the name.                                                           | String                     | true     |
| url         | URL loaded into the plugin WebView when the plugin is active.                              | String                     | true     |
| permissions | Controls whether the local participant can activate or deactivate the plugin.              | RtkClientPluginPermissions | true     |

Pass a `pluginConfigs` array to `RtkMeetingInfo`. The SDK loads each plugin's `url` directly into a WebView when the plugin is activated.

```swift
let meetingInfo = RtkMeetingInfo(
	authToken: "<auth_token>",
	pluginConfigs: [
		RtkClientPluginConfig(
			// User-provided unique id. The SDK prefixes it with
			// `{meetingId}:` to create the namespaced `plugin.id`.
			id: "whiteboard",
			// Display name shown in the plugins list
			name: "Whiteboard",
			// Icon URL shown next to the name
			icon: "https://example.com/whiteboard.png",
			// URL loaded into the plugin WebView when the plugin is active
			url: "https://example.com/whiteboard/",
			// Per-plugin permissions for the local participant
			permissions: RtkClientPluginPermissions(
				canActivate: true,
				canDeactivate: true
			)
		)
	]
)
```

Each plugin configuration accepts the following fields:

| Field       | Description                                                                                | Type                       | Required |
| ----------- | ------------------------------------------------------------------------------------------ | -------------------------- | -------- |
| id          | Unique identifier for the plugin. The SDK prefixes it with {meetingId}: to form plugin.id. | String                     | true     |
| name        | Display name shown in the plugins list.                                                    | String                     | true     |
| icon        | Icon URL shown next to the name.                                                           | String                     | true     |
| url         | URL loaded into the plugin WebView when the plugin is active.                              | String                     | true     |
| permissions | Controls whether the local participant can activate or deactivate the plugin.              | RtkClientPluginPermissions | true     |

## Activate and deactivate a plugin

Activation lives on the `Plugin` object. Calling `activate()` enables the plugin for every participant in the session, and `deactivate()` disables it for everyone. Both methods respect the plugin's `permissions`.

```js
const plugin = meeting.plugins.all.get(pluginId);

// Activate for all participants
await plugin.activate();

// Deactivate for all participants
await plugin.deactivate();
```

```jsx
const plugins = useRealtimeKitSelector((m) => m.plugins);

const plugin = plugins.all.get(pluginId);

// Activate for all participants
await plugin.activate();

// Deactivate for all participants
await plugin.deactivate();
```

```kotlin
val plugin = meeting.plugins.all.firstOrNull { it.id == pluginId } ?: return

// Activate for all participants
plugin.activate()

// Deactivate for all participants
plugin.deactivate()
```

```swift
guard let plugin = meeting.plugins.all.first(where: { $0.id == pluginId }) else { return }

// Activate for all participants
plugin.activate()

// Deactivate for all participants
plugin.deactivate()
```

Note

A participant can only activate a plugin when `permissions.canActivate` is `true`. A participant can deactivate a plugin when `permissions.canDeactivate` is `true`, or when they are the participant who activated it.

## The Plugin object

A `Plugin` object represents a single plugin. You obtain it from either collection in `meeting.plugins`.

| Property    | Description                                               | Type                                             |
| ----------- | --------------------------------------------------------- | ------------------------------------------------ |
| id          | Namespaced plugin id, in the form {meetingId}:{configId}. | string                                           |
| name        | Display name of the plugin.                               | string                                           |
| icon        | Icon URL or data URI.                                     | string                                           |
| permissions | Activation permissions for the local participant.         | { canActivate: boolean; canDeactivate: boolean } |
| component   | Element rendered when the plugin is active.               | HTMLElement                                      |
| active      | Whether the plugin is currently running.                  | boolean                                          |
| enabledBy   | Id of the participant who activated the plugin.           | string                                           |

| Property    | Description                                               | Type                       |
| ----------- | --------------------------------------------------------- | -------------------------- |
| id          | Namespaced plugin id, in the form {meetingId}:{configId}. | String                     |
| name        | Display name of the plugin.                               | String                     |
| icon        | Icon URL.                                                 | String                     |
| permissions | Activation permissions for the local participant.         | RtkClientPluginPermissions |

While a plugin is active, call `getPluginView()` to obtain the Android `WebView` that hosts it, and `sendData(eventName, data)` to push data into that WebView.

| Property    | Description                                               | Type                       |
| ----------- | --------------------------------------------------------- | -------------------------- |
| id          | Namespaced plugin id, in the form {meetingId}:{configId}. | String                     |
| name        | Display name of the plugin.                               | String                     |
| icon        | Icon URL.                                                 | String                     |
| permissions | Activation permissions for the local participant.         | RtkClientPluginPermissions |

While a plugin is active, call `getPluginView()` to obtain the `WKWebView` that hosts it, and `sendData(eventName:data:)` to push data into that WebView.

| Property    | Description                                                                              | Type                                             |
| ----------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------ |
| id          | Namespaced plugin id, in the form {meetingId}:{configId}.                                | string                                           |
| name        | Display name of the plugin.                                                              | string                                           |
| icon        | Icon URL.                                                                                | string                                           |
| permissions | Activation permissions for the local participant.                                        | { canActivate: boolean; canDeactivate: boolean } |
| component   | The object provided at registration. Contains a src URL that your rendering layer loads. | { src: string }                                  |
| active      | Whether the plugin is currently running.                                                 | boolean                                          |
| enabledBy   | Id of the participant who activated the plugin.                                          | string                                           |

## Listen to plugin events

A `Plugin` object emits events as its state changes. You can listen on a single plugin, or on a map to receive events for every plugin it contains.

| Event       | Description                                                       |
| ----------- | ----------------------------------------------------------------- |
| stateUpdate | Emitted when the plugin is activated or deactivated.              |
| enabled     | Emitted when the plugin becomes active for the local participant. |
| closed      | Emitted when the plugin is deactivated for the local participant. |
| ready       | Emitted when the plugin is ready to use.                          |

```js
const plugin = meeting.plugins.all.get(pluginId);

plugin.on("stateUpdate", ({ active, pluginId }) => {
	console.log(`Plugin ${pluginId} active:`, active);
});

// Listen for any plugin being added to or removed from the map
meeting.plugins.all.on("pluginAdded", (plugin) => {
	console.log("Plugin added:", plugin.name);
});

meeting.plugins.all.on("pluginDeleted", (plugin) => {
	console.log("Plugin removed:", plugin.name);
});
```

Register an `RtkPluginsEventListener` to receive plugin events.

| Callback            | Description                                               |
| ------------------- | --------------------------------------------------------- |
| onPluginActivated   | Called when a plugin is activated for all participants.   |
| onPluginDeactivated | Called when a plugin is deactivated for all participants. |
| onPluginMessage     | Called when a plugin sends a message to the app.          |
| onPluginFileRequest | Called when a plugin requests a file from the app.        |

```kotlin
val pluginsEventListener = object : RtkPluginsEventListener {
	override fun onPluginActivated(plugin: RtkPlugin) {
		// A plugin became active for all participants
	}

	override fun onPluginDeactivated(plugin: RtkPlugin) {
		// A plugin was deactivated for all participants
	}

	override fun onPluginMessage(plugin: RtkPlugin, eventName: String, data: Any?) {
		// A plugin sent a message to the app
	}

	override fun onPluginFileRequest(plugin: RtkPlugin) {
		// A plugin requested a file from the app
	}
}

meeting.addPluginsEventListener(pluginsEventListener)
```

Conform to `RtkPluginsEventListener` and register the listener to receive plugin events.

| Callback            | Description                                               |
| ------------------- | --------------------------------------------------------- |
| onPluginActivated   | Called when a plugin is activated for all participants.   |
| onPluginDeactivated | Called when a plugin is deactivated for all participants. |
| onPluginMessage     | Called when a plugin sends a message to the app.          |
| onPluginFileRequest | Called when a plugin requests a file from the app.        |

```swift
extension MeetingViewModel: RtkPluginsEventListener {
	func onPluginActivated(plugin: RtkPlugin) {
		// A plugin became active for all participants
	}

	func onPluginDeactivated(plugin: RtkPlugin) {
		// A plugin was deactivated for all participants
	}

	func onPluginMessage(plugin: RtkPlugin, eventName: String, data: Any?) {
		// A plugin sent a message to the app
	}

	func onPluginFileRequest(plugin: RtkPlugin) {
		// A plugin requested a file from the app
	}
}

meeting.addPluginsEventListener(self)
```

## Render plugins

If you use the UI Kit, RealtimeKit provides ready-made components for plugins:

* [rtk-plugins-toggle](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins-toggle/): a control bar button that opens and closes the plugins sidebar.
* [rtk-plugins](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins/): a list of available plugins with controls to activate or deactivate each one.
* [rtk-plugin-main](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugin-main/): renders the `component` of an active plugin in the meeting layout.

These components read from `meeting.plugins`, so they reflect plugin state automatically once you register your plugins at initialization.

When a plugin is active, `getPluginView()` returns the Android `WebView` that hosts it. Add this view to your layout to display the plugin.

```kotlin
val plugin = meeting.plugins.active.firstOrNull() ?: return

// Returns an Android WebView you can add to your layout
val pluginView = plugin.getPluginView()
```

When a plugin is active, `getPluginView()` returns the `WKWebView` that hosts it. Add this view to your view hierarchy to display the plugin.

```swift
guard let plugin = meeting.plugins.active.first else { return }

// Returns a WKWebView you can add to your view hierarchy
let pluginView = plugin.getPluginView()
```

The React Native UI Kit provides ready-made components for plugins:

* [RtkPluginsToggle](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpluginstoggle/): a control bar button that opens and closes the plugins sidebar.
* [RtkPlugins](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkplugins/): a panel listing available plugins with controls to activate or deactivate each one.
* [RtkPluginMain](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpluginmain/): renders the active plugin in a `WebView`.

These components read from `meeting.plugins` automatically once plugins are registered at initialization. If you use `RtkMeeting`, plugin UI is included without any additional setup.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/plugins/#page","headline":"Plugins · Cloudflare Realtime docs","description":"Register and control plugins in RealtimeKit meetings.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/plugins/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-09","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Create, vote on, and manage polls in RealtimeKit meetings using the Core SDK.
title: Polls
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Polls

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/polls/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```js
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`.

```js
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.

```jsx
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`.

```jsx
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:

```ts
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:

```js
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:

```jsx
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.

```ts
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:

```js
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:

```jsx
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.

```ts
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:

```js
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:

```js
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:

```jsx
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:

```jsx
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:

```ts
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:

```ts
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

```js
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

```jsx
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:

```jsx
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

```ts
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());
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/polls/#page","headline":"Polls · Cloudflare Realtime docs","description":"Create, vote on, and manage polls in RealtimeKit meetings using the Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/polls/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Access participant data, display videos, and handle events for remote participants in RealtimeKit.
title: Remote Participants
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Remote Participants

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```js
// 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:

```jsx
// 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:

```tsx
// 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).

```js
const participant = meeting.participants.joined.get(participantId);

// Access participant properties
console.log(participant.name);
console.log(participant.videoEnabled);
console.log(participant.audioEnabled);
```

```jsx
// 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"}');
}
```

```tsx
// 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`.

```js
// 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:

```jsx
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:

```tsx
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

```js
// 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:

```jsx
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.

```tsx
// 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

```js
// Switch to second page
await meeting.participants.setPage(2);
```

```jsx
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.

```tsx
// Switch to second page
await meeting.participants.setPage(2);
```

### Monitor view mode

```js
const viewMode = meeting.participants.viewMode;
const currentPage = meeting.participants.currentPage;
```

```jsx
const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);
const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);
```

Monitoring view mode is not available on this platform.

```tsx
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.

```js
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();
```

```jsx
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`

```tsx
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

```js
await meeting.participants.acceptWaitingRoomRequest(participantId);
```

```jsx
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);
```

```tsx
await meeting.participants.acceptWaitingRoomRequest(participantId);
```

#### Reject waiting room request

```js
await meeting.participants.rejectWaitingRoomRequest(participantId);
```

```jsx
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);
```

```tsx
await meeting.participants.rejectWaitingRoomRequest(participantId);
```

### Pin participants

The host can choose to pin or unpin participants to the grid.

```js
const participant = meeting.participants.joined.get(participantId);

// Pin a participant
await participant.pin();

// Unpin a participant
await participant.unpin();
```

```jsx
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`

```tsx
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.

```js
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.

```js
// 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:

```html
<video class="participant-video" id="participant-video"></video>
```

```js
// 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):

```js
meeting.self.registerVideoElement(videoElement, true);
```

Clean up when the video element is no longer needed:

```js
participant.deregisterVideoElement(videoElement);
```

To play a participant's video track on a `<video>` element:

```jsx
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):

```jsx
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`:

```tsx
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}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/#page","headline":"Remote Participants · Cloudflare Realtime docs","description":"Access participant data, display videos, and handle events for remote participants in RealtimeKit.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Events emitted by RealtimeKit participants for join, leave, pin, and grid changes.
title: Events
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Events

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/events/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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`.

```js
meeting.participants.on(
	"viewModeChanged",
	({ viewMode, currentPage, pageCount }) => {
		console.log("view mode changed", viewMode);
	},
);
```

Triggered when the view mode changes between `ACTIVE_GRID` and `PAGINATED`.

```jsx
const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);
```

Or use event listener:

```jsx
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`.

```tsx
const viewMode = useRealtimeKitSelector((m) => m.participants.viewMode);
```

Or use event listener:

```tsx
meeting.participants.on(
	"viewModeChanged",
	({ viewMode, currentPage, pageCount }) => {
		console.log("view mode changed", viewMode);
	},
);
```

### Page change

Triggered when the page changes in paginated mode.

```js
meeting.participants.on(
	"pageChanged",
	({ viewMode, currentPage, pageCount }) => {
		console.log("page changed", currentPage);
	},
);
```

Triggered when the page changes in paginated mode.

```jsx
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.

```tsx
const currentPage = useRealtimeKitSelector((m) => m.participants.currentPage);
const pageCount = useRealtimeKitSelector((m) => m.participants.pageCount);
```

### Active speaker

Triggered when a participant starts speaking.

```js
meeting.participants.on("activeSpeaker", (participant) => {
	console.log(`${participant.id} is currently speaking`);
});
```

```jsx
const activeSpeaker = useRealtimeKitSelector(
	(m) => m.participants.lastActiveSpeaker,
);
```

Or use event listener:

```jsx
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());
```

```tsx
const activeSpeaker = useRealtimeKitSelector(
	(m) => m.participants.lastActiveSpeaker,
);
```

Or use event listener:

```tsx
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.

```js
meeting.participants.joined.on("participantJoined", (participant) => {
	console.log(`A participant with id "${participant.id}" has joined`);
});
```

```jsx
const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);
```

Or use event listener:

```jsx
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());
```

```tsx
const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);
```

Or use event listener:

```tsx
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.

```js
meeting.participants.joined.on("participantLeft", (participant) => {
	console.log(`A participant with id "${participant.id}" has left the meeting`);
});
```

```jsx
const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);
```

Or use event listener:

```jsx
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());
```

```tsx
const joinedParticipants = useRealtimeKitSelector((m) => m.participants.joined);
```

Or use event listener:

```tsx
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:

```js
// 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.

```js
meeting.participants.joined.on("pinned", (participant) => {
	console.log(`Participant with id "${participant.id}" was pinned`);
});
```

```jsx
const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);
```

Or use event listener:

```jsx
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());
```

```tsx
const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);
```

Or use event listener:

```tsx
meeting.participants.joined.on("pinned", (participant) => {
	console.log(`Participant with id "${participant.id}" was pinned`);
});
```

### Participant unpinned

Triggered when a participant is unpinned.

```js
meeting.participants.joined.on("unpinned", (participant) => {
	console.log(`Participant with id "${participant.id}" was unpinned`);
});
```

```jsx
const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);
```

Or use event listener:

```jsx
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());
```

```tsx
const pinnedParticipants = useRealtimeKitSelector((m) => m.participants.pinned);
```

Or use event listener:

```tsx
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.

```js
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
	}
});
```

```jsx
// 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());
```

```tsx
// 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.

```js
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
	}
});
```

```jsx
// 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());
```

```tsx
// 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.

```js
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
	}
});
```

```jsx
// 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());
```

```tsx
// 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.

```js
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.

```jsx
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.

```tsx
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:

```js
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:

```js
meeting.participants.joined.on(
	"audioUpdate",
	(participant, { audioEnabled, audioTrack }) => {
		console.log(
			"The participant with id",
			participant.id,
			"has toggled their mic to",
			audioEnabled,
		);
	},
);
```

```jsx
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:

```jsx
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);
```

```tsx
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:

```tsx
const audioEnabled = useRealtimeKitSelector(
	(m) => m.participants.joined.get(participantId)?.audioEnabled,
);
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/events/#page","headline":"Events · Cloudflare Realtime docs","description":"Events emitted by RealtimeKit participants for join, leave, pin, and grid changes.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/events/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Render RealtimeKit participant video as a floating Picture-in-Picture tile in the browser.
title: Picture in Picture
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Picture in Picture

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/pip/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```js
const isSupported = meeting.participants.pip.isSupported();
```

## Enable Picture-in-Picture

```js
await meeting.participants.pip.enable();
```

## Disable Picture-in-Picture

```js
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.

```jsx
const isSupported = meeting.participants.pip.isSupported();
```

## Enable Picture-in-Picture

```jsx
await meeting.participants.pip.enable();
```

## Disable Picture-in-Picture

```jsx
await meeting.participants.pip.disable();
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/pip/#page","headline":"Picture in Picture · Cloudflare Realtime docs","description":"Render RealtimeKit participant video as a floating Picture-in-Picture tile in the browser.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/remote-participants/pip/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Manage webinar stage access and publish permissions in RealtimeKit meetings.
title: Stage Management
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Stage Management

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/stage-management/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```jsx
console.log("Stage object:", meeting.stage);
```

```typescript
console.log("Stage object:", meeting.stage);
```

```js
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}");
```

```tsx
console.log("Stage object:", meeting.stage);
```

## Properties

### Status

The `meeting.stage.status` property returns the current stage status of the local user.

```jsx
console.log("Stage status:", meeting.stage.status);
```

```typescript
console.log("Stage status:", meeting.stage.status);
```

```js
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}");
```

```tsx
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.

```jsx
await meeting.stage.join();
```

```typescript
await meeting.stage.join();
```

```js
await meeting.stage.join();
```

```kotlin
meeting.stage.join()
```

```swift
meeting.stage.join()
```

```dart
meeting.stage.join();
```

```tsx
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.

```jsx
await meeting.stage.leave();
```

```typescript
await meeting.stage.leave();
```

```js
await meeting.stage.leave();
```

```kotlin
meeting.stage.leave()
```

```swift
meeting.stage.leave()
```

```dart
meeting.stage.leave();
```

```tsx
await meeting.stage.leave();
```

### Grant Access

A privileged user can grant access to stage for a set of users with the `grantAccess` method.

```jsx
await meeting.stage.grantAccess(userIds);
```

```typescript
await meeting.stage.grantAccess(userIds);
```

```js
await meeting.stage.grantAccess(userIds);
```

```kotlin
meeting.stage.grantAccess(userIds)
```

```swift
meeting.stage.grantAccess(userIds: userIds)
```

```dart
meeting.stage.grantAccess(userIds);
```

```tsx
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.

```jsx
await meeting.stage.denyAccess(userIds);
```

```typescript
await meeting.stage.denyAccess(userIds);
```

```js
await meeting.stage.denyAccess(userIds);
```

```kotlin
meeting.stage.denyAccess(userIds)
```

```swift
meeting.stage.denyAccess(userIds: userIds)
```

```dart
meeting.stage.denyAccess(userIds);
```

```tsx
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.

```jsx
await meeting.stage.kick(userIds);
```

```typescript
await meeting.stage.kick(userIds);
```

```js
await meeting.stage.kick(userIds);
```

```kotlin
meeting.stage.kick(userIds)
```

```swift
meeting.stage.kick(userIds: userIds)
```

```dart
meeting.stage.kick(userIds);
```

```tsx
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`.

```jsx
await meeting.stage.requestAccess();
```

```typescript
await meeting.stage.requestAccess();
```

```js
await meeting.stage.requestAccess();
```

```kotlin
meeting.stage.requestAccess()
```

```swift
meeting.stage.requestAccess()
```

```dart
meeting.stage.requestAccess();
```

```tsx
await meeting.stage.requestAccess();
```

### Cancel Access Request

You can call this method to cancel your stage request.

```jsx
await meeting.stage.cancelRequestAccess();
```

```typescript
await meeting.stage.cancelRequestAccess();
```

```js
await meeting.stage.cancelRequestAccess();
```

```kotlin
meeting.stage.cancelRequestAccess()
```

```swift
meeting.stage.cancelRequestAccess()
```

```dart
meeting.stage.cancelRequestAccess();
```

```tsx
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.

```jsx
meeting.stage.on("stageAccessRequestUpdate", (data) => {
	console.log("Stage access request updated:", data);
});
```

Alternatively, you can use React hooks to listen for stage updates:

```jsx
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);
});
```

```js
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());
```

```tsx
meeting.stage.on("stageAccessRequestUpdate", (data) => {
	console.log("Stage access request updated:", data);
});
```

Alternatively, you can use React hooks to listen for stage updates:

```tsx
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.

```jsx
meeting.stage.on("acceptPresentRequests", (data) => {
	console.log("Present requests accepted:", data);
});
```

```typescript
meeting.stage.on("acceptPresentRequests", (data) => {
	console.log("Present requests accepted:", data);
});
```

```js
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());
```

```tsx
meeting.stage.on("acceptPresentRequests", (data) => {
	console.log("Present requests accepted:", data);
});
```

### Stage Status Updated

Emitted when the local user's stage status changes.

```jsx
meeting.stage.on("stageStatusUpdate", (status) => {
	console.log("Stage status updated:", status);
});
```

```typescript
meeting.stage.on("stageStatusUpdate", (status) => {
	console.log("Stage status updated:", status);
});
```

```js
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());
```

```tsx
meeting.stage.on("stageStatusUpdate", (status) => {
	console.log("Stage status updated:", status);
});
```

### New Stage Request

Emitted when a new participant requests to join the stage.

```jsx
meeting.stage.on("newStageRequest", (request) => {
	console.log("New stage request:", request);
});
```

```typescript
meeting.stage.on("newStageRequest", (request) => {
	console.log("New stage request:", request);
});
```

```js
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());
```

```tsx
meeting.stage.on("newStageRequest", (request) => {
	console.log("New stage request:", request);
});
```

### Stage Request Approved

Emitted when a stage request is approved by the host.

```jsx
meeting.stage.on("stageRequestApproved", (data) => {
	console.log("Stage request approved:", data);
});
```

```typescript
meeting.stage.on("stageRequestApproved", (data) => {
	console.log("Stage request approved:", data);
});
```

```js
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());
```

```tsx
meeting.stage.on("stageRequestApproved", (data) => {
	console.log("Stage request approved:", data);
});
```

### Stage Request Rejected

Emitted when the host rejects a stage request.

```jsx
meeting.stage.on("stageRequestRejected", (data) => {
	console.log("Stage request rejected:", data);
});
```

```typescript
meeting.stage.on("stageRequestRejected", (data) => {
	console.log("Stage request rejected:", data);
});
```

```js
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());
```

```tsx
meeting.stage.on("stageRequestRejected", (data) => {
	console.log("Stage request rejected:", data);
});
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/stage-management/#page","headline":"Stage Management · Cloudflare Realtime docs","description":"Manage webinar stage access and publish permissions in RealtimeKit meetings.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/stage-management/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Add background blur and virtual backgrounds to video feeds in RealtimeKit meetings.
title: Video Effects
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Video Effects

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/video-effects/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

npmyarnpnpmbun

```
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

npmyarnpnpmbun

```
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

```jsx
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:

```jsx
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

npmyarnpnpmbun

```
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:

```html
<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:

```java
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)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/video-effects/#page","headline":"Video Effects · Cloudflare Realtime docs","description":"Add background blur and virtual backgrounds to video feeds in RealtimeKit meetings.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/video-effects/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Control meeting access with a waiting room that requires host approval in RealtimeKit.
title: Waiting Room
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Waiting Room

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/core/waiting-room/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```plaintext
        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:

```jsx
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:

```jsx
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]);
```

```js
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:

```tsx
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:

```tsx
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:

```jsx
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:

```jsx
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]);
```

```js
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:

```tsx
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:

```tsx
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:

```jsx
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:

```jsx
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]);
```

```js
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:

```tsx
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:

```tsx
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:

```jsx
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;
	}
}
```

```js
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:

```tsx
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

```jsx
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>
	);
}
```

```js
// 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());
```

```tsx
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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/core/waiting-room/#page","headline":"Waiting Room · Cloudflare Realtime docs","description":"Control meeting access with a waiting room that requires host approval in RealtimeKit.","url":"https://developers.cloudflare.com/realtime/realtimekit/core/waiting-room/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Create plugins that run inside RealtimeKit meetings.
title: Custom Plugins
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Custom Plugins

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/custom-plugins/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Plugins are interactive real-time applications that run inside a meeting, such as a shared whiteboard or a document viewer. RealtimeKit lets you build your own plugins and render them alongside the meeting UI.

A custom plugin is a DOM element that you register with the Core SDK. When a participant activates it, RealtimeKit makes it active for everyone in the session and renders it through the UI Kit.

To learn how plugins are registered and controlled through the SDK, refer to [Plugins](https://developers.cloudflare.com/realtime/realtimekit/core/plugins/).

## Guides

* [Build your own plugins](https://developers.cloudflare.com/realtime/realtimekit/custom-plugins/build-your-own-plugins/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/custom-plugins/#page","headline":"Custom Plugins · Cloudflare Realtime docs","description":"Create plugins that run inside RealtimeKit meetings.","url":"https://developers.cloudflare.com/realtime/realtimekit/custom-plugins/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Build custom plugins for RealtimeKit meetings.
title: Build your own plugins
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Build your own plugins

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/custom-plugins/build-your-own-plugins/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

This guide explains how to build a custom plugin and run it inside a meeting using the Cloudflare RealtimeKit Core SDK.

A custom plugin is a DOM element that you register with the SDK. When a participant activates the plugin, RealtimeKit makes it active for everyone in the session and renders it in the meeting layout.

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

WebMobile

ReactWeb ComponentsAngular

## Prerequisites

This page builds on the [Initialize SDK](https://developers.cloudflare.com/realtime/realtimekit/core/) and [Plugins](https://developers.cloudflare.com/realtime/realtimekit/core/plugins/) guides. Read those first.

The examples assume you have already imported the necessary packages and initialized the SDK.

## How a plugin works

A plugin has two parts:

* A **component**: a DOM element (`HTMLElement`) that holds your plugin's UI and logic.
* A **registration**: a configuration object you pass to the SDK so it can list, activate, and render the component.

RealtimeKit synchronizes activation state across the session. To share plugin data between participants, use [collaborative stores](https://developers.cloudflare.com/realtime/realtimekit/collaborative-stores/).

## 1\. Build the plugin component

A plugin component must be an `HTMLElement`. Build it directly as a custom element, or create a container element and mount your framework component tree into it.

Define your plugin as a custom element, then create an instance to pass as the `component`.

```ts
class MyCounterPlugin extends HTMLElement {
	connectedCallback() {
		this.innerHTML = `
			<div class="counter">
				<button id="increment">This is a counter plugin</button>
				<span id="value">0</span>
			</div>
		`;
	}
}

customElements.define("my-counter-plugin", MyCounterPlugin);

const pluginElement = document.createElement("my-counter-plugin");
```

Create a container element and mount your component tree into it. Pass the container as the `component`.

```tsx
import { createRoot } from "react-dom/client";

function CounterPlugin() {
	return <div className="counter">This is a counter plugin</div>;
}

const pluginElement = document.createElement("div");
createRoot(pluginElement).render(<CounterPlugin />);
```

Create a container element and mount your component tree into it. Pass the container as the `component`.

```ts
import {
	createComponent,
	ApplicationRef,
	EnvironmentInjector,
} from "@angular/core";
import { CounterPluginComponent } from "./counter-plugin.component";

const pluginElement = document.createElement("div");

const componentRef = createComponent(CounterPluginComponent, {
	environmentInjector: this.injector,
	hostElement: pluginElement,
});

this.appRef.attachView(componentRef.hostView);
```

## 2\. Register and render the plugin

Register the plugins available in a session when you initialize the SDK. Pass an array of plugin configurations as `defaults.plugins`, using the `pluginElement` you created in step 1 as the `component`.

```ts
RealtimeKitClient.init({
	authToken: "<auth_token>",
	defaults: {
		plugins: [
			{
				id: "counter",
				name: "Counter",
				icon: "https://example.com/counter.png",
				permissions: {
					canActivate: true,
					canDeactivate: true,
				},
				component: pluginElement,
			},
		],
	},
});
```

For a description of every configuration field, refer to [Register a plugin](https://developers.cloudflare.com/realtime/realtimekit/core/plugins/#register-a-plugin).

After registration, the plugin appears in `meeting.plugins.all`. Activate it to make it active for everyone in the session.

```js
const plugin = meeting.plugins.all.get(pluginId);
await plugin.activate();
```

```jsx
const plugins = useRealtimeKitSelector((m) => m.plugins);
const plugin = plugins.all.get(pluginId);
await plugin.activate();
```

Note

If you use the UI Kit, the plugin components handle activation and rendering for you.

## 3\. Respond to plugin events

A `Plugin` object emits events as its state changes. Use them to set up or tear down your component when it is activated or deactivated.

```js
const plugin = meeting.plugins.all.get(pluginId);

plugin.on("enabled", () => {
	// The plugin became active for the local participant
});

plugin.on("closed", () => {
	// The plugin was deactivated for the local participant
});
```

For the full list of plugin events, refer to [Listen to plugin events](https://developers.cloudflare.com/realtime/realtimekit/core/plugins/#listen-to-plugin-events).

## 4\. Sync data across participants

Each participant runs their own copy of the plugin component, so you need a way to share state between them. RealtimeKit offers two built-in options for real-time communication:

* [Collaborative stores](https://developers.cloudflare.com/realtime/realtimekit/collaborative-stores/) — a shared key-value store that syncs state across the session.
* [Message broadcasts](https://developers.cloudflare.com/realtime/realtimekit/broadcast-apis/) — send custom events to every participant in a meeting.

For plugins with simple requirements, these built-in APIs are enough to handle your collaborative logic.

```js
// Create or get a store for your plugin
const store = meeting.stores.create("counter");

// Update a value for all participants
await store.set("value", 1);

// React to updates from any participant
store.subscribe("value", ({ value }) => {
	document.querySelector("#value").textContent = value;
});
```

For richer, full-featured collaboration, you can pair your plugin with a dedicated third-party framework:

| Framework                                        | Description                                                  | Notes       |
| ------------------------------------------------ | ------------------------------------------------------------ | ----------- |
| **[Collab-Kit ↗](https://docs.collab-kit.com/)** | Full-featured SDK for building collaborative apps.           | Beta        |
| **[Party-Kit ↗](https://docs.partykit.io/)**     | Low-level framework for building collaborative applications. | Open source |

## Next steps

* Review the [Plugins](https://developers.cloudflare.com/realtime/realtimekit/core/plugins/) API for the complete `Plugin` and `Plugins` reference.
* Use [collaborative stores](https://developers.cloudflare.com/realtime/realtimekit/collaborative-stores/) to build richer shared experiences.
* Get started with the [RealtimeKit plugins example ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/react-examples/examples/plugins) for a working React implementation.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/custom-plugins/build-your-own-plugins/#page","headline":"Build your own plugins · Cloudflare Realtime docs","description":"Build custom plugins for RealtimeKit meetings.","url":"https://developers.cloudflare.com/realtime/realtimekit/custom-plugins/build-your-own-plugins/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Frequently asked questions about RealtimeKit meetings, recordings, and SDK usage.
title: FAQ
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# FAQ

Last updated Aug 7, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/faq/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```bash
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://examples.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.

### Recording

Watermark images appear broken in recordings

When you pass a watermark image URL via the [Start Recording](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/) API, the recorder loads that image inside a browser running in a Cloudflare container. If the image appears broken, check the following:

* **CORS headers**: The image URL must return proper CORS headers (for example, `Access-Control-Allow-Origin: *`) in the HTTP response. Without these headers, the browser blocks the image from loading.
* **Direct image URL**: The URL must point directly to the image file (for example, `https://example.com/logo.png`), not to an HTML page that embeds the image.
* **No redirects**: The URL must not redirect to another location. The recorder fetches the URL as-is, so redirects may cause the image to fail to load.

### 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/faq/#page","headline":"FAQ · Cloudflare Realtime docs","description":"Frequently asked questions about RealtimeKit meetings, recordings, and SDK usage.","url":"https://developers.cloudflare.com/realtime/realtimekit/faq/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-08-07","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Privacy policy, terms of service, and third-party licenses for RealtimeKit.
title: Legal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Legal

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/legal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

* [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/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/legal/#page","headline":"Legal · Cloudflare Realtime docs","description":"Privacy policy, terms of service, and third-party licenses for RealtimeKit.","url":"https://developers.cloudflare.com/realtime/realtimekit/legal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Third-party license information for RealtimeKit web, mobile, and recording SDKs.
title: Third party licenses
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Third party licenses

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/legal/3rdparty/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Following is the third party license information for RealtimeKit SDKs.

## RealtimeKit Web SDKs

The following SDKs are collectively referred to as Web SDKs:

* [@cloudflare/realtimekit ↗](https://www.npmjs.com/package/@cloudflare/realtimekit)
* [@cloudflare/realtimekit-ui ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-ui)
* [@cloudflare/realtimekit-react ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-react)
* [@cloudflare/realtimekit-react-ui ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-react-ui)
* [@cloudflare/realtimekit-angular-ui ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-angular-ui)
* [@cloudflare/realtimekit-ui-addons ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-ui-addons)
* [@cloudflare/realtimekit-recording-sdk ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-recording-sdk)
* [@cloudflare/realtimekit-virtual-background ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-virtual-background)

Overview of licenses:

* Apache-2.0 (3)
* ISC (1)
* MIT (16)
* Unknown (1)

### MIT (6 packages)

Used by:

[broker-factory ↗](https://github.com/chrisguttandin/broker-factory)

[fast-unique-numbers ↗](https://github.com/chrisguttandin/fast-unique-numbers)

[worker-factory ↗](https://github.com/chrisguttandin/worker-factory)

[worker-timers ↗](https://github.com/chrisguttandin/worker-timers)

[worker-timers-broker ↗](https://github.com/chrisguttandin/worker-timers-broker)

[worker-timers-worker ↗](https://github.com/chrisguttandin/worker-timers-worker)

```plaintext
MIT License

Copyright (c) 2025 Christoph Guttandin

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (3 packages)

Used by:

[@floating-ui/core ↗](https://github.com/floating-ui/floating-ui)

[@floating-ui/dom ↗](https://github.com/floating-ui/floating-ui)

[@floating-ui/utils ↗](https://github.com/floating-ui/floating-ui)

```plaintext
MIT License

Copyright (c) 2021 Floating UI contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (uuid)

Used by:

[uuid ↗](https://github.com/uuidjs/uuid)

```plaintext
The MIT License (MIT)

Copyright (c) 2010-2020 Robert Kieffer and other contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (bowser)

Used by:

[bowser ↗](https://github.com/lancedikson/bowser)

```plaintext
Copyright 2015, Dustin Diaz (the "Original Author")
All rights reserved.

MIT License

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

Distributions of all or part of the Software intended to be used
by the recipients as they would use the unmodified Software,
containing modifications that substantially alter, remove, or
disable functionality of the Software, outside of the documented
configuration mechanisms provided by the Software, shall be
modified such that the Original Author's bug reporting email
addresses and urls are either replaced with the contact information
of the parties responsible for the changes, or removed entirely.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.


Except where noted, this license applies to any and all software
programs and associated documentation files created by the
Original Author, when distributed with the Software.
```

### MIT (sdp-transform)

Used by:

[sdp-transform ↗](https://github.com/clux/sdp-transform)

```plaintext
(The MIT License)

Copyright (c) 2013 Eirik Albrigtsen

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (@babel/runtime)

Used by:

[@babel/runtime ↗](https://github.com/babel/babel)

```plaintext
MIT License

Copyright (c) 2014-present Sebastian McKenzie and other contributors

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### ISC (tslib)

Used by:

[tslib ↗](https://github.com/Microsoft/tslib)

```plaintext
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
```

### Apache-2.0 (@protobuf-ts/runtime)

Used by:

[@protobuf-ts/runtime ↗](https://github.com/timostamm/protobuf-ts)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.
```

### Unknown (hark)

Used by:

[hark ↗](https://github.com/latentflip/hark)

```plaintext
License file is not available for hark.
Repository: https://github.com/latentflip/hark

Please refer to the package repository for complete license information.
```

### MIT (wildemitter)

Used by:

[wildemitter ↗](https://github.com/HenrikJoreteg/wildemitter)

```plaintext
MIT License

Copyright (c) 2019 Henrik Joreteg

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### Apache-2.0 (hls.js)

Used by:

[hls.js ↗](https://github.com/video-dev/hls.js)

```plaintext
Copyright (c) 2017 Dailymotion (http://www.dailymotion.com)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

src/remux/mp4-generator.js and src/demux/exp-golomb.ts implementation in this project
are derived from the HLS library for video.js (https://github.com/videojs/videojs-contrib-hls)

That work is also covered by the Apache 2 License, following copyright:
Copyright (c) 2013-2015 Brightcove


THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (lodash-es)

Used by:

[lodash-es ↗](https://github.com/lodash/lodash)

```plaintext
Copyright OpenJS Foundation and other contributors <https://openjsf.org/>

Based on Underscore.js, copyright Jeremy Ashkenas,
DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>

This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
available at https://github.com/lodash/lodash

The following license applies to all parts of this software except as
documented below:

====

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

====

Copyright and related rights for sample code are waived via CC0. Sample
code is defined as all source code displayed within the prose of the
documentation.

CC0: http://creativecommons.org/publicdomain/zero/1.0/

====

Files located in the node_modules and vendor directories are externally
maintained libraries used by this software which have their own
licenses; we recommend you read them, as their terms may differ from the
terms above.
```

### MIT (resize-observer-polyfill)

Used by:

[resize-observer-polyfill ↗](https://github.com/que-etc/resize-observer-polyfill)

```plaintext
The MIT License (MIT)

Copyright (c) 2016 Denis Rul

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### Apache-2.0 (Volcomix/virtual-background)

Used by:

[Volcomix/virtual-background ↗](https://github.com/Volcomix/virtual-background)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright 2022 Sébastien Jalliffier Verne

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

## RealtimeKit Android SDKs

The following SDKs are collectively referred to as Android SDKs:

* [com.cloudflare.realtimekit:core-android ↗](https://central.sonatype.com/artifact/com.cloudflare.realtimekit/core-android)
* [com.cloudflare.realtimekit:ui-android ↗](https://central.sonatype.com/artifact/com.cloudflare.realtimekit/ui-android)

Overview of licenses:

* Apache-2.0 (24)

### Apache-2.0 (15 packages)

Used by:

[androidx.appcompat:appcompat ↗](https://cs.android.com/androidx/platform/frameworks/support)

[androidx.constraintlayout:constraintlayout ↗](https://github.com/androidx/constraintlayout)

[androidx.core:core-ktx ↗](https://cs.android.com/androidx/platform/frameworks/support)

[androidx.lifecycle:lifecycle-viewmodel-ktx ↗](https://cs.android.com/androidx/platform/frameworks/support)

[androidx.startup:startup-runtime ↗](https://cs.android.com/androidx/platform/frameworks/support)

[com.google.android.material:material ↗](https://github.com/material-components/material-components-android)

[com.squareup.wire:wire-runtime ↗](https://github.com/square/wire)

[com.squareup.wire:wire-runtime-jvm ↗](https://github.com/square/wire)

[io.github.crow-misia.libyuv:libyuv-android ↗](https://github.com/crow-misia/libyuv-android)

[org.jetbrains.kotlin:kotlin-bom ↗](https://github.com/JetBrains/kotlin)

[org.jetbrains.kotlin:kotlin-stdlib ↗](https://github.com/JetBrains/kotlin)

[org.jetbrains.kotlin:kotlin-stdlib-common ↗](https://github.com/JetBrains/kotlin)

[org.jetbrains.kotlin:kotlin-stdlib-jdk8 ↗](https://github.com/JetBrains/kotlin)

[org.jetbrains.kotlinx:kotlinx-datetime ↗](https://github.com/Kotlin/kotlinx-datetime)

[org.jetbrains.kotlinx:kotlinx-datetime-jvm ↗](https://github.com/Kotlin/kotlinx-datetime)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### Apache-2.0 (3 packages)

Used by:

[org.jetbrains.kotlinx:kotlinx-coroutines-android ↗](https://github.com/Kotlin/kotlinx.coroutines)

[org.jetbrains.kotlinx:kotlinx-coroutines-core ↗](https://github.com/Kotlin/kotlinx.coroutines)

[org.jetbrains.kotlinx:kotlinx-coroutines-core-jvm ↗](https://github.com/Kotlin/kotlinx.coroutines)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright 2000-2020 JetBrains s.r.o. and Kotlin Programming Language contributors.

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### Apache-2.0 (2 packages)

Used by:

[org.jetbrains.kotlinx:atomicfu ↗](https://github.com/Kotlin/kotlinx.atomicfu)

[org.jetbrains.kotlinx:atomicfu-jvm ↗](https://github.com/Kotlin/kotlinx.atomicfu)

```plaintext
/*
 * Copyright 2017 JetBrains s.r.o.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
```

### Apache-2.0 (2 packages)

Used by:

[org.jetbrains.kotlinx:kotlinx-serialization-json ↗](https://github.com/Kotlin/kotlinx.serialization)

[org.jetbrains.kotlinx:kotlinx-serialization-json-jvm ↗](https://github.com/Kotlin/kotlinx.serialization)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "{}"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright {yyyy} {name of copyright owner}

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### Apache-2.0 (io.ktor:ktor-bom)

Used by:

[io.ktor:ktor-bom ↗](https://github.com/ktorio/ktor)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "{}"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright 2000-2023 JetBrains s.r.o.

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### Apache-2.0 (io.coil-kt:coil)

Used by:

[io.coil-kt:coil ↗](https://github.com/coil-kt/coil)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright 2025 Coil Contributors

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

## RealtimeKit iOS SDKs

The following SDKs are collectively referred to as iOS SDKs:

* [RealtimeKit ↗](https://github.com/dyte-in/RealtimeKitCoreiOS)
* [RealtimeKitUI ↗](https://github.com/dyte-in/RealtimeKitUI)
* [RealtimeKit KMM Core ↗](https://central.sonatype.com/artifact/com.cloudflare.realtimekit/core-iosarm64)

Overview of licenses:

* Apache-2.0 (8)

### Apache-2.0 (4 packages)

Used by:

[com.squareup.wire:wire-runtime-iosarm64 ↗](https://github.com/square/wire)

[org.jetbrains.kotlin:kotlin-stdlib ↗](https://github.com/JetBrains/kotlin)

[org.jetbrains.kotlin:kotlin-stdlib-common ↗](https://github.com/JetBrains/kotlin)

[org.jetbrains.kotlinx:kotlinx-datetime-iosarm64 ↗](https://github.com/Kotlin/kotlinx-datetime)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### Apache-2.0 (io.ktor:ktor-bom)

Used by:

[io.ktor:ktor-bom ↗](https://github.com/ktorio/ktor)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "{}"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright 2000-2023 JetBrains s.r.o.

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### Apache-2.0 (org.jetbrains.kotlinx:atomicfu-iosarm64)

Used by:

[org.jetbrains.kotlinx:atomicfu-iosarm64 ↗](https://github.com/Kotlin/kotlinx.atomicfu)

```plaintext
/*
 * Copyright 2017 JetBrains s.r.o.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
```

### Apache-2.0 (org.jetbrains.kotlinx:kotlinx-coroutines-core-iosarm64)

Used by:

[org.jetbrains.kotlinx:kotlinx-coroutines-core-iosarm64 ↗](https://github.com/Kotlin/kotlinx.coroutines)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright 2000-2020 JetBrains s.r.o. and Kotlin Programming Language contributors.

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### Apache-2.0 (org.jetbrains.kotlinx:kotlinx-serialization-json-iosarm64)

Used by:

[org.jetbrains.kotlinx:kotlinx-serialization-json-iosarm64 ↗](https://github.com/Kotlin/kotlinx.serialization)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "{}"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright {yyyy} {name of copyright owner}

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

## RealtimeKit Flutter SDKs

The following SDKs are collectively referred to as Flutter SDKs:

* [realtimekit\_core ↗](https://pub.dev/packages/realtimekit%5Fcore)
* [realtimekit\_ui ↗](https://pub.dev/packages/realtimekit%5Fui)

Overview of licenses:

* Apache-2.0 (1)
* BSD-3-Clause (55)
* MIT (10)
* MPL-2.0 (1)

### BSD-3-Clause (11 packages)

Used by:

[coverage ↗](https://github.com/dart-lang/tools)

[glob ↗](https://github.com/dart-lang/tools)

[http\_parser ↗](https://github.com/dart-lang/http)

[matcher ↗](https://github.com/dart-lang/test)

[path ↗](https://github.com/dart-lang/core)

[pool ↗](https://github.com/dart-lang/tools)

[pub\_semver ↗](https://github.com/dart-lang/tools)

[source\_span ↗](https://github.com/dart-lang/tools)

[string\_scanner ↗](https://github.com/dart-lang/tools)

[test ↗](https://github.com/dart-lang/test)

[watcher ↗](https://github.com/dart-lang/tools)

```plaintext
Copyright 2014, the Dart project authors. 

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (5 packages)

Used by:

[async ↗](https://github.com/dart-lang/core)

[collection ↗](https://github.com/dart-lang/core)

[mime ↗](https://github.com/dart-lang/tools)

[stream\_channel ↗](https://github.com/dart-lang/tools)

[typed\_data ↗](https://github.com/dart-lang/core)

```plaintext
Copyright 2015, the Dart project authors. 

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (5 packages)

Used by:

[convert ↗](https://github.com/dart-lang/core)

[crypto ↗](https://github.com/dart-lang/core)

[shelf\_static ↗](https://github.com/dart-lang/shelf)

[source\_map\_stack\_trace ↗](https://github.com/dart-lang/tools)

[vm\_service ↗](https://github.com/dart-lang/sdk)

```plaintext
Copyright 2015, the Dart project authors.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (5 packages)

Used by:

[http\_multi\_server ↗](https://github.com/dart-lang/http)

[shelf ↗](https://github.com/dart-lang/shelf)

[shelf\_web\_socket ↗](https://github.com/dart-lang/shelf)

[source\_maps ↗](https://github.com/dart-lang/tools)

[stack\_trace ↗](https://github.com/dart-lang/tools)

```plaintext
Copyright 2014, the Dart project authors.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (3 packages)

Used by:

[cross\_file ↗](https://github.com/flutter/packages)

[flutter\_plugin\_android\_lifecycle ↗](https://github.com/flutter/packages)

[plugin\_platform\_interface ↗](https://github.com/flutter/packages)

```plaintext
Copyright 2013 The Flutter Authors. All rights reserved.

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google Inc. nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (3 packages)

Used by:

[boolean\_selector ↗](https://github.com/dart-lang/tools)

[meta ↗](https://github.com/dart-lang/sdk)

[shelf\_packages\_handler ↗](https://github.com/dart-lang/shelf)

```plaintext
Copyright 2016, the Dart project authors.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (3 packages)

Used by:

[flutter\_riverpod ↗](https://github.com/rrousselGit/riverpod)

[riverpod ↗](https://github.com/rrousselGit/riverpod)

[state\_notifier ↗](https://github.com/rrousselGit/state%5Fnotifier)

```plaintext
MIT License

Copyright (c) 2020 Remi Rousselet

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### BSD-3-Clause (2 packages)

Used by:

[file ↗](https://github.com/dart-lang/tools)

[json\_annotation ↗](https://github.com/google/json%5Fserializable.dart)

```plaintext
Copyright 2017, the Dart project authors. All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google Inc. nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (2 packages)

Used by:

[io ↗](https://github.com/dart-lang/tools)

[term\_glyph ↗](https://github.com/dart-lang/tools)

```plaintext
Copyright 2017, the Dart project authors. 

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (2 packages)

Used by:

[ffi ↗](https://github.com/dart-lang/native)

[package\_config ↗](https://github.com/dart-lang/tools)

```plaintext
Copyright 2019, the Dart project authors. 

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (2 packages)

Used by:

[args ↗](https://github.com/dart-lang/core)

[logging ↗](https://github.com/dart-lang/core)

```plaintext
Copyright 2013, the Dart project authors. 

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (2 packages)

Used by:

[test\_api ↗](https://github.com/dart-lang/test)

[test\_core ↗](https://github.com/dart-lang/test)

```plaintext
Copyright 2018, the Dart project authors. 

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (focus\_detector\_v2)

Used by:

[focus\_detector\_v2 ↗](https://github.com/irfnyas/focus%5Fdetector)

```plaintext
MIT License

Copyright (c) 2021 Edson Bueno

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### BSD-3-Clause (visibility\_detector)

Used by:

[visibility\_detector ↗](https://github.com/google/flutter.widgets)

```plaintext
Copyright 2018 the Dart project authors, Inc. All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google Inc. nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (pubspec\_parse)

Used by:

[pubspec\_parse ↗](https://github.com/dart-lang/tools)

```plaintext
Copyright 2018, the Dart project authors.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (checked\_yaml)

Used by:

[checked\_yaml ↗](https://github.com/google/json%5Fserializable.dart)

```plaintext
Copyright 2019, the Dart project authors. All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google Inc. nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (yaml)

Used by:

[yaml ↗](https://github.com/dart-lang/tools)

```plaintext
Copyright (c) 2014, the Dart project authors.
Copyright (c) 2006, Kirill Simonov.

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (get\_it)

Used by:

[get\_it ↗](https://github.com/flutter-it/get%5Fit)

```plaintext
MIT License

Copyright (c) 2018 Thomas Burkhart

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### Apache-2.0 (clock)

Used by:

[clock ↗](https://github.com/dart-lang/tools)

```plaintext
Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### BSD-3-Clause (analyzer)

Used by:

[analyzer ↗](https://github.com/dart-lang/sdk)

```plaintext
Copyright 2013, the Dart project authors.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (\_fe\_analyzer\_shared)

Used by:

[\_fe\_analyzer\_shared ↗](https://github.com/dart-lang/sdk)

```plaintext
Copyright 2019, the Dart project authors.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (cli\_config)

Used by:

[cli\_config ↗](https://github.com/dart-lang/tools)

```plaintext
Copyright 2023, the Dart project authors.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (js)

Used by:

[js ↗](https://github.com/dart-lang/sdk)

```plaintext
Copyright 2012, the Dart project authors.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (node\_preamble)

Used by:

[node\_preamble ↗](https://github.com/mbullington/node%5Fpreamble.dart)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 Michael Bullington

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

===

Copyright 2012, the Dart project authors. All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google Inc. nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (web\_socket\_channel)

Used by:

[web\_socket\_channel ↗](https://github.com/dart-lang/http)

```plaintext
Copyright 2016, the Dart project authors. 

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (web)

Used by:

[web ↗](https://github.com/dart-lang/web)

```plaintext
Copyright 2023, the Dart project authors.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (web\_socket)

Used by:

[web\_socket ↗](https://github.com/dart-lang/http)

```plaintext
Copyright 2024, the Dart project authors. 

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (frontend\_server\_client)

Used by:

[frontend\_server\_client ↗](https://github.com/dart-lang/webdev)

```plaintext
Copyright 2020, the Dart project authors. 

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google LLC nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### BSD-3-Clause (webkit\_inspection\_protocol)

Used by:

[webkit\_inspection\_protocol ↗](https://github.com/google/webkit%5Finspection%5Fprotocol.dart)

```plaintext
Copyright 2013, Google Inc.
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
    * Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (file\_picker)

Used by:

[file\_picker ↗](https://github.com/miguelpruivo/flutter%5Ffile%5Fpicker)

```plaintext
MIT License

Copyright (c) 2018 Miguel Ruivo

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### BSD-3-Clause (win32)

Used by:

[win32 ↗](https://github.com/halildurmus/win32)

```plaintext
BSD 3-Clause License

Copyright (c) 2024, Halil Durmus

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this
   list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its
   contributors may be used to endorse or promote products derived from
   this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MPL-2.0 (dbus)

Used by:

[dbus ↗](https://github.com/canonical/dbus.dart)

```plaintext
Mozilla Public License Version 2.0
==================================

1. Definitions
--------------

1.1. "Contributor"
    means each individual or legal entity that creates, contributes to
    the creation of, or owns Covered Software.

1.2. "Contributor Version"
    means the combination of the Contributions of others (if any) used
    by a Contributor and that particular Contributor's Contribution.

1.3. "Contribution"
    means Covered Software of a particular Contributor.

1.4. "Covered Software"
    means Source Code Form to which the initial Contributor has attached
    the notice in Exhibit A, the Executable Form of such Source Code
    Form, and Modifications of such Source Code Form, in each case
    including portions thereof.

1.5. "Incompatible With Secondary Licenses"
    means

    (a) that the initial Contributor has attached the notice described
        in Exhibit B to the Covered Software; or

    (b) that the Covered Software was made available under the terms of
        version 1.1 or earlier of the License, but not also under the
        terms of a Secondary License.

1.6. "Executable Form"
    means any form of the work other than Source Code Form.

1.7. "Larger Work"
    means a work that combines Covered Software with other material, in
    a separate file or files, that is not Covered Software.

1.8. "License"
    means this document.

1.9. "Licensable"
    means having the right to grant, to the maximum extent possible,
    whether at the time of the initial grant or subsequently, any and
    all of the rights conveyed by this License.

1.10. "Modifications"
    means any of the following:

    (a) any file in Source Code Form that results from an addition to,
        deletion from, or modification of the contents of Covered
        Software; or

    (b) any new file in Source Code Form that contains any Covered
        Software.

1.11. "Patent Claims" of a Contributor
    means any patent claim(s), including without limitation, method,
    process, and apparatus claims, in any patent Licensable by such
    Contributor that would be infringed, but for the grant of the
    License, by the making, using, selling, offering for sale, having
    made, import, or transfer of either its Contributions or its
    Contributor Version.

1.12. "Secondary License"
    means either the GNU General Public License, Version 2.0, the GNU
    Lesser General Public License, Version 2.1, the GNU Affero General
    Public License, Version 3.0, or any later versions of those
    licenses.

1.13. "Source Code Form"
    means the form of the work preferred for making modifications.

1.14. "You" (or "Your")
    means an individual or a legal entity exercising rights under this
    License. For legal entities, "You" includes any entity that
    controls, is controlled by, or is under common control with You. For
    purposes of this definition, "control" means (a) the power, direct
    or indirect, to cause the direction or management of such entity,
    whether by contract or otherwise, or (b) ownership of more than
    fifty percent (50%) of the outstanding shares or beneficial
    ownership of such entity.

2. License Grants and Conditions
--------------------------------

2.1. Grants

Each Contributor hereby grants You a world-wide, royalty-free,
non-exclusive license:

(a) under intellectual property rights (other than patent or trademark)
    Licensable by such Contributor to use, reproduce, make available,
    modify, display, perform, distribute, and otherwise exploit its
    Contributions, either on an unmodified basis, with Modifications, or
    as part of a Larger Work; and

(b) under Patent Claims of such Contributor to make, use, sell, offer
    for sale, have made, import, and otherwise transfer either its
    Contributions or its Contributor Version.

2.2. Effective Date

The licenses granted in Section 2.1 with respect to any Contribution
become effective for each Contribution on the date the Contributor first
distributes such Contribution.

2.3. Limitations on Grant Scope

The licenses granted in this Section 2 are the only rights granted under
this License. No additional rights or licenses will be implied from the
distribution or licensing of Covered Software under this License.
Notwithstanding Section 2.1(b) above, no patent license is granted by a
Contributor:

(a) for any code that a Contributor has removed from Covered Software;
    or

(b) for infringements caused by: (i) Your and any other third party's
    modifications of Covered Software, or (ii) the combination of its
    Contributions with other software (except as part of its Contributor
    Version); or

(c) under Patent Claims infringed by Covered Software in the absence of
    its Contributions.

This License does not grant any rights in the trademarks, service marks,
or logos of any Contributor (except as may be necessary to comply with
the notice requirements in Section 3.4).

2.4. Subsequent Licenses

No Contributor makes additional grants as a result of Your choice to
distribute the Covered Software under a subsequent version of this
License (see Section 10.2) or under the terms of a Secondary License (if
permitted under the terms of Section 3.3).

2.5. Representation

Each Contributor represents that the Contributor believes its
Contributions are its original creation(s) or it has sufficient rights
to grant the rights to its Contributions conveyed by this License.

2.6. Fair Use

This License is not intended to limit any rights You have under
applicable copyright doctrines of fair use, fair dealing, or other
equivalents.

2.7. Conditions

Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
in Section 2.1.

3. Responsibilities
-------------------

3.1. Distribution of Source Form

All distribution of Covered Software in Source Code Form, including any
Modifications that You create or to which You contribute, must be under
the terms of this License. You must inform recipients that the Source
Code Form of the Covered Software is governed by the terms of this
License, and how they can obtain a copy of this License. You may not
attempt to alter or restrict the recipients' rights in the Source Code
Form.

3.2. Distribution of Executable Form

If You distribute Covered Software in Executable Form then:

(a) such Covered Software must also be made available in Source Code
    Form, as described in Section 3.1, and You must inform recipients of
    the Executable Form how they can obtain a copy of such Source Code
    Form by reasonable means in a timely manner, at a charge no more
    than the cost of distribution to the recipient; and

(b) You may distribute such Executable Form under the terms of this
    License, or sublicense it under different terms, provided that the
    license for the Executable Form does not attempt to limit or alter
    the recipients' rights in the Source Code Form under this License.

3.3. Distribution of a Larger Work

You may create and distribute a Larger Work under terms of Your choice,
provided that You also comply with the requirements of this License for
the Covered Software. If the Larger Work is a combination of Covered
Software with a work governed by one or more Secondary Licenses, and the
Covered Software is not Incompatible With Secondary Licenses, this
License permits You to additionally distribute such Covered Software
under the terms of such Secondary License(s), so that the recipient of
the Larger Work may, at their option, further distribute the Covered
Software under the terms of either this License or such Secondary
License(s).

3.4. Notices

You may not remove or alter the substance of any license notices
(including copyright notices, patent notices, disclaimers of warranty,
or limitations of liability) contained within the Source Code Form of
the Covered Software, except that You may alter any license notices to
the extent required to remedy known factual inaccuracies.

3.5. Application of Additional Terms

You may choose to offer, and to charge a fee for, warranty, support,
indemnity or liability obligations to one or more recipients of Covered
Software. However, You may do so only on Your own behalf, and not on
behalf of any Contributor. You must make it absolutely clear that any
such warranty, support, indemnity, or liability obligation is offered by
You alone, and You hereby agree to indemnify every Contributor for any
liability incurred by such Contributor as a result of warranty, support,
indemnity or liability terms You offer. You may include additional
disclaimers of warranty and limitations of liability specific to any
jurisdiction.

4. Inability to Comply Due to Statute or Regulation
---------------------------------------------------

If it is impossible for You to comply with any of the terms of this
License with respect to some or all of the Covered Software due to
statute, judicial order, or regulation then You must: (a) comply with
the terms of this License to the maximum extent possible; and (b)
describe the limitations and the code they affect. Such description must
be placed in a text file included with all distributions of the Covered
Software under this License. Except to the extent prohibited by statute
or regulation, such description must be sufficiently detailed for a
recipient of ordinary skill to be able to understand it.

5. Termination
--------------

5.1. The rights granted under this License will terminate automatically
if You fail to comply with any of its terms. However, if You become
compliant, then the rights granted under this License from a particular
Contributor are reinstated (a) provisionally, unless and until such
Contributor explicitly and finally terminates Your grants, and (b) on an
ongoing basis, if such Contributor fails to notify You of the
non-compliance by some reasonable means prior to 60 days after You have
come back into compliance. Moreover, Your grants from a particular
Contributor are reinstated on an ongoing basis if such Contributor
notifies You of the non-compliance by some reasonable means, this is the
first time You have received notice of non-compliance with this License
from such Contributor, and You become compliant prior to 30 days after
Your receipt of the notice.

5.2. If You initiate litigation against any entity by asserting a patent
infringement claim (excluding declaratory judgment actions,
counter-claims, and cross-claims) alleging that a Contributor Version
directly or indirectly infringes any patent, then the rights granted to
You by any and all Contributors for the Covered Software under Section
2.1 of this License shall terminate.

5.3. In the event of termination under Sections 5.1 or 5.2 above, all
end user license agreements (excluding distributors and resellers) which
have been validly granted by You or Your distributors under this License
prior to termination shall survive termination.

************************************************************************
*                                                                      *
*  6. Disclaimer of Warranty                                           *
*  -------------------------                                           *
*                                                                      *
*  Covered Software is provided under this License on an "as is"       *
*  basis, without warranty of any kind, either expressed, implied, or  *
*  statutory, including, without limitation, warranties that the       *
*  Covered Software is free of defects, merchantable, fit for a        *
*  particular purpose or non-infringing. The entire risk as to the     *
*  quality and performance of the Covered Software is with You.        *
*  Should any Covered Software prove defective in any respect, You     *
*  (not any Contributor) assume the cost of any necessary servicing,   *
*  repair, or correction. This disclaimer of warranty constitutes an   *
*  essential part of this License. No use of any Covered Software is   *
*  authorized under this License except under this disclaimer.         *
*                                                                      *
************************************************************************

************************************************************************
*                                                                      *
*  7. Limitation of Liability                                          *
*  --------------------------                                          *
*                                                                      *
*  Under no circumstances and under no legal theory, whether tort      *
*  (including negligence), contract, or otherwise, shall any           *
*  Contributor, or anyone who distributes Covered Software as          *
*  permitted above, be liable to You for any direct, indirect,         *
*  special, incidental, or consequential damages of any character      *
*  including, without limitation, damages for lost profits, loss of    *
*  goodwill, work stoppage, computer failure or malfunction, or any    *
*  and all other commercial damages or losses, even if such party      *
*  shall have been informed of the possibility of such damages. This   *
*  limitation of liability shall not apply to liability for death or   *
*  personal injury resulting from such party's negligence to the       *
*  extent applicable law prohibits such limitation. Some               *
*  jurisdictions do not allow the exclusion or limitation of           *
*  incidental or consequential damages, so this exclusion and          *
*  limitation may not apply to You.                                    *
*                                                                      *
************************************************************************

8. Litigation
-------------

Any litigation relating to this License may be brought only in the
courts of a jurisdiction where the defendant maintains its principal
place of business and such litigation shall be governed by laws of that
jurisdiction, without reference to its conflict-of-law provisions.
Nothing in this Section shall prevent a party's ability to bring
cross-claims or counter-claims.

9. Miscellaneous
----------------

This License represents the complete agreement concerning the subject
matter hereof. If any provision of this License is held to be
unenforceable, such provision shall be reformed only to the extent
necessary to make it enforceable. Any law or regulation which provides
that the language of a contract shall be construed against the drafter
shall not be used to construe this License against a Contributor.

10. Versions of the License
---------------------------

10.1. New Versions

Mozilla Foundation is the license steward. Except as provided in Section
10.3, no one other than the license steward has the right to modify or
publish new versions of this License. Each version will be given a
distinguishing version number.

10.2. Effect of New Versions

You may distribute the Covered Software under the terms of the version
of the License under which You originally received the Covered Software,
or under the terms of any subsequent version published by the license
steward.

10.3. Modified Versions

If you create software not governed by this License, and you want to
create a new license for such software, you may create and use a
modified version of this License if you rename the license and remove
any references to the name of the license steward (except to note that
such modified license differs from this License).

10.4. Distributing Source Code Form that is Incompatible With Secondary
Licenses

If You choose to distribute Source Code Form that is Incompatible With
Secondary Licenses under the terms of this version of the License, the
notice described in Exhibit B of this License must be attached.

Exhibit A - Source Code Form License Notice
-------------------------------------------

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.

If it is not possible or desirable to put the notice in a particular
file, then You may include the notice in a location (such as a LICENSE
file in a relevant directory) where a recipient would be likely to look
for such a notice.

You may add additional accurate notices of copyright ownership.

Exhibit B - "Incompatible With Secondary Licenses" Notice
---------------------------------------------------------

  This Source Code Form is "Incompatible With Secondary Licenses", as
  defined by the Mozilla Public License, v. 2.0.
```

### MIT (xml)

Used by:

[xml ↗](https://github.com/renggli/dart-xml)

```plaintext
The MIT License

Copyright (c) 2006-2025 Lukas Renggli.
All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (petitparser)

Used by:

[petitparser ↗](https://github.com/petitparser/dart-petitparser)

```plaintext
The MIT License

Copyright (c) 2006-2024 Lukas Renggli.
All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

## RealtimeKit React Native SDKs

The following SDKs are collectively referred to as React Native SDKs:

* [@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)

Overview of licenses:

* Apache-2.0 (3)
* BSD-2-Clause (10)
* BSD-3-Clause (3)
* GPL-2.0 (1)
* ISC (10)
* MIT (203)
* Artistic License 2.0 (1)
* CC-BY-4.0 (1)
* CC0 1.0 Universal (1)

### MIT (15 packages)

Used by:

[@babel/code-frame ↗](https://github.com/babel/babel)

[@babel/compat-data ↗](https://github.com/babel/babel)

[@babel/core ↗](https://github.com/babel/babel)

[@babel/generator ↗](https://github.com/babel/babel)

[@babel/helper-compilation-targets ↗](https://github.com/babel/babel)

[@babel/helper-globals ↗](https://github.com/babel/babel)

[@babel/helper-module-imports ↗](https://github.com/babel/babel)

[@babel/helper-module-transforms ↗](https://github.com/babel/babel)

[@babel/helper-string-parser ↗](https://github.com/babel/babel)

[@babel/helper-validator-identifier ↗](https://github.com/babel/babel)

[@babel/helper-validator-option ↗](https://github.com/babel/babel)

[@babel/runtime ↗](https://github.com/babel/babel)

[@babel/template ↗](https://github.com/babel/babel)

[@babel/traverse ↗](https://github.com/babel/babel)

[@babel/types ↗](https://github.com/babel/babel)

```plaintext
MIT License

Copyright (c) 2014-present Sebastian McKenzie and other contributors

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (13 packages)

Used by:

[@svgr/babel-plugin-add-jsx-attribute ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/babel-plugin-remove-jsx-attribute ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/babel-plugin-remove-jsx-empty-expression ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/babel-plugin-replace-jsx-attribute-value ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/babel-plugin-svg-dynamic-title ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/babel-plugin-svg-em-dimensions ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/babel-plugin-transform-react-native-svg ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/babel-plugin-transform-svg-component ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/babel-preset ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/core ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/hast-util-to-babel-ast ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/plugin-jsx ↗](https://github.com/gregberge/svgr.git#main)

[@svgr/plugin-svgo ↗](https://github.com/gregberge/svgr.git#main)

```plaintext
Copyright 2017 Smooth Code

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (9 packages)

Used by:

[callsites ↗](https://github.com/sindresorhus/callsites)

[camelcase ↗](https://github.com/sindresorhus/camelcase)

[env-paths ↗](https://github.com/sindresorhus/env-paths)

[import-fresh ↗](https://github.com/sindresorhus/import-fresh)

[index-to-position ↗](https://github.com/sindresorhus/index-to-position)

[parent-module ↗](https://github.com/sindresorhus/parent-module)

[parse-json ↗](https://github.com/sindresorhus/parse-json)

[tagged-tag ↗](https://github.com/sindresorhus/tagged-tag)

[type-fest ↗](https://github.com/sindresorhus/type-fest)

```plaintext
MIT License

Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (8 packages)

Used by:

[call-bind-apply-helpers ↗](https://github.com/ljharb/call-bind-apply-helpers)

[call-bound ↗](https://github.com/ljharb/call-bound)

[es-define-property ↗](https://github.com/ljharb/es-define-property)

[es-errors ↗](https://github.com/ljharb/es-errors)

[es-object-atoms ↗](https://github.com/ljharb/es-object-atoms)

[possible-typed-array-names ↗](https://github.com/ljharb/possible-typed-array-names)

[side-channel-list ↗](https://github.com/ljharb/side-channel-list)

[side-channel-map ↗](https://github.com/ljharb/side-channel-map)

```plaintext
MIT License

Copyright (c) 2024 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### BSD-2-Clause (7 packages)

Used by:

[css-select ↗](https://github.com/fb55/css-select)

[css-what ↗](https://github.com/fb55/css-what)

[domelementtype ↗](https://github.com/fb55/domelementtype)

[domhandler ↗](https://github.com/fb55/domhandler)

[domutils ↗](https://github.com/fb55/domutils)

[entities ↗](https://github.com/fb55/entities)

[nth-check ↗](https://github.com/fb55/nth-check)

```plaintext
Copyright (c) Felix Böhm
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS,
EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (6 packages)

Used by:

[broker-factory ↗](https://github.com/chrisguttandin/broker-factory)

[fast-unique-numbers ↗](https://github.com/chrisguttandin/fast-unique-numbers)

[worker-factory ↗](https://github.com/chrisguttandin/worker-factory)

[worker-timers ↗](https://github.com/chrisguttandin/worker-timers)

[worker-timers-broker ↗](https://github.com/chrisguttandin/worker-timers-broker)

[worker-timers-worker ↗](https://github.com/chrisguttandin/worker-timers-worker)

```plaintext
MIT License

Copyright (c) 2025 Christoph Guttandin

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (5 packages)

Used by:

[is-arguments ↗](https://github.com/inspect-js/is-arguments)

[is-generator-function ↗](https://github.com/inspect-js/is-generator-function)

[is-nan ↗](https://github.com/es-shims/is-nan)

[is-regex ↗](https://github.com/inspect-js/is-regex)

[object-is ↗](https://github.com/es-shims/object-is)

```plaintext
The MIT License (MIT)

Copyright (c) 2014 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (4 packages)

Used by:

[cipher-base ↗](https://github.com/crypto-browserify/cipher-base)

[create-hash ↗](https://github.com/crypto-browserify/createHash)

[create-hmac ↗](https://github.com/crypto-browserify/createHmac)

[evp\_bytestokey ↗](https://github.com/crypto-browserify/EVP%5FBytesToKey)

```plaintext
The MIT License (MIT)

Copyright (c) 2017 crypto-browserify contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (4 packages)

Used by:

[@jridgewell/gen-mapping ↗](https://github.com/jridgewell/sourcemaps)

[@jridgewell/remapping ↗](https://github.com/jridgewell/sourcemaps)

[@jridgewell/sourcemap-codec ↗](https://github.com/jridgewell/sourcemaps)

[@jridgewell/trace-mapping ↗](https://github.com/jridgewell/sourcemaps)

```plaintext
Copyright 2024 Justin Ridgewell <justin@ridgewell.name>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (3 packages)

Used by:

[is-callable ↗](https://github.com/inspect-js/is-callable)

[is-typed-array ↗](https://github.com/inspect-js/is-typed-array)

[which-typed-array ↗](https://github.com/inspect-js/which-typed-array)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

```

### MIT (3 packages)

Used by:

[base-64 ↗](https://github.com/mathiasbynens/base64)

[jsesc ↗](https://github.com/mathiasbynens/jsesc)

[punycode ↗](https://github.com/mathiasbynens/punycode.js)

```plaintext
Copyright Mathias Bynens <https://mathiasbynens.be/>

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (3 packages)

Used by:

[@types/hoist-non-react-statics ↗](https://github.com/DefinitelyTyped/DefinitelyTyped)

[@types/lodash ↗](https://github.com/DefinitelyTyped/DefinitelyTyped)

[@types/lodash.isequal ↗](https://github.com/DefinitelyTyped/DefinitelyTyped)

```plaintext
    MIT License

    Copyright (c) Microsoft Corporation.

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE
```

### MIT (2 packages)

Used by:

[assert ↗](https://github.com/browserify/commonjs-assert)

[util ↗](https://github.com/browserify/node-util)

```plaintext
Copyright Joyent, Inc. and other Node contributors. All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
```

### MIT (2 packages)

Used by:

[call-bind ↗](https://github.com/ljharb/call-bind)

[get-intrinsic ↗](https://github.com/ljharb/get-intrinsic)

```plaintext
MIT License

Copyright (c) 2020 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (2 packages)

Used by:

[dunder-proto ↗](https://github.com/es-shims/dunder-proto)

[math-intrinsics ↗](https://github.com/es-shims/math-intrinsics)

```plaintext
MIT License

Copyright (c) 2024 ECMAScript Shims

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (2 packages)

Used by:

[gopd ↗](https://github.com/ljharb/gopd)

[safe-regex-test ↗](https://github.com/ljharb/safe-regex-test)

```plaintext
MIT License

Copyright (c) 2022 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (2 packages)

Used by:

[hasown ↗](https://github.com/inspect-js/hasOwn)

[set-function-length ↗](https://github.com/ljharb/set-function-length)

```plaintext
MIT License

Copyright (c) Jordan Harband and contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (2 packages)

Used by:

[define-data-property ↗](https://github.com/ljharb/define-data-property)

[typed-array-buffer ↗](https://github.com/inspect-js/typed-array-buffer)

```plaintext
MIT License

Copyright (c) 2023 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (2 packages)

Used by:

[hash-base ↗](https://github.com/crypto-browserify/hash-base)

[md5.js ↗](https://github.com/crypto-browserify/md5.js)

```plaintext
The MIT License (MIT)

Copyright (c) 2016 Kirill Fomichev

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (2 packages)

Used by:

[randombytes ↗](https://github.com/crypto-browserify/randombytes)

[randomfill ↗](https://github.com/crypto-browserify/randomfill)

```plaintext
MIT License

Copyright (c) 2017 crypto-browserify

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (2 packages)

Used by:

[diffie-hellman ↗](https://github.com/crypto-browserify/diffie-hellman)

[public-encrypt ↗](https://github.com/crypto-browserify/publicEncrypt)

```plaintext
Copyright (c) 2017 Calvin Metcalf

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (2 packages)

Used by:

[side-channel ↗](https://github.com/ljharb/side-channel)

[side-channel-weakmap ↗](https://github.com/ljharb/side-channel-weakmap)

```plaintext
MIT License

Copyright (c) 2019 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (2 packages)

Used by:

[no-case ↗](https://github.com/blakeembrey/change-case)

[snake-case ↗](https://github.com/blakeembrey/change-case)

```plaintext
The MIT License (MIT)

Copyright (c) 2014 Blake Embrey (hello@blakeembrey.com)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (uuid)

Used by:

[uuid ↗](https://github.com/uuidjs/uuid)

```plaintext
The MIT License (MIT)

Copyright (c) 2010-2020 Robert Kieffer and other contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (bowser)

Used by:

[bowser ↗](https://github.com/lancedikson/bowser)

```plaintext
Copyright 2015, Dustin Diaz (the "Original Author")
All rights reserved.

MIT License

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

Distributions of all or part of the Software intended to be used
by the recipients as they would use the unmodified Software,
containing modifications that substantially alter, remove, or
disable functionality of the Software, outside of the documented
configuration mechanisms provided by the Software, shall be
modified such that the Original Author's bug reporting email
addresses and urls are either replaced with the contact information
of the parties responsible for the changes, or removed entirely.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.


Except where noted, this license applies to any and all software
programs and associated documentation files created by the
Original Author, when distributed with the Software.
```

### MIT (sdp-transform)

Used by:

[sdp-transform ↗](https://github.com/clux/sdp-transform)

```plaintext
(The MIT License)

Copyright (c) 2013 Eirik Albrigtsen

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### ISC (tslib)

Used by:

[tslib ↗](https://github.com/Microsoft/tslib)

```plaintext
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
```

### Apache-2.0 (@protobuf-ts/runtime)

Used by:

[@protobuf-ts/runtime ↗](https://github.com/timostamm/protobuf-ts)

```plaintext
                                Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.
```

### MIT (events)

Used by:

[events ↗](https://github.com/Gozala/events)

```plaintext
MIT

Copyright Joyent, Inc. and other Node contributors.

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to permit
persons to whom the Software is furnished to do so, subject to the
following conditions:

The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (fast-base64-decode)

Used by:

[fast-base64-decode ↗](https://github.com/LinusU/fast-base64-decode)

```plaintext
MIT License

Copyright (c) 2018, 2020, 2022 Linus Unnebäck

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (node-libs-react-native)

Used by:

[node-libs-react-native ↗](https://github.com/parshap/node-libs-react-native)

```plaintext
(The MIT License)

Copyright (c) 2012 Tobias Koppers

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### ISC (inherits)

Used by:

[inherits ↗](https://github.com/isaacs/inherits)

```plaintext
The ISC License

Copyright (c) Isaac Z. Schlueter

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.

```

### MIT (function-bind)

Used by:

[function-bind ↗](https://github.com/Raynos/function-bind)

```plaintext
Copyright (c) 2013 Raynos.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

```

### MIT (get-proto)

Used by:

[get-proto ↗](https://github.com/ljharb/get-proto)

```plaintext
MIT License

Copyright (c) 2025 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (has-symbols)

Used by:

[has-symbols ↗](https://github.com/inspect-js/has-symbols)

```plaintext
MIT License

Copyright (c) 2016 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (has-tostringtag)

Used by:

[has-tostringtag ↗](https://github.com/inspect-js/has-tostringtag)

```plaintext
MIT License

Copyright (c) 2021 Inspect JS

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (available-typed-arrays)

Used by:

[available-typed-arrays ↗](https://github.com/inspect-js/available-typed-arrays)

```plaintext
MIT License

Copyright (c) 2020 Inspect JS

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (has-property-descriptors)

Used by:

[has-property-descriptors ↗](https://github.com/inspect-js/has-property-descriptors)

```plaintext
MIT License

Copyright (c) 2022 Inspect JS

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (for-each)

Used by:

[for-each ↗](https://github.com/Raynos/for-each)

```plaintext
The MIT License (MIT)

Copyright (c) 2012 Raynos.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

```

### MIT (define-properties)

Used by:

[define-properties ↗](https://github.com/ljharb/define-properties)

```plaintext
The MIT License (MIT)

Copyright (C) 2015 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (object-keys)

Used by:

[object-keys ↗](https://github.com/ljharb/object-keys)

```plaintext
The MIT License (MIT)

Copyright (C) 2013 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (object.assign)

Used by:

[object.assign ↗](https://github.com/ljharb/object.assign)

```plaintext
The MIT License (MIT)

Copyright (c) 2014 Jordan Harband

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (browserify-zlib)

Used by:

[browserify-zlib ↗](https://github.com/devongovett/browserify-zlib)

```plaintext
The MIT License (MIT)

Copyright (c) 2014-2015 Devon Govett <devongovett@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

This project contains parts of Node.js.
Node.js is licensed for use as follows:

"""
Copyright Node.js contributors. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
"""

This license applies to parts of Node.js originating from the
https://github.com/joyent/node repository:

"""
Copyright Joyent, Inc. and other Node contributors. All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
"""
```

### MIT (pako)

Used by:

[pako ↗](https://github.com/nodeca/pako)

```plaintext
(The MIT License)

Copyright (C) 2014-2017 by Vitaly Puzrin and Andrei Tuputcyn

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (buffer)

Used by:

[buffer ↗](https://github.com/feross/buffer)

```plaintext
The MIT License (MIT)

Copyright (c) Feross Aboukhadijeh, and other contributors.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (base64-js)

Used by:

[base64-js ↗](https://github.com/beatgammit/base64-js)

```plaintext
The MIT License (MIT)

Copyright (c) 2014 Jameson Little

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### BSD-3-Clause (ieee754)

Used by:

[ieee754 ↗](https://github.com/feross/ieee754)

```plaintext
Copyright 2008 Fair Oaks Labs, Inc.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (console-browserify)

Used by:

[console-browserify ↗](https://github.com/browserify/console-browserify)

```plaintext
Copyright (c) 2012 Raynos.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (constants-browserify)

Used by:

[constants-browserify ↗](https://github.com/juliangruber/constants-browserify)

```plaintext
Copyright (c) 2013 Julian Gruber <julian@juliangruber.com>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### Artistic License 2.0 (domain-browser)

Used by:

[domain-browser ↗](https://github.com/bevry/domain-browser)

```plaintext
<!-- LICENSEFILE/ -->

# License

Unless stated otherwise all works are:

-   Copyright &copy; [Benjamin Lupton](https://balupton.com)

and licensed under:

-   [Artistic License 2.0](http://spdx.org/licenses/Artistic-2.0.html)

## The Artistic License 2.0

<pre>
Copyright (c) 2000-2006, The Perl Foundation.

Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.

Preamble

This license establishes the terms under which a given free software Package may be copied, modified, distributed, and/or redistributed. The intent is that the Copyright Holder maintains some artistic control over the development of that Package while still keeping the Package available as open source and free software.

You are always permitted to make arrangements wholly outside of this license directly with the Copyright Holder of a given Package.  If the terms of this license do not permit the full use that you propose to make of the Package, you should contact the Copyright Holder and seek a different licensing arrangement.

Definitions

     "Copyright Holder" means the individual(s) or organization(s) named in the copyright notice for the entire Package.

     "Contributor" means any party that has contributed code or other material to the Package, in accordance with the Copyright Holder's procedures.

     "You" and "your" means any person who would like to copy, distribute, or modify the Package.

     "Package" means the collection of files distributed by the Copyright Holder, and derivatives of that collection and/or of those files. A given Package may consist of either the Standard Version, or a Modified Version.

     "Distribute" means providing a copy of the Package or making it accessible to anyone else, or in the case of a company or organization, to others outside of your company or organization.

     "Distributor Fee" means any fee that you charge for Distributing this Package or providing support for this Package to another party.  It does not mean licensing fees.

     "Standard Version" refers to the Package if it has not been modified, or has been modified only in ways explicitly requested by the Copyright Holder.

     "Modified Version" means the Package, if it has been changed, and such changes were not explicitly requested by the Copyright Holder.

     "Original License" means this Artistic License as Distributed with the Standard Version of the Package, in its current version or as it may be modified by The Perl Foundation in the future.

     "Source" form means the source code, documentation source, and configuration files for the Package.

     "Compiled" form means the compiled bytecode, object code, binary, or any other form resulting from mechanical transformation or translation of the Source form.

Permission for Use and Modification Without Distribution

(1) You are permitted to use the Standard Version and create and use Modified Versions for any purpose without restriction, provided that you do not Distribute the Modified Version.

Permissions for Redistribution of the Standard Version

(2) You may Distribute verbatim copies of the Source form of the Standard Version of this Package in any medium without restriction, either gratis or for a Distributor Fee, provided that you duplicate all of the original copyright notices and associated disclaimers.  At your discretion, such verbatim copies may or may not include a Compiled form of the Package.

(3) You may apply any bug fixes, portability changes, and other modifications made available from the Copyright Holder.  The resulting Package will still be considered the Standard Version, and as such will be subject to the Original License.

Distribution of Modified Versions of the Package as Source

(4) You may Distribute your Modified Version as Source (either gratis or for a Distributor Fee, and with or without a Compiled form of the Modified Version) provided that you clearly document how it differs from the Standard Version, including, but not limited to, documenting any non-standard features, executables, or modules, and provided that you do at least ONE of the following:

     (a) make the Modified Version available to the Copyright Holder of the Standard Version, under the Original License, so that the Copyright Holder may include your modifications in the Standard Version.
     (b) ensure that installation of your Modified Version does not prevent the user installing or running the Standard Version. In addition, the Modified Version must bear a name that is different from the name of the Standard Version.
     (c) allow anyone who receives a copy of the Modified Version to make the Source form of the Modified Version available to others under

          (i) the Original License or
          (ii) a license that permits the licensee to freely copy, modify and redistribute the Modified Version using the same licensing terms that apply to the copy that the licensee received, and requires that the Source form of the Modified Version, and of any works derived from it, be made freely available in that license fees are prohibited but Distributor Fees are allowed.

Distribution of Compiled Forms of the Standard Version or Modified Versions without the Source

(5)  You may Distribute Compiled forms of the Standard Version without the Source, provided that you include complete instructions on how to get the Source of the Standard Version.  Such instructions must be valid at the time of your distribution.  If these instructions, at any time while you are carrying out such distribution, become invalid, you must provide new instructions on demand or cease further distribution. If you provide valid instructions or cease distribution within thirty days after you become aware that the instructions are invalid, then you do not forfeit any of your rights under this license.

(6)  You may Distribute a Modified Version in Compiled form without the Source, provided that you comply with Section 4 with respect to the Source of the Modified Version.

Aggregating or Linking the Package

(7)  You may aggregate the Package (either the Standard Version or Modified Version) with other packages and Distribute the resulting aggregation provided that you do not charge a licensing fee for the Package.  Distributor Fees are permitted, and licensing fees for other components in the aggregation are permitted. The terms of this license apply to the use and Distribution of the Standard or Modified Versions as included in the aggregation.

(8) You are permitted to link Modified and Standard Versions with other works, to embed the Package in a larger work of your own, or to build stand-alone binary or bytecode versions of applications that include the Package, and Distribute the result without restriction, provided the result does not expose a direct interface to the Package.

Items That are Not Considered Part of a Modified Version

(9) Works (including, but not limited to, modules and scripts) that merely extend or make use of the Package, do not, by themselves, cause the Package to be a Modified Version.  In addition, such works are not considered parts of the Package itself, and are not subject to the terms of this license.

General Provisions

(10)  Any use, modification, and distribution of the Standard or Modified Versions is governed by this Artistic License. By using, modifying or distributing the Package, you accept this license. Do not use, modify, or distribute the Package, if you do not accept this license.

(11)  If your Modified Version has been derived from a Modified Version made by someone other than you, you are nevertheless required to ensure that your Modified Version complies with the requirements of this license.

(12)  This license does not grant you the right to use any trademark, service mark, tradename, or logo of the Copyright Holder.

(13)  This license includes the non-exclusive, worldwide, free-of-charge patent license to make, have made, use, offer to sell, sell, import and otherwise transfer the Package with respect to any patent claims licensable by the Copyright Holder that are necessarily infringed by the Package. If you institute patent litigation (including a cross-claim or counterclaim) against any party alleging that the Package constitutes direct or contributory patent infringement, then this Artistic License to you shall terminate on the date that such litigation is filed.

(14)  Disclaimer of Warranty:
THE PACKAGE IS PROVIDED BY THE COPYRIGHT HOLDER AND CONTRIBUTORS "AS IS" AND WITHOUT ANY EXPRESS OR IMPLIED WARRANTIES. THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT ARE DISCLAIMED TO THE EXTENT PERMITTED BY YOUR LOCAL LAW. UNLESS REQUIRED BY LAW, NO COPYRIGHT HOLDER OR CONTRIBUTOR WILL BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES ARISING IN ANY WAY OUT OF THE USE OF THE PACKAGE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</pre>

<!-- /LICENSEFILE -->
```

### MIT (https-browserify)

Used by:

[https-browserify ↗](https://github.com/substack/https-browserify)

```plaintext
This software is released under the MIT license:

Copyright (c) James Halliday

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (os-browserify)

Used by:

[os-browserify ↗](https://github.com/CoderPuppy/os-browserify)

```plaintext
The MIT License (MIT)

Copyright (c) 2017 CoderPuppy

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (path-browserify)

Used by:

[path-browserify ↗](https://github.com/browserify/path-browserify)

```plaintext
MIT License

Copyright (c) 2013 James Halliday

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (process)

Used by:

[process ↗](https://github.com/shtylman/node-process)

```plaintext
(The MIT License)

Copyright (c) 2013 Roman Shtylman <shtylman@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (querystring-es3)

Used by:

[querystring-es3 ↗](https://github.com/mike-spainhower/querystring)

```plaintext

Copyright 2012 Irakli Gozalishvili. All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
```

### MIT (react-native-crypto)

Used by:

[react-native-crypto ↗](https://github.com/tradle/react-native-crypto)

```plaintext
The MIT License

Copyright (c) 2013 Dominic Tarr

Permission is hereby granted, free of charge, 
to any person obtaining a copy of this software and 
associated documentation files (the "Software"), to 
deal in the Software without restriction, including 
without limitation the rights to use, copy, modify, 
merge, publish, distribute, sublicense, and/or sell 
copies of the Software, and to permit persons to whom 
the Software is furnished to do so, 
subject to the following conditions:

The above copyright notice and this permission notice 
shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR 
ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (browserify-cipher)

Used by:

[browserify-cipher ↗](https://github.com/crypto-browserify/browserify-cipher)

```plaintext
The MIT License (MIT)

Copyright (c) 2014-2017 Calvin Metcalf & contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (browserify-aes)

Used by:

[browserify-aes ↗](https://github.com/crypto-browserify/browserify-aes)

```plaintext
The MIT License (MIT)

Copyright (c) 2014-2017 browserify-aes contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (buffer-xor)

Used by:

[buffer-xor ↗](https://github.com/crypto-browserify/buffer-xor)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 Daniel Cousens

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (safe-buffer)

Used by:

[safe-buffer ↗](https://github.com/feross/safe-buffer)

```plaintext
The MIT License (MIT)

Copyright (c) Feross Aboukhadijeh

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (readable-stream)

Used by:

[readable-stream ↗](https://github.com/nodejs/readable-stream)

```plaintext
Node.js is licensed for use as follows:

"""
Copyright Node.js contributors. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
"""

This license applies to parts of Node.js originating from the
https://github.com/joyent/node repository:

"""
Copyright Joyent, Inc. and other Node contributors. All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
"""
```

### MIT (abort-controller)

Used by:

[abort-controller ↗](https://github.com/mysticatea/abort-controller)

```plaintext
MIT License

Copyright (c) 2017 Toru Nagashima

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (event-target-shim)

Used by:

[event-target-shim ↗](https://github.com/mysticatea/event-target-shim)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 Toru Nagashima

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

```

### MIT (string\_decoder)

Used by:

[string\_decoder ↗](https://github.com/nodejs/string%5Fdecoder)

```plaintext
Node.js is licensed for use as follows:

"""
Copyright Node.js contributors. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
"""

This license applies to parts of Node.js originating from the
https://github.com/joyent/node repository:

"""
Copyright Joyent, Inc. and other Node contributors. All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
"""

```

### MIT (ripemd160)

Used by:

[ripemd160 ↗](https://github.com/crypto-browserify/ripemd160)

```plaintext
The MIT License (MIT)

Copyright (c) 2016 crypto-browserify

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (sha.js)

Used by:

[sha.js ↗](https://github.com/crypto-browserify/sha.js)

```plaintext
Copyright (c) 2013-2018 sha.js contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


Copyright (c) 1998 - 2009, Paul Johnston & Contributors
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.

Redistributions in binary form must reproduce the above copyright notice, this
list of conditions and the following disclaimer in the documentation and/or
other materials provided with the distribution.

Neither the name of the author nor the names of its contributors may be used to
endorse or promote products derived from this software without specific prior
written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

```

### MIT (to-buffer)

Used by:

[to-buffer ↗](https://github.com/browserify/to-buffer)

```plaintext
The MIT License (MIT)

Copyright (c) 2016 Mathias Buus

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (isarray)

Used by:

[isarray ↗](https://github.com/juliangruber/isarray)

```plaintext
MIT License

Copyright (c) 2013 Julian Gruber <julian@juliangruber.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (browserify-des)

Used by:

[browserify-des ↗](https://github.com/crypto-browserify/browserify-des)

```plaintext
The MIT License (MIT)

Copyright (c) 2014-2017 Calvin Metcalf, Fedor Indutny & contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (des.js)

Used by:

[des.js ↗](https://github.com/indutny/des.js)

```plaintext
This software is licensed under the MIT License.

Copyright Fedor Indutny, 2015.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### ISC (minimalistic-assert)

Used by:

[minimalistic-assert ↗](https://github.com/calvinmetcalf/minimalistic-assert)

```plaintext
Copyright 2015 Calvin Metcalf

Permission to use, copy, modify, and/or distribute this software for any purpose
with or without fee is hereby granted, provided that the above copyright notice
and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
```

### ISC (browserify-sign)

Used by:

[browserify-sign ↗](https://github.com/crypto-browserify/browserify-sign)

```plaintext
Copyright (c) 2014-2015 Calvin Metcalf and browserify-sign contributors

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
```

### MIT (bn.js)

Used by:

[bn.js ↗](https://github.com/indutny/bn.js)

```plaintext
Copyright Fedor Indutny, 2015.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (browserify-rsa)

Used by:

[browserify-rsa ↗](https://github.com/crypto-browserify/browserify-rsa)

```plaintext
The MIT License (MIT)

Copyright (c) 2014-2016 Calvin Metcalf & contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (elliptic)

Used by:

[elliptic ↗](https://github.com/indutny/elliptic)

```plaintext
This software is licensed under the MIT License.

Copyright Fedor Indutny, 2014.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (brorand)

Used by:

[brorand ↗](https://github.com/indutny/brorand)

```plaintext
This software is licensed under the MIT License.

Copyright Fedor Indutny, 2014.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (hash.js)

Used by:

[hash.js ↗](https://github.com/indutny/hash.js)

```plaintext
This software is licensed under the MIT License.

Copyright Fedor Indutny, 2014.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (hmac-drbg)

Used by:

[hmac-drbg ↗](https://github.com/indutny/hmac-drbg)

```plaintext
This software is licensed under the MIT License.

Copyright Fedor Indutny, 2017.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (minimalistic-crypto-utils)

Used by:

[minimalistic-crypto-utils ↗](https://github.com/indutny/minimalistic-crypto-utils)

```plaintext
This software is licensed under the MIT License.

Copyright Fedor Indutny, 2017.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### ISC (parse-asn1)

Used by:

[parse-asn1 ↗](https://github.com/crypto-browserify/parse-asn1)

```plaintext
Copyright (c) 2017, crypto-browserify contributors

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
```

### MIT (asn1.js)

Used by:

[asn1.js ↗](https://github.com/indutny/asn1.js)

```plaintext
MIT License

Copyright (c) 2017 Fedor Indutny

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (safer-buffer)

Used by:

[safer-buffer ↗](https://github.com/ChALkeR/safer-buffer)

```plaintext
MIT License

Copyright (c) 2018 Nikita Skovoroda <chalkerx@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (pbkdf2)

Used by:

[pbkdf2 ↗](https://github.com/crypto-browserify/pbkdf2)

```plaintext
The MIT License (MIT)

Copyright (c) 2014 Daniel Cousens

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (create-ecdh)

Used by:

[create-ecdh ↗](https://github.com/crypto-browserify/createECDH)

```plaintext
The MIT License (MIT)

Copyright (c) 2014-2017 createECDH contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (miller-rabin)

Used by:

[miller-rabin ↗](https://github.com/indutny/miller-rabin)

```plaintext
This software is licensed under the MIT License.

Copyright Fedor Indutny, 2014.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (react-native-randombytes)

Used by:

[react-native-randombytes ↗](https://github.com/mvayngrib/react-native-randombytes)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 Mark Vayngrib

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

```

### BSD-2-Clause (sjcl)

Used by:

[sjcl ↗](https://github.com/bitwiseshiftleft/sjcl)

```plaintext
SJCL is open. You can use, modify and redistribute it under a BSD
license or under the GNU GPL, version 2.0.

---------------------------------------------------------------------

http://opensource.org/licenses/BSD-2-Clause

Copyright (c) 2009-2015, Emily Stark, Mike Hamburg and Dan Boneh at
Stanford University. All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

1. Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

---------------------------------------------------------------------

http://opensource.org/licenses/GPL-2.0

The Stanford Javascript Crypto Library (hosted here on GitHub) is a
project by the Stanford Computer Security Lab to build a secure,
powerful, fast, small, easy-to-use, cross-browser library for
cryptography in Javascript.

Copyright (c) 2009-2015, Emily Stark, Mike Hamburg and Dan Boneh at
Stanford University.

This program is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the
Free Software Foundation; either version 2 of the License, or (at your
option) any later version.

This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
Public License for more details.

You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
```

### MIT (stream-http)

Used by:

[stream-http ↗](https://github.com/jhiesey/stream-http)

```plaintext
The MIT License

Copyright (c) 2015 John Hiesey

Permission is hereby granted, free of charge, 
to any person obtaining a copy of this software and 
associated documentation files (the "Software"), to 
deal in the Software without restriction, including 
without limitation the rights to use, copy, modify, 
merge, publish, distribute, sublicense, and/or sell 
copies of the Software, and to permit persons to whom 
the Software is furnished to do so, 
subject to the following conditions:

The above copyright notice and this permission notice 
shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR 
ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (builtin-status-codes)

Used by:

[builtin-status-codes ↗](https://github.com/bendrucker/builtin-status-codes)

```plaintext
The MIT License (MIT)

Copyright (c) Ben Drucker <bvdrucker@gmail.com> (bendrucker.me)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (xtend)

Used by:

[xtend ↗](https://github.com/Raynos/xtend)

```plaintext
The MIT License (MIT)
Copyright (c) 2012-2014 Raynos.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (timers-browserify)

Used by:

[timers-browserify ↗](https://github.com/jryans/timers-browserify)

```plaintext
# timers-browserify

This project uses the [MIT](http://jryans.mit-license.org/) license:

    Copyright © 2012 J. Ryan Stinnett <jryans@gmail.com>

    Permission is hereby granted, free of charge, to any person obtaining a
    copy of this software and associated documentation files (the “Software”),
    to deal in the Software without restriction, including without limitation
    the rights to use, copy, modify, merge, publish, distribute, sublicense,
    and/or sell copies of the Software, and to permit persons to whom the
    Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in
    all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
    DEALINGS IN THE SOFTWARE.

# lib/node

The `lib/node` directory borrows files from joyent/node which uses the following license:

    Copyright Joyent, Inc. and other Node contributors. All rights reserved.
    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to
    deal in the Software without restriction, including without limitation the
    rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
    sell copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in
    all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
    IN THE SOFTWARE.
```

### MIT (setimmediate)

Used by:

[setimmediate ↗](https://github.com/yuzujs/setImmediate)

```plaintext
Copyright (c) 2012 Barnesandnoble.com, llc, Donavon West, and Domenic Denicola

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (tty-browserify)

Used by:

[tty-browserify ↗](https://github.com/browserify/tty-browserify)

```plaintext
This software is released under the MIT license:

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (url)

Used by:

[url ↗](https://github.com/defunctzombie/node-url)

```plaintext
The MIT License (MIT)

Copyright 2014 Joyent, Inc. and other Node contributors.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### BSD-3-Clause (qs)

Used by:

[qs ↗](https://github.com/ljharb/qs)

```plaintext
BSD 3-Clause License

Copyright (c) 2014, Nathan LaFreniere and other [contributors](https://github.com/ljharb/qs/graphs/contributors)
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this
   list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its
   contributors may be used to endorse or promote products derived from
   this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (object-inspect)

Used by:

[object-inspect ↗](https://github.com/inspect-js/object-inspect)

```plaintext
MIT License

Copyright (c) 2013 James Halliday

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (react-native-url-polyfill)

Used by:

[react-native-url-polyfill ↗](https://github.com/charpeni/react-native-url-polyfill)

```plaintext
MIT License

Copyright (c) 2019 Nicolas Charpentier

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (whatwg-url-without-unicode)

Used by:

[whatwg-url-without-unicode ↗](https://github.com/charpeni/whatwg-url)

```plaintext
The MIT License (MIT)

Copyright (c) 2015–2016 Sebastian Mayr

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### BSD-2-Clause (webidl-conversions)

Used by:

[webidl-conversions ↗](https://github.com/jsdom/webidl-conversions)

```plaintext
# The BSD 2-Clause License

Copyright (c) 2014, Domenic Denicola
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### Apache-2.0 (text-encoding-polyfill)

Used by:

[text-encoding-polyfill ↗](https://github.com/inexorabletash/text-encoding)

```plaintext
The encoding indexes, algorithms, and many comments in the code
derive from the Encoding Standard https://encoding.spec.whatwg.org/

Otherwise, the code of this repository is released under the Unlicense
license and is also dual-licensed under an Apache 2.0 license. Both
are included below.

# Unlicense

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.

In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to <http://unlicense.org/>

# Apache 2.0 License

                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### MIT (lodash)

Used by:

[lodash ↗](https://github.com/lodash/lodash)

```plaintext
Copyright OpenJS Foundation and other contributors <https://openjsf.org/>

Based on Underscore.js, copyright Jeremy Ashkenas,
DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>

This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
available at https://github.com/lodash/lodash

The following license applies to all parts of this software except as
documented below:

====

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

====

Copyright and related rights for sample code are waived via CC0. Sample
code is defined as all source code displayed within the prose of the
documentation.

CC0: http://creativecommons.org/publicdomain/zero/1.0/

====

Files located in the node_modules and vendor directories are externally
maintained libraries used by this software which have their own
licenses; we recommend you read them, as their terms may differ from the
terms above.
```

### MIT (radio-buttons-react-native)

Used by:

[radio-buttons-react-native ↗](https://github.com/sramezani/radio-buttons-react-native)

```plaintext
MIT License

Copyright (c) 2019 sramezani

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (react-native-element-dropdown)

Used by:

[react-native-element-dropdown ↗](https://github.com/hoaphantn7604/react-native-element-dropdown)

```plaintext
MIT License

Copyright (c) 2023 Hoa Phan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (react-native-gifted-chat)

Used by:

[react-native-gifted-chat ↗](https://github.com/FaridSafi/react-native-gifted-chat)

```plaintext
The MIT License (MIT)

Copyright (c) 2019 Farid from Safi

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (@expo/react-native-action-sheet)

Used by:

[@expo/react-native-action-sheet ↗](https://github.com/expo/react-native-action-sheet)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 Expo

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

```

### BSD-2-Clause (hoist-non-react-statics)

Used by:

[hoist-non-react-statics ↗](https://github.com/mridgway/hoist-non-react-statics)

```plaintext
Software License Agreement (BSD License)
========================================

Copyright (c) 2015, Yahoo! Inc. All rights reserved.
----------------------------------------------------

Redistribution and use of this software in source and binary forms, with or
without modification, are permitted provided that the following conditions are
met:

  * Redistributions of source code must retain the above copyright notice, this
    list of conditions and the following disclaimer.
  * Redistributions in binary form must reproduce the above copyright notice,
    this list of conditions and the following disclaimer in the documentation
    and/or other materials provided with the distribution.
  * Neither the name of Yahoo! Inc. nor the names of YUI's contributors may be
    used to endorse or promote products derived from this software without
    specific prior written permission of Yahoo! Inc.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (react-is)

Used by:

[react-is ↗](https://github.com/facebook/react)

```plaintext
MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (dayjs)

Used by:

[dayjs ↗](https://github.com/iamkun/dayjs)

```plaintext
MIT License

Copyright (c) 2018-present, iamkun

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (lodash.isequal)

Used by:

[lodash.isequal ↗](https://github.com/lodash/lodash)

```plaintext
Copyright JS Foundation and other contributors <https://js.foundation/>

Based on Underscore.js, copyright Jeremy Ashkenas,
DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>

This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
available at https://github.com/lodash/lodash

The following license applies to all parts of this software except as
documented below:

====

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

====

Copyright and related rights for sample code are waived via CC0. Sample
code is defined as all source code displayed within the prose of the
documentation.

CC0: http://creativecommons.org/publicdomain/zero/1.0/

====

Files located in the node_modules and vendor directories are externally
maintained libraries used by this software which have their own
licenses; we recommend you read them, as their terms may differ from the
terms above.
```

### MIT (react-native-communications)

Used by:

[react-native-communications ↗](https://github.com/anarchicknight/react-native-communications)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

```

### MIT (react-native-iphone-x-helper)

Used by:

[react-native-iphone-x-helper ↗](https://github.com/ptelad/react-native-iphone-x-helper)

```plaintext
MIT License

Copyright (c) 2017 Elad Gil

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (react-native-lightbox-v2)

Used by:

[react-native-lightbox-v2 ↗](https://github.com/cbbfcd/react-native-lightbox)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 Joel Arvidsson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

```

### MIT (react-native-parsed-text)

Used by:

[react-native-parsed-text ↗](https://github.com/taskrabbit/react-native-parsed-text)

```plaintext
MIT License

Copyright (c) 2016 TaskRabbit

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (prop-types)

Used by:

[prop-types ↗](https://github.com/facebook/prop-types)

```plaintext
MIT License

Copyright (c) 2013-present, Facebook, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (loose-envify)

Used by:

[loose-envify ↗](https://github.com/zertosh/loose-envify)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 Andres Suarez <zertosh@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (js-tokens)

Used by:

[js-tokens ↗](https://github.com/lydell/js-tokens)

```plaintext
The MIT License (MIT)

Copyright (c) 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 Simon Lydell

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (object-assign)

Used by:

[object-assign ↗](https://github.com/sindresorhus/object-assign)

```plaintext
The MIT License (MIT)

Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (react-native-svg-transformer)

Used by:

[react-native-svg-transformer ↗](https://github.com/kristerkari/react-native-svg-transformer)

```plaintext
The MIT License (MIT)

Copyright (c) 2018 Krister Kari

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (debug)

Used by:

[debug ↗](https://github.com/debug-js/debug)

```plaintext
(The MIT License)

Copyright (c) 2014-2017 TJ Holowaychuk <tj@vision-media.ca>
Copyright (c) 2018-2021 Josh Junon

Permission is hereby granted, free of charge, to any person obtaining a copy of this software
and associated documentation files (the 'Software'), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial
portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

```

### MIT (ms)

Used by:

[ms ↗](https://github.com/vercel/ms)

```plaintext
The MIT License (MIT)

Copyright (c) 2020 Vercel, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (json5)

Used by:

[json5 ↗](https://github.com/json5/json5)

```plaintext
MIT License

Copyright (c) 2012-2018 Aseem Kishore, and [others].

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

[others]: https://github.com/json5/json5/contributors
```

### ISC (semver)

Used by:

[semver ↗](https://github.com/npm/node-semver)

```plaintext
The ISC License

Copyright (c) Isaac Z. Schlueter and Contributors

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
```

### MIT (gensync)

Used by:

[gensync ↗](https://github.com/loganfsmyth/gensync)

```plaintext
Copyright 2018 Logan Smyth <loganfsmyth@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (@babel/parser)

Used by:

[@babel/parser ↗](https://github.com/babel/babel)

```plaintext
Copyright (C) 2012-2014 by various contributors (see AUTHORS)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (@babel/helpers)

Used by:

[@babel/helpers ↗](https://github.com/babel/babel)

```plaintext
MIT License

Copyright (c) 2014-present Sebastian McKenzie and other contributors
Copyright (c) 2014-present, Facebook, Inc. (ONLY ./src/helpers/regenerator* files)

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### ISC (picocolors)

Used by:

[picocolors ↗](https://github.com/alexeyraspopov/picocolors)

```plaintext
ISC License

Copyright (c) 2021-2024 Oleksii Raspopov, Kostiantyn Denysov, Anton Verinov

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
```

### MIT (@jridgewell/resolve-uri)

Used by:

[@jridgewell/resolve-uri ↗](https://github.com/jridgewell/resolve-uri)

```plaintext
Copyright 2019 Justin Ridgewell <jridgewell@google.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (convert-source-map)

Used by:

[convert-source-map ↗](https://github.com/thlorenz/convert-source-map)

```plaintext
Copyright 2013 Thorsten Lorenz. 
All rights reserved.

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
```

### ISC (lru-cache)

Used by:

[lru-cache ↗](https://github.com/isaacs/node-lru-cache)

```plaintext
The ISC License

Copyright (c) 2010-2023 Isaac Z. Schlueter and Contributors

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
```

### MIT (browserslist)

Used by:

[browserslist ↗](https://github.com/browserslist/browserslist)

```plaintext
The MIT License (MIT)

Copyright 2014 Andrey Sitnik <andrey@sitnik.ru> and other contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### Apache-2.0 (baseline-browser-mapping)

Used by:

[baseline-browser-mapping ↗](https://github.com/web-platform-dx/baseline-browser-mapping)

```plaintext
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
```

### CC-BY-4.0 (caniuse-lite)

Used by:

[caniuse-lite ↗](https://github.com/browserslist/caniuse-lite)

```plaintext
Attribution 4.0 International

=======================================================================

Creative Commons Corporation ("Creative Commons") is not a law firm and
does not provide legal services or legal advice. Distribution of
Creative Commons public licenses does not create a lawyer-client or
other relationship. Creative Commons makes its licenses and related
information available on an "as-is" basis. Creative Commons gives no
warranties regarding its licenses, any material licensed under their
terms and conditions, or any related information. Creative Commons
disclaims all liability for damages resulting from their use to the
fullest extent possible.

Using Creative Commons Public Licenses

Creative Commons public licenses provide a standard set of terms and
conditions that creators and other rights holders may use to share
original works of authorship and other material subject to copyright
and certain other rights specified in the public license below. The
following considerations are for informational purposes only, are not
exhaustive, and do not form part of our licenses.

     Considerations for licensors: Our public licenses are
     intended for use by those authorized to give the public
     permission to use material in ways otherwise restricted by
     copyright and certain other rights. Our licenses are
     irrevocable. Licensors should read and understand the terms
     and conditions of the license they choose before applying it.
     Licensors should also secure all rights necessary before
     applying our licenses so that the public can reuse the
     material as expected. Licensors should clearly mark any
     material not subject to the license. This includes other CC-
     licensed material, or material used under an exception or
     limitation to copyright. More considerations for licensors:
	wiki.creativecommons.org/Considerations_for_licensors

     Considerations for the public: By using one of our public
     licenses, a licensor grants the public permission to use the
     licensed material under specified terms and conditions. If
     the licensor's permission is not necessary for any reason--for
     example, because of any applicable exception or limitation to
     copyright--then that use is not regulated by the license. Our
     licenses grant only permissions under copyright and certain
     other rights that a licensor has authority to grant. Use of
     the licensed material may still be restricted for other
     reasons, including because others have copyright or other
     rights in the material. A licensor may make special requests,
     such as asking that all changes be marked or described.
     Although not required by our licenses, you are encouraged to
     respect those requests where reasonable. More_considerations
     for the public: 
	wiki.creativecommons.org/Considerations_for_licensees

=======================================================================

Creative Commons Attribution 4.0 International Public License

By exercising the Licensed Rights (defined below), You accept and agree
to be bound by the terms and conditions of this Creative Commons
Attribution 4.0 International Public License ("Public License"). To the
extent this Public License may be interpreted as a contract, You are
granted the Licensed Rights in consideration of Your acceptance of
these terms and conditions, and the Licensor grants You such rights in
consideration of benefits the Licensor receives from making the
Licensed Material available under these terms and conditions.


Section 1 -- Definitions.

  a. Adapted Material means material subject to Copyright and Similar
     Rights that is derived from or based upon the Licensed Material
     and in which the Licensed Material is translated, altered,
     arranged, transformed, or otherwise modified in a manner requiring
     permission under the Copyright and Similar Rights held by the
     Licensor. For purposes of this Public License, where the Licensed
     Material is a musical work, performance, or sound recording,
     Adapted Material is always produced where the Licensed Material is
     synched in timed relation with a moving image.

  b. Adapter's License means the license You apply to Your Copyright
     and Similar Rights in Your contributions to Adapted Material in
     accordance with the terms and conditions of this Public License.

  c. Copyright and Similar Rights means copyright and/or similar rights
     closely related to copyright including, without limitation,
     performance, broadcast, sound recording, and Sui Generis Database
     Rights, without regard to how the rights are labeled or
     categorized. For purposes of this Public License, the rights
     specified in Section 2(b)(1)-(2) are not Copyright and Similar
     Rights.

  d. Effective Technological Measures means those measures that, in the
     absence of proper authority, may not be circumvented under laws
     fulfilling obligations under Article 11 of the WIPO Copyright
     Treaty adopted on December 20, 1996, and/or similar international
     agreements.

  e. Exceptions and Limitations means fair use, fair dealing, and/or
     any other exception or limitation to Copyright and Similar Rights
     that applies to Your use of the Licensed Material.

  f. Licensed Material means the artistic or literary work, database,
     or other material to which the Licensor applied this Public
     License.

  g. Licensed Rights means the rights granted to You subject to the
     terms and conditions of this Public License, which are limited to
     all Copyright and Similar Rights that apply to Your use of the
     Licensed Material and that the Licensor has authority to license.

  h. Licensor means the individual(s) or entity(ies) granting rights
     under this Public License.

  i. Share means to provide material to the public by any means or
     process that requires permission under the Licensed Rights, such
     as reproduction, public display, public performance, distribution,
     dissemination, communication, or importation, and to make material
     available to the public including in ways that members of the
     public may access the material from a place and at a time
     individually chosen by them.

  j. Sui Generis Database Rights means rights other than copyright
     resulting from Directive 96/9/EC of the European Parliament and of
     the Council of 11 March 1996 on the legal protection of databases,
     as amended and/or succeeded, as well as other essentially
     equivalent rights anywhere in the world.

  k. You means the individual or entity exercising the Licensed Rights
     under this Public License. Your has a corresponding meaning.


Section 2 -- Scope.

  a. License grant.

       1. Subject to the terms and conditions of this Public License,
          the Licensor hereby grants You a worldwide, royalty-free,
          non-sublicensable, non-exclusive, irrevocable license to
          exercise the Licensed Rights in the Licensed Material to:

            a. reproduce and Share the Licensed Material, in whole or
               in part; and

            b. produce, reproduce, and Share Adapted Material.

       2. Exceptions and Limitations. For the avoidance of doubt, where
          Exceptions and Limitations apply to Your use, this Public
          License does not apply, and You do not need to comply with
          its terms and conditions.

       3. Term. The term of this Public License is specified in Section
          6(a).

       4. Media and formats; technical modifications allowed. The
          Licensor authorizes You to exercise the Licensed Rights in
          all media and formats whether now known or hereafter created,
          and to make technical modifications necessary to do so. The
          Licensor waives and/or agrees not to assert any right or
          authority to forbid You from making technical modifications
          necessary to exercise the Licensed Rights, including
          technical modifications necessary to circumvent Effective
          Technological Measures. For purposes of this Public License,
          simply making modifications authorized by this Section 2(a)
          (4) never produces Adapted Material.

       5. Downstream recipients.

            a. Offer from the Licensor -- Licensed Material. Every
               recipient of the Licensed Material automatically
               receives an offer from the Licensor to exercise the
               Licensed Rights under the terms and conditions of this
               Public License.

            b. No downstream restrictions. You may not offer or impose
               any additional or different terms or conditions on, or
               apply any Effective Technological Measures to, the
               Licensed Material if doing so restricts exercise of the
               Licensed Rights by any recipient of the Licensed
               Material.

       6. No endorsement. Nothing in this Public License constitutes or
          may be construed as permission to assert or imply that You
          are, or that Your use of the Licensed Material is, connected
          with, or sponsored, endorsed, or granted official status by,
          the Licensor or others designated to receive attribution as
          provided in Section 3(a)(1)(A)(i).

  b. Other rights.

       1. Moral rights, such as the right of integrity, are not
          licensed under this Public License, nor are publicity,
          privacy, and/or other similar personality rights; however, to
          the extent possible, the Licensor waives and/or agrees not to
          assert any such rights held by the Licensor to the limited
          extent necessary to allow You to exercise the Licensed
          Rights, but not otherwise.

       2. Patent and trademark rights are not licensed under this
          Public License.

       3. To the extent possible, the Licensor waives any right to
          collect royalties from You for the exercise of the Licensed
          Rights, whether directly or through a collecting society
          under any voluntary or waivable statutory or compulsory
          licensing scheme. In all other cases the Licensor expressly
          reserves any right to collect such royalties.


Section 3 -- License Conditions.

Your exercise of the Licensed Rights is expressly made subject to the
following conditions.

  a. Attribution.

       1. If You Share the Licensed Material (including in modified
          form), You must:

            a. retain the following if it is supplied by the Licensor
               with the Licensed Material:

                 i. identification of the creator(s) of the Licensed
                    Material and any others designated to receive
                    attribution, in any reasonable manner requested by
                    the Licensor (including by pseudonym if
                    designated);

                ii. a copyright notice;

               iii. a notice that refers to this Public License;

                iv. a notice that refers to the disclaimer of
                    warranties;

                 v. a URI or hyperlink to the Licensed Material to the
                    extent reasonably practicable;

            b. indicate if You modified the Licensed Material and
               retain an indication of any previous modifications; and

            c. indicate the Licensed Material is licensed under this
               Public License, and include the text of, or the URI or
               hyperlink to, this Public License.

       2. You may satisfy the conditions in Section 3(a)(1) in any
          reasonable manner based on the medium, means, and context in
          which You Share the Licensed Material. For example, it may be
          reasonable to satisfy the conditions by providing a URI or
          hyperlink to a resource that includes the required
          information.

       3. If requested by the Licensor, You must remove any of the
          information required by Section 3(a)(1)(A) to the extent
          reasonably practicable.

       4. If You Share Adapted Material You produce, the Adapter's
          License You apply must not prevent recipients of the Adapted
          Material from complying with this Public License.


Section 4 -- Sui Generis Database Rights.

Where the Licensed Rights include Sui Generis Database Rights that
apply to Your use of the Licensed Material:

  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
     to extract, reuse, reproduce, and Share all or a substantial
     portion of the contents of the database;

  b. if You include all or a substantial portion of the database
     contents in a database in which You have Sui Generis Database
     Rights, then the database in which You have Sui Generis Database
     Rights (but not its individual contents) is Adapted Material; and

  c. You must comply with the conditions in Section 3(a) if You Share
     all or a substantial portion of the contents of the database.

For the avoidance of doubt, this Section 4 supplements and does not
replace Your obligations under this Public License where the Licensed
Rights include other Copyright and Similar Rights.


Section 5 -- Disclaimer of Warranties and Limitation of Liability.

  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.

  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.

  c. The disclaimer of warranties and limitation of liability provided
     above shall be interpreted in a manner that, to the extent
     possible, most closely approximates an absolute disclaimer and
     waiver of all liability.


Section 6 -- Term and Termination.

  a. This Public License applies for the term of the Copyright and
     Similar Rights licensed here. However, if You fail to comply with
     this Public License, then Your rights under this Public License
     terminate automatically.

  b. Where Your right to use the Licensed Material has terminated under
     Section 6(a), it reinstates:

       1. automatically as of the date the violation is cured, provided
          it is cured within 30 days of Your discovery of the
          violation; or

       2. upon express reinstatement by the Licensor.

     For the avoidance of doubt, this Section 6(b) does not affect any
     right the Licensor may have to seek remedies for Your violations
     of this Public License.

  c. For the avoidance of doubt, the Licensor may also offer the
     Licensed Material under separate terms or conditions or stop
     distributing the Licensed Material at any time; however, doing so
     will not terminate this Public License.

  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
     License.


Section 7 -- Other Terms and Conditions.

  a. The Licensor shall not be bound by any additional or different
     terms or conditions communicated by You unless expressly agreed.

  b. Any arrangements, understandings, or agreements regarding the
     Licensed Material not stated herein are separate from and
     independent of the terms and conditions of this Public License.


Section 8 -- Interpretation.

  a. For the avoidance of doubt, this Public License does not, and
     shall not be interpreted to, reduce, limit, restrict, or impose
     conditions on any use of the Licensed Material that could lawfully
     be made without permission under this Public License.

  b. To the extent possible, if any provision of this Public License is
     deemed unenforceable, it shall be automatically reformed to the
     minimum extent necessary to make it enforceable. If the provision
     cannot be reformed, it shall be severed from this Public License
     without affecting the enforceability of the remaining terms and
     conditions.

  c. No term or condition of this Public License will be waived and no
     failure to comply consented to unless expressly agreed to by the
     Licensor.

  d. Nothing in this Public License constitutes or may be interpreted
     as a limitation upon, or waiver of, any privileges and immunities
     that apply to the Licensor or You, including from the legal
     processes of any jurisdiction or authority.


=======================================================================

Creative Commons is not a party to its public
licenses. Notwithstanding, Creative Commons may elect to apply one of
its public licenses to material it publishes and in those instances
will be considered the “Licensor.” The text of the Creative Commons
public licenses is dedicated to the public domain under the CC0 Public
Domain Dedication. Except for the limited purpose of indicating that
material is shared under a Creative Commons public license or as
otherwise permitted by the Creative Commons policies published at
creativecommons.org/policies, Creative Commons does not authorize the
use of the trademark "Creative Commons" or any other trademark or logo
of Creative Commons without its prior written consent including,
without limitation, in connection with any unauthorized modifications
to any of its public licenses or any other arrangements,
understandings, or agreements concerning use of licensed material. For
the avoidance of doubt, this paragraph does not form part of the
public licenses.

Creative Commons may be contacted at creativecommons.org.
```

### ISC (electron-to-chromium)

Used by:

[electron-to-chromium ↗](https://github.com/kilian/electron-to-chromium)

```plaintext
Copyright 2018 Kilian Valkhof

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
```

### MIT (node-releases)

Used by:

[node-releases ↗](https://github.com/chicoxyzzy/node-releases)

```plaintext
The MIT License

Copyright (c) 2017 Sergey Rubanov (https://github.com/chicoxyzzy)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (update-browserslist-db)

Used by:

[update-browserslist-db ↗](https://github.com/browserslist/update-db)

```plaintext
The MIT License (MIT)

Copyright 2022 Andrey Sitnik <andrey@sitnik.ru> and other contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (escalade)

Used by:

[escalade ↗](https://github.com/lukeed/escalade)

```plaintext
MIT License

Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (cosmiconfig)

Used by:

[cosmiconfig ↗](https://github.com/cosmiconfig/cosmiconfig)

```plaintext
The MIT License (MIT)

Copyright (c) 2015 David Clark

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

```

### MIT (resolve-from)

Used by:

[resolve-from ↗](https://github.com/sindresorhus/resolve-from)

```plaintext
MIT License

Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (js-yaml)

Used by:

[js-yaml ↗](https://github.com/nodeca/js-yaml)

```plaintext
(The MIT License)

Copyright (C) 2011-2015 by Vitaly Puzrin

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### GPL-2.0 (argparse)

Used by:

[argparse ↗](https://github.com/nodeca/argparse)

```plaintext
A. HISTORY OF THE SOFTWARE
==========================

Python was created in the early 1990s by Guido van Rossum at Stichting
Mathematisch Centrum (CWI, see http://www.cwi.nl) in the Netherlands
as a successor of a language called ABC.  Guido remains Python's
principal author, although it includes many contributions from others.

In 1995, Guido continued his work on Python at the Corporation for
National Research Initiatives (CNRI, see http://www.cnri.reston.va.us)
in Reston, Virginia where he released several versions of the
software.

In May 2000, Guido and the Python core development team moved to
BeOpen.com to form the BeOpen PythonLabs team.  In October of the same
year, the PythonLabs team moved to Digital Creations, which became
Zope Corporation.  In 2001, the Python Software Foundation (PSF, see
https://www.python.org/psf/) was formed, a non-profit organization
created specifically to own Python-related Intellectual Property.
Zope Corporation was a sponsoring member of the PSF.

All Python releases are Open Source (see http://www.opensource.org for
the Open Source Definition).  Historically, most, but not all, Python
releases have also been GPL-compatible; the table below summarizes
the various releases.

    Release         Derived     Year        Owner       GPL-
                    from                                compatible? (1)

    0.9.0 thru 1.2              1991-1995   CWI         yes
    1.3 thru 1.5.2  1.2         1995-1999   CNRI        yes
    1.6             1.5.2       2000        CNRI        no
    2.0             1.6         2000        BeOpen.com  no
    1.6.1           1.6         2001        CNRI        yes (2)
    2.1             2.0+1.6.1   2001        PSF         no
    2.0.1           2.0+1.6.1   2001        PSF         yes
    2.1.1           2.1+2.0.1   2001        PSF         yes
    2.1.2           2.1.1       2002        PSF         yes
    2.1.3           2.1.2       2002        PSF         yes
    2.2 and above   2.1.1       2001-now    PSF         yes

Footnotes:

(1) GPL-compatible doesn't mean that we're distributing Python under
    the GPL.  All Python licenses, unlike the GPL, let you distribute
    a modified version without making your changes open source.  The
    GPL-compatible licenses make it possible to combine Python with
    other software that is released under the GPL; the others don't.

(2) According to Richard Stallman, 1.6.1 is not GPL-compatible,
    because its license has a choice of law clause.  According to
    CNRI, however, Stallman's lawyer has told CNRI's lawyer that 1.6.1
    is "not incompatible" with the GPL.

Thanks to the many outside volunteers who have worked under Guido's
direction to make these releases possible.


B. TERMS AND CONDITIONS FOR ACCESSING OR OTHERWISE USING PYTHON
===============================================================

PYTHON SOFTWARE FOUNDATION LICENSE VERSION 2
--------------------------------------------

1. This LICENSE AGREEMENT is between the Python Software Foundation
("PSF"), and the Individual or Organization ("Licensee") accessing and
otherwise using this software ("Python") in source or binary form and
its associated documentation.

2. Subject to the terms and conditions of this License Agreement, PSF hereby
grants Licensee a nonexclusive, royalty-free, world-wide license to reproduce,
analyze, test, perform and/or display publicly, prepare derivative works,
distribute, and otherwise use Python alone or in any derivative version,
provided, however, that PSF's License Agreement and PSF's notice of copyright,
i.e., "Copyright (c) 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010,
2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020 Python Software Foundation;
All Rights Reserved" are retained in Python alone or in any derivative version
prepared by Licensee.

3. In the event Licensee prepares a derivative work that is based on
or incorporates Python or any part thereof, and wants to make
the derivative work available to others as provided herein, then
Licensee hereby agrees to include in any such work a brief summary of
the changes made to Python.

4. PSF is making Python available to Licensee on an "AS IS"
basis.  PSF MAKES NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR
IMPLIED.  BY WAY OF EXAMPLE, BUT NOT LIMITATION, PSF MAKES NO AND
DISCLAIMS ANY REPRESENTATION OR WARRANTY OF MERCHANTABILITY OR FITNESS
FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF PYTHON WILL NOT
INFRINGE ANY THIRD PARTY RIGHTS.

5. PSF SHALL NOT BE LIABLE TO LICENSEE OR ANY OTHER USERS OF PYTHON
FOR ANY INCIDENTAL, SPECIAL, OR CONSEQUENTIAL DAMAGES OR LOSS AS
A RESULT OF MODIFYING, DISTRIBUTING, OR OTHERWISE USING PYTHON,
OR ANY DERIVATIVE THEREOF, EVEN IF ADVISED OF THE POSSIBILITY THEREOF.

6. This License Agreement will automatically terminate upon a material
breach of its terms and conditions.

7. Nothing in this License Agreement shall be deemed to create any
relationship of agency, partnership, or joint venture between PSF and
Licensee.  This License Agreement does not grant permission to use PSF
trademarks or trade name in a trademark sense to endorse or promote
products or services of Licensee, or any third party.

8. By copying, installing or otherwise using Python, Licensee
agrees to be bound by the terms and conditions of this License
Agreement.


BEOPEN.COM LICENSE AGREEMENT FOR PYTHON 2.0
-------------------------------------------

BEOPEN PYTHON OPEN SOURCE LICENSE AGREEMENT VERSION 1

1. This LICENSE AGREEMENT is between BeOpen.com ("BeOpen"), having an
office at 160 Saratoga Avenue, Santa Clara, CA 95051, and the
Individual or Organization ("Licensee") accessing and otherwise using
this software in source or binary form and its associated
documentation ("the Software").

2. Subject to the terms and conditions of this BeOpen Python License
Agreement, BeOpen hereby grants Licensee a non-exclusive,
royalty-free, world-wide license to reproduce, analyze, test, perform
and/or display publicly, prepare derivative works, distribute, and
otherwise use the Software alone or in any derivative version,
provided, however, that the BeOpen Python License is retained in the
Software, alone or in any derivative version prepared by Licensee.

3. BeOpen is making the Software available to Licensee on an "AS IS"
basis.  BEOPEN MAKES NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR
IMPLIED.  BY WAY OF EXAMPLE, BUT NOT LIMITATION, BEOPEN MAKES NO AND
DISCLAIMS ANY REPRESENTATION OR WARRANTY OF MERCHANTABILITY OR FITNESS
FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF THE SOFTWARE WILL NOT
INFRINGE ANY THIRD PARTY RIGHTS.

4. BEOPEN SHALL NOT BE LIABLE TO LICENSEE OR ANY OTHER USERS OF THE
SOFTWARE FOR ANY INCIDENTAL, SPECIAL, OR CONSEQUENTIAL DAMAGES OR LOSS
AS A RESULT OF USING, MODIFYING OR DISTRIBUTING THE SOFTWARE, OR ANY
DERIVATIVE THEREOF, EVEN IF ADVISED OF THE POSSIBILITY THEREOF.

5. This License Agreement will automatically terminate upon a material
breach of its terms and conditions.

6. This License Agreement shall be governed by and interpreted in all
respects by the law of the State of California, excluding conflict of
law provisions.  Nothing in this License Agreement shall be deemed to
create any relationship of agency, partnership, or joint venture
between BeOpen and Licensee.  This License Agreement does not grant
permission to use BeOpen trademarks or trade names in a trademark
sense to endorse or promote products or services of Licensee, or any
third party.  As an exception, the "BeOpen Python" logos available at
http://www.pythonlabs.com/logos.html may be used according to the
permissions granted on that web page.

7. By copying, installing or otherwise using the software, Licensee
agrees to be bound by the terms and conditions of this License
Agreement.


CNRI LICENSE AGREEMENT FOR PYTHON 1.6.1
---------------------------------------

1. This LICENSE AGREEMENT is between the Corporation for National
Research Initiatives, having an office at 1895 Preston White Drive,
Reston, VA 20191 ("CNRI"), and the Individual or Organization
("Licensee") accessing and otherwise using Python 1.6.1 software in
source or binary form and its associated documentation.

2. Subject to the terms and conditions of this License Agreement, CNRI
hereby grants Licensee a nonexclusive, royalty-free, world-wide
license to reproduce, analyze, test, perform and/or display publicly,
prepare derivative works, distribute, and otherwise use Python 1.6.1
alone or in any derivative version, provided, however, that CNRI's
License Agreement and CNRI's notice of copyright, i.e., "Copyright (c)
1995-2001 Corporation for National Research Initiatives; All Rights
Reserved" are retained in Python 1.6.1 alone or in any derivative
version prepared by Licensee.  Alternately, in lieu of CNRI's License
Agreement, Licensee may substitute the following text (omitting the
quotes): "Python 1.6.1 is made available subject to the terms and
conditions in CNRI's License Agreement.  This Agreement together with
Python 1.6.1 may be located on the Internet using the following
unique, persistent identifier (known as a handle): 1895.22/1013.  This
Agreement may also be obtained from a proxy server on the Internet
using the following URL: http://hdl.handle.net/1895.22/1013".

3. In the event Licensee prepares a derivative work that is based on
or incorporates Python 1.6.1 or any part thereof, and wants to make
the derivative work available to others as provided herein, then
Licensee hereby agrees to include in any such work a brief summary of
the changes made to Python 1.6.1.

4. CNRI is making Python 1.6.1 available to Licensee on an "AS IS"
basis.  CNRI MAKES NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR
IMPLIED.  BY WAY OF EXAMPLE, BUT NOT LIMITATION, CNRI MAKES NO AND
DISCLAIMS ANY REPRESENTATION OR WARRANTY OF MERCHANTABILITY OR FITNESS
FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF PYTHON 1.6.1 WILL NOT
INFRINGE ANY THIRD PARTY RIGHTS.

5. CNRI SHALL NOT BE LIABLE TO LICENSEE OR ANY OTHER USERS OF PYTHON
1.6.1 FOR ANY INCIDENTAL, SPECIAL, OR CONSEQUENTIAL DAMAGES OR LOSS AS
A RESULT OF MODIFYING, DISTRIBUTING, OR OTHERWISE USING PYTHON 1.6.1,
OR ANY DERIVATIVE THEREOF, EVEN IF ADVISED OF THE POSSIBILITY THEREOF.

6. This License Agreement will automatically terminate upon a material
breach of its terms and conditions.

7. This License Agreement shall be governed by the federal
intellectual property law of the United States, including without
limitation the federal copyright law, and, to the extent such
U.S. federal law does not apply, by the law of the Commonwealth of
Virginia, excluding Virginia's conflict of law provisions.
Notwithstanding the foregoing, with regard to derivative works based
on Python 1.6.1 that incorporate non-separable material that was
previously distributed under the GNU General Public License (GPL), the
law of the Commonwealth of Virginia shall govern this License
Agreement only as to issues arising under or with respect to
Paragraphs 4, 5, and 7 of this License Agreement.  Nothing in this
License Agreement shall be deemed to create any relationship of
agency, partnership, or joint venture between CNRI and Licensee.  This
License Agreement does not grant permission to use CNRI trademarks or
trade name in a trademark sense to endorse or promote products or
services of Licensee, or any third party.

8. By clicking on the "ACCEPT" button where indicated, or by copying,
installing or otherwise using Python 1.6.1, Licensee agrees to be
bound by the terms and conditions of this License Agreement.

        ACCEPT


CWI LICENSE AGREEMENT FOR PYTHON 0.9.0 THROUGH 1.2
--------------------------------------------------

Copyright (c) 1991 - 1995, Stichting Mathematisch Centrum Amsterdam,
The Netherlands.  All rights reserved.

Permission to use, copy, modify, and distribute this software and its
documentation for any purpose and without fee is hereby granted,
provided that the above copyright notice appear in all copies and that
both that copyright notice and this permission notice appear in
supporting documentation, and that the name of Stichting Mathematisch
Centrum or CWI not be used in advertising or publicity pertaining to
distribution of the software without specific, written prior
permission.

STICHTING MATHEMATISCH CENTRUM DISCLAIMS ALL WARRANTIES WITH REGARD TO
THIS SOFTWARE, INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS, IN NO EVENT SHALL STICHTING MATHEMATISCH CENTRUM BE LIABLE
FOR ANY SPECIAL, INDIRECT OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT
OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
```

### MIT (svg-parser)

Used by:

[svg-parser ↗](https://github.com/Rich-Harris/svg-parser)

```plaintext
License file is not available for svg-parser.

Please refer to the package repository for complete license information.
```

### MIT (deepmerge)

Used by:

[deepmerge ↗](https://github.com/TehShrike/deepmerge)

```plaintext
The MIT License (MIT)

Copyright (c) 2012 James Halliday, Josh Duff, and other contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (svgo)

Used by:

[svgo ↗](https://github.com/svg/svgo)

```plaintext
MIT License

Copyright (c) Kir Belevich

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (commander)

Used by:

[commander ↗](https://github.com/tj/commander.js)

```plaintext
(The MIT License)

Copyright (c) 2011 TJ Holowaychuk <tj@vision-media.ca>

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### ISC (boolbase)

Used by:

[boolbase ↗](https://github.com/fb55/boolbase)

```plaintext
Copyright (c) 2014-2015, Felix Boehm <me@feedic.com>

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
```

### MIT (dom-serializer)

Used by:

[dom-serializer ↗](https://github.com/cheeriojs/dom-serializer)

```plaintext
License

(The MIT License)

Copyright (c) 2014 The cheeriojs contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (css-tree)

Used by:

[css-tree ↗](https://github.com/csstree/csstree)

```plaintext
Copyright (C) 2016-2024 by Roman Dvornov

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### CC0 1.0 Universal (mdn-data)

Used by:

[mdn-data ↗](https://github.com/mdn/data)

```plaintext
CC0 1.0 Universal

Statement of Purpose

The laws of most jurisdictions throughout the world automatically confer
exclusive Copyright and Related Rights (defined below) upon the creator and
subsequent owner(s) (each and all, an "owner") of an original work of
authorship and/or a database (each, a "Work").

Certain owners wish to permanently relinquish those rights to a Work for the
purpose of contributing to a commons of creative, cultural and scientific
works ("Commons") that the public can reliably and without fear of later
claims of infringement build upon, modify, incorporate in other works, reuse
and redistribute as freely as possible in any form whatsoever and for any
purposes, including without limitation commercial purposes. These owners may
contribute to the Commons to promote the ideal of a free culture and the
further production of creative, cultural and scientific works, or to gain
reputation or greater distribution for their Work in part through the use and
efforts of others.

For these and/or other purposes and motivations, and without any expectation
of additional consideration or compensation, the person associating CC0 with a
Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
and publicly distribute the Work under its terms, with knowledge of his or her
Copyright and Related Rights in the Work and the meaning and intended legal
effect of CC0 on those rights.

1. Copyright and Related Rights. A Work made available under CC0 may be
protected by copyright and related or neighboring rights ("Copyright and
Related Rights"). Copyright and Related Rights include, but are not limited
to, the following:

  i. the right to reproduce, adapt, distribute, perform, display, communicate,
  and translate a Work;

  ii. moral rights retained by the original author(s) and/or performer(s);

  iii. publicity and privacy rights pertaining to a person's image or likeness
  depicted in a Work;

  iv. rights protecting against unfair competition in regards to a Work,
  subject to the limitations in paragraph 4(a), below;

  v. rights protecting the extraction, dissemination, use and reuse of data in
  a Work;

  vi. database rights (such as those arising under Directive 96/9/EC of the
  European Parliament and of the Council of 11 March 1996 on the legal
  protection of databases, and under any national implementation thereof,
  including any amended or successor version of such directive); and

  vii. other similar, equivalent or corresponding rights throughout the world
  based on applicable law or treaty, and any national implementations thereof.

2. Waiver. To the greatest extent permitted by, but not in contravention of,
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
and Related Rights and associated claims and causes of action, whether now
known or unknown (including existing as well as future claims and causes of
action), in the Work (i) in all territories worldwide, (ii) for the maximum
duration provided by applicable law or treaty (including future time
extensions), (iii) in any current or future medium and for any number of
copies, and (iv) for any purpose whatsoever, including without limitation
commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
the Waiver for the benefit of each member of the public at large and to the
detriment of Affirmer's heirs and successors, fully intending that such Waiver
shall not be subject to revocation, rescission, cancellation, termination, or
any other legal or equitable action to disrupt the quiet enjoyment of the Work
by the public as contemplated by Affirmer's express Statement of Purpose.

3. Public License Fallback. Should any part of the Waiver for any reason be
judged legally invalid or ineffective under applicable law, then the Waiver
shall be preserved to the maximum extent permitted taking into account
Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
is so judged Affirmer hereby grants to each affected person a royalty-free,
non transferable, non sublicensable, non exclusive, irrevocable and
unconditional license to exercise Affirmer's Copyright and Related Rights in
the Work (i) in all territories worldwide, (ii) for the maximum duration
provided by applicable law or treaty (including future time extensions), (iii)
in any current or future medium and for any number of copies, and (iv) for any
purpose whatsoever, including without limitation commercial, advertising or
promotional purposes (the "License"). The License shall be deemed effective as
of the date CC0 was applied by Affirmer to the Work. Should any part of the
License for any reason be judged legally invalid or ineffective under
applicable law, such partial invalidity or ineffectiveness shall not
invalidate the remainder of the License, and in such case Affirmer hereby
affirms that he or she will not (i) exercise any of his or her remaining
Copyright and Related Rights in the Work or (ii) assert any associated claims
and causes of action with respect to the Work, in either case contrary to
Affirmer's express Statement of Purpose.

4. Limitations and Disclaimers.

  a. No trademark or patent rights held by Affirmer are waived, abandoned,
  surrendered, licensed or otherwise affected by this document.

  b. Affirmer offers the Work as-is and makes no representations or warranties
  of any kind concerning the Work, express, implied, statutory or otherwise,
  including without limitation warranties of title, merchantability, fitness
  for a particular purpose, non infringement, or the absence of latent or
  other defects, accuracy, or the present or absence of errors, whether or not
  discoverable, all to the greatest extent permissible under applicable law.

  c. Affirmer disclaims responsibility for clearing rights of other persons
  that may apply to the Work or any use thereof, including without limitation
  any person's Copyright and Related Rights in the Work. Further, Affirmer
  disclaims responsibility for obtaining any necessary consents, permissions
  or other rights required for any use of the Work.

  d. Affirmer understands and acknowledges that Creative Commons is not a
  party to this document and has no duty or obligation with respect to this
  CC0 or use of the Work.

For more information, please see
<http://creativecommons.org/publicdomain/zero/1.0/>
```

### BSD-3-Clause (source-map-js)

Used by:

[source-map-js ↗](https://github.com/7rulnik/source-map-js)

```plaintext

Copyright (c) 2009-2011, Mozilla Foundation and contributors
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this
  list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice,
  this list of conditions and the following disclaimer in the documentation
  and/or other materials provided with the distribution.

* Neither the names of the Mozilla Foundation nor the names of project
  contributors may be used to endorse or promote products derived from this
  software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
```

### MIT (csso)

Used by:

[csso ↗](https://github.com/css/csso)

```plaintext
Copyright (C) 2015-2021 by Roman Dvornov
Copyright (C) 2011-2015 by Sergey Kryzhanovsky

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```

### MIT (sax)

Used by:

[sax ↗](https://github.com/isaacs/sax-js)

```plaintext
The ISC License

Copyright (c) 2010-2024 Isaac Z. Schlueter and Contributors

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

====

`String.fromCodePoint` by Mathias Bynens used according to terms of MIT
License, as follows:

Copyright (c) 2010-2024 Mathias Bynens <https://mathiasbynens.be/>

    Permission is hereby granted, free of charge, to any person obtaining
    a copy of this software and associated documentation files (the
    "Software"), to deal in the Software without restriction, including
    without limitation the rights to use, copy, modify, merge, publish,
    distribute, sublicense, and/or sell copies of the Software, and to
    permit persons to whom the Software is furnished to do so, subject to
    the following conditions:

    The above copyright notice and this permission notice shall be
    included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
    LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
    WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

### MIT (path-dirname)

Used by:

[path-dirname ↗](https://github.com/es128/path-dirname)

```plaintext

The MIT License (MIT)

Copyright (c) Elan Shanker and Node.js contributors. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
```

### MIT (react-native-switch)

Used by:

[react-native-switch ↗](https://github.com/shahen94/react-native-switch)

```plaintext
MIT License

Copyright (c) 2016 Shahen Hovhannisyan

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (abortcontroller-polyfill)

Used by:

[abortcontroller-polyfill ↗](https://github.com/mo/abortcontroller-polyfill)

```plaintext
MIT License

Copyright (c) 2017 molsson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### MIT (initials)

Used by:

[initials ↗](https://github.com/gr2m/initials)

```plaintext
MIT License

Copyright (c) 2019 Gregor Martynus

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/legal/3rdparty/#page","headline":"Third party licenses · Cloudflare Realtime docs","description":"Third-party license information for RealtimeKit web, mobile, and recording SDKs.","url":"https://developers.cloudflare.com/realtime/realtimekit/legal/3rdparty/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: RealtimeKit pricing for audio, video, recording, and transcription features.
title: Pricing
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Pricing

Last updated Jul 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/pricing/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

Note

To estimate your RealtimeKit costs, refer to the [RealtimeKit pricing calculator ↗](https://realtime.cloudflare.com/#pricing-calculator).

| 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/).

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/pricing/#page","headline":"Pricing · Cloudflare Realtime docs","description":"RealtimeKit pricing for audio, video, recording, and transcription features.","url":"https://developers.cloudflare.com/realtime/realtimekit/pricing/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Set up RealtimeKit in your application with API tokens, SDK installation, and your first meeting.
title: Quickstart
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Quickstart

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/quickstart/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

### 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:

```bash
npm i @cloudflare/realtimekit-react @cloudflare/realtimekit-react-ui
```

_Optional:_ You can also build on top of our ready-made template:

```bash
git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/react-examples/examples/default-meeting-ui
```

Please install the following dependencies into your project repository:

```bash
npm i @cloudflare/realtimekit-web @cloudflare/realtimekit-ui
```

_Optional:_ You can also build on top of our ready-made template:

```bash
git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/html-examples/examples/default-meeting-ui
```

Please install the following dependencies into your project repository:

```bash
npm i @cloudflare/realtimekit-angular @cloudflare/realtimekit-angular-ui
```

_Optional:_ You can also build on top of our ready-made template:

```bash
git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/angular-examples/examples/default-meeting-ui
```

Add the following dependency to your `build.gradle` file:

```java
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.

```xml
<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:

```bash
flutter pub add realtimekit_ui
```

Then import the package into your project:

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';
```

Set `compileSdkVersion 36` and `minSdkVersion 24` in your `build.gradle` file at `<project root>/android/app/build.gradle`:

```java
defaultConfig {
  ...
  compileSdkVersion 36
  minSdkVersion 24
  ...
}
```

Change the Kotlin version to `1.9.0`:

```java
ext.kotlin_version = '1.9.0'
```

Set your platform to iOS 13.0 or above in your `Podfile`:

```txt
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.

```xml
<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`:

```xml
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>UIFileSharingEnabled</key>
<true/>
```

**Minimum requirements:** React Native 0.84 or above, React 19 or above.

Install the dependencies:

```bash
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@^15.13.0 react-native-safe-area-context@^5.0.0
```

**Minimum Expo version:** 56 or above.

Install the dependencies:

```bash
npx expo install @cloudflare/realtimekit-react-native-ui @cloudflare/realtimekit-react-native @cloudflare/react-native-webrtc @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview react-native-svg@^15.13.0 react-native-safe-area-context@^5.0.0
```

Install Expo config plugins:

```bash
npx expo install @expo/config-plugins
```

Add the plugins to your `app.json`:

```json
{
	"expo": {
		"plugins": [
			"@cloudflare/realtimekit-react-native",
			"@cloudflare/react-native-webrtc"
		]
	}
}
```

Run `prebuild` to set up native modules:

```bash
npx expo prebuild
```

The following instructions are for release builds. Debug builds should work without additional steps.

Edit your `android/gradle.properties` and add the following lines:

```txt
android.useFullClasspathForDexingTransform=true
```

Add a required `blob_provider_authority` string resource in the `strings.xml` file:

```xml
<resources>
  ...
  <string name="blob_provider_authority">YOUR_APP_RESOURCE_NAME</string>
  ...
</resources>
```

Create or append to the file `android/app/proguard-rules.pro`:

```txt
-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:

```java
buildTypes {
  release {
    ...
    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  }
}
```

#### Background audio and video (Android)

The SDK includes an Android foreground service that keeps audio and video running when the app moves to the background. The service starts automatically when a participant joins a meeting and stops when they leave.

By default the service is enabled with generic notification text. To customize the notification or disable the service, pass `keepAliveService` to the `useRealtimeKitClient` hook before calling `initMeeting`:

```tsx
const [meeting, initMeeting] = useRealtimeKitClient({
  keepAliveService: {
    enabled: true,                        // set to false to disable entirely
    title: "Team call",                   // notification title
    text: "Tap to return to your meeting", // notification body
  },
});
```

On Android 13 and above, the SDK automatically requests the `POST_NOTIFICATIONS` permission so the notification appears in the shade. No additional setup is required.

**Minimum supported iOS version: 15.1.**

Open your `Podfile` and set the platform to iOS 15.1:

```txt
platform :ios, '15.1'
```

Add the following permission entries to your `Info.plist` file:

```xml
<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/>
```

#### Screen sharing (iOS)

iOS screen sharing requires a Broadcast Upload Extension and additional native setup. Refer to the [Screen Share Setup (iOS)](https://developers.cloudflare.com/realtime/realtimekit/core/local-participant/#screen-share-setup-ios) guide for full instructions.

Once native setup is complete, pass `iOSScreenshareEnabled={true}` to `RtkMeeting` to enable the screen share button in the UI:

```tsx
<RtkMeeting meeting={meeting} iOSScreenshareEnabled={true} />
```

### 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:

```bash
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.

```bash
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.

```bash
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:

```ts

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.

```bash
npm run dev
```

_Optional:_ If you are using our ready-made template, run the following command to start the application:

```bash
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:

```bash
http://localhost:5173?authToken=<auth_token>
```

Inside your html application, add the following code:

```html
<!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.

```bash
npm run dev
```

_Optional:_ If you are using our ready-made template, run the following command to start the application:

```bash
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:

```bash
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.

```ts
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.

```ts
{
	"compilerOptions": {
		"allowSyntheticDefaultImports": true
	}
}
```

Load the RtkMeeting component to your template file (component.html).

```html
<rtk-meeting #myid></rtk-meeting>
```

Initialise the Meeting

```ts
	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.

```bash
npm run dev
```

_Optional:_ If you are using our ready-made template, run the following command to start the application:

```bash
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:

```bash
http://localhost:5173?authToken=<auth_token>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/quickstart/#page","headline":"Quickstart · Cloudflare Realtime docs","description":"Set up RealtimeKit in your application with API tokens, SDK installation, and your first meeting.","url":"https://developers.cloudflare.com/realtime/realtimekit/quickstart/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Record RealtimeKit meetings as composite recordings or separate participant audio tracks.
title: Recording
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Recording

Last updated May 28, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Learn how RealtimeKit records meetings as a single composite file or as separate participant audio tracks.

Visit the following pages to learn more about recording meetings:

* [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/)
* [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/)
* [Track recording](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/track-recording/)
* [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/)

RealtimeKit can record 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. RealtimeKit can also record separate participant audio tracks using [track recording](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/track-recording/).

## How composite recording works

Composite 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.

For separate participant audio files, refer to [Track recording](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/track-recording/).

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/#page","headline":"Recording · Cloudflare Realtime docs","description":"Record RealtimeKit meetings as composite recordings or separate participant audio tracks.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-05-28","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Add a custom image watermark to RealtimeKit recordings with configurable position and size.
title: Add Watermark
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Add Watermark

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/add-watermark/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.                                                                                                                       |

```json
{
  "video_config": {
    "watermark": {
      "url": "https://test.io/images/client-logos-6.webp",
      "position": "left top",
      "size": {
        "height": 20,
        "width": 100
      }
    }
  }
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/add-watermark/#page","headline":"Add Watermark · Cloudflare Realtime docs","description":"Add a custom image watermark to RealtimeKit recordings with configurable position and size.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/add-watermark/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Configure audio codec format and channel settings for RealtimeKit recordings.
title: Set Audio Configurations
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Set Audio Configurations

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-audio-codec/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```json
{
  "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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-audio-codec/#page","headline":"Set Audio Configurations · Cloudflare Realtime docs","description":"Configure audio codec format and channel settings for RealtimeKit recordings.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-audio-codec/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Configure video codecs, resolution, and container formats for RealtimeKit recordings.
title: Configure Video Settings
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Configure Video Settings

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-codecs/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```json
{
  "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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-codecs/#page","headline":"Configure Video Settings · Cloudflare Realtime docs","description":"Configure video codecs, resolution, and container formats for RealtimeKit recordings.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-codecs/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Disable automatic recording uploads to the RealtimeKit R2 bucket using the realtimekit_bucket_config parameter.
title: Disable Upload to RealtimeKit Bucket
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Disable Upload to RealtimeKit Bucket

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-realtimekit-bucket-config/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```json
{
	"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/).

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-realtimekit-bucket-config/#page","headline":"Disable Upload to RealtimeKit Bucket · Cloudflare Realtime docs","description":"Disable automatic recording uploads to the RealtimeKit R2 bucket using the realtimekit\\_bucket\\_config parameter.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/configure-realtimekit-bucket-config/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Learn how to create a recording app using RealtimeKit's SDKs. Follow our guide for effective app creation and integration.
title: Create Custom Recording App Using Recording SDKs
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Create Custom Recording App Using Recording SDKs

Last updated Aug 7, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/create-record-app-using-sdks/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

## How the recorder works

When you call [Start Recording](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/), RealtimeKit launches a Cloudflare container, opens a Chrome browser inside it, and loads the recording app URL. If you do not provide a custom URL in the [url parameter](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/), RealtimeKit's internal recording app is used.

### URL parameters

Before loading your custom recording app in the Chrome browser, RealtimeKit appends the `authToken` and `config` query parameters to the URL. For example, if you provide this URL in the [Start Recording](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Frecordings/) API:

```txt
https://example.com/my-custom-recorder
```

RealtimeKit loads the app with the following parameters:

```txt
https://example.com/my-custom-recorder?authToken=AUTH_TOKEN_CREATED_BY_REALTIMEKIT&config=CONFIG_CREATED_BY_REALTIMEKIT
```

The placeholder values represent parameters supplied by RealtimeKit. Do not add `authToken` or `config` yourself to the URL submitted to the Start Recording API. Your app must read both parameters from the URL.

### Auth token

RealtimeKit generates the `authToken` automatically for the meeting whose recording you start. It generates this token with the `recorder_preset_v2` preset. If you have not created a `recorder_preset_v2` preset, RealtimeKit uses a global preset with the same name that is managed by RealtimeKit and is not visible in your account.

Your custom recording app **must** accept this `authToken` and use it to initialize the RealtimeKit SDK to get `meeting` object.

### Config parameter

Any configuration that you provide in the Start Recording API, such as watermark settings, is passed to the recording app through the `config` query parameter. The default recording app reads and applies this configuration automatically.

If you use a custom recording app, you are responsible for reading and applying `config`. Whatever your app produces in the browser is recorded as-is. RealtimeKit does not apply any additional layout, watermark, or other processing to the output of a custom recording app.

### Recording preset flags

The `hidden_participant` flag controls only the recorder's visibility. When enabled, it hides the recorder from other participants in the meeting.

The `is_recorder` flag identifies the participant as a recorder and ensures that recording works correctly. If you create a custom `recorder_preset_v2` preset to customize colors or the look and feel of the recording, you must keep `is_recorder` enabled. Removing `is_recorder` can cause the recording to fail. Removing `hidden_participant` can cause the recorder to be visible to other participants.

### Local testing

Local testing lets you view the recording app UI. Opening the recording app URL directly on your local machine does not start a recording.

For local testing only, create any preset with `hidden_participant: true`, then pass an auth token created with that preset in the `authToken` query parameter when you open the local recording app URL. This lets you see the look and feel of the recorder UI. Do not include a local testing token as the `authToken` in the URL submitted to the Start Recording API. In an actual recording, RealtimeKit generates and passes the recorder token automatically.

To speed up development, use a [Cloudflare Tunnel](https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/do-more-with-tunnels/trycloudflare/) to expose your local recording app. For example, if your app is running on port `1111`, start a [Quick Tunnel](https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/do-more-with-tunnels/trycloudflare/) with:

```sh
cloudflared tunnel --url http://localhost:1111
```

Replace `1111` with the port used by your local app. `cloudflared` prints a public `trycloudflare.com` URL. You can use this URL as the custom recording app URL when starting a recording, so the Cloudflare container can load your local app.

You might see a WebSocket error in the browser console while testing locally because your browser cannot connect to `localhost:8080`. You can ignore this error during local testing. The recorder runs with this port inside the hosting Cloudflare container, and the WebSocket connection is how the recording app tells the container to record the rendered webpage.

### Examples

Refer to the [recording SDK app examples ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/recording-sdk-app-examples) for sample implementations, including a [recording with watermark example ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/recording-sdk-app-examples/react-examples/recording-with-watermark).

## Recording SDK reference

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 [@cloudflare/realtimekit-recording-sdk package ↗](https://www.npmjs.com/package/@cloudflare/realtimekit-recording-sdk) provides the `RealtimeKitRecording` class for managing recording functionality.

### Constructor

`constructor(options)`

Creates an instance of the `RealtimeKitRecording` class.

#### Constructor parameters

`options (object)`: The options object. All constructor options are optional. If you omit an option, RealtimeKit uses its default value.

| **options (object)**          | **Description**                                                                                                                                                                                                                                                                                                                      |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| options.waitTimeMs (number)   | The time (in milliseconds) to wait after all peers have left before stopping the recording. This option applies when autoStop is set to true.                                                                                                                                                                                        |
| options.autoStart (boolean)   | Defaults to true, so recording starts automatically when init() is called. Set it to false only when you want to start recording manually with startRecording(). When set to false, you must call startRecording() within 2 minutes of the WebSocket connection being established, or the recording process will encounter an error. |
| options.autoStop (boolean)    | Defaults to true, so recording stops automatically after all peers have left. Set it to false only when you want to stop recording manually with stopRecording().                                                                                                                                                                    |
| 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

```js
init(client: RealtimeKitClient)
```

Initiates the SDK by providing a `RealtimeKitClient` object. Call this after creating the meeting object and before calling `meeting.joinRoom()`.

```js
startRecording();
```

In most cases, leave `autoStart` set to `true` (the default) so the recording starts automatically. To start the recording manually, set `autoStart` to `false` in the constructor options before calling this method.

```js
stopRecording();
```

You usually do not need to call this method because `autoStop` defaults to `true`. To stop the recording manually, set `autoStop` to `false` in the constructor options before calling this method.

```js
cleanup();
```

Performs cleanup tasks after leaving the meeting, such as clearing added listeners and closing WebSocket connections.

## Create a custom recording app

Perform the following steps to create the recording app for your RealtimeKit meetings.

### Step 1: Install the SDK

```js
npm i @cloudflare/realtimekit-recording-sdk
```

### Step 2: Import the `RealtimeKitRecording` object

```js
import { RealtimeKitRecording } from "@cloudflare/realtimekit-recording-sdk";
```

### Step 3: Create the `RealtimeKitRecording` object

```js
const recordingSdk = new RealtimeKitRecording(options);
```

### Step 4: Initialize the recording SDK

Call `init` after creating the meeting object and before `joinRoom` is called.

```js
// Call this after you have initialized the RealtimeKit SDK and have the meeting object
await recordingSdk.init(meeting);
```

### (Optional) Step 5: Manually start the recording

To manually start the recording, set `autoStart` to `false` in the `RealtimeKitRecording` constructor options. Then call `startRecording()` after you have loaded your UI content and are ready to begin recording.

```js
await recordingSdk.startRecording();
```

### (Optional) Step 6: Manually stop the recording

To manually stop the recording, set `autoStop` to `false` in the `RealtimeKitRecording` constructor options. Then call `stopRecording()` when you are ready to stop recording.

```js
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. Do not append an `authToken` to this URL. RealtimeKit adds the generated `authToken` and `config` parameters when it loads the app.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/create-record-app-using-sdks/#page","headline":"Create Custom Recording App Using Recording SDKs · Cloudflare Realtime docs","description":"Learn how to create a recording app using RealtimeKit's SDKs. Follow our guide for effective app creation and integration.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/create-record-app-using-sdks/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-08-07","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Explore how to set up custom cloud storage for RealtimeKit's recording. Follow our guide for effective configuration and integration.
title: Upload Recording to Your Cloud
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Upload Recording to Your Cloud

Last updated May 11, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/custom-cloud-storage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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/cdn-cgi/image/onerror=redirect,width=768,height=581,format=webp/_astro/setup-recording-storage.BToYYU30.png)   

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.

```bash
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": "/",
    "account_id": "your-account-id"
  }
}'
```

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/).

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/custom-cloud-storage/#page","headline":"Upload Recording to Your Cloud · Cloudflare Realtime docs","description":"Explore how to set up custom cloud storage for RealtimeKit's recording. Follow our guide for effective configuration and integration.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/custom-cloud-storage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-05-11","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Learn how to enable interactive recording with RealtimeKit's capabilities. Follow our guide for effective configuration and management.
title: Interactive Recordings with Timed Metadata
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Interactive Recordings with Timed Metadata

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/interactive-recording/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```ts
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.

```ts
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/cdn-cgi/image/onerror=redirect,width=744,height=552,format=webp/_astro/interactive-recording-tar-format.JbEcOmI6.png) 

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/).

```js
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);
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/interactive-recording/#page","headline":"Interactive Recordings with Timed Metadata · Cloudflare Realtime docs","description":"Learn how to enable interactive recording with RealtimeKit's capabilities. Follow our guide for effective configuration and management.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/interactive-recording/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Learn how to manage recording configuration hierarchy with RealtimeKit's capabilities. Follow our guide for effective hierarchy management.
title: Manage Recording Config Precedence Order
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Manage Recording Config Precedence Order

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/manage-recording-config-hierarchy/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/manage-recording-config-hierarchy/#page","headline":"Manage Recording Config Precedence Order · Cloudflare Realtime docs","description":"Learn how to manage recording configuration hierarchy with RealtimeKit's capabilities. Follow our guide for effective hierarchy management.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/manage-recording-config-hierarchy/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Track RealtimeKit recording states from invocation through upload completion.
title: Monitor Recording Status
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Monitor Recording Status

Last updated Jun 8, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/monitor-status/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Recording states

The recording of a meeting can have the following states:

| Name      | Description                                                                                                                                                                                                                                                |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| INVOKED   | RealtimeKit 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 a `recording.statusUpdate` webhook when the recording transitions between states during its lifecycle. Add `recording.statusUpdate` to your webhook's `events` array to receive these notifications.

```bash
curl --request POST "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks" \
  --header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{
    "name": "Recording status webhook",
    "url": "https://example.com/webhook",
    "events": ["recording.statusUpdate"],
    "enabled": true
  }'
```

The webhook payload includes the current recording status, recording metadata, and associated meeting details. When the status is `UPLOADED`, the payload can include `downloadUrl`, `audioDownloadUrl`, and `downloadUrlExpiry` fields for accessing the uploaded files.

For setup, signature verification, retry behavior, and a full payload example, refer to [RealtimeKit webhooks](https://developers.cloudflare.com/realtime/realtimekit/webhooks/#recordingstatusupdate).

### 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/monitor-status/#page","headline":"Monitor Recording Status · Cloudflare Realtime docs","description":"Track RealtimeKit recording states from invocation through upload completion.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/monitor-status/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-08","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Start composite recording of a RealtimeKit meeting using the API, SDK, or auto-record flag.
title: Start Recording
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Start Recording

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/start-recording/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```bash
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

```json
{
	"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

```bash
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

```json
{
	"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"
		}
	}
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/start-recording/#page","headline":"Start Recording · Cloudflare Realtime docs","description":"Start composite recording of a RealtimeKit meeting using the API, SDK, or auto-record flag.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/start-recording/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Stop a RealtimeKit recording automatically or manually using the Stop Recording API.
title: Stop Recording
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Stop Recording

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/stop-recording/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/stop-recording/#page","headline":"Stop Recording · Cloudflare Realtime docs","description":"Stop a RealtimeKit recording automatically or manually using the Stop Recording API.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/stop-recording/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Record separate audio tracks for selected RealtimeKit participants and download per-participant WebM files.
title: Track recording
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Track recording

Last updated May 28, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/track-recording/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Track recording lets you record participant audio as separate WebM files instead of one composite meeting recording. Use it when you need speaker-level control over what you store, process, or review.

With track recording, you can record specific participant tracks by passing `user_ids`, which is useful for content-sensitive or regulated workflows where recording every participant is unnecessary. If you do not provide `user_ids`, RealtimeKit will record all participant audio tracks as separate WebM files by default.

To pass `user_ids` for specific participant track recording, use the following minimum SDK versions:

* Web Core: `@cloudflare/realtimekit` version `1.4.0` or later
* Web UI Kit: `@cloudflare/realtimekit-ui`, `@cloudflare/realtimekit-react-ui`, or `@cloudflare/realtimekit-angular-ui` version `1.1.2` or later
* Android Core or iOS Core: version `2.0.0` or later
* Android UI Kit or iOS UI Kit: version `1.1.0` or later

Track recording creates one file per recorded participant.

Note

Track recording currently supports audio tracks only. Video track recording is in development.

## Availability and limits

Track recording has the following requirements and limits:

| Limit                 | Description                                                                  |
| --------------------- | ---------------------------------------------------------------------------- |
| Active meeting        | The meeting must have an active live session.                                |
| Media kind            | Only audio layers are recorded.                                              |
| Participant selection | Pass up to 100 values in user\_ids.                                          |
| Storage               | Files are uploaded to RealtimeKit's managed R2 bucket with zero-egress fees. |
| File retention        | RealtimeKit bucket download URLs expire after seven days.                    |

## Start track recording

### Record specific participants

To record separate audio tracks for specific participants, call [POST /recordings/track](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/start%5Ftrack%5Frecording/) with the meeting ID and the participant `user_ids`.

```bash
curl --request POST \
  --url https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/recordings/track \
  --header 'Authorization: Bearer <api_token>' \
  --header 'Content-Type: application/json' \
  --data '{
  "meeting_id": "97440c6a-140b-40a9-9499-b23fd7a3868a",
  "user_ids": ["user-123", "user-456"]
}'
```

RealtimeKit records current and future participants whose `user_id` matches the allowlist. Participants whose `user_id` is not listed are not recorded.

### Record all participants as separate tracks

Omit `user_ids` to record separate audio tracks for all participants in the live meeting. RealtimeKit creates one WebM file for each recorded participant.

```bash
curl --request POST \
  --url https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/recordings/track \
  --header 'Authorization: Bearer <api_token>' \
  --header 'Content-Type: application/json' \
  --data '{
  "meeting_id": "97440c6a-140b-40a9-9499-b23fd7a3868a"
}'
```

The response includes a recording ID. Use this ID to stop or fetch the recording.

```json
{
	"success": true,
	"data": {
		"recording": {
			"id": "fff40c6a-140b-40a9-9499-b23fd7a3868a",
			"meeting_id": "97440c6a-140b-40a9-9499-b23fd7a3868a",
			"status": "INVOKED",
			"type": "TRACK",
			"output_file_name": "{{file_name_prefix}}_{{user_id}}_{{peer_id}}_{{stream_kind}}_{{media_kind}}_{{date_time}}.webm"
		}
	}
}
```

## Customize file names with prefixes

Use `layers.default.file_name_prefix` to prefix every generated track recording file.

```json
{
	"meeting_id": "97440c6a-140b-40a9-9499-b23fd7a3868a",
	"layers": {
		"default": {
			"media_kind": "audio",
			"file_name_prefix": "speaker"
		}
	}
}
```

If you omit `layers`, RealtimeKit uses `default` as the file name prefix.

## Stop track recording

Use the [recording update endpoint](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/recordings/methods/pause%5Fresume%5Fstop%5Frecording/) to stop a track recording.

```bash
curl --request PUT \
  --url https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/recordings/<recording_id> \
  --header 'Authorization: Bearer <api_token>' \
  --header 'Content-Type: application/json' \
  --data '{
  "action": "stop"
}'
```

Track recording also stops when the meeting session ends.

After track recording stops, RealtimeKit uploads the per-participant WebM files and moves the recording to `UPLOADED`.

## Download track files

Track recording uses the same recording status lifecycle as composite recording. To monitor status, refer to [Monitor Recording Status](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/monitor-status/).

When the recording reaches `UPLOADED`, fetch the recording details or listen for the `recording.statusUpdate` webhook. For track recordings, `download_url` contains per-participant WebM file URLs grouped by layer.

```json
{
	"download_url": [
		{
			"layer_name": "default",
			"download_urls": {
				"speaker_user-123_peer-456_peer_audio_1760000000000.webm": {
					"download_url": "https://example.com/presigned-url"
				}
			}
		}
	]
}
```

File names use this format:

```txt
{{file_name_prefix}}_{{user_id}}_{{peer_id}}_{{stream_kind}}_{{media_kind}}_{{date_time}}.webm
```

The `date_time` value is the Unix timestamp in milliseconds when the file was generated.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/track-recording/#page","headline":"Track recording · Cloudflare Realtime docs","description":"Record separate audio tracks for selected RealtimeKit participants and download per-participant WebM files.","url":"https://developers.cloudflare.com/realtime/realtimekit/recording-guide/track-recording/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-05-28","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit Web Core SDK.
title: Release Notes
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Release Notes

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[Subscribe to RSS](https://developers.cloudflare.com/realtime/realtimekit/release-notes/index.xml)

## 2026-07-17

**RealtimeKit Web Core 2.0.1**

**Fixes**

* Fixed ES5 builds containing `VERSION_PLACEHOLDER` in the bundle instead of the actual SDK version.
* Fixed SDK initialization failure when the initial socket connection attempt failed, which also prevented plugin store creation. The SDK now retries store creation based on the socket connection state.

## 2026-06-18

**RealtimeKit Web Core 2.0.0**

**Compatibility:** Works best with RealtimeKit Web UI Kit 2.0.0 or later.

This is a major breaking release. Several deprecated APIs have been removed and the plugin APIs have been completely redesigned. Review the migration guide below carefully before upgrading.

**Plugin APIs — complete redesign**

Plugins are no longer fetched from the server automatically. You now provide plugin configurations at SDK init time via `defaults.plugins`.

Before (v1.x):

```ts
// plugins were loaded via API in SDK internally
const meeting = await RealtimeKitClient.init({
  authToken,
});

// Server-hosted plugins were auto-populated
const plugin = meeting.plugins.all.get(pluginId);

// Plugin rendered in an iframe managed by the SDK
plugin.addPluginView(iframeElement, 'plugin-main');

// Permissions checked via meeting.self.permissions.plugins.canStart / canClose

```

After (v2.0):

A plugin component is any `HTMLElement`. You can use a custom element, a framework component mounted to a container, or an iframe. The following example embeds a collaborative text editor as a plugin:

```ts
const editor = document.createElement('iframe');
editor.src = 'https://rustpad.io/#WKLJaD';
editor.style.width = '100%';
editor.style.height = '100%';
editor.style.border = 'none';

const meeting = await RealtimeKitClient.init({
  authToken,
  defaults: {
    plugins: [
      {
        id: 'collaborative-editor', // SDK prefixes this with {meetingId}: to create the namespaced plugin.id
        name: 'Collaborative Editor',
        icon: 'https://example.com/editor.png',
        permissions: {
          canActivate: true,
          canDeactivate: true,
        },
        component: editor,
      },
    ],
  },
});

// Plugin is registered and available
const plugin = meeting.plugins.all.get(pluginId);

// Activate — state is synced across all participants
await plugin.activate();

```

For a complete guide on building custom plugins, refer to [Build your own plugins](https://developers.cloudflare.com/realtime/realtimekit/custom-plugins/build-your-own-plugins/). If you need to record plugin content, you must build a [custom recording app](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/create-record-app-using-sdks/).

Key changes:

* New type exports: `ClientPluginConfig`, `ClientPluginPermissions`.
* Plugin `id` is now namespaced: the SDK prefixes your provided `id` with `{meetingId}:` to create the internal `pluginId`.
* Plugin activation and deactivation state is now synced via a collaborative store (`__rtk_plugins__`) instead of dedicated socket messages.
* Plugins now have a `component` property (any `HTMLElement`) instead of iframe-based rendering via `addPluginView`.
* Per-plugin permissions (`plugin.permissions.canActivate` / `plugin.permissions.canDeactivate`) replace the old global `meeting.self.permissions.plugins.canStart` / `meeting.self.permissions.plugins.canClose`.

Removed plugin APIs:

* `plugin.addPluginView(iframe, viewId)` — pass an `HTMLElement` as `component` in `ClientPluginConfig` instead.
* `plugin.removePluginView(viewId)` — handled automatically by the UI Kit.
* `plugin.enable()` — use `plugin.activate()`.
* `plugin.disable()` — use `plugin.deactivate()`.
* `plugin.sendIframeEvent()` — removed. Communicate directly with your component.
* `plugin.baseURL` — removed. Plugins are no longer server-hosted.
* `plugin.picture` — use `plugin.icon`.
* `plugin.description`, `plugin.organizationId`, `plugin.tags`, `plugin.type`, `plugin.staggered`, `plugin.private`, `plugin.published`, `plugin.createdAt`, `plugin.updatedAt` — removed. No longer applicable.
* `plugin.config` (PluginConfig) — removed. No plugin manifest concept.
* `meeting.self.permissions.plugins.canStart` — use `plugin.permissions.canActivate`.
* `meeting.self.permissions.plugins.canClose` — use `plugin.permissions.canDeactivate`.
* `modules.devTools.plugins` (local dev plugin config) — use `defaults.plugins` with a `component` pointing to your local element.

**Removed deprecated APIs**

Client:

* `meeting.joinRoom()` — use `meeting.join()`.
* `meeting.leaveRoom()` — use `meeting.leave()`.

Chat:

* `meeting.chat.getMessagesByUser(userId)` — use `meeting.chat.fetchPublicMessages()` with appropriate filters.
* `meeting.chat.getMessagesByType(type)` — use `meeting.chat.fetchPublicMessages()` with appropriate filters.
* `meeting.chat.getMessages(timestamp, size, reversed)` — use `meeting.chat.fetchPublicMessages()` or `meeting.chat.fetchPrivateMessages()`.
* `meeting.chat.searchMessages(query, filters)` — use `meeting.chat.fetchPublicMessages()` or `meeting.chat.fetchPrivateMessages()`.
* `meeting.chat.pinned` (getter) — use `meeting.chat.fetchPinnedMessages()`.

Permissions (`meeting.self.permissions`):

* `permissions.produceVideo` — use `permissions.canProduceVideo`.
* `permissions.produceAudio` — use `permissions.canProduceAudio`.
* `permissions.produceScreenshare` — use `permissions.canProduceScreenshare`.
* `permissions.waitingRoomType` — use `permissions.waitingRoomBehaviour`.
* `permissions.canChangeParticipantRole` — use `permissions.canChangeParticipantPermissions`.
* `permissions.canChangeTheme` — removed (always returned `false`).
* `permissions.canPresent` — check individual `canProduceAudio`, `canProduceVideo`, `canProduceScreenshare`.
* `permissions.requestProduce` — check individual media permissions for `CAN_REQUEST` values.
* `permissions.acceptPresentRequests` — use `permissions.acceptStageRequests`.
* `permissions.maxScreenShareCount` — use `meeting.self.config.maxScreenShareCount`.
* `PermissionPreset.fromResponse()` — use `PermissionPreset.init()`.
* `PermissionPreset.default()` — use `PermissionPreset.init()`.

Participants:

* `meeting.participants.disableAudio(participantId)` — use `meeting.participants.joined.get(participantId).disableAudio()`.
* `meeting.participants.disableVideo(participantId)` — use `meeting.participants.joined.get(participantId).disableVideo()`.
* `meeting.participants.kick(participantId)` — call kick on the participant directly.
* `participant.clientSpecificId` — use `participant.customParticipantId`.

Connected Meetings:

* `meeting.connectedMeetings.supportsConnectedMeetings` — removed. Permission checks are now granular via `meeting.self.permissions.connectedMeetings`.

**Enhancements**

* Faster reconnection: Socket-only disconnects (where WebRTC transports remain healthy) now skip full transport re-setup. Producers are re-registered and existing consumers are remapped, significantly reducing reconnection time.
* Participants stay visible during reconnection: Participant tiles remain in the grid during a socket blip instead of disappearing and reappearing, providing a seamless experience.
* Double audio fix: Fixed an issue where other participants could hear double audio from a reconnected participant, caused by stale producers not being cleaned up.
* Socket reconnection resilience: Socket now supports up to 50 reconnection attempts with exponential backoff and jitter (up from 10), providing up to approximately four minutes of retry coverage when the internet is down.
* Store improvements: `StoreManager` now supports `refresh(name)` to re-fetch store data from the server, and reserved store names (`__rtk_plugins__`) are protected from user creation.

**Fixes**

* Fixed socket failing to reconnect if left disconnected for 30 seconds.

## 2026-05-28

**RealtimeKit Web Core 1.5.1**

**Compatibility:** Works best with RealtimeKit Web UI Kit 1.2.0 or later.

**Features**

* Added a dedicated error code `0014` for media (WebRTC) connection failures during room join, making it easier to distinguish media failures from socket and signaling failures.

**Enhancements**

* Init and join failures from `Client.init()` and `meeting.join()` now surface specific error codes and descriptive messages instead of generic or stacked errors.
* Telemetry logs are now compressed using gzip when the browser supports the `CompressionStream` API, achieving approximately a 10:1 compression ratio. Older browsers and React Native fall back to uncompressed JSON with smaller batch sizes.

**Fixes**

* Fixed a regex-based issue where the Safari video middleware flag was incorrectly removed, potentially breaking video processing on Safari.
* Fixed an issue where `ClientError` objects were wrapped inside each other when the SDK retried failed API requests. This caused nested error messages, duplicate `onError` callbacks, and redundant `window` error events.

**Removed APIs**

* Removed the third-party flag service. `meeting.__internals__.features` is now deprecated and will be removed in a future release.

## 2026-04-20

**RealtimeKit Web Core 1.4.0**

**Compatibility:** Works best with RealtimeKit Android Core 2.0.0+ and RealtimeKit iOS Core 2.0.0+.

**Features**

* Added `meeting.__internals__.authToken` to expose authentication token, enabling better integration between Web Core and UI Kit for future features and enhancements.

**Fixes**

* Proactively fixed an issue where participants with simulcast turned on would not be able to turn on their camera or microphone due to SDP failures in Chrome version 148+.

**Enhancements**

* SDK now uses `*.realtime.cloudflare.com` base URI internally instead of the legacy `dyte.io` base URI.
* Refactored error handling to properly catch and display error codes for SDK initialization failures, room join failures, and other errors.

## 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/#page","headline":"Release Notes · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit Web Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit Android Core SDK.
title: Android Core SDK
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Android Core SDK

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[Subscribe to RSS](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/index.xml)

## 2026-07-17

**RealtimeKit Android Core 3.1.0**

**Enhancements**

* Room joins are up to 25% faster under normal network conditions
* Improved the initial quality of video received from mobile participants

**Fixes**

* Fixed a crash when switching between breakout rooms
* When unmuting audio or video, the SDK now requests permission when the corresponding `RtkMeetingInfo.enableAudio` or `RtkMeetingInfo.enableVideo` field is `false`. The UI Kit component is no longer silently disabled.

## 2026-06-24

**RealtimeKit Android Core 3.0.0**

**Breaking changes**

* Plugins are no longer provided by the server. They must now be declared upfront on the client side by passing a `plugins` list to `RtkMeetingInfo`. Any plugin not declared at initialization will not be available in the meeting.  
```kotlin  
val meetingInfo = RtkMeetingInfo(  
  authToken = authToken,  
  plugins = listOf(  
    RtkClientPluginConfig(  
      id = "whiteboard", // Must match the plugin ID used on Web for sync to work  
      name = "Whiteboard",  
      icon = "https://example.com/logo.png",  
      url = "https://example.com",  
      permissions = RtkClientPluginPermissions(canActivate = true, canDeactivate = true),  
    )  
  ),  
)  
```
* Several internal properties have been removed from `RtkPlugin`: `baseURL`, `config`, `description`, `isPrivate`, and `staggered`. Use the new `icon` and `permissions` properties instead.
* The two-argument `subscribe(key, (key, value) → Unit)` and `unsubscribe(key, (key, value) → Unit)` overloads on `RtkStore` have been removed. Use the single-argument callback variants introduced in 2.1.0.

**Features**

* **AI Transcription** — A new `RtkAi` class (exposed as `client.ai`) provides access to real-time transcripts. Implement `RtkAiEventListener` and register it with `addAiEventListener()` to receive `onTranscript(data: RtkTranscriptionData)` callbacks. A `transcriptionEnabled` permission is available on `MiscellaneousPermissions`.
* **Connected Meetings (Breakout Rooms)** — A new `RtkConnectedMeetings` class (exposed as `client.connectedMeetings`) enables breakout room workflows. Register an `RtkConnectedMeetingsEventListener` to handle room transitions and state updates. See the [Breakout Rooms](https://developers.cloudflare.com/realtime/realtimekit/core/breakout-rooms/) documentation for a full guide.
* **Chat: Edit and Delete** — Messages can now be edited and deleted. New methods on `RtkChat`: `editTextMessage()`, `editImageMessage()`, `editFileMessage()`, and `deleteMessage()`. `RtkChatEventListener` gains `onMessageEdited()` and `onMessageDeleted()` callbacks. `ChatMessage` now includes an `isEdited` flag.
* **Chat: Fetch and Pagination** — New methods on `RtkChat` — `fetchPublicMessages()`, `fetchPrivateMessages()`, `fetchPinnedMessages()`, and `getMessages()` — allow fetching historical messages with cursor-based pagination via `FetchMessagesResult(messages, hasMore)`.
* **Client-Declared Plugins** — Plugins are now configured entirely on the client via `RtkClientPluginConfig` and `RtkClientPluginPermissions`. `RtkPlugin` exposes the new `icon` and `permissions` properties accordingly.
* **Targeted Broadcast Messages** — `RtkParticipants.broadcastMessage()` now accepts an optional `targetParticipantIds: List<String>` parameter to send a message to a specific subset of participants.
* **Nullable Store Values** — `RtkStore.set()` now accepts a nullable `value: Any?`, allowing keys to be cleared by setting them to `null`.
* **Logging Control** — `RealtimeKitClient` gains `enableLogging(enabled: Boolean)` and `enableLogging(enabled: Boolean, minSeverity: LogSeverity)` to control SDK log output at runtime.
* **Result<S, F> Utility Type** — A new `sealed class Result<S, F>` with `Success` and `Failure` variants is used consistently across new async APIs.

**Fixes**

* Improved reconnection handling to ensure media recovers gracefully in more scenarios
* Improved simulcast tiers to broadcast at a wider range of qualities on higher tiers
* Fixed some races in media handling causing mute/unmute operations to rarely result in a crash
* Optimized API calls in the room join flow to speed up first join durations
* Fixed file and image uploads in chat failing under some conditions

## 2026-05-08

**RealtimeKit Android Core 2.1.0**

**Breaking changes**

* `RtkParticipants.activeSpeaker` → `RtkParticipants.lastActiveSpeaker`. The old `activeSpeaker` property is deprecated and will be removed in a future release.
* `RtkSelfParticipant.enableScreenShare()` → `enableScreenShare(onResult:)`. The old no-callback version is deprecated and will be removed in a future release.
* `RtkSelfParticipant.disableScreenShare()` → `disableScreenShare(onResult:)`. The old no-callback version is deprecated and will be removed in a future release.
* `RtkStore.subscribe(key, (key, value) → Unit)` → `subscribe(key, (value) → Unit)`. The old two-argument callback signature is deprecated but remains functional via a backward-compatible shim.
* `RtkStore.unsubscribe(key, (key, value) → Unit)` → `unsubscribe(key, (value) → Unit)`. The old two-argument callback signature is deprecated but remains functional via a backward-compatible shim.

**Features**

* Added `RtkChat.pin()` and `RtkChat.unpin()` methods to pin and unpin chat messages
* Added `RtkChat.getMessagesByUser()` to filter messages by sender and `RtkChat.getMessagesByType()` to filter messages by type
* Added `SelfPermissions.canPinMessage()` to check whether the local participant has permission to pin messages

**Fixes**

* Fixed a memory leak in video rendering caused by `SurfaceViewRenderer` instances not being released
* Fixed recording state getting stuck as "recording" when stopping a recording that was started by another participant
* Fixed "ghost" participants appearing on the grid when a user was on the setup screen but had not yet joined the socket room
* Fixed webinar host being invisible to other participants when joining late
* Fixed recording bots and other hidden participants incorrectly appearing on the participant grid
* Fixed waitlisted participants appearing in the participant list before being admitted to the meeting

## 2026-04-20

**RealtimeKit Android Core 2.0.0**

**Breaking changes**

* Removed Hive SFU support. Only the Cloudflare SFU is supported going forward.
* The default base URI is now `realtime.cloudflare.com`. Calling `init()` with a `dyte.io` base domain now fails immediately with `MeetingError.InvalidBaseUrl`

**Fixes**

* Added compatibility with new backend plugins API field naming
* Fixed a crash that could occur when accessing the socket controller before `init()` was called
* Fixed auth token not being sent to the callstats collector endpoint
* Removed custom ping-pong keepalive logic that was only required for the previous infrastructure

## 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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#page","headline":"Android Core SDK · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit Android Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit Android UI Kit SDK.
title: Android UI Kit SDK
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Android UI Kit SDK

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-ui-kit/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[Subscribe to RSS](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-ui-kit/index.xml)

## 2026-07-17

**RealtimeKit Android UI Kit 3.1.0**

**Enhancements**

* Aligned the version with [RealtimeKit Android Core v3.1.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2026-07-17). This release has no breaking changes.

**Fixes**

* Audio and video toggle buttons no longer check permissions or disable themselves. The core SDK handles permission requests.

## 2026-06-24

**RealtimeKit Android UI Kit 2.0.0**

**Breaking changes**

* Upgraded to [RealtimeKit Core v3.0.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2026-06-24). Plugins must now be declared on the client side when constructing `RtkMeetingInfo`.

**Features**

* Added Breakout Rooms support. Participants can be assigned to rooms manually or distributed automatically; hosts can create, rename, and close rooms, move participants between them, and return everyone to the main room. See the Connected Meetings documentation for a full guide.
* Added an AI Transcription panel accessible from the More Options menu. Consecutive utterances from the same speaker are merged into a single visual block. The list auto-scrolls to the latest transcript and pauses when the user scrolls up. Transcripts can be filtered by participant name or text.
* Added edit and delete actions for chat messages. Long-pressing a message opens an actions sheet with Edit and Delete options. Edited messages display an "edited" indicator.

## 2026-05-11

**RealtimeKit Android UI Kit 1.1.0**

**Features**

* Added chat message pin/unpin support: long-press any message to open an actions sheet with Pin and Unpin options, with an expandable banner showing pinned messages
* Added a "Deny All" button to the waiting room participant list and webinar stage access requests so hosts can reject all pending requests at once
* Upgraded to [RealtimeKit Core v2.1.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2026-05-08)

## 2026-04-20

**RealtimeKit Android UI Kit 1.0.0**

**Breaking changes**

* Upgraded to [RealtimeKit Core v2.0.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-core/#2026-04-20) which removes support for Dyte APIs and SFU.

## 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)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-ui-kit/#page","headline":"Android UI Kit SDK · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit Android UI Kit SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/android-ui-kit/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit Flutter Core SDK.
title: Flutter Core SDK
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Flutter Core SDK

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/#page","headline":"Flutter Core SDK · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit Flutter Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-core/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit Flutter UI Kit SDK.
title: Flutter UI Kit
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Flutter UI Kit

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-ui-kit/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[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)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-ui-kit/#page","headline":"Flutter UI Kit · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit Flutter UI Kit SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/flutter-ui-kit/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit iOS Core SDK.
title: iOS Core SDK
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# iOS Core SDK

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[Subscribe to RSS](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/index.xml)

## 2026-07-17

**RealtimeKit iOS Core 3.1.0**

**Enhancements**

* Room joins are up to 25% faster under normal network conditions
* Improved the initial quality of video received from mobile participants

**Fixes**

* Fixed a crash when switching between breakout rooms
* When unmuting audio or video, the SDK now requests permission when the corresponding `RtkMeetingInfo.enableAudio` or `RtkMeetingInfo.enableVideo` field is `false`. The UI Kit component is no longer silently disabled.

## 2026-06-24

**RealtimeKit iOS Core 3.0.0**

**Breaking changes**

* Plugins are no longer provided by the server. They must now be declared upfront on the client side by passing a `plugins` list to `RtkMeetingInfo`. Any plugin not declared at initialization will not be available in the meeting.  
```swift  
let meetingInfo = RtkMeetingInfo(  
  authToken: authToken,  
  plugins: [  
    RtkClientPluginConfig(  
      id: "whiteboard", // Must match the plugin ID used on Web for sync to work  
      name: "Whiteboard",  
      url: "https://example.com",  
      icon: "https://example.com/logo.png",  
      permissions: RtkClientPluginPermissions(canActivate: true, canDeactivate: false)  
    )  
  ]  
)  
```
* Several internal properties have been removed from `RtkPlugin`: `baseURL`, `config`, `description`, `isPrivate`, and `staggered`. Use the new `icon` and `permissions` properties instead.
* `baseUrl` in `RtkMeetingInfo` now has a default value and no longer needs to be passed explicitly.
* The two-argument `subscribe(key:listener:)` and `unsubscribe(key:listener:)` overloads on `RtkStore` that passed both the key and value to the callback have been removed. Use the single-argument callback variants introduced in 2.1.0.

**Features**

* **AI Transcription** — A new `RtkAi` class (exposed as `client.ai`) provides access to real-time transcripts. Implement `RtkAiEventListener` and register it with `addAiEventListener(_:)` to receive `onTranscript(data:)` callbacks. A `transcriptionEnabled` permission is available on `MiscellaneousPermissions`.
* **Connected Meetings (Breakout Rooms)** — A new `RtkConnectedMeetings` class (exposed as `client.connectedMeetings`) enables breakout room workflows. Register an `RtkConnectedMeetingsEventListener` to handle room transitions and state updates. See the [Breakout Rooms](https://developers.cloudflare.com/realtime/realtimekit/core/breakout-rooms/) documentation for a full guide.
* **Chat: Edit and Delete** — Messages can now be edited and deleted. New methods on `RtkChat`: `editTextMessage(messageId:newText:onResult:)`, `editImageMessage(messageId:newUri:onResult:)`, `editFileMessage(messageId:newUri:onResult:)`, and `deleteMessage(messageId:onResult:)`. `RtkChatEventListener` gains `onMessageEdited(message:)` and `onMessageDeleted(messageId:)` callbacks. `ChatMessage` now includes an `isEdited` flag.
* **Chat: Fetch and Pagination** — New methods on `RtkChat` — `fetchPublicMessages(beforeTimestamp:count:onlyPinned:onResult:)`, `fetchPrivateMessages(userId:beforeTimestamp:count:onlyPinned:onResult:)`, `fetchPinnedMessages(beforeTimestamp:count:onlyPinned:onResult:)`, and `getMessages(timestamp:count:channelId:isPinned:onResult:)` — allow fetching historical messages with cursor-based pagination via `FetchMessagesResult(messages:hasMore:)`.
* **Client-Declared Plugins** — Plugins are now configured entirely on the client via `RtkClientPluginConfig` and `RtkClientPluginPermissions`. `RtkPlugin` exposes the new `icon` and `permissions` properties accordingly.
* **Targeted Broadcast Messages** — `RtkParticipants.broadcastMessage(message:targetParticipantIds:payload:)` sends a message to a specific subset of participants.
* **Nullable Store Values** — `RtkStore.set(key:value:broadcast:persist:)` now accepts a nullable `value: Any?`, allowing keys to be cleared by setting them to `nil`.
* **Logging Control** — `RealtimeKitClient` gains `enableLogging(_:)` and `enableLogging(_:minSeverity:)` to control SDK log output at runtime.
* **Result\_ Utility Type** — A new `Result_<S, F>` type with `Success` and `Failure` variants is used consistently across new async APIs. It is named `Result_` to avoid collision with Swift's built-in `Result` type.

**Fixes**

* Improved reconnection handling to ensure media recovers gracefully in more scenarios
* Fixed potential UI hangs by dispatching audio route change observer off the main thread
* Improved simulcast tiers to broadcast at a wider range of qualities on higher tiers
* Fixed some races in media handling causing mute/unmute operations to rarely result in a crash
* Optimized API calls in the room join flow to speed up first join durations
* Fixed file and image uploads in chat failing under some conditions

## 2026-05-08

**RealtimeKit iOS Core 2.1.0**

**Breaking changes**

* `RtkParticipants.activeSpeaker` → `RtkParticipants.lastActiveSpeaker`. The old `activeSpeaker` property is deprecated and will be removed in a future release.
* `RtkSelfParticipant.enableScreenShare()` → `enableScreenShare(onResult:)`. The old no-callback version is deprecated and will be removed in a future release.
* `RtkSelfParticipant.disableScreenShare()` → `disableScreenShare(onResult:)`. The old no-callback version is deprecated and will be removed in a future release.
* `RtkStore.subscribe(key, (key, value) → Unit)` → `subscribe(key, (value) → Unit)`. The old two-argument callback signature is deprecated but remains functional via a backward-compatible shim.
* `RtkStore.unsubscribe(key, (key, value) → Unit)` → `unsubscribe(key, (value) → Unit)`. The old two-argument callback signature is deprecated but remains functional via a backward-compatible shim.

**Features**

* Added `RtkChat.pin()` and `RtkChat.unpin()` methods to pin and unpin chat messages
* Added `RtkChat.getMessagesByUser()` to filter messages by sender and `RtkChat.getMessagesByType()` to filter messages by type
* Added `SelfPermissions.canPinMessage()` to check whether the local participant has permission to pin messages

**Fixes**

* Fixed recording state getting stuck as "recording" when stopping a recording that was started by another participant
* Fixed "ghost" participants appearing on the grid when a user was on the setup screen but had not yet joined the socket room
* Fixed webinar host being invisible to other participants when joining late
* Fixed recording bots and other hidden participants incorrectly appearing on the participant grid
* Fixed waitlisted participants appearing in the participant list before being admitted to the meeting

## 2026-04-20

**RealtimeKit iOS Core 2.0.0**

**Breaking changes**

* Removed Hive SFU support. Only the Cloudflare SFU is supported going forward.
* The default base URI is now `realtime.cloudflare.com`. Calling `init()` with a `dyte.io` base domain now fails immediately with `MeetingError.InvalidBaseUrl`

**Fixes**

* Added compatibility with new backend plugins API field naming
* Fixed a crash that could occur when accessing the socket controller before `init()` was called
* Fixed auth token not being sent to the callstats collector endpoint
* Removed custom ping-pong keepalive logic that was only required for the previous infrastructure

## 2026-02-06

**RealtimeKit iOS Core 1.6.1**

**Fixes**

* Fixed media issues when connection took longer to establish

## 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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#page","headline":"iOS Core SDK · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit iOS Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit iOS UI Kit SDK.
title: iOS UI Kit SDK
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# iOS UI Kit SDK

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-ui-kit/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[Subscribe to RSS](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-ui-kit/index.xml)

## 2026-07-17

**RealtimeKit iOS UI Kit 3.1.0**

**Enhancements**

* Aligned the version with [RealtimeKit iOS Core v3.1.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2026-07-17). This release has no breaking changes.

**Fixes**

* Audio and video toggle buttons no longer check permissions or disable themselves. The core SDK handles permission requests.

## 2026-06-30

**RealtimeKit iOS UI Kit 2.0.0**

**Breaking changes**

* Upgraded to [RealtimeKit Core v3.0.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2026-06-24). Plugins must now be declared on the client side when constructing `RtkMeetingInfo`.

**Features**

* Added Breakout Rooms support. Participants can be assigned to rooms manually or distributed automatically; hosts can create, rename, and close rooms, move participants between them, and return everyone to the main room. See the Connected Meetings documentation for a full guide.
* Added an AI Transcription screen accessible from the More menu. The screen matches web SDK rendering behavior: consecutive utterances from the same speaker are grouped, the list auto-scrolls to the latest transcript, and transcripts can be filtered by participant name or text.
* Added edit and delete actions for chat messages. Long-pressing a message opens a context menu with Edit and Delete options. Edited messages display an "edited" indicator.

## 2026-05-11

**RealtimeKit iOS UI Kit 1.1.0**

**Breaking changes**

* Minimum deployment target raised to iOS 16.0

**Features**

* Added a "Deny All" button to the waiting room participant list so hosts can reject all pending join requests at once, in both group call and webinar meetings
* Upgraded to [RealtimeKit Core v2.1.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2026-05-08)

## 2026-04-20

**RealtimeKit iOS UI Kit 1.0.0**

**Breaking changes**

* Upgraded to [RealtimeKit Core v2.0.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-core/#2026-04-20) which removes support for Dyte APIs and SFU.
* Minimum deployment target is now iOS 15.6

## 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)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-ui-kit/#page","headline":"iOS UI Kit SDK · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit iOS UI Kit SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/ios-ui-kit/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Important notices and announcements for the RealtimeKit platform.
title: Notices
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Notices

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/notice-board/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/notice-board/#page","headline":"Notices · Cloudflare Realtime docs","description":"Important notices and announcements for the RealtimeKit platform.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/notice-board/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit React Native Core SDK.
title: React Native Core SDK
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# React Native Core SDK

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-core/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[Subscribe to RSS](https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-core/index.xml)

## 2026-07-08

**RealtimeKit React Native Core 2.0.0**

**Compatibility:** Works best with RealtimeKit React Native UI Kit 2.0.0 or later.

This is a major breaking release. Review all breaking changes below before upgrading.

**Breaking changes**

* Upgraded to `@cloudflare/realtimekit` v2.0.0.  
All [breaking changes from Web Core v2.0.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/#2026-06-18-realtimekit-web-core-200) apply, including the complete redesign of the plugin API and removal of all deprecated APIs.
* Requires React Native 0.84 or above and React 19 or above.
* Requires Expo 56 or above (for Expo users).
* Requires iOS 15.1 or above.
* Requires @cloudflare/react-native-webrtc v137.0.1 or above.
* Removed `RealtimeKitCore` import in iOS Screenshare setup and added a Podfile installer script to automatically add references to the Screenshare related files. Refer documentation for [iOS Screenshare setup](https://developers.cloudflare.com/realtime/realtimekit/core/local-participant/#screen-share-setup-ios).
* `initClient` return type changed from `Promise<RealtimeKitClient>` to `Promise<RealtimeKitClient | undefined>`. Code that assumes `initClient` always returns a defined value must add a null check.

**Features**

* `Connected Meetings` support: the `useRealtimeKitClient` hook now automatically listens to `connectedMeetings.meetingChanged` and hot-swaps the active client when switching between connected or breakout meetings.
* `Background support` for Android (enabled by default):
  * New exported type `KeepAliveServiceConfig` to configure the Android meeting foreground service notification (title, body text, enable/disable).
  * New `useRealtimeKitClient({ keepAliveService })` option to customize or disable the Android foreground notification.
  * New `useRealtimeKitClient({ resetOnLeave })` option to reset client state on room leave.

**Fixes**

* Fixed an issue where the microphone did not work after being toggled if audio permission had not been granted before joining the meeting.
* Fixed an issue where the in-call notification on Android persisted after the meeting ended.
* Fixed an issue where screen sharing failed on the first attempt on Android 14 and above.
* Fixed an issue where stopping screen sharing did not properly clean up event listeners, which could cause screen sharing to malfunction in subsequent sessions.

## 2026-06-18

**RealtimeKit React Native Core 1.1.0**

**Features**

* Added a dedicated error code `0014` for media (WebRTC) connection failures during room join, making it easier to distinguish media failures from socket and signaling failures.

**Enhancements**

* Init and join failures from `initMeeting()` and `meeting.join()` now surface specific error codes and descriptive messages instead of generic errors.

**Fixes**

* Fixed an issue where `ClientError` objects were wrapped inside each other when the SDK retried failed API requests, causing nested error messages and duplicate `onError` callbacks.

## 2026-05-05

**RealtimeKit React Native Core 1.0.0**

**Breaking changes**

* Removed Hive SFU support. Only the Cloudflare SFU is supported going forward.
* The default base URI is now `realtime.cloudflare.com`. Calling `initMeeting()` with baseURI parameter set to a `dyte.io` base domain now throws an Error.
* `RealtimeKitClientOptions` is renamed to `RTKClientOptions`.

**Fixes**

* Fixed an issue where sometimes after rejoining a meeting & upon stopping iOS screenshare, the app freezes.

## 2026-03-30

**RealtimeKit React Native Core 0.3.2**

**Fixes**

* Fixed the issue when leaving & rejoining a meeting causes the local media to stop working
* Fixed iOS screenshare stops broadcasting on Web when calling `meeting.self.disableScreenShare()` but not clicking on 'Stop' on iOS Picker View.

## 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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-core/#page","headline":"React Native Core SDK · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit React Native Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-core/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit React Native UI Kit SDK.
title: React Native UI Kit SDK
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# React Native UI Kit SDK

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-ui-kit/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[Subscribe to RSS](https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-ui-kit/index.xml)

## 2026-07-08

**RealtimeKit React Native UI Kit 2.0.0**

**Compatibility:** Requires `@cloudflare/realtimekit-react-native` (React Native Core) v2.0.0 or later

This is a major breaking release. Review all breaking changes below before upgrading.

**Breaking changes**

* Upgraded to `@cloudflare/realtimekit-react-native` v2.0.0 and `@cloudflare/realtimekit` v2.0.0\. All [breaking changes from Web Core v2.0.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/#2026-06-18-realtimekit-web-core-200) and [React Native Core v2.0.0](https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-core/) apply.
* Removed the KeepAlive Service from the UI Kit. Background Audio/Video support for Android is now managed by `@cloudflare/realtimekit-react-native` v2.0.0\. Update your integration to use `useRealtimeKitClient({ keepAliveService })` from the Core SDK.
* `RtkPluginMain` now uses `plugin.component` (an `HTMLElement`\-like object) instead of an iframe. This aligns with the plugin API redesign in Web Core 2.0.0.
* RtkMoreMenu is now scrollable rather than a fixed-height container.

**Features**

* `Breakout Rooms` support:
  * New `RtkBreakoutRoomsManager` component: full manager UI for creating, assigning participants, and starting or stopping breakout rooms.
  * New `RtkBreakoutRoomsToggle` component: control-bar button to open or close the breakout rooms manager.
* Connected meeting switching UI: `RtkMeeting` now handles `changingMeeting` events and shows a "Joining…" interstitial screen while switching between connected rooms.
* New exported types: `ConnectedMeeting`, `ConnectedMeetingParticipant`, `ConnectedMeetingState`, `PluginIframe`.
* New state fields in the `States` type:
  * `activeBreakoutRoomsManager` — tracks breakout manager open/close state and room-switch destination.
  * `activeBreakoutConfirmation` — breakout action confirmation dialog state.

**Fixes**

* Fixed an issue where the chat sent notification showed up when a message was edited rather than only when a new message was sent.
* Fixed an issue where video from web participants did not update on mobile devices while screen sharing or a plugin was active.
* Fixed an issue where the screenshare video appeared stretched or distorted in fullscreen when switching between landscape and portrait orientations.
* Fixed an issue where host controls disappeared when the host was off stage.
* Fixed an issue where the screenshare view shook when the device was held in landscape mode on iOS.
* Fixed an issue where the screen orientation did not return to normal after closing a fullscreen plugin on Android.
* Fixed an issue where the More menu could not be scrolled when the device was in landscape mode.
* Fixed an issue where opening the More menu in landscape mode incorrectly locked the screen orientation.
* Fixed inconsistent appearance across button and toggle controls.
* Fixed an issue where participant video tiles occasionally showed outdated or frozen video.
* Fixed an issue where the "Hide Result" option was not enabled by default when creating a poll.

## 2026-05-05

**RealtimeKit React Native UI Kit 1.0.0**

**Breaking changes**

* Removed support for `@cloudflare/realtimekit-react-native` version less than v1.0.0
* The Join Stage Confirmation dialog (i.e `RtkJoinStage`) now opens with Mic/Camera disabled by default.

**Features**

* Added unread counts for chat and polls in `RtkPollsToggle`, `RtkChatToggle`, and `RtkMoreToggle`

**Fixes**

* Fixed an issue where when a meeting host leaves the stage, all plugins and host controls disappear.

## 2026-03-30

**RealtimeKit React Native UI Kit 0.2.1**

**Fixes**

* Fixed an issue where self video is not visible on Setup Screen on initial load (i.e happens with @cloudflare/realtimekit-react-native version v0.3.2)

## 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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-ui-kit/#page","headline":"React Native UI Kit SDK · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit React Native UI Kit SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/react-native-ui-kit/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Release notes and changelog for the RealtimeKit Web UI Kit SDK.
title: Web UI Kit
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Web UI Kit

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/release-notes/web-ui-kit/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[Subscribe to RSS](https://developers.cloudflare.com/realtime/realtimekit/release-notes/web-ui-kit/index.xml)

## 2026-07-17

**RealtimeKit Web UI Kit 2.0.1**

**Fixes**

* The `joinError` state has been superseded by `preJoinError` to cover all errors that occur before or during joining the meeting. Refer to [State management](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/) for details on UI Kit states.
* The `rtk-idle-screen` now displays user-friendly error messages instead of just an infinite loader, helping customers identify issues and retry.
* Fixed errors thrown by the Core SDK not being captured and shown properly by the UI Kit.

**New localization keys**

* `init.auth_error` — "We couldn't verify your access to this meeting. The meeting may have ended, or you may not have permission to join."
* `init.network_error` — "We couldn't connect to the meeting. Please try again, and if the problem continues, check your internet connection."
* `init.browser_error` — "Your browser is not supported. Please try a different or updated browser."
* `init.default_error` — "Something went wrong while connecting to the meeting. Please try again."
* `join.network_error` — "We couldn't connect to the meeting. Please check your internet connection and try again."
* `join.media_error` — "We're having trouble connecting to the meeting. Please try again, and if the problem continues, try using a different network."
* `join.media_firewall_error` — "Your network may be blocking this connection. Try using a different network, or contact your network administrator for help."
* `join.default_error` — "Something went wrong while joining the meeting. Please try again."
* `join.error_code` — "Error code"

## 2026-06-18

**RealtimeKit Web UI Kit 2.0.0**

**Compatibility:** Requires RealtimeKit Web Core 2.0.0 or later.

This is a major breaking release to align with the Core SDK v2.0.0 plugin redesign and removal of deprecated APIs.

**Plugin components — redesigned**

The `rtk-plugin-main` and `rtk-plugins` components have been updated for the new plugin model.

Key changes:

* `rtk-plugin-main` no longer renders an `<iframe>`. Instead, it uses a `<slot>` to project the `plugin.component` (any `HTMLElement`) you provide in the plugin config.
* Plugin permission checks now use `plugin.permissions.canActivate` and `plugin.permissions.canDeactivate` instead of the old `meeting.self.permissions.plugins.canStart` / `canClose`.
* Plugin list (`rtk-plugins`) now shows `plugin.icon` instead of `plugin.picture`.
* Added an empty state message ("No plugins available") when no plugins are registered.
* Removed iframe interaction checks (`canInteractWithPlugin`, `viewModeEnabled`) and the `block-inputs` overlay. These are no longer applicable without iframes.

**Removed deprecated API usages**

* `meeting.leaveRoom()` — use `meeting.leave()`.
* `meeting.connectedMeetings.supportsConnectedMeetings` — removed. Breakout room checks use `meeting.connectedMeetings.isActive` and permission checks directly.
* `participant.clientSpecificId` — use `participant.customParticipantId`.

**Enhancements**

* AI Transcriptions UI: Rewrote the search UI for transcriptions. Search now covers both participant names and transcript content. Added dedicated search placeholder and "no results" states.
* AI Transcriptions header: Fixed typo "MeetingAI" to "Meeting AI".
* Chat message spacing: Reduced line height in `rtk-message-view` for better vertical spacing.
* Audio track handling: `RTKAudio.addTrack()` now removes any existing track with the same ID before adding, preventing stale tracks from accumulating (fixes double audio on reconnect).

**New localization keys**

* `plugins.empty` — "No plugins available"
* `ai.transcriptions.search_placeholder` — "Search by participant name or transcript"
* `ai.transcriptions.no_transcripts_found` — "No transcripts found. Try searching for a different participant or transcript."
* `ai.transcriptions.no_transcripts_yet` — "No transcripts yet."

**Fixes**

* Fixed abrupt disconnection screen appearing incorrectly during media reconnection.
* Fixed missing audio after reconnection due to stale tracks not being replaced.

## 2026-05-28

**RealtimeKit Web UI Kit 1.2.0**

**Compatibility:** Works best with RealtimeKit Web Core 1.5.1 or later.

**Features**

* When a user fails to join a meeting, `rtk-idle-screen` and `rtk-setup-screen` now display a troubleshooting link to help resolve common connection issues such as firewall restrictions and permission errors.
* If the meeting preset allows transcripts, the transcription panel is now shown by default without requiring manual activation.

**Enhancements**

* Raw SDK error codes and messages are no longer shown to end users on join failure. Error messages are now mapped to clear, user-friendly, localized text with a small reference code (for example, `Error code: 0002`) for support and debugging.

**Fixes**

* Corrected several typos and spacing issues in the default language pack.

## 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.

**Removed localization keys**

* `ai.chat.summarise`
* `ai.chat.agenda`
* `chat.new_channel`
* `chat.channel_name`
* `chat.channel_members`

**Renamed localization keys**

* `chat.empty_channel` → `chat.empty_chat`

**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.

**New localization keys**

* `network.troubleshoot` — "Troubleshoot your connection"

## 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/web-ui-kit/#page","headline":"Web UI Kit · Cloudflare Realtime docs","description":"Release notes and changelog for the RealtimeKit Web UI Kit SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/release-notes/web-ui-kit/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

# Realtime Kit

# Apps

## Fetch all apps

**get** `/accounts/{account_id}/realtime/kit/apps`

Fetch all apps for your account

### Path Parameters

- `account_id: string`

  The account identifier tag.

### Query Parameters

- `page_no: optional number`

  The page number from which you want your page search results to be displayed.

- `per_page: optional number`

  Number of results per page.

- `search: optional string`

  Search string that matches apps by name.

- `sort_order: optional "ASC" or "DESC"`

  Sort order for apps by creation time.

  - `"ASC"`

  - `"DESC"`

### Returns

- `data: optional array of object { id, created_at, name }`

  - `id: optional string`

  - `created_at: optional string`

  - `name: optional string`

- `paging: optional object { end_offset, start_offset, total_count }`

  - `end_offset: optional number`

  - `start_offset: optional number`

  - `total_count: optional number`

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/apps \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": [
    {
      "created_at": "2025-01-01T08:16:40.644Z",
      "id": "14a396e7-ca44-4937-bf1f-050a69118543",
      "name": "my-first-app"
    }
  ],
  "paging": {
    "end_offset": 1,
    "start_offset": 1,
    "total_count": 1
  },
  "success": true
}
```

## Create App

**post** `/accounts/{account_id}/realtime/kit/apps`

Create new app for your account

### Path Parameters

- `account_id: string`

  The account identifier tag.

### Body Parameters

- `name: string`

### Returns

- `data: optional object { app }`

  - `app: optional object { id, created_at, name }`

    - `id: optional string`

    - `created_at: optional string`

    - `name: optional string`

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/apps \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "name": "x"
        }'
```

#### Response

```json
{
  "data": {
    "app": {
      "created_at": "2025-01-01T08:16:40.644Z",
      "id": "14a396e7-ca44-4937-bf1f-050a69118543",
      "name": "my-new-app"
    }
  },
  "success": true
}
```

## Domain Types

### App Get Response

- `AppGetResponse object { data, paging, success }`

  - `data: optional array of object { id, created_at, name }`

    - `id: optional string`

    - `created_at: optional string`

    - `name: optional string`

  - `paging: optional object { end_offset, start_offset, total_count }`

    - `end_offset: optional number`

    - `start_offset: optional number`

    - `total_count: optional number`

  - `success: optional boolean`

### App Post Response

- `AppPostResponse object { data, success }`

  - `data: optional object { app }`

    - `app: optional object { id, created_at, name }`

      - `id: optional string`

      - `created_at: optional string`

      - `name: optional string`

  - `success: optional boolean`

# Meetings

## Fetch all meetings for an App

**get** `/accounts/{account_id}/realtime/kit/{app_id}/meetings`

Returns all meetings for the given App ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Query Parameters

- `end_time: optional string`

  The end time range for which you want to retrieve the meetings. The time must be specified in ISO format.

- `page_no: optional number`

  The page number from which you want your page search results to be displayed.

- `per_page: optional number`

  Number of results per page

- `search: optional string`

  The search query string. You can search using the meeting ID or title.

- `start_time: optional string`

  The start time range for which you want to retrieve the meetings. The time must be specified in ISO format.

- `status: optional "ACTIVE" or "INACTIVE"`

  Filter meetings by status.

  - `"ACTIVE"`

  - `"INACTIVE"`

### Returns

- `data: array of object { id, created_at, updated_at, 9 more }`

  - `id: string`

    ID of the meeting.

  - `created_at: string`

    Timestamp the object was created at. The time is returned in ISO format.

  - `updated_at: string`

    Timestamp the object was updated at. The time is returned in ISO format.

  - `live_stream_on_start: optional boolean`

    Specifies if the meeting should start getting livestreamed on start.

  - `persist_chat: optional boolean`

    Specifies if Chat within a meeting should persist for a week.

  - `record_on_start: optional boolean`

    Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

  - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

    Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

    - `audio_config: optional object { channel, codec, export_file }`

      Object containing configuration regarding the audio that is being recorded.

      - `channel: optional "mono" or "stereo"`

        Audio signal pathway within an audio file that carries a specific sound source.

        - `"mono"`

        - `"stereo"`

      - `codec: optional "MP3" or "AAC"`

        Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

        - `"MP3"`

        - `"AAC"`

      - `export_file: optional boolean`

        Controls whether to export audio file seperately

    - `file_name_prefix: optional string`

      Adds a prefix to the beginning of the file name of the recording.

    - `live_streaming_config: optional object { rtmp_url }`

      - `rtmp_url: optional string`

        RTMP URL to stream to

    - `max_seconds: optional number`

      Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

    - `realtimekit_bucket_config: optional object { enabled }`

      - `enabled: boolean`

        Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

    - `storage_config: optional object { type, access_key, auth_method, 9 more }`

      - `type: "aws" or "azure" or "digitalocean" or 2 more`

        Type of storage media.

        - `"aws"`

        - `"azure"`

        - `"digitalocean"`

        - `"gcs"`

        - `"sftp"`

      - `access_key: optional string`

        Access key of the storage medium. Access key is not required for the `gcs` storage media type.

        Note that this field is not readable by clients, only writeable.

      - `auth_method: optional "KEY" or "PASSWORD"`

        Authentication method used for "sftp" type storage medium

        - `"KEY"`

        - `"PASSWORD"`

      - `bucket: optional string`

        Name of the storage medium's bucket.

      - `host: optional string`

        SSH destination server host for SFTP type storage medium

      - `password: optional string`

        SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

      - `path: optional string`

        Path relative to the bucket root at which the recording will be placed.

      - `port: optional number`

        SSH destination server port for SFTP type storage medium

      - `private_key: optional string`

        Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

      - `region: optional string`

        Region of the storage medium.

      - `secret: optional string`

        Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

      - `username: optional string`

        SSH destination server username for SFTP type storage medium

    - `video_config: optional object { codec, export_file, height, 2 more }`

      - `codec: optional "H264" or "VP8"`

        Codec using which the recording will be encoded.

        - `"H264"`

        - `"VP8"`

      - `export_file: optional boolean`

        Controls whether to export video file seperately

      - `height: optional number`

        Height of the recording video in pixels

      - `watermark: optional object { position, size, url }`

        Watermark to be added to the recording

        - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

          Position of the watermark

          - `"left top"`

          - `"right top"`

          - `"left bottom"`

          - `"right bottom"`

        - `size: optional object { height, width }`

          Size of the watermark

          - `height: optional number`

            Height of the watermark in px

          - `width: optional number`

            Width of the watermark in px

        - `url: optional string`

          URL of the watermark image

      - `width: optional number`

        Width of the recording video in pixels

  - `session_keep_alive_time_in_secs: optional number`

    Time in seconds, for which a session remains active, after the last participant has left the meeting.

  - `status: optional "ACTIVE" or "INACTIVE"`

    Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

    - `"ACTIVE"`

    - `"INACTIVE"`

  - `summarize_on_end: optional boolean`

    Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

  - `title: optional string`

    Title of the meeting.

  - `transcribe_on_end: optional boolean`

    Automatically generate transcripts when the meeting ends.

- `paging: object { end_offset, start_offset, total_count }`

  - `end_offset: number`

  - `start_offset: number`

  - `total_count: number`

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": [
    {
      "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
      "created_at": "2019-12-27T18:11:19.117Z",
      "updated_at": "2019-12-27T18:11:19.117Z",
      "live_stream_on_start": true,
      "persist_chat": true,
      "record_on_start": true,
      "recording_config": {
        "audio_config": {
          "channel": "mono",
          "codec": "MP3",
          "export_file": true
        },
        "file_name_prefix": "file_name_prefix",
        "live_streaming_config": {
          "rtmp_url": "rtmp://a.rtmp.youtube.com/live2"
        },
        "max_seconds": 60,
        "realtimekit_bucket_config": {
          "enabled": true
        },
        "storage_config": {
          "type": "aws",
          "auth_method": "KEY",
          "bucket": "bucket",
          "host": "host",
          "password": "password",
          "path": "path",
          "port": 0,
          "private_key": "private_key",
          "region": "us-east-1",
          "secret": "secret",
          "username": "username"
        },
        "video_config": {
          "codec": "H264",
          "export_file": true,
          "height": 720,
          "watermark": {
            "position": "left top",
            "size": {
              "height": 1,
              "width": 1
            },
            "url": "https://example.com"
          },
          "width": 1280
        }
      },
      "session_keep_alive_time_in_secs": 60,
      "status": "ACTIVE",
      "summarize_on_end": true,
      "title": "title",
      "transcribe_on_end": true
    }
  ],
  "paging": {
    "end_offset": 30,
    "start_offset": 1,
    "total_count": 30
  },
  "success": true
}
```

## Create a meeting

**post** `/accounts/{account_id}/realtime/kit/{app_id}/meetings`

Create a meeting for the given App ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Body Parameters

- `ai_config: optional object { summarization, transcription }`

  The AI Config allows you to customize the behavior of meeting transcriptions and summaries

  - `summarization: optional object { summary_type, text_format, word_limit }`

    Summary Config

    - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

      Defines the style of the summary, such as general, team meeting, or sales call.

      - `"general"`

      - `"team_meeting"`

      - `"sales_call"`

      - `"client_check_in"`

      - `"interview"`

      - `"daily_standup"`

      - `"one_on_one_meeting"`

      - `"lecture"`

      - `"code_review"`

    - `text_format: optional "plain_text" or "markdown"`

      Determines the text format of the summary, such as plain text or markdown.

      - `"plain_text"`

      - `"markdown"`

    - `word_limit: optional number`

      Sets the maximum number of words in the meeting summary.

  - `transcription: optional object { keywords, language, profanity_filter }`

    Transcription Configurations

    - `keywords: optional array of string`

      Adds specific terms to improve accurate detection during transcription.

    - `language: optional "en-US" or "en-IN" or "de" or 7 more`

      Specifies the language code for transcription to ensure accurate results.

      - `"en-US"`

      - `"en-IN"`

      - `"de"`

      - `"hi"`

      - `"sv"`

      - `"ru"`

      - `"pl"`

      - `"el"`

      - `"fr"`

      - `"nl"`

    - `profanity_filter: optional boolean`

      Control the inclusion of offensive language in transcriptions.

- `live_stream_on_start: optional boolean`

  Specifies if the meeting should start getting livestreamed on start.

- `persist_chat: optional boolean`

  If a meeting is set to persist_chat, meeting chat would remain for a week within the meeting space.

- `record_on_start: optional boolean`

  Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

- `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

  Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

  - `audio_config: optional object { channel, codec, export_file }`

    Object containing configuration regarding the audio that is being recorded.

    - `channel: optional "mono" or "stereo"`

      Audio signal pathway within an audio file that carries a specific sound source.

      - `"mono"`

      - `"stereo"`

    - `codec: optional "MP3" or "AAC"`

      Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

      - `"MP3"`

      - `"AAC"`

    - `export_file: optional boolean`

      Controls whether to export audio file seperately

  - `file_name_prefix: optional string`

    Adds a prefix to the beginning of the file name of the recording.

  - `live_streaming_config: optional object { rtmp_url }`

    - `rtmp_url: optional string`

      RTMP URL to stream to

  - `max_seconds: optional number`

    Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

  - `realtimekit_bucket_config: optional object { enabled }`

    - `enabled: boolean`

      Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

  - `storage_config: optional object { type, access_key, auth_method, 9 more }`

    - `type: "aws" or "azure" or "digitalocean" or 2 more`

      Type of storage media.

      - `"aws"`

      - `"azure"`

      - `"digitalocean"`

      - `"gcs"`

      - `"sftp"`

    - `access_key: optional string`

      Access key of the storage medium. Access key is not required for the `gcs` storage media type.

      Note that this field is not readable by clients, only writeable.

    - `auth_method: optional "KEY" or "PASSWORD"`

      Authentication method used for "sftp" type storage medium

      - `"KEY"`

      - `"PASSWORD"`

    - `bucket: optional string`

      Name of the storage medium's bucket.

    - `host: optional string`

      SSH destination server host for SFTP type storage medium

    - `password: optional string`

      SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

    - `path: optional string`

      Path relative to the bucket root at which the recording will be placed.

    - `port: optional number`

      SSH destination server port for SFTP type storage medium

    - `private_key: optional string`

      Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

    - `region: optional string`

      Region of the storage medium.

    - `secret: optional string`

      Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

    - `username: optional string`

      SSH destination server username for SFTP type storage medium

  - `video_config: optional object { codec, export_file, height, 2 more }`

    - `codec: optional "H264" or "VP8"`

      Codec using which the recording will be encoded.

      - `"H264"`

      - `"VP8"`

    - `export_file: optional boolean`

      Controls whether to export video file seperately

    - `height: optional number`

      Height of the recording video in pixels

    - `watermark: optional object { position, size, url }`

      Watermark to be added to the recording

      - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

        Position of the watermark

        - `"left top"`

        - `"right top"`

        - `"left bottom"`

        - `"right bottom"`

      - `size: optional object { height, width }`

        Size of the watermark

        - `height: optional number`

          Height of the watermark in px

        - `width: optional number`

          Width of the watermark in px

      - `url: optional string`

        URL of the watermark image

    - `width: optional number`

      Width of the recording video in pixels

- `session_keep_alive_time_in_secs: optional number`

  Time in seconds, for which a session remains active, after the last participant has left the meeting.

- `summarize_on_end: optional boolean`

  Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

- `title: optional string`

  Title of the meeting

- `transcribe_on_end: optional boolean`

  Automatically generate transcripts when the meeting ends.

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { id, created_at, updated_at, 10 more }`

  Data returned by the operation

  - `id: string`

    ID of the meeting.

  - `created_at: string`

    Timestamp the object was created at. The time is returned in ISO format.

  - `updated_at: string`

    Timestamp the object was updated at. The time is returned in ISO format.

  - `ai_config: optional object { summarization, transcription }`

    The AI Config allows you to customize the behavior of meeting transcriptions and summaries

    - `summarization: optional object { summary_type, text_format, word_limit }`

      Summary Config

      - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

        Defines the style of the summary, such as general, team meeting, or sales call.

        - `"general"`

        - `"team_meeting"`

        - `"sales_call"`

        - `"client_check_in"`

        - `"interview"`

        - `"daily_standup"`

        - `"one_on_one_meeting"`

        - `"lecture"`

        - `"code_review"`

      - `text_format: optional "plain_text" or "markdown"`

        Determines the text format of the summary, such as plain text or markdown.

        - `"plain_text"`

        - `"markdown"`

      - `word_limit: optional number`

        Sets the maximum number of words in the meeting summary.

    - `transcription: optional object { keywords, language, profanity_filter }`

      Transcription Configurations

      - `keywords: optional array of string`

        Adds specific terms to improve accurate detection during transcription.

      - `language: optional "en-US" or "en-IN" or "de" or 7 more`

        Specifies the language code for transcription to ensure accurate results.

        - `"en-US"`

        - `"en-IN"`

        - `"de"`

        - `"hi"`

        - `"sv"`

        - `"ru"`

        - `"pl"`

        - `"el"`

        - `"fr"`

        - `"nl"`

      - `profanity_filter: optional boolean`

        Control the inclusion of offensive language in transcriptions.

  - `live_stream_on_start: optional boolean`

    Specifies if the meeting should start getting livestreamed on start.

  - `persist_chat: optional boolean`

    Specifies if Chat within a meeting should persist for a week.

  - `record_on_start: optional boolean`

    Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

  - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

    Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

    - `audio_config: optional object { channel, codec, export_file }`

      Object containing configuration regarding the audio that is being recorded.

      - `channel: optional "mono" or "stereo"`

        Audio signal pathway within an audio file that carries a specific sound source.

        - `"mono"`

        - `"stereo"`

      - `codec: optional "MP3" or "AAC"`

        Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

        - `"MP3"`

        - `"AAC"`

      - `export_file: optional boolean`

        Controls whether to export audio file seperately

    - `file_name_prefix: optional string`

      Adds a prefix to the beginning of the file name of the recording.

    - `live_streaming_config: optional object { rtmp_url }`

      - `rtmp_url: optional string`

        RTMP URL to stream to

    - `max_seconds: optional number`

      Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

    - `realtimekit_bucket_config: optional object { enabled }`

      - `enabled: boolean`

        Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

    - `storage_config: optional object { type, access_key, auth_method, 9 more }`

      - `type: "aws" or "azure" or "digitalocean" or 2 more`

        Type of storage media.

        - `"aws"`

        - `"azure"`

        - `"digitalocean"`

        - `"gcs"`

        - `"sftp"`

      - `access_key: optional string`

        Access key of the storage medium. Access key is not required for the `gcs` storage media type.

        Note that this field is not readable by clients, only writeable.

      - `auth_method: optional "KEY" or "PASSWORD"`

        Authentication method used for "sftp" type storage medium

        - `"KEY"`

        - `"PASSWORD"`

      - `bucket: optional string`

        Name of the storage medium's bucket.

      - `host: optional string`

        SSH destination server host for SFTP type storage medium

      - `password: optional string`

        SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

      - `path: optional string`

        Path relative to the bucket root at which the recording will be placed.

      - `port: optional number`

        SSH destination server port for SFTP type storage medium

      - `private_key: optional string`

        Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

      - `region: optional string`

        Region of the storage medium.

      - `secret: optional string`

        Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

      - `username: optional string`

        SSH destination server username for SFTP type storage medium

    - `video_config: optional object { codec, export_file, height, 2 more }`

      - `codec: optional "H264" or "VP8"`

        Codec using which the recording will be encoded.

        - `"H264"`

        - `"VP8"`

      - `export_file: optional boolean`

        Controls whether to export video file seperately

      - `height: optional number`

        Height of the recording video in pixels

      - `watermark: optional object { position, size, url }`

        Watermark to be added to the recording

        - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

          Position of the watermark

          - `"left top"`

          - `"right top"`

          - `"left bottom"`

          - `"right bottom"`

        - `size: optional object { height, width }`

          Size of the watermark

          - `height: optional number`

            Height of the watermark in px

          - `width: optional number`

            Width of the watermark in px

        - `url: optional string`

          URL of the watermark image

      - `width: optional number`

        Width of the recording video in pixels

  - `session_keep_alive_time_in_secs: optional number`

    Time in seconds, for which a session remains active, after the last participant has left the meeting.

  - `status: optional "ACTIVE" or "INACTIVE"`

    Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

    - `"ACTIVE"`

    - `"INACTIVE"`

  - `summarize_on_end: optional boolean`

    Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

  - `title: optional string`

    Title of the meeting.

  - `transcribe_on_end: optional boolean`

    Automatically generate transcripts when the meeting ends.

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{}'
```

#### Response

```json
{
  "success": true,
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "created_at": "2019-12-27T18:11:19.117Z",
    "updated_at": "2019-12-27T18:11:19.117Z",
    "ai_config": {
      "summarization": {
        "summary_type": "general",
        "text_format": "plain_text",
        "word_limit": 150
      },
      "transcription": {
        "keywords": [
          "string"
        ],
        "language": "en-US",
        "profanity_filter": true
      }
    },
    "live_stream_on_start": true,
    "persist_chat": true,
    "record_on_start": true,
    "recording_config": {
      "audio_config": {
        "channel": "mono",
        "codec": "MP3",
        "export_file": true
      },
      "file_name_prefix": "file_name_prefix",
      "live_streaming_config": {
        "rtmp_url": "rtmp://a.rtmp.youtube.com/live2"
      },
      "max_seconds": 60,
      "realtimekit_bucket_config": {
        "enabled": true
      },
      "storage_config": {
        "type": "aws",
        "auth_method": "KEY",
        "bucket": "bucket",
        "host": "host",
        "password": "password",
        "path": "path",
        "port": 0,
        "private_key": "private_key",
        "region": "us-east-1",
        "secret": "secret",
        "username": "username"
      },
      "video_config": {
        "codec": "H264",
        "export_file": true,
        "height": 720,
        "watermark": {
          "position": "left top",
          "size": {
            "height": 1,
            "width": 1
          },
          "url": "https://example.com"
        },
        "width": 1280
      }
    },
    "session_keep_alive_time_in_secs": 60,
    "status": "ACTIVE",
    "summarize_on_end": true,
    "title": "title",
    "transcribe_on_end": true
  }
}
```

## Fetch a meeting for an App

**get** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}`

Returns a meeting details in an App for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Query Parameters

- `name: optional string`

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { id, created_at, updated_at, 10 more }`

  Data returned by the operation

  - `id: string`

    ID of the meeting.

  - `created_at: string`

    Timestamp the object was created at. The time is returned in ISO format.

  - `updated_at: string`

    Timestamp the object was updated at. The time is returned in ISO format.

  - `ai_config: optional object { summarization, transcription }`

    The AI Config allows you to customize the behavior of meeting transcriptions and summaries

    - `summarization: optional object { summary_type, text_format, word_limit }`

      Summary Config

      - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

        Defines the style of the summary, such as general, team meeting, or sales call.

        - `"general"`

        - `"team_meeting"`

        - `"sales_call"`

        - `"client_check_in"`

        - `"interview"`

        - `"daily_standup"`

        - `"one_on_one_meeting"`

        - `"lecture"`

        - `"code_review"`

      - `text_format: optional "plain_text" or "markdown"`

        Determines the text format of the summary, such as plain text or markdown.

        - `"plain_text"`

        - `"markdown"`

      - `word_limit: optional number`

        Sets the maximum number of words in the meeting summary.

    - `transcription: optional object { keywords, language, profanity_filter }`

      Transcription Configurations

      - `keywords: optional array of string`

        Adds specific terms to improve accurate detection during transcription.

      - `language: optional "en-US" or "en-IN" or "de" or 7 more`

        Specifies the language code for transcription to ensure accurate results.

        - `"en-US"`

        - `"en-IN"`

        - `"de"`

        - `"hi"`

        - `"sv"`

        - `"ru"`

        - `"pl"`

        - `"el"`

        - `"fr"`

        - `"nl"`

      - `profanity_filter: optional boolean`

        Control the inclusion of offensive language in transcriptions.

  - `live_stream_on_start: optional boolean`

    Specifies if the meeting should start getting livestreamed on start.

  - `persist_chat: optional boolean`

    Specifies if Chat within a meeting should persist for a week.

  - `record_on_start: optional boolean`

    Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

  - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

    Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

    - `audio_config: optional object { channel, codec, export_file }`

      Object containing configuration regarding the audio that is being recorded.

      - `channel: optional "mono" or "stereo"`

        Audio signal pathway within an audio file that carries a specific sound source.

        - `"mono"`

        - `"stereo"`

      - `codec: optional "MP3" or "AAC"`

        Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

        - `"MP3"`

        - `"AAC"`

      - `export_file: optional boolean`

        Controls whether to export audio file seperately

    - `file_name_prefix: optional string`

      Adds a prefix to the beginning of the file name of the recording.

    - `live_streaming_config: optional object { rtmp_url }`

      - `rtmp_url: optional string`

        RTMP URL to stream to

    - `max_seconds: optional number`

      Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

    - `realtimekit_bucket_config: optional object { enabled }`

      - `enabled: boolean`

        Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

    - `storage_config: optional object { type, access_key, auth_method, 9 more }`

      - `type: "aws" or "azure" or "digitalocean" or 2 more`

        Type of storage media.

        - `"aws"`

        - `"azure"`

        - `"digitalocean"`

        - `"gcs"`

        - `"sftp"`

      - `access_key: optional string`

        Access key of the storage medium. Access key is not required for the `gcs` storage media type.

        Note that this field is not readable by clients, only writeable.

      - `auth_method: optional "KEY" or "PASSWORD"`

        Authentication method used for "sftp" type storage medium

        - `"KEY"`

        - `"PASSWORD"`

      - `bucket: optional string`

        Name of the storage medium's bucket.

      - `host: optional string`

        SSH destination server host for SFTP type storage medium

      - `password: optional string`

        SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

      - `path: optional string`

        Path relative to the bucket root at which the recording will be placed.

      - `port: optional number`

        SSH destination server port for SFTP type storage medium

      - `private_key: optional string`

        Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

      - `region: optional string`

        Region of the storage medium.

      - `secret: optional string`

        Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

      - `username: optional string`

        SSH destination server username for SFTP type storage medium

    - `video_config: optional object { codec, export_file, height, 2 more }`

      - `codec: optional "H264" or "VP8"`

        Codec using which the recording will be encoded.

        - `"H264"`

        - `"VP8"`

      - `export_file: optional boolean`

        Controls whether to export video file seperately

      - `height: optional number`

        Height of the recording video in pixels

      - `watermark: optional object { position, size, url }`

        Watermark to be added to the recording

        - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

          Position of the watermark

          - `"left top"`

          - `"right top"`

          - `"left bottom"`

          - `"right bottom"`

        - `size: optional object { height, width }`

          Size of the watermark

          - `height: optional number`

            Height of the watermark in px

          - `width: optional number`

            Width of the watermark in px

        - `url: optional string`

          URL of the watermark image

      - `width: optional number`

        Width of the recording video in pixels

  - `session_keep_alive_time_in_secs: optional number`

    Time in seconds, for which a session remains active, after the last participant has left the meeting.

  - `status: optional "ACTIVE" or "INACTIVE"`

    Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

    - `"ACTIVE"`

    - `"INACTIVE"`

  - `summarize_on_end: optional boolean`

    Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

  - `title: optional string`

    Title of the meeting.

  - `transcribe_on_end: optional boolean`

    Automatically generate transcripts when the meeting ends.

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "success": true,
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "created_at": "2019-12-27T18:11:19.117Z",
    "updated_at": "2019-12-27T18:11:19.117Z",
    "ai_config": {
      "summarization": {
        "summary_type": "general",
        "text_format": "plain_text",
        "word_limit": 150
      },
      "transcription": {
        "keywords": [
          "string"
        ],
        "language": "en-US",
        "profanity_filter": true
      }
    },
    "live_stream_on_start": true,
    "persist_chat": true,
    "record_on_start": true,
    "recording_config": {
      "audio_config": {
        "channel": "mono",
        "codec": "MP3",
        "export_file": true
      },
      "file_name_prefix": "file_name_prefix",
      "live_streaming_config": {
        "rtmp_url": "rtmp://a.rtmp.youtube.com/live2"
      },
      "max_seconds": 60,
      "realtimekit_bucket_config": {
        "enabled": true
      },
      "storage_config": {
        "type": "aws",
        "auth_method": "KEY",
        "bucket": "bucket",
        "host": "host",
        "password": "password",
        "path": "path",
        "port": 0,
        "private_key": "private_key",
        "region": "us-east-1",
        "secret": "secret",
        "username": "username"
      },
      "video_config": {
        "codec": "H264",
        "export_file": true,
        "height": 720,
        "watermark": {
          "position": "left top",
          "size": {
            "height": 1,
            "width": 1
          },
          "url": "https://example.com"
        },
        "width": 1280
      }
    },
    "session_keep_alive_time_in_secs": 60,
    "status": "ACTIVE",
    "summarize_on_end": true,
    "title": "title",
    "transcribe_on_end": true
  }
}
```

## Update a meeting

**patch** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}`

Updates a meeting in an App for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Body Parameters

- `ai_config: optional object { summarization, transcription }`

  The AI Config allows you to customize the behavior of meeting transcriptions and summaries

  - `summarization: optional object { summary_type, text_format, word_limit }`

    Summary Config

    - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

      Defines the style of the summary, such as general, team meeting, or sales call.

      - `"general"`

      - `"team_meeting"`

      - `"sales_call"`

      - `"client_check_in"`

      - `"interview"`

      - `"daily_standup"`

      - `"one_on_one_meeting"`

      - `"lecture"`

      - `"code_review"`

    - `text_format: optional "plain_text" or "markdown"`

      Determines the text format of the summary, such as plain text or markdown.

      - `"plain_text"`

      - `"markdown"`

    - `word_limit: optional number`

      Sets the maximum number of words in the meeting summary.

  - `transcription: optional object { keywords, language, profanity_filter }`

    Transcription Configurations

    - `keywords: optional array of string`

      Adds specific terms to improve accurate detection during transcription.

    - `language: optional "en-US" or "en-IN" or "de" or 7 more`

      Specifies the language code for transcription to ensure accurate results.

      - `"en-US"`

      - `"en-IN"`

      - `"de"`

      - `"hi"`

      - `"sv"`

      - `"ru"`

      - `"pl"`

      - `"el"`

      - `"fr"`

      - `"nl"`

    - `profanity_filter: optional boolean`

      Control the inclusion of offensive language in transcriptions.

- `live_stream_on_start: optional boolean`

  Specifies if the meeting should start getting livestreamed on start.

- `persist_chat: optional boolean`

  If a meeting is updated to persist_chat, meeting chat would remain for a week within the meeting space.

- `record_on_start: optional boolean`

  Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

- `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

  Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

  - `audio_config: optional object { channel, codec, export_file }`

    Object containing configuration regarding the audio that is being recorded.

    - `channel: optional "mono" or "stereo"`

      Audio signal pathway within an audio file that carries a specific sound source.

      - `"mono"`

      - `"stereo"`

    - `codec: optional "MP3" or "AAC"`

      Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

      - `"MP3"`

      - `"AAC"`

    - `export_file: optional boolean`

      Controls whether to export audio file seperately

  - `file_name_prefix: optional string`

    Adds a prefix to the beginning of the file name of the recording.

  - `live_streaming_config: optional object { rtmp_url }`

    - `rtmp_url: optional string`

      RTMP URL to stream to

  - `max_seconds: optional number`

    Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

  - `realtimekit_bucket_config: optional object { enabled }`

    - `enabled: boolean`

      Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

  - `storage_config: optional object { type, access_key, auth_method, 9 more }`

    - `type: "aws" or "azure" or "digitalocean" or 2 more`

      Type of storage media.

      - `"aws"`

      - `"azure"`

      - `"digitalocean"`

      - `"gcs"`

      - `"sftp"`

    - `access_key: optional string`

      Access key of the storage medium. Access key is not required for the `gcs` storage media type.

      Note that this field is not readable by clients, only writeable.

    - `auth_method: optional "KEY" or "PASSWORD"`

      Authentication method used for "sftp" type storage medium

      - `"KEY"`

      - `"PASSWORD"`

    - `bucket: optional string`

      Name of the storage medium's bucket.

    - `host: optional string`

      SSH destination server host for SFTP type storage medium

    - `password: optional string`

      SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

    - `path: optional string`

      Path relative to the bucket root at which the recording will be placed.

    - `port: optional number`

      SSH destination server port for SFTP type storage medium

    - `private_key: optional string`

      Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

    - `region: optional string`

      Region of the storage medium.

    - `secret: optional string`

      Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

    - `username: optional string`

      SSH destination server username for SFTP type storage medium

  - `video_config: optional object { codec, export_file, height, 2 more }`

    - `codec: optional "H264" or "VP8"`

      Codec using which the recording will be encoded.

      - `"H264"`

      - `"VP8"`

    - `export_file: optional boolean`

      Controls whether to export video file seperately

    - `height: optional number`

      Height of the recording video in pixels

    - `watermark: optional object { position, size, url }`

      Watermark to be added to the recording

      - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

        Position of the watermark

        - `"left top"`

        - `"right top"`

        - `"left bottom"`

        - `"right bottom"`

      - `size: optional object { height, width }`

        Size of the watermark

        - `height: optional number`

          Height of the watermark in px

        - `width: optional number`

          Width of the watermark in px

      - `url: optional string`

        URL of the watermark image

    - `width: optional number`

      Width of the recording video in pixels

- `session_keep_alive_time_in_secs: optional number`

  Time in seconds, for which a session remains active, after the last participant has left the meeting.

- `status: optional "ACTIVE" or "INACTIVE"`

  Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

  - `"ACTIVE"`

  - `"INACTIVE"`

- `summarize_on_end: optional boolean`

  Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

- `title: optional string`

  Title of the meeting

- `transcribe_on_end: optional boolean`

  Automatically generate transcripts when the meeting ends.

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { id, created_at, updated_at, 10 more }`

  Data returned by the operation

  - `id: string`

    ID of the meeting.

  - `created_at: string`

    Timestamp the object was created at. The time is returned in ISO format.

  - `updated_at: string`

    Timestamp the object was updated at. The time is returned in ISO format.

  - `ai_config: optional object { summarization, transcription }`

    The AI Config allows you to customize the behavior of meeting transcriptions and summaries

    - `summarization: optional object { summary_type, text_format, word_limit }`

      Summary Config

      - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

        Defines the style of the summary, such as general, team meeting, or sales call.

        - `"general"`

        - `"team_meeting"`

        - `"sales_call"`

        - `"client_check_in"`

        - `"interview"`

        - `"daily_standup"`

        - `"one_on_one_meeting"`

        - `"lecture"`

        - `"code_review"`

      - `text_format: optional "plain_text" or "markdown"`

        Determines the text format of the summary, such as plain text or markdown.

        - `"plain_text"`

        - `"markdown"`

      - `word_limit: optional number`

        Sets the maximum number of words in the meeting summary.

    - `transcription: optional object { keywords, language, profanity_filter }`

      Transcription Configurations

      - `keywords: optional array of string`

        Adds specific terms to improve accurate detection during transcription.

      - `language: optional "en-US" or "en-IN" or "de" or 7 more`

        Specifies the language code for transcription to ensure accurate results.

        - `"en-US"`

        - `"en-IN"`

        - `"de"`

        - `"hi"`

        - `"sv"`

        - `"ru"`

        - `"pl"`

        - `"el"`

        - `"fr"`

        - `"nl"`

      - `profanity_filter: optional boolean`

        Control the inclusion of offensive language in transcriptions.

  - `live_stream_on_start: optional boolean`

    Specifies if the meeting should start getting livestreamed on start.

  - `persist_chat: optional boolean`

    Specifies if Chat within a meeting should persist for a week.

  - `record_on_start: optional boolean`

    Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

  - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

    Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

    - `audio_config: optional object { channel, codec, export_file }`

      Object containing configuration regarding the audio that is being recorded.

      - `channel: optional "mono" or "stereo"`

        Audio signal pathway within an audio file that carries a specific sound source.

        - `"mono"`

        - `"stereo"`

      - `codec: optional "MP3" or "AAC"`

        Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

        - `"MP3"`

        - `"AAC"`

      - `export_file: optional boolean`

        Controls whether to export audio file seperately

    - `file_name_prefix: optional string`

      Adds a prefix to the beginning of the file name of the recording.

    - `live_streaming_config: optional object { rtmp_url }`

      - `rtmp_url: optional string`

        RTMP URL to stream to

    - `max_seconds: optional number`

      Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

    - `realtimekit_bucket_config: optional object { enabled }`

      - `enabled: boolean`

        Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

    - `storage_config: optional object { type, access_key, auth_method, 9 more }`

      - `type: "aws" or "azure" or "digitalocean" or 2 more`

        Type of storage media.

        - `"aws"`

        - `"azure"`

        - `"digitalocean"`

        - `"gcs"`

        - `"sftp"`

      - `access_key: optional string`

        Access key of the storage medium. Access key is not required for the `gcs` storage media type.

        Note that this field is not readable by clients, only writeable.

      - `auth_method: optional "KEY" or "PASSWORD"`

        Authentication method used for "sftp" type storage medium

        - `"KEY"`

        - `"PASSWORD"`

      - `bucket: optional string`

        Name of the storage medium's bucket.

      - `host: optional string`

        SSH destination server host for SFTP type storage medium

      - `password: optional string`

        SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

      - `path: optional string`

        Path relative to the bucket root at which the recording will be placed.

      - `port: optional number`

        SSH destination server port for SFTP type storage medium

      - `private_key: optional string`

        Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

      - `region: optional string`

        Region of the storage medium.

      - `secret: optional string`

        Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

      - `username: optional string`

        SSH destination server username for SFTP type storage medium

    - `video_config: optional object { codec, export_file, height, 2 more }`

      - `codec: optional "H264" or "VP8"`

        Codec using which the recording will be encoded.

        - `"H264"`

        - `"VP8"`

      - `export_file: optional boolean`

        Controls whether to export video file seperately

      - `height: optional number`

        Height of the recording video in pixels

      - `watermark: optional object { position, size, url }`

        Watermark to be added to the recording

        - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

          Position of the watermark

          - `"left top"`

          - `"right top"`

          - `"left bottom"`

          - `"right bottom"`

        - `size: optional object { height, width }`

          Size of the watermark

          - `height: optional number`

            Height of the watermark in px

          - `width: optional number`

            Width of the watermark in px

        - `url: optional string`

          URL of the watermark image

      - `width: optional number`

        Width of the recording video in pixels

  - `session_keep_alive_time_in_secs: optional number`

    Time in seconds, for which a session remains active, after the last participant has left the meeting.

  - `status: optional "ACTIVE" or "INACTIVE"`

    Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

    - `"ACTIVE"`

    - `"INACTIVE"`

  - `summarize_on_end: optional boolean`

    Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

  - `title: optional string`

    Title of the meeting.

  - `transcribe_on_end: optional boolean`

    Automatically generate transcripts when the meeting ends.

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID \
    -X PATCH \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "status": "INACTIVE"
        }'
```

#### Response

```json
{
  "success": true,
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "created_at": "2019-12-27T18:11:19.117Z",
    "updated_at": "2019-12-27T18:11:19.117Z",
    "ai_config": {
      "summarization": {
        "summary_type": "general",
        "text_format": "plain_text",
        "word_limit": 150
      },
      "transcription": {
        "keywords": [
          "string"
        ],
        "language": "en-US",
        "profanity_filter": true
      }
    },
    "live_stream_on_start": true,
    "persist_chat": true,
    "record_on_start": true,
    "recording_config": {
      "audio_config": {
        "channel": "mono",
        "codec": "MP3",
        "export_file": true
      },
      "file_name_prefix": "file_name_prefix",
      "live_streaming_config": {
        "rtmp_url": "rtmp://a.rtmp.youtube.com/live2"
      },
      "max_seconds": 60,
      "realtimekit_bucket_config": {
        "enabled": true
      },
      "storage_config": {
        "type": "aws",
        "auth_method": "KEY",
        "bucket": "bucket",
        "host": "host",
        "password": "password",
        "path": "path",
        "port": 0,
        "private_key": "private_key",
        "region": "us-east-1",
        "secret": "secret",
        "username": "username"
      },
      "video_config": {
        "codec": "H264",
        "export_file": true,
        "height": 720,
        "watermark": {
          "position": "left top",
          "size": {
            "height": 1,
            "width": 1
          },
          "url": "https://example.com"
        },
        "width": 1280
      }
    },
    "session_keep_alive_time_in_secs": 60,
    "status": "ACTIVE",
    "summarize_on_end": true,
    "title": "title",
    "transcribe_on_end": true
  }
}
```

## Replace a meeting

**put** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}`

Replaces all the details for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Body Parameters

- `ai_config: optional object { summarization, transcription }`

  The AI Config allows you to customize the behavior of meeting transcriptions and summaries

  - `summarization: optional object { summary_type, text_format, word_limit }`

    Summary Config

    - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

      Defines the style of the summary, such as general, team meeting, or sales call.

      - `"general"`

      - `"team_meeting"`

      - `"sales_call"`

      - `"client_check_in"`

      - `"interview"`

      - `"daily_standup"`

      - `"one_on_one_meeting"`

      - `"lecture"`

      - `"code_review"`

    - `text_format: optional "plain_text" or "markdown"`

      Determines the text format of the summary, such as plain text or markdown.

      - `"plain_text"`

      - `"markdown"`

    - `word_limit: optional number`

      Sets the maximum number of words in the meeting summary.

  - `transcription: optional object { keywords, language, profanity_filter }`

    Transcription Configurations

    - `keywords: optional array of string`

      Adds specific terms to improve accurate detection during transcription.

    - `language: optional "en-US" or "en-IN" or "de" or 7 more`

      Specifies the language code for transcription to ensure accurate results.

      - `"en-US"`

      - `"en-IN"`

      - `"de"`

      - `"hi"`

      - `"sv"`

      - `"ru"`

      - `"pl"`

      - `"el"`

      - `"fr"`

      - `"nl"`

    - `profanity_filter: optional boolean`

      Control the inclusion of offensive language in transcriptions.

- `live_stream_on_start: optional boolean`

  Specifies if the meeting should start getting livestreamed on start.

- `persist_chat: optional boolean`

  If a meeting is set to persist_chat, meeting chat would remain for a week within the meeting space.

- `record_on_start: optional boolean`

  Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

- `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

  Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

  - `audio_config: optional object { channel, codec, export_file }`

    Object containing configuration regarding the audio that is being recorded.

    - `channel: optional "mono" or "stereo"`

      Audio signal pathway within an audio file that carries a specific sound source.

      - `"mono"`

      - `"stereo"`

    - `codec: optional "MP3" or "AAC"`

      Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

      - `"MP3"`

      - `"AAC"`

    - `export_file: optional boolean`

      Controls whether to export audio file seperately

  - `file_name_prefix: optional string`

    Adds a prefix to the beginning of the file name of the recording.

  - `live_streaming_config: optional object { rtmp_url }`

    - `rtmp_url: optional string`

      RTMP URL to stream to

  - `max_seconds: optional number`

    Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

  - `realtimekit_bucket_config: optional object { enabled }`

    - `enabled: boolean`

      Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

  - `storage_config: optional object { type, access_key, auth_method, 9 more }`

    - `type: "aws" or "azure" or "digitalocean" or 2 more`

      Type of storage media.

      - `"aws"`

      - `"azure"`

      - `"digitalocean"`

      - `"gcs"`

      - `"sftp"`

    - `access_key: optional string`

      Access key of the storage medium. Access key is not required for the `gcs` storage media type.

      Note that this field is not readable by clients, only writeable.

    - `auth_method: optional "KEY" or "PASSWORD"`

      Authentication method used for "sftp" type storage medium

      - `"KEY"`

      - `"PASSWORD"`

    - `bucket: optional string`

      Name of the storage medium's bucket.

    - `host: optional string`

      SSH destination server host for SFTP type storage medium

    - `password: optional string`

      SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

    - `path: optional string`

      Path relative to the bucket root at which the recording will be placed.

    - `port: optional number`

      SSH destination server port for SFTP type storage medium

    - `private_key: optional string`

      Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

    - `region: optional string`

      Region of the storage medium.

    - `secret: optional string`

      Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

    - `username: optional string`

      SSH destination server username for SFTP type storage medium

  - `video_config: optional object { codec, export_file, height, 2 more }`

    - `codec: optional "H264" or "VP8"`

      Codec using which the recording will be encoded.

      - `"H264"`

      - `"VP8"`

    - `export_file: optional boolean`

      Controls whether to export video file seperately

    - `height: optional number`

      Height of the recording video in pixels

    - `watermark: optional object { position, size, url }`

      Watermark to be added to the recording

      - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

        Position of the watermark

        - `"left top"`

        - `"right top"`

        - `"left bottom"`

        - `"right bottom"`

      - `size: optional object { height, width }`

        Size of the watermark

        - `height: optional number`

          Height of the watermark in px

        - `width: optional number`

          Width of the watermark in px

      - `url: optional string`

        URL of the watermark image

    - `width: optional number`

      Width of the recording video in pixels

- `session_keep_alive_time_in_secs: optional number`

  Time in seconds, for which a session remains active, after the last participant has left the meeting.

- `summarize_on_end: optional boolean`

  Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

- `title: optional string`

  Title of the meeting

- `transcribe_on_end: optional boolean`

  Automatically generate transcripts when the meeting ends.

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { id, created_at, updated_at, 10 more }`

  Data returned by the operation

  - `id: string`

    ID of the meeting.

  - `created_at: string`

    Timestamp the object was created at. The time is returned in ISO format.

  - `updated_at: string`

    Timestamp the object was updated at. The time is returned in ISO format.

  - `ai_config: optional object { summarization, transcription }`

    The AI Config allows you to customize the behavior of meeting transcriptions and summaries

    - `summarization: optional object { summary_type, text_format, word_limit }`

      Summary Config

      - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

        Defines the style of the summary, such as general, team meeting, or sales call.

        - `"general"`

        - `"team_meeting"`

        - `"sales_call"`

        - `"client_check_in"`

        - `"interview"`

        - `"daily_standup"`

        - `"one_on_one_meeting"`

        - `"lecture"`

        - `"code_review"`

      - `text_format: optional "plain_text" or "markdown"`

        Determines the text format of the summary, such as plain text or markdown.

        - `"plain_text"`

        - `"markdown"`

      - `word_limit: optional number`

        Sets the maximum number of words in the meeting summary.

    - `transcription: optional object { keywords, language, profanity_filter }`

      Transcription Configurations

      - `keywords: optional array of string`

        Adds specific terms to improve accurate detection during transcription.

      - `language: optional "en-US" or "en-IN" or "de" or 7 more`

        Specifies the language code for transcription to ensure accurate results.

        - `"en-US"`

        - `"en-IN"`

        - `"de"`

        - `"hi"`

        - `"sv"`

        - `"ru"`

        - `"pl"`

        - `"el"`

        - `"fr"`

        - `"nl"`

      - `profanity_filter: optional boolean`

        Control the inclusion of offensive language in transcriptions.

  - `live_stream_on_start: optional boolean`

    Specifies if the meeting should start getting livestreamed on start.

  - `persist_chat: optional boolean`

    Specifies if Chat within a meeting should persist for a week.

  - `record_on_start: optional boolean`

    Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

  - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

    Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

    - `audio_config: optional object { channel, codec, export_file }`

      Object containing configuration regarding the audio that is being recorded.

      - `channel: optional "mono" or "stereo"`

        Audio signal pathway within an audio file that carries a specific sound source.

        - `"mono"`

        - `"stereo"`

      - `codec: optional "MP3" or "AAC"`

        Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

        - `"MP3"`

        - `"AAC"`

      - `export_file: optional boolean`

        Controls whether to export audio file seperately

    - `file_name_prefix: optional string`

      Adds a prefix to the beginning of the file name of the recording.

    - `live_streaming_config: optional object { rtmp_url }`

      - `rtmp_url: optional string`

        RTMP URL to stream to

    - `max_seconds: optional number`

      Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

    - `realtimekit_bucket_config: optional object { enabled }`

      - `enabled: boolean`

        Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

    - `storage_config: optional object { type, access_key, auth_method, 9 more }`

      - `type: "aws" or "azure" or "digitalocean" or 2 more`

        Type of storage media.

        - `"aws"`

        - `"azure"`

        - `"digitalocean"`

        - `"gcs"`

        - `"sftp"`

      - `access_key: optional string`

        Access key of the storage medium. Access key is not required for the `gcs` storage media type.

        Note that this field is not readable by clients, only writeable.

      - `auth_method: optional "KEY" or "PASSWORD"`

        Authentication method used for "sftp" type storage medium

        - `"KEY"`

        - `"PASSWORD"`

      - `bucket: optional string`

        Name of the storage medium's bucket.

      - `host: optional string`

        SSH destination server host for SFTP type storage medium

      - `password: optional string`

        SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

      - `path: optional string`

        Path relative to the bucket root at which the recording will be placed.

      - `port: optional number`

        SSH destination server port for SFTP type storage medium

      - `private_key: optional string`

        Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

      - `region: optional string`

        Region of the storage medium.

      - `secret: optional string`

        Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

      - `username: optional string`

        SSH destination server username for SFTP type storage medium

    - `video_config: optional object { codec, export_file, height, 2 more }`

      - `codec: optional "H264" or "VP8"`

        Codec using which the recording will be encoded.

        - `"H264"`

        - `"VP8"`

      - `export_file: optional boolean`

        Controls whether to export video file seperately

      - `height: optional number`

        Height of the recording video in pixels

      - `watermark: optional object { position, size, url }`

        Watermark to be added to the recording

        - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

          Position of the watermark

          - `"left top"`

          - `"right top"`

          - `"left bottom"`

          - `"right bottom"`

        - `size: optional object { height, width }`

          Size of the watermark

          - `height: optional number`

            Height of the watermark in px

          - `width: optional number`

            Width of the watermark in px

        - `url: optional string`

          URL of the watermark image

      - `width: optional number`

        Width of the recording video in pixels

  - `session_keep_alive_time_in_secs: optional number`

    Time in seconds, for which a session remains active, after the last participant has left the meeting.

  - `status: optional "ACTIVE" or "INACTIVE"`

    Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

    - `"ACTIVE"`

    - `"INACTIVE"`

  - `summarize_on_end: optional boolean`

    Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

  - `title: optional string`

    Title of the meeting.

  - `transcribe_on_end: optional boolean`

    Automatically generate transcripts when the meeting ends.

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID \
    -X PUT \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{}'
```

#### Response

```json
{
  "success": true,
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "created_at": "2019-12-27T18:11:19.117Z",
    "updated_at": "2019-12-27T18:11:19.117Z",
    "ai_config": {
      "summarization": {
        "summary_type": "general",
        "text_format": "plain_text",
        "word_limit": 150
      },
      "transcription": {
        "keywords": [
          "string"
        ],
        "language": "en-US",
        "profanity_filter": true
      }
    },
    "live_stream_on_start": true,
    "persist_chat": true,
    "record_on_start": true,
    "recording_config": {
      "audio_config": {
        "channel": "mono",
        "codec": "MP3",
        "export_file": true
      },
      "file_name_prefix": "file_name_prefix",
      "live_streaming_config": {
        "rtmp_url": "rtmp://a.rtmp.youtube.com/live2"
      },
      "max_seconds": 60,
      "realtimekit_bucket_config": {
        "enabled": true
      },
      "storage_config": {
        "type": "aws",
        "auth_method": "KEY",
        "bucket": "bucket",
        "host": "host",
        "password": "password",
        "path": "path",
        "port": 0,
        "private_key": "private_key",
        "region": "us-east-1",
        "secret": "secret",
        "username": "username"
      },
      "video_config": {
        "codec": "H264",
        "export_file": true,
        "height": 720,
        "watermark": {
          "position": "left top",
          "size": {
            "height": 1,
            "width": 1
          },
          "url": "https://example.com"
        },
        "width": 1280
      }
    },
    "session_keep_alive_time_in_secs": 60,
    "status": "ACTIVE",
    "summarize_on_end": true,
    "title": "title",
    "transcribe_on_end": true
  }
}
```

## Fetch all participants of a meeting

**get** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/participants`

Returns all participants detail for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Query Parameters

- `page_no: optional number`

  The page number from which you want your page search results to be displayed.

- `per_page: optional number`

  Number of results per page

### Returns

- `data: array of object { id, created_at, custom_participant_id, 4 more }`

  - `id: string`

    ID of the participant.

  - `created_at: string`

    When this object was created. The time is returned in ISO format.

  - `custom_participant_id: string`

    A unique participant ID generated by the client.

  - `preset_name: string`

    Preset applied to the participant.

  - `updated_at: string`

    When this object was updated. The time is returned in ISO format.

  - `name: optional string`

    Name of the participant.

  - `picture: optional string`

    URL to a picture of the participant.

- `paging: object { end_offset, start_offset, total_count }`

  - `end_offset: number`

  - `start_offset: number`

  - `total_count: number`

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/participants \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": [
    {
      "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
      "created_at": "2019-12-27T18:11:19.117Z",
      "custom_participant_id": "custom_participant_id",
      "preset_name": "preset_name",
      "updated_at": "2019-12-27T18:11:19.117Z",
      "name": "name",
      "picture": "https://example.com"
    }
  ],
  "paging": {
    "end_offset": 30,
    "start_offset": 1,
    "total_count": 30
  },
  "success": true
}
```

## Add a participant

**post** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/participants`

Adds a participant to the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Body Parameters

- `custom_participant_id: string`

  A unique participant ID. You must specify a unique ID for the participant, for example, UUID, email address, and so on.

- `preset_name: string`

  Name of the preset to apply to this participant.

- `name: optional string`

  (Optional) Name of the participant.

- `picture: optional string`

  (Optional) A URL to a picture to be used for the participant.

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { id, token, created_at, 5 more }`

  Represents a participant.

  - `id: string`

    ID of the participant.

  - `token: string`

    The participant's auth token that can be used for joining a meeting from the client side.

  - `created_at: string`

    When this object was created. The time is returned in ISO format.

  - `custom_participant_id: string`

    A unique participant ID generated by the client.

  - `preset_name: string`

    Preset applied to the participant.

  - `updated_at: string`

    When this object was updated. The time is returned in ISO format.

  - `name: optional string`

    Name of the participant.

  - `picture: optional string`

    URL to a picture of the participant.

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/participants \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "custom_participant_id": "custom_participant_id",
          "preset_name": "preset_name",
          "name": "Mary Sue",
          "picture": "https://i.imgur.com/test.jpg"
        }'
```

#### Response

```json
{
  "success": true,
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "token": "token",
    "created_at": "2019-12-27T18:11:19.117Z",
    "custom_participant_id": "custom_participant_id",
    "preset_name": "preset_name",
    "updated_at": "2019-12-27T18:11:19.117Z",
    "name": "name",
    "picture": "https://example.com"
  }
}
```

## Fetch a participant's detail

**get** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/participants/{participant_id}`

Returns a participant details for the given meeting and participant ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

- `participant_id: string`

### Returns

- `data: object { id, created_at, custom_participant_id, 4 more }`

  Data returned by the operation

  - `id: string`

    ID of the participant.

  - `created_at: string`

    When this object was created. The time is returned in ISO format.

  - `custom_participant_id: string`

    A unique participant ID generated by the client.

  - `preset_name: string`

    Preset applied to the participant.

  - `updated_at: string`

    When this object was updated. The time is returned in ISO format.

  - `name: optional string`

    Name of the participant.

  - `picture: optional string`

    URL to a picture of the participant.

- `success: boolean`

  Success status of the operation

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/participants/$PARTICIPANT_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "created_at": "2019-12-27T18:11:19.117Z",
    "custom_participant_id": "custom_participant_id",
    "preset_name": "preset_name",
    "updated_at": "2019-12-27T18:11:19.117Z",
    "name": "name",
    "picture": "https://example.com"
  },
  "success": true
}
```

## Edit a participant's detail

**patch** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/participants/{participant_id}`

Updates a participant's details for the given meeting and participant ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

- `participant_id: string`

### Body Parameters

- `name: optional string`

  (Optional) Name of the participant.

- `picture: optional string`

  (Optional) A URL to a picture to be used for the participant.

- `preset_name: optional string`

  (Optional) Name of the preset to apply to this participant.

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { id, token, created_at, 5 more }`

  Represents a participant.

  - `id: string`

    ID of the participant.

  - `token: string`

    The participant's auth token that can be used for joining a meeting from the client side.

  - `created_at: string`

    When this object was created. The time is returned in ISO format.

  - `custom_participant_id: string`

    A unique participant ID generated by the client.

  - `preset_name: string`

    Preset applied to the participant.

  - `updated_at: string`

    When this object was updated. The time is returned in ISO format.

  - `name: optional string`

    Name of the participant.

  - `picture: optional string`

    URL to a picture of the participant.

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/participants/$PARTICIPANT_ID \
    -X PATCH \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "name": "Jane Doe"
        }'
```

#### Response

```json
{
  "success": true,
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "token": "token",
    "created_at": "2019-12-27T18:11:19.117Z",
    "custom_participant_id": "custom_participant_id",
    "preset_name": "preset_name",
    "updated_at": "2019-12-27T18:11:19.117Z",
    "name": "name",
    "picture": "https://example.com"
  }
}
```

## Delete a participant

**delete** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/participants/{participant_id}`

Deletes a participant for the given meeting and participant ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

- `participant_id: string`

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { created_at, custom_participant_id, preset_id, updated_at }`

  Data returned by the operation

  - `created_at: string`

    Timestamp this object was created at. The time is returned in ISO format.

  - `custom_participant_id: string`

    A unique participant ID generated by the client.

  - `preset_id: string`

    ID of the preset applied to this participant.

  - `updated_at: string`

    Timestamp this object was updated at. The time is returned in ISO format.

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/participants/$PARTICIPANT_ID \
    -X DELETE \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "success": true,
  "data": {
    "created_at": "2019-12-27T18:11:19.117Z",
    "custom_participant_id": "custom_participant_id",
    "preset_id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "updated_at": "2019-12-27T18:11:19.117Z"
  }
}
```

## Refresh participant's authentication token

**post** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/participants/{participant_id}/token`

Regenerates participant's authentication token for the given meeting and participant ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

- `participant_id: string`

### Returns

- `data: object { token }`

  Data returned by the operation

  - `token: string`

    Regenerated participant's authentication token.

- `success: boolean`

  Success status of the operation

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/participants/$PARTICIPANT_ID/token \
    -X POST \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "token": "token"
  },
  "success": true
}
```

## Domain Types

### Meeting Get Response

- `MeetingGetResponse object { data, paging, success }`

  - `data: array of object { id, created_at, updated_at, 9 more }`

    - `id: string`

      ID of the meeting.

    - `created_at: string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `updated_at: string`

      Timestamp the object was updated at. The time is returned in ISO format.

    - `live_stream_on_start: optional boolean`

      Specifies if the meeting should start getting livestreamed on start.

    - `persist_chat: optional boolean`

      Specifies if Chat within a meeting should persist for a week.

    - `record_on_start: optional boolean`

      Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

    - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

      Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

      - `audio_config: optional object { channel, codec, export_file }`

        Object containing configuration regarding the audio that is being recorded.

        - `channel: optional "mono" or "stereo"`

          Audio signal pathway within an audio file that carries a specific sound source.

          - `"mono"`

          - `"stereo"`

        - `codec: optional "MP3" or "AAC"`

          Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

          - `"MP3"`

          - `"AAC"`

        - `export_file: optional boolean`

          Controls whether to export audio file seperately

      - `file_name_prefix: optional string`

        Adds a prefix to the beginning of the file name of the recording.

      - `live_streaming_config: optional object { rtmp_url }`

        - `rtmp_url: optional string`

          RTMP URL to stream to

      - `max_seconds: optional number`

        Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

      - `realtimekit_bucket_config: optional object { enabled }`

        - `enabled: boolean`

          Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

      - `storage_config: optional object { type, access_key, auth_method, 9 more }`

        - `type: "aws" or "azure" or "digitalocean" or 2 more`

          Type of storage media.

          - `"aws"`

          - `"azure"`

          - `"digitalocean"`

          - `"gcs"`

          - `"sftp"`

        - `access_key: optional string`

          Access key of the storage medium. Access key is not required for the `gcs` storage media type.

          Note that this field is not readable by clients, only writeable.

        - `auth_method: optional "KEY" or "PASSWORD"`

          Authentication method used for "sftp" type storage medium

          - `"KEY"`

          - `"PASSWORD"`

        - `bucket: optional string`

          Name of the storage medium's bucket.

        - `host: optional string`

          SSH destination server host for SFTP type storage medium

        - `password: optional string`

          SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

        - `path: optional string`

          Path relative to the bucket root at which the recording will be placed.

        - `port: optional number`

          SSH destination server port for SFTP type storage medium

        - `private_key: optional string`

          Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

        - `region: optional string`

          Region of the storage medium.

        - `secret: optional string`

          Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

        - `username: optional string`

          SSH destination server username for SFTP type storage medium

      - `video_config: optional object { codec, export_file, height, 2 more }`

        - `codec: optional "H264" or "VP8"`

          Codec using which the recording will be encoded.

          - `"H264"`

          - `"VP8"`

        - `export_file: optional boolean`

          Controls whether to export video file seperately

        - `height: optional number`

          Height of the recording video in pixels

        - `watermark: optional object { position, size, url }`

          Watermark to be added to the recording

          - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

            Position of the watermark

            - `"left top"`

            - `"right top"`

            - `"left bottom"`

            - `"right bottom"`

          - `size: optional object { height, width }`

            Size of the watermark

            - `height: optional number`

              Height of the watermark in px

            - `width: optional number`

              Width of the watermark in px

          - `url: optional string`

            URL of the watermark image

        - `width: optional number`

          Width of the recording video in pixels

    - `session_keep_alive_time_in_secs: optional number`

      Time in seconds, for which a session remains active, after the last participant has left the meeting.

    - `status: optional "ACTIVE" or "INACTIVE"`

      Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

      - `"ACTIVE"`

      - `"INACTIVE"`

    - `summarize_on_end: optional boolean`

      Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

    - `title: optional string`

      Title of the meeting.

    - `transcribe_on_end: optional boolean`

      Automatically generate transcripts when the meeting ends.

  - `paging: object { end_offset, start_offset, total_count }`

    - `end_offset: number`

    - `start_offset: number`

    - `total_count: number`

  - `success: boolean`

### Meeting Create Response

- `MeetingCreateResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { id, created_at, updated_at, 10 more }`

    Data returned by the operation

    - `id: string`

      ID of the meeting.

    - `created_at: string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `updated_at: string`

      Timestamp the object was updated at. The time is returned in ISO format.

    - `ai_config: optional object { summarization, transcription }`

      The AI Config allows you to customize the behavior of meeting transcriptions and summaries

      - `summarization: optional object { summary_type, text_format, word_limit }`

        Summary Config

        - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

          Defines the style of the summary, such as general, team meeting, or sales call.

          - `"general"`

          - `"team_meeting"`

          - `"sales_call"`

          - `"client_check_in"`

          - `"interview"`

          - `"daily_standup"`

          - `"one_on_one_meeting"`

          - `"lecture"`

          - `"code_review"`

        - `text_format: optional "plain_text" or "markdown"`

          Determines the text format of the summary, such as plain text or markdown.

          - `"plain_text"`

          - `"markdown"`

        - `word_limit: optional number`

          Sets the maximum number of words in the meeting summary.

      - `transcription: optional object { keywords, language, profanity_filter }`

        Transcription Configurations

        - `keywords: optional array of string`

          Adds specific terms to improve accurate detection during transcription.

        - `language: optional "en-US" or "en-IN" or "de" or 7 more`

          Specifies the language code for transcription to ensure accurate results.

          - `"en-US"`

          - `"en-IN"`

          - `"de"`

          - `"hi"`

          - `"sv"`

          - `"ru"`

          - `"pl"`

          - `"el"`

          - `"fr"`

          - `"nl"`

        - `profanity_filter: optional boolean`

          Control the inclusion of offensive language in transcriptions.

    - `live_stream_on_start: optional boolean`

      Specifies if the meeting should start getting livestreamed on start.

    - `persist_chat: optional boolean`

      Specifies if Chat within a meeting should persist for a week.

    - `record_on_start: optional boolean`

      Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

    - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

      Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

      - `audio_config: optional object { channel, codec, export_file }`

        Object containing configuration regarding the audio that is being recorded.

        - `channel: optional "mono" or "stereo"`

          Audio signal pathway within an audio file that carries a specific sound source.

          - `"mono"`

          - `"stereo"`

        - `codec: optional "MP3" or "AAC"`

          Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

          - `"MP3"`

          - `"AAC"`

        - `export_file: optional boolean`

          Controls whether to export audio file seperately

      - `file_name_prefix: optional string`

        Adds a prefix to the beginning of the file name of the recording.

      - `live_streaming_config: optional object { rtmp_url }`

        - `rtmp_url: optional string`

          RTMP URL to stream to

      - `max_seconds: optional number`

        Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

      - `realtimekit_bucket_config: optional object { enabled }`

        - `enabled: boolean`

          Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

      - `storage_config: optional object { type, access_key, auth_method, 9 more }`

        - `type: "aws" or "azure" or "digitalocean" or 2 more`

          Type of storage media.

          - `"aws"`

          - `"azure"`

          - `"digitalocean"`

          - `"gcs"`

          - `"sftp"`

        - `access_key: optional string`

          Access key of the storage medium. Access key is not required for the `gcs` storage media type.

          Note that this field is not readable by clients, only writeable.

        - `auth_method: optional "KEY" or "PASSWORD"`

          Authentication method used for "sftp" type storage medium

          - `"KEY"`

          - `"PASSWORD"`

        - `bucket: optional string`

          Name of the storage medium's bucket.

        - `host: optional string`

          SSH destination server host for SFTP type storage medium

        - `password: optional string`

          SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

        - `path: optional string`

          Path relative to the bucket root at which the recording will be placed.

        - `port: optional number`

          SSH destination server port for SFTP type storage medium

        - `private_key: optional string`

          Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

        - `region: optional string`

          Region of the storage medium.

        - `secret: optional string`

          Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

        - `username: optional string`

          SSH destination server username for SFTP type storage medium

      - `video_config: optional object { codec, export_file, height, 2 more }`

        - `codec: optional "H264" or "VP8"`

          Codec using which the recording will be encoded.

          - `"H264"`

          - `"VP8"`

        - `export_file: optional boolean`

          Controls whether to export video file seperately

        - `height: optional number`

          Height of the recording video in pixels

        - `watermark: optional object { position, size, url }`

          Watermark to be added to the recording

          - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

            Position of the watermark

            - `"left top"`

            - `"right top"`

            - `"left bottom"`

            - `"right bottom"`

          - `size: optional object { height, width }`

            Size of the watermark

            - `height: optional number`

              Height of the watermark in px

            - `width: optional number`

              Width of the watermark in px

          - `url: optional string`

            URL of the watermark image

        - `width: optional number`

          Width of the recording video in pixels

    - `session_keep_alive_time_in_secs: optional number`

      Time in seconds, for which a session remains active, after the last participant has left the meeting.

    - `status: optional "ACTIVE" or "INACTIVE"`

      Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

      - `"ACTIVE"`

      - `"INACTIVE"`

    - `summarize_on_end: optional boolean`

      Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

    - `title: optional string`

      Title of the meeting.

    - `transcribe_on_end: optional boolean`

      Automatically generate transcripts when the meeting ends.

### Meeting Get Meeting By ID Response

- `MeetingGetMeetingByIDResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { id, created_at, updated_at, 10 more }`

    Data returned by the operation

    - `id: string`

      ID of the meeting.

    - `created_at: string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `updated_at: string`

      Timestamp the object was updated at. The time is returned in ISO format.

    - `ai_config: optional object { summarization, transcription }`

      The AI Config allows you to customize the behavior of meeting transcriptions and summaries

      - `summarization: optional object { summary_type, text_format, word_limit }`

        Summary Config

        - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

          Defines the style of the summary, such as general, team meeting, or sales call.

          - `"general"`

          - `"team_meeting"`

          - `"sales_call"`

          - `"client_check_in"`

          - `"interview"`

          - `"daily_standup"`

          - `"one_on_one_meeting"`

          - `"lecture"`

          - `"code_review"`

        - `text_format: optional "plain_text" or "markdown"`

          Determines the text format of the summary, such as plain text or markdown.

          - `"plain_text"`

          - `"markdown"`

        - `word_limit: optional number`

          Sets the maximum number of words in the meeting summary.

      - `transcription: optional object { keywords, language, profanity_filter }`

        Transcription Configurations

        - `keywords: optional array of string`

          Adds specific terms to improve accurate detection during transcription.

        - `language: optional "en-US" or "en-IN" or "de" or 7 more`

          Specifies the language code for transcription to ensure accurate results.

          - `"en-US"`

          - `"en-IN"`

          - `"de"`

          - `"hi"`

          - `"sv"`

          - `"ru"`

          - `"pl"`

          - `"el"`

          - `"fr"`

          - `"nl"`

        - `profanity_filter: optional boolean`

          Control the inclusion of offensive language in transcriptions.

    - `live_stream_on_start: optional boolean`

      Specifies if the meeting should start getting livestreamed on start.

    - `persist_chat: optional boolean`

      Specifies if Chat within a meeting should persist for a week.

    - `record_on_start: optional boolean`

      Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

    - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

      Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

      - `audio_config: optional object { channel, codec, export_file }`

        Object containing configuration regarding the audio that is being recorded.

        - `channel: optional "mono" or "stereo"`

          Audio signal pathway within an audio file that carries a specific sound source.

          - `"mono"`

          - `"stereo"`

        - `codec: optional "MP3" or "AAC"`

          Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

          - `"MP3"`

          - `"AAC"`

        - `export_file: optional boolean`

          Controls whether to export audio file seperately

      - `file_name_prefix: optional string`

        Adds a prefix to the beginning of the file name of the recording.

      - `live_streaming_config: optional object { rtmp_url }`

        - `rtmp_url: optional string`

          RTMP URL to stream to

      - `max_seconds: optional number`

        Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

      - `realtimekit_bucket_config: optional object { enabled }`

        - `enabled: boolean`

          Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

      - `storage_config: optional object { type, access_key, auth_method, 9 more }`

        - `type: "aws" or "azure" or "digitalocean" or 2 more`

          Type of storage media.

          - `"aws"`

          - `"azure"`

          - `"digitalocean"`

          - `"gcs"`

          - `"sftp"`

        - `access_key: optional string`

          Access key of the storage medium. Access key is not required for the `gcs` storage media type.

          Note that this field is not readable by clients, only writeable.

        - `auth_method: optional "KEY" or "PASSWORD"`

          Authentication method used for "sftp" type storage medium

          - `"KEY"`

          - `"PASSWORD"`

        - `bucket: optional string`

          Name of the storage medium's bucket.

        - `host: optional string`

          SSH destination server host for SFTP type storage medium

        - `password: optional string`

          SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

        - `path: optional string`

          Path relative to the bucket root at which the recording will be placed.

        - `port: optional number`

          SSH destination server port for SFTP type storage medium

        - `private_key: optional string`

          Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

        - `region: optional string`

          Region of the storage medium.

        - `secret: optional string`

          Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

        - `username: optional string`

          SSH destination server username for SFTP type storage medium

      - `video_config: optional object { codec, export_file, height, 2 more }`

        - `codec: optional "H264" or "VP8"`

          Codec using which the recording will be encoded.

          - `"H264"`

          - `"VP8"`

        - `export_file: optional boolean`

          Controls whether to export video file seperately

        - `height: optional number`

          Height of the recording video in pixels

        - `watermark: optional object { position, size, url }`

          Watermark to be added to the recording

          - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

            Position of the watermark

            - `"left top"`

            - `"right top"`

            - `"left bottom"`

            - `"right bottom"`

          - `size: optional object { height, width }`

            Size of the watermark

            - `height: optional number`

              Height of the watermark in px

            - `width: optional number`

              Width of the watermark in px

          - `url: optional string`

            URL of the watermark image

        - `width: optional number`

          Width of the recording video in pixels

    - `session_keep_alive_time_in_secs: optional number`

      Time in seconds, for which a session remains active, after the last participant has left the meeting.

    - `status: optional "ACTIVE" or "INACTIVE"`

      Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

      - `"ACTIVE"`

      - `"INACTIVE"`

    - `summarize_on_end: optional boolean`

      Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

    - `title: optional string`

      Title of the meeting.

    - `transcribe_on_end: optional boolean`

      Automatically generate transcripts when the meeting ends.

### Meeting Update Meeting By ID Response

- `MeetingUpdateMeetingByIDResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { id, created_at, updated_at, 10 more }`

    Data returned by the operation

    - `id: string`

      ID of the meeting.

    - `created_at: string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `updated_at: string`

      Timestamp the object was updated at. The time is returned in ISO format.

    - `ai_config: optional object { summarization, transcription }`

      The AI Config allows you to customize the behavior of meeting transcriptions and summaries

      - `summarization: optional object { summary_type, text_format, word_limit }`

        Summary Config

        - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

          Defines the style of the summary, such as general, team meeting, or sales call.

          - `"general"`

          - `"team_meeting"`

          - `"sales_call"`

          - `"client_check_in"`

          - `"interview"`

          - `"daily_standup"`

          - `"one_on_one_meeting"`

          - `"lecture"`

          - `"code_review"`

        - `text_format: optional "plain_text" or "markdown"`

          Determines the text format of the summary, such as plain text or markdown.

          - `"plain_text"`

          - `"markdown"`

        - `word_limit: optional number`

          Sets the maximum number of words in the meeting summary.

      - `transcription: optional object { keywords, language, profanity_filter }`

        Transcription Configurations

        - `keywords: optional array of string`

          Adds specific terms to improve accurate detection during transcription.

        - `language: optional "en-US" or "en-IN" or "de" or 7 more`

          Specifies the language code for transcription to ensure accurate results.

          - `"en-US"`

          - `"en-IN"`

          - `"de"`

          - `"hi"`

          - `"sv"`

          - `"ru"`

          - `"pl"`

          - `"el"`

          - `"fr"`

          - `"nl"`

        - `profanity_filter: optional boolean`

          Control the inclusion of offensive language in transcriptions.

    - `live_stream_on_start: optional boolean`

      Specifies if the meeting should start getting livestreamed on start.

    - `persist_chat: optional boolean`

      Specifies if Chat within a meeting should persist for a week.

    - `record_on_start: optional boolean`

      Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

    - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

      Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

      - `audio_config: optional object { channel, codec, export_file }`

        Object containing configuration regarding the audio that is being recorded.

        - `channel: optional "mono" or "stereo"`

          Audio signal pathway within an audio file that carries a specific sound source.

          - `"mono"`

          - `"stereo"`

        - `codec: optional "MP3" or "AAC"`

          Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

          - `"MP3"`

          - `"AAC"`

        - `export_file: optional boolean`

          Controls whether to export audio file seperately

      - `file_name_prefix: optional string`

        Adds a prefix to the beginning of the file name of the recording.

      - `live_streaming_config: optional object { rtmp_url }`

        - `rtmp_url: optional string`

          RTMP URL to stream to

      - `max_seconds: optional number`

        Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

      - `realtimekit_bucket_config: optional object { enabled }`

        - `enabled: boolean`

          Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

      - `storage_config: optional object { type, access_key, auth_method, 9 more }`

        - `type: "aws" or "azure" or "digitalocean" or 2 more`

          Type of storage media.

          - `"aws"`

          - `"azure"`

          - `"digitalocean"`

          - `"gcs"`

          - `"sftp"`

        - `access_key: optional string`

          Access key of the storage medium. Access key is not required for the `gcs` storage media type.

          Note that this field is not readable by clients, only writeable.

        - `auth_method: optional "KEY" or "PASSWORD"`

          Authentication method used for "sftp" type storage medium

          - `"KEY"`

          - `"PASSWORD"`

        - `bucket: optional string`

          Name of the storage medium's bucket.

        - `host: optional string`

          SSH destination server host for SFTP type storage medium

        - `password: optional string`

          SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

        - `path: optional string`

          Path relative to the bucket root at which the recording will be placed.

        - `port: optional number`

          SSH destination server port for SFTP type storage medium

        - `private_key: optional string`

          Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

        - `region: optional string`

          Region of the storage medium.

        - `secret: optional string`

          Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

        - `username: optional string`

          SSH destination server username for SFTP type storage medium

      - `video_config: optional object { codec, export_file, height, 2 more }`

        - `codec: optional "H264" or "VP8"`

          Codec using which the recording will be encoded.

          - `"H264"`

          - `"VP8"`

        - `export_file: optional boolean`

          Controls whether to export video file seperately

        - `height: optional number`

          Height of the recording video in pixels

        - `watermark: optional object { position, size, url }`

          Watermark to be added to the recording

          - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

            Position of the watermark

            - `"left top"`

            - `"right top"`

            - `"left bottom"`

            - `"right bottom"`

          - `size: optional object { height, width }`

            Size of the watermark

            - `height: optional number`

              Height of the watermark in px

            - `width: optional number`

              Width of the watermark in px

          - `url: optional string`

            URL of the watermark image

        - `width: optional number`

          Width of the recording video in pixels

    - `session_keep_alive_time_in_secs: optional number`

      Time in seconds, for which a session remains active, after the last participant has left the meeting.

    - `status: optional "ACTIVE" or "INACTIVE"`

      Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

      - `"ACTIVE"`

      - `"INACTIVE"`

    - `summarize_on_end: optional boolean`

      Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

    - `title: optional string`

      Title of the meeting.

    - `transcribe_on_end: optional boolean`

      Automatically generate transcripts when the meeting ends.

### Meeting Replace Meeting By ID Response

- `MeetingReplaceMeetingByIDResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { id, created_at, updated_at, 10 more }`

    Data returned by the operation

    - `id: string`

      ID of the meeting.

    - `created_at: string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `updated_at: string`

      Timestamp the object was updated at. The time is returned in ISO format.

    - `ai_config: optional object { summarization, transcription }`

      The AI Config allows you to customize the behavior of meeting transcriptions and summaries

      - `summarization: optional object { summary_type, text_format, word_limit }`

        Summary Config

        - `summary_type: optional "general" or "team_meeting" or "sales_call" or 6 more`

          Defines the style of the summary, such as general, team meeting, or sales call.

          - `"general"`

          - `"team_meeting"`

          - `"sales_call"`

          - `"client_check_in"`

          - `"interview"`

          - `"daily_standup"`

          - `"one_on_one_meeting"`

          - `"lecture"`

          - `"code_review"`

        - `text_format: optional "plain_text" or "markdown"`

          Determines the text format of the summary, such as plain text or markdown.

          - `"plain_text"`

          - `"markdown"`

        - `word_limit: optional number`

          Sets the maximum number of words in the meeting summary.

      - `transcription: optional object { keywords, language, profanity_filter }`

        Transcription Configurations

        - `keywords: optional array of string`

          Adds specific terms to improve accurate detection during transcription.

        - `language: optional "en-US" or "en-IN" or "de" or 7 more`

          Specifies the language code for transcription to ensure accurate results.

          - `"en-US"`

          - `"en-IN"`

          - `"de"`

          - `"hi"`

          - `"sv"`

          - `"ru"`

          - `"pl"`

          - `"el"`

          - `"fr"`

          - `"nl"`

        - `profanity_filter: optional boolean`

          Control the inclusion of offensive language in transcriptions.

    - `live_stream_on_start: optional boolean`

      Specifies if the meeting should start getting livestreamed on start.

    - `persist_chat: optional boolean`

      Specifies if Chat within a meeting should persist for a week.

    - `record_on_start: optional boolean`

      Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

    - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

      Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

      - `audio_config: optional object { channel, codec, export_file }`

        Object containing configuration regarding the audio that is being recorded.

        - `channel: optional "mono" or "stereo"`

          Audio signal pathway within an audio file that carries a specific sound source.

          - `"mono"`

          - `"stereo"`

        - `codec: optional "MP3" or "AAC"`

          Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

          - `"MP3"`

          - `"AAC"`

        - `export_file: optional boolean`

          Controls whether to export audio file seperately

      - `file_name_prefix: optional string`

        Adds a prefix to the beginning of the file name of the recording.

      - `live_streaming_config: optional object { rtmp_url }`

        - `rtmp_url: optional string`

          RTMP URL to stream to

      - `max_seconds: optional number`

        Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

      - `realtimekit_bucket_config: optional object { enabled }`

        - `enabled: boolean`

          Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

      - `storage_config: optional object { type, access_key, auth_method, 9 more }`

        - `type: "aws" or "azure" or "digitalocean" or 2 more`

          Type of storage media.

          - `"aws"`

          - `"azure"`

          - `"digitalocean"`

          - `"gcs"`

          - `"sftp"`

        - `access_key: optional string`

          Access key of the storage medium. Access key is not required for the `gcs` storage media type.

          Note that this field is not readable by clients, only writeable.

        - `auth_method: optional "KEY" or "PASSWORD"`

          Authentication method used for "sftp" type storage medium

          - `"KEY"`

          - `"PASSWORD"`

        - `bucket: optional string`

          Name of the storage medium's bucket.

        - `host: optional string`

          SSH destination server host for SFTP type storage medium

        - `password: optional string`

          SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

        - `path: optional string`

          Path relative to the bucket root at which the recording will be placed.

        - `port: optional number`

          SSH destination server port for SFTP type storage medium

        - `private_key: optional string`

          Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

        - `region: optional string`

          Region of the storage medium.

        - `secret: optional string`

          Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

        - `username: optional string`

          SSH destination server username for SFTP type storage medium

      - `video_config: optional object { codec, export_file, height, 2 more }`

        - `codec: optional "H264" or "VP8"`

          Codec using which the recording will be encoded.

          - `"H264"`

          - `"VP8"`

        - `export_file: optional boolean`

          Controls whether to export video file seperately

        - `height: optional number`

          Height of the recording video in pixels

        - `watermark: optional object { position, size, url }`

          Watermark to be added to the recording

          - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

            Position of the watermark

            - `"left top"`

            - `"right top"`

            - `"left bottom"`

            - `"right bottom"`

          - `size: optional object { height, width }`

            Size of the watermark

            - `height: optional number`

              Height of the watermark in px

            - `width: optional number`

              Width of the watermark in px

          - `url: optional string`

            URL of the watermark image

        - `width: optional number`

          Width of the recording video in pixels

    - `session_keep_alive_time_in_secs: optional number`

      Time in seconds, for which a session remains active, after the last participant has left the meeting.

    - `status: optional "ACTIVE" or "INACTIVE"`

      Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

      - `"ACTIVE"`

      - `"INACTIVE"`

    - `summarize_on_end: optional boolean`

      Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

    - `title: optional string`

      Title of the meeting.

    - `transcribe_on_end: optional boolean`

      Automatically generate transcripts when the meeting ends.

### Meeting Get Meeting Participants Response

- `MeetingGetMeetingParticipantsResponse object { data, paging, success }`

  - `data: array of object { id, created_at, custom_participant_id, 4 more }`

    - `id: string`

      ID of the participant.

    - `created_at: string`

      When this object was created. The time is returned in ISO format.

    - `custom_participant_id: string`

      A unique participant ID generated by the client.

    - `preset_name: string`

      Preset applied to the participant.

    - `updated_at: string`

      When this object was updated. The time is returned in ISO format.

    - `name: optional string`

      Name of the participant.

    - `picture: optional string`

      URL to a picture of the participant.

  - `paging: object { end_offset, start_offset, total_count }`

    - `end_offset: number`

    - `start_offset: number`

    - `total_count: number`

  - `success: boolean`

### Meeting Add Participant Response

- `MeetingAddParticipantResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { id, token, created_at, 5 more }`

    Represents a participant.

    - `id: string`

      ID of the participant.

    - `token: string`

      The participant's auth token that can be used for joining a meeting from the client side.

    - `created_at: string`

      When this object was created. The time is returned in ISO format.

    - `custom_participant_id: string`

      A unique participant ID generated by the client.

    - `preset_name: string`

      Preset applied to the participant.

    - `updated_at: string`

      When this object was updated. The time is returned in ISO format.

    - `name: optional string`

      Name of the participant.

    - `picture: optional string`

      URL to a picture of the participant.

### Meeting Get Meeting Participant Response

- `MeetingGetMeetingParticipantResponse object { data, success }`

  - `data: object { id, created_at, custom_participant_id, 4 more }`

    Data returned by the operation

    - `id: string`

      ID of the participant.

    - `created_at: string`

      When this object was created. The time is returned in ISO format.

    - `custom_participant_id: string`

      A unique participant ID generated by the client.

    - `preset_name: string`

      Preset applied to the participant.

    - `updated_at: string`

      When this object was updated. The time is returned in ISO format.

    - `name: optional string`

      Name of the participant.

    - `picture: optional string`

      URL to a picture of the participant.

  - `success: boolean`

    Success status of the operation

### Meeting Edit Participant Response

- `MeetingEditParticipantResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { id, token, created_at, 5 more }`

    Represents a participant.

    - `id: string`

      ID of the participant.

    - `token: string`

      The participant's auth token that can be used for joining a meeting from the client side.

    - `created_at: string`

      When this object was created. The time is returned in ISO format.

    - `custom_participant_id: string`

      A unique participant ID generated by the client.

    - `preset_name: string`

      Preset applied to the participant.

    - `updated_at: string`

      When this object was updated. The time is returned in ISO format.

    - `name: optional string`

      Name of the participant.

    - `picture: optional string`

      URL to a picture of the participant.

### Meeting Delete Meeting Participant Response

- `MeetingDeleteMeetingParticipantResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { created_at, custom_participant_id, preset_id, updated_at }`

    Data returned by the operation

    - `created_at: string`

      Timestamp this object was created at. The time is returned in ISO format.

    - `custom_participant_id: string`

      A unique participant ID generated by the client.

    - `preset_id: string`

      ID of the preset applied to this participant.

    - `updated_at: string`

      Timestamp this object was updated at. The time is returned in ISO format.

### Meeting Refresh Participant Token Response

- `MeetingRefreshParticipantTokenResponse object { data, success }`

  - `data: object { token }`

    Data returned by the operation

    - `token: string`

      Regenerated participant's authentication token.

  - `success: boolean`

    Success status of the operation

# Presets

## Fetch all presets

**get** `/accounts/{account_id}/realtime/kit/{app_id}/presets`

Fetches all the presets belonging to an App.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Query Parameters

- `page_no: optional number`

  The page number from which you want your page search results to be displayed.

- `per_page: optional number`

  Number of results per page

- `search: optional string`

  Search presets by name.

### Returns

- `data: array of object { id, created_at, name, updated_at }`

  - `id: optional string`

    ID of the preset

  - `created_at: optional string`

    Timestamp this preset was created at

  - `name: optional string`

    Name of the preset

  - `updated_at: optional string`

    Timestamp this preset was last updated

- `paging: object { end_offset, start_offset, total_count }`

  - `end_offset: number`

  - `start_offset: number`

  - `total_count: number`

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/presets \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": [
    {
      "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
      "created_at": "2019-12-27T18:11:19.117Z",
      "name": "name",
      "updated_at": "2019-12-27T18:11:19.117Z"
    }
  ],
  "paging": {
    "end_offset": 30,
    "start_offset": 1,
    "total_count": 30
  },
  "success": true
}
```

## Create a preset

**post** `/accounts/{account_id}/realtime/kit/{app_id}/presets`

Creates a preset belonging to the current App

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Body Parameters

- `config: object { max_screenshare_count, max_video_streams, media, 2 more }`

  - `max_screenshare_count: number`

    Maximum number of screen shares that can be active at a given time

  - `max_video_streams: object { desktop, mobile }`

    Maximum number of streams that are visible on a device

    - `desktop: number`

      Maximum number of video streams visible on desktop devices

    - `mobile: number`

      Maximum number of streams visible on mobile devices

  - `media: object { screenshare, video, audio }`

    Media configuration options. eg: Video quality

    - `screenshare: object { frame_rate, quality }`

      Configuration options for participant screen shares

      - `frame_rate: number`

        Frame rate of screen share

      - `quality: "hd" or "vga" or "qvga" or 2 more`

        Quality of screen share

        - `"hd"`

        - `"vga"`

        - `"qvga"`

        - `"fhd"`

        - `"uhd"`

    - `video: object { frame_rate, quality, simulcast }`

      Configuration options for participant videos

      - `frame_rate: number`

        Frame rate of participants' video

      - `quality: "hd" or "vga" or "qvga" or 2 more`

        Video quality of participants

        - `"hd"`

        - `"vga"`

        - `"qvga"`

        - `"fhd"`

        - `"uhd"`

      - `simulcast: optional boolean`

        Enable simulcast for participant videos.

    - `audio: optional object { enable_high_bitrate, enable_stereo }`

      Control options for Audio quality.

      - `enable_high_bitrate: optional boolean`

        Enable High Quality Audio for your meetings

      - `enable_stereo: optional boolean`

        Enable Stereo for your meetings

  - `view_type: "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

    Type of the meeting

    - `"GROUP_CALL"`

    - `"WEBINAR"`

    - `"AUDIO_ROOM"`

    - `"LIVESTREAM"`

  - `livestream_viewer_qualities: optional array of number`

    Livestream viewer quality levels.

- `name: string`

  Name of the preset

- `permissions: object { accept_waiting_requests, can_accept_production_requests, can_change_participant_permissions, 23 more }`

  - `accept_waiting_requests: boolean`

    Whether this participant can accept waiting requests

  - `can_accept_production_requests: boolean`

  - `can_change_participant_permissions: boolean`

  - `can_edit_display_name: boolean`

  - `can_livestream: boolean`

  - `can_record: boolean`

  - `can_spotlight: boolean`

  - `chat: object { private, public }`

    - `private: object { can_receive, can_send, files, text }`

      - `can_receive: boolean`

      - `can_send: boolean`

      - `files: boolean`

      - `text: boolean`

    - `public: object { can_send, files, text }`

      - `can_send: boolean`

        Can send messages in general

      - `files: boolean`

        Can send file messages

      - `text: boolean`

        Can send text messages

  - `connected_meetings: object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

    - `can_alter_connected_meetings: boolean`

    - `can_switch_connected_meetings: boolean`

    - `can_switch_to_parent_meeting: boolean`

  - `disable_participant_audio: boolean`

  - `disable_participant_screensharing: boolean`

  - `disable_participant_video: boolean`

  - `hidden_participant: boolean`

    Whether this participant is visible to others or not

  - `kick_participant: boolean`

  - `media: object { audio, screenshare, video }`

    Media permissions

    - `audio: object { can_produce }`

      Audio permissions

      - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        Can produce audio

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

    - `screenshare: object { can_produce }`

      Screenshare permissions

      - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        Can produce screen share video

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

    - `video: object { can_produce }`

      Video permissions

      - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        Can produce video

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

  - `pin_participant: boolean`

  - `plugins: object { can_close, can_edit_config, can_start, config }`

    Plugin permissions

    - `can_close: boolean`

      Can close plugins that are already open

    - `can_edit_config: boolean`

      Can edit plugin config

    - `can_start: boolean`

      Can start plugins

    - `config: map[object { access_control, handles_view_only } ]`

      Plugin configuration keyed by plugin UUID.

      - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

        - `"FULL_ACCESS"`

        - `"VIEW_ONLY"`

      - `handles_view_only: optional boolean`

  - `polls: object { can_create, can_view, can_vote }`

    Poll permissions

    - `can_create: boolean`

      Can create polls

    - `can_view: boolean`

      Can view polls

    - `can_vote: boolean`

      Can vote on polls

  - `recorder_type: "RECORDER" or "LIVESTREAMER" or "NONE"`

    Type of the recording peer

    - `"RECORDER"`

    - `"LIVESTREAMER"`

    - `"NONE"`

  - `show_participant_list: boolean`

  - `waiting_room_type: "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

    Waiting room type

    - `"SKIP"`

    - `"ON_PRIVILEGED_USER_ENTRY"`

    - `"SKIP_ON_ACCEPT"`

  - `accept_stage_requests: optional boolean`

  - `is_recorder: optional boolean`

  - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

    - `"ALLOWED"`

    - `"NOT_ALLOWED"`

    - `"CAN_REQUEST"`

  - `stage_enabled: optional boolean`

  - `transcription_enabled: optional boolean`

- `ui: object { design_tokens }`

  - `design_tokens: object { border_radius, border_width, colors, 5 more }`

    - `border_radius: "sharp" or "rounded" or "extra-rounded" or "circular"`

      - `"sharp"`

      - `"rounded"`

      - `"extra-rounded"`

      - `"circular"`

    - `border_width: "none" or "thin" or "fat"`

      - `"none"`

      - `"thin"`

      - `"fat"`

    - `colors: object { background, brand, danger, 5 more }`

      - `background: object { "1000", "600", "700", 2 more }`

        - `"1000": string`

        - `"600": string`

        - `"700": string`

        - `"800": string`

        - `"900": string`

      - `brand: object { "300", "400", "500", 2 more }`

        - `"300": string`

        - `"400": string`

        - `"500": string`

        - `"600": string`

        - `"700": string`

      - `danger: string`

      - `success: string`

      - `text: string`

      - `text_on_brand: string`

      - `video_bg: string`

      - `warning: string`

    - `spacing_base: number`

    - `theme: "darkest" or "dark" or "light"`

      - `"darkest"`

      - `"dark"`

      - `"light"`

    - `font_family: optional string`

    - `google_font: optional string`

    - `logo: optional string`

### Returns

- `data: object { id, config, created_at, 4 more }`

  Data returned by the operation

  - `id: string`

    ID of the preset

  - `config: object { max_screenshare_count, max_video_streams, media, 2 more }`

    - `max_screenshare_count: number`

      Maximum number of screen shares that can be active at a given time

    - `max_video_streams: object { desktop, mobile }`

      Maximum number of streams that are visible on a device

      - `desktop: number`

        Maximum number of video streams visible on desktop devices

      - `mobile: number`

        Maximum number of streams visible on mobile devices

    - `media: object { screenshare, video, audio }`

      Media configuration options. eg: Video quality

      - `screenshare: object { frame_rate, quality }`

        Configuration options for participant screen shares

        - `frame_rate: number`

          Frame rate of screen share

        - `quality: "hd" or "vga" or "qvga" or 2 more`

          Quality of screen share

          - `"hd"`

          - `"vga"`

          - `"qvga"`

          - `"fhd"`

          - `"uhd"`

      - `video: object { frame_rate, quality, simulcast }`

        Configuration options for participant videos

        - `frame_rate: number`

          Frame rate of participants' video

        - `quality: "hd" or "vga" or "qvga" or 2 more`

          Video quality of participants

          - `"hd"`

          - `"vga"`

          - `"qvga"`

          - `"fhd"`

          - `"uhd"`

        - `simulcast: optional boolean`

          Enable simulcast for participant videos.

      - `audio: optional object { enable_high_bitrate, enable_stereo }`

        Control options for Audio quality.

        - `enable_high_bitrate: optional boolean`

          Enable High Quality Audio for your meetings

        - `enable_stereo: optional boolean`

          Enable Stereo for your meetings

    - `view_type: "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

      Type of the meeting

      - `"GROUP_CALL"`

      - `"WEBINAR"`

      - `"AUDIO_ROOM"`

      - `"LIVESTREAM"`

    - `livestream_viewer_qualities: optional array of number`

      Livestream viewer quality levels.

  - `created_at: string`

    Timestamp this preset was created at

  - `name: string`

    Name of the preset

  - `permissions: object { accept_waiting_requests, can_accept_production_requests, can_change_participant_permissions, 23 more }`

    - `accept_waiting_requests: boolean`

      Whether this participant can accept waiting requests

    - `can_accept_production_requests: boolean`

    - `can_change_participant_permissions: boolean`

    - `can_edit_display_name: boolean`

    - `can_livestream: boolean`

    - `can_record: boolean`

    - `can_spotlight: boolean`

    - `chat: object { private, public }`

      - `private: object { can_receive, can_send, files, text }`

        - `can_receive: boolean`

        - `can_send: boolean`

        - `files: boolean`

        - `text: boolean`

      - `public: object { can_send, files, text }`

        - `can_send: boolean`

          Can send messages in general

        - `files: boolean`

          Can send file messages

        - `text: boolean`

          Can send text messages

    - `connected_meetings: object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

      - `can_alter_connected_meetings: boolean`

      - `can_switch_connected_meetings: boolean`

      - `can_switch_to_parent_meeting: boolean`

    - `disable_participant_audio: boolean`

    - `disable_participant_screensharing: boolean`

    - `disable_participant_video: boolean`

    - `hidden_participant: boolean`

      Whether this participant is visible to others or not

    - `kick_participant: boolean`

    - `media: object { audio, screenshare, video }`

      Media permissions

      - `audio: object { can_produce }`

        Audio permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce audio

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

      - `screenshare: object { can_produce }`

        Screenshare permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce screen share video

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

      - `video: object { can_produce }`

        Video permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce video

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

    - `pin_participant: boolean`

    - `plugins: object { can_close, can_edit_config, can_start, config }`

      Plugin permissions

      - `can_close: boolean`

        Can close plugins that are already open

      - `can_edit_config: boolean`

        Can edit plugin config

      - `can_start: boolean`

        Can start plugins

      - `config: map[object { access_control, handles_view_only } ]`

        Plugin configuration keyed by plugin UUID.

        - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

          - `"FULL_ACCESS"`

          - `"VIEW_ONLY"`

        - `handles_view_only: optional boolean`

    - `polls: object { can_create, can_view, can_vote }`

      Poll permissions

      - `can_create: boolean`

        Can create polls

      - `can_view: boolean`

        Can view polls

      - `can_vote: boolean`

        Can vote on polls

    - `recorder_type: "RECORDER" or "LIVESTREAMER" or "NONE"`

      Type of the recording peer

      - `"RECORDER"`

      - `"LIVESTREAMER"`

      - `"NONE"`

    - `show_participant_list: boolean`

    - `waiting_room_type: "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

      Waiting room type

      - `"SKIP"`

      - `"ON_PRIVILEGED_USER_ENTRY"`

      - `"SKIP_ON_ACCEPT"`

    - `accept_stage_requests: optional boolean`

    - `is_recorder: optional boolean`

    - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

      - `"ALLOWED"`

      - `"NOT_ALLOWED"`

      - `"CAN_REQUEST"`

    - `stage_enabled: optional boolean`

    - `transcription_enabled: optional boolean`

  - `ui: object { design_tokens }`

    - `design_tokens: object { border_radius, border_width, colors, 5 more }`

      - `border_radius: "sharp" or "rounded" or "extra-rounded" or "circular"`

        - `"sharp"`

        - `"rounded"`

        - `"extra-rounded"`

        - `"circular"`

      - `border_width: "none" or "thin" or "fat"`

        - `"none"`

        - `"thin"`

        - `"fat"`

      - `colors: object { background, brand, danger, 5 more }`

        - `background: object { "1000", "600", "700", 2 more }`

          - `"1000": string`

          - `"600": string`

          - `"700": string`

          - `"800": string`

          - `"900": string`

        - `brand: object { "300", "400", "500", 2 more }`

          - `"300": string`

          - `"400": string`

          - `"500": string`

          - `"600": string`

          - `"700": string`

        - `danger: string`

        - `success: string`

        - `text: string`

        - `text_on_brand: string`

        - `video_bg: string`

        - `warning: string`

      - `spacing_base: number`

      - `theme: "darkest" or "dark" or "light"`

        - `"darkest"`

        - `"dark"`

        - `"light"`

      - `font_family: optional string`

      - `google_font: optional string`

      - `logo: optional string`

  - `updated_at: string`

    Timestamp this preset was last updated

- `success: boolean`

  Success status of the operation

### Example

```http
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": {
            "max_screenshare_count": 0,
            "max_video_streams": {
              "desktop": 0,
              "mobile": 0
            },
            "media": {
              "screenshare": {
                "frame_rate": 0,
                "quality": "hd"
              },
              "video": {
                "frame_rate": 30,
                "quality": "hd"
              }
            },
            "view_type": "GROUP_CALL"
          },
          "name": "name",
          "permissions": {
            "accept_waiting_requests": true,
            "can_accept_production_requests": true,
            "can_change_participant_permissions": true,
            "can_edit_display_name": true,
            "can_livestream": true,
            "can_record": true,
            "can_spotlight": true,
            "chat": {
              "private": {
                "can_receive": true,
                "can_send": true,
                "files": true,
                "text": true
              },
              "public": {
                "can_send": true,
                "files": true,
                "text": true
              }
            },
            "connected_meetings": {
              "can_alter_connected_meetings": true,
              "can_switch_connected_meetings": true,
              "can_switch_to_parent_meeting": true
            },
            "disable_participant_audio": true,
            "disable_participant_screensharing": true,
            "disable_participant_video": true,
            "hidden_participant": true,
            "kick_participant": true,
            "media": {
              "audio": {
                "can_produce": "ALLOWED"
              },
              "screenshare": {
                "can_produce": "ALLOWED"
              },
              "video": {
                "can_produce": "ALLOWED"
              }
            },
            "pin_participant": true,
            "plugins": {
              "can_close": true,
              "can_edit_config": true,
              "can_start": true,
              "config": {
                "foo": {}
              }
            },
            "polls": {
              "can_create": true,
              "can_view": true,
              "can_vote": true
            },
            "recorder_type": "RECORDER",
            "show_participant_list": true,
            "waiting_room_type": "SKIP"
          },
          "ui": {
            "design_tokens": {
              "border_radius": "sharp",
              "border_width": "none",
              "colors": {
                "background": {
                  "600": "600",
                  "700": "700",
                  "800": "800",
                  "900": "900",
                  "1000": "1000"
                },
                "brand": {
                  "300": "300",
                  "400": "400",
                  "500": "500",
                  "600": "600",
                  "700": "700"
                },
                "danger": "danger",
                "success": "success",
                "text": "text",
                "text_on_brand": "text_on_brand",
                "video_bg": "video_bg",
                "warning": "warning"
              },
              "spacing_base": 1,
              "theme": "darkest"
            }
          }
        }'
```

#### Response

```json
{
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "config": {
      "max_screenshare_count": 0,
      "max_video_streams": {
        "desktop": 0,
        "mobile": 0
      },
      "media": {
        "screenshare": {
          "frame_rate": 0,
          "quality": "hd"
        },
        "video": {
          "frame_rate": 30,
          "quality": "hd",
          "simulcast": true
        },
        "audio": {
          "enable_high_bitrate": true,
          "enable_stereo": true
        }
      },
      "view_type": "GROUP_CALL",
      "livestream_viewer_qualities": [
        0
      ]
    },
    "created_at": "2019-12-27T18:11:19.117Z",
    "name": "name",
    "permissions": {
      "accept_waiting_requests": true,
      "can_accept_production_requests": true,
      "can_change_participant_permissions": true,
      "can_edit_display_name": true,
      "can_livestream": true,
      "can_record": true,
      "can_spotlight": true,
      "chat": {
        "private": {
          "can_receive": true,
          "can_send": true,
          "files": true,
          "text": true
        },
        "public": {
          "can_send": true,
          "files": true,
          "text": true
        }
      },
      "connected_meetings": {
        "can_alter_connected_meetings": true,
        "can_switch_connected_meetings": true,
        "can_switch_to_parent_meeting": true
      },
      "disable_participant_audio": true,
      "disable_participant_screensharing": true,
      "disable_participant_video": true,
      "hidden_participant": true,
      "kick_participant": true,
      "media": {
        "audio": {
          "can_produce": "ALLOWED"
        },
        "screenshare": {
          "can_produce": "ALLOWED"
        },
        "video": {
          "can_produce": "ALLOWED"
        }
      },
      "pin_participant": true,
      "plugins": {
        "can_close": true,
        "can_edit_config": true,
        "can_start": true,
        "config": {
          "foo": {
            "access_control": "FULL_ACCESS",
            "handles_view_only": true
          }
        }
      },
      "polls": {
        "can_create": true,
        "can_view": true,
        "can_vote": true
      },
      "recorder_type": "RECORDER",
      "show_participant_list": true,
      "waiting_room_type": "SKIP",
      "accept_stage_requests": true,
      "is_recorder": true,
      "stage_access": "ALLOWED",
      "stage_enabled": true,
      "transcription_enabled": true
    },
    "ui": {
      "design_tokens": {
        "border_radius": "sharp",
        "border_width": "none",
        "colors": {
          "background": {
            "600": "600",
            "700": "700",
            "800": "800",
            "900": "900",
            "1000": "1000"
          },
          "brand": {
            "300": "300",
            "400": "400",
            "500": "500",
            "600": "600",
            "700": "700"
          },
          "danger": "danger",
          "success": "success",
          "text": "text",
          "text_on_brand": "text_on_brand",
          "video_bg": "video_bg",
          "warning": "warning"
        },
        "spacing_base": 1,
        "theme": "darkest",
        "font_family": "font_family",
        "google_font": "google_font",
        "logo": "https://example.com"
      }
    },
    "updated_at": "2019-12-27T18:11:19.117Z"
  },
  "success": true
}
```

## Fetch details of a preset

**get** `/accounts/{account_id}/realtime/kit/{app_id}/presets/{preset_id}`

Fetches details of a preset using the provided preset ID

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `preset_id: string`

### Returns

- `data: object { id, config, created_at, 4 more }`

  Data returned by the operation

  - `id: string`

    ID of the preset

  - `config: object { max_screenshare_count, max_video_streams, media, 2 more }`

    - `max_screenshare_count: number`

      Maximum number of screen shares that can be active at a given time

    - `max_video_streams: object { desktop, mobile }`

      Maximum number of streams that are visible on a device

      - `desktop: number`

        Maximum number of video streams visible on desktop devices

      - `mobile: number`

        Maximum number of streams visible on mobile devices

    - `media: object { screenshare, video, audio }`

      Media configuration options. eg: Video quality

      - `screenshare: object { frame_rate, quality }`

        Configuration options for participant screen shares

        - `frame_rate: number`

          Frame rate of screen share

        - `quality: "hd" or "vga" or "qvga" or 2 more`

          Quality of screen share

          - `"hd"`

          - `"vga"`

          - `"qvga"`

          - `"fhd"`

          - `"uhd"`

      - `video: object { frame_rate, quality, simulcast }`

        Configuration options for participant videos

        - `frame_rate: number`

          Frame rate of participants' video

        - `quality: "hd" or "vga" or "qvga" or 2 more`

          Video quality of participants

          - `"hd"`

          - `"vga"`

          - `"qvga"`

          - `"fhd"`

          - `"uhd"`

        - `simulcast: optional boolean`

          Enable simulcast for participant videos.

      - `audio: optional object { enable_high_bitrate, enable_stereo }`

        Control options for Audio quality.

        - `enable_high_bitrate: optional boolean`

          Enable High Quality Audio for your meetings

        - `enable_stereo: optional boolean`

          Enable Stereo for your meetings

    - `view_type: "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

      Type of the meeting

      - `"GROUP_CALL"`

      - `"WEBINAR"`

      - `"AUDIO_ROOM"`

      - `"LIVESTREAM"`

    - `livestream_viewer_qualities: optional array of number`

      Livestream viewer quality levels.

  - `created_at: string`

    Timestamp this preset was created at

  - `name: string`

    Name of the preset

  - `permissions: object { accept_waiting_requests, can_accept_production_requests, can_change_participant_permissions, 23 more }`

    - `accept_waiting_requests: boolean`

      Whether this participant can accept waiting requests

    - `can_accept_production_requests: boolean`

    - `can_change_participant_permissions: boolean`

    - `can_edit_display_name: boolean`

    - `can_livestream: boolean`

    - `can_record: boolean`

    - `can_spotlight: boolean`

    - `chat: object { private, public }`

      - `private: object { can_receive, can_send, files, text }`

        - `can_receive: boolean`

        - `can_send: boolean`

        - `files: boolean`

        - `text: boolean`

      - `public: object { can_send, files, text }`

        - `can_send: boolean`

          Can send messages in general

        - `files: boolean`

          Can send file messages

        - `text: boolean`

          Can send text messages

    - `connected_meetings: object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

      - `can_alter_connected_meetings: boolean`

      - `can_switch_connected_meetings: boolean`

      - `can_switch_to_parent_meeting: boolean`

    - `disable_participant_audio: boolean`

    - `disable_participant_screensharing: boolean`

    - `disable_participant_video: boolean`

    - `hidden_participant: boolean`

      Whether this participant is visible to others or not

    - `kick_participant: boolean`

    - `media: object { audio, screenshare, video }`

      Media permissions

      - `audio: object { can_produce }`

        Audio permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce audio

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

      - `screenshare: object { can_produce }`

        Screenshare permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce screen share video

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

      - `video: object { can_produce }`

        Video permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce video

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

    - `pin_participant: boolean`

    - `plugins: object { can_close, can_edit_config, can_start, config }`

      Plugin permissions

      - `can_close: boolean`

        Can close plugins that are already open

      - `can_edit_config: boolean`

        Can edit plugin config

      - `can_start: boolean`

        Can start plugins

      - `config: map[object { access_control, handles_view_only } ]`

        Plugin configuration keyed by plugin UUID.

        - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

          - `"FULL_ACCESS"`

          - `"VIEW_ONLY"`

        - `handles_view_only: optional boolean`

    - `polls: object { can_create, can_view, can_vote }`

      Poll permissions

      - `can_create: boolean`

        Can create polls

      - `can_view: boolean`

        Can view polls

      - `can_vote: boolean`

        Can vote on polls

    - `recorder_type: "RECORDER" or "LIVESTREAMER" or "NONE"`

      Type of the recording peer

      - `"RECORDER"`

      - `"LIVESTREAMER"`

      - `"NONE"`

    - `show_participant_list: boolean`

    - `waiting_room_type: "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

      Waiting room type

      - `"SKIP"`

      - `"ON_PRIVILEGED_USER_ENTRY"`

      - `"SKIP_ON_ACCEPT"`

    - `accept_stage_requests: optional boolean`

    - `is_recorder: optional boolean`

    - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

      - `"ALLOWED"`

      - `"NOT_ALLOWED"`

      - `"CAN_REQUEST"`

    - `stage_enabled: optional boolean`

    - `transcription_enabled: optional boolean`

  - `ui: object { design_tokens }`

    - `design_tokens: object { border_radius, border_width, colors, 5 more }`

      - `border_radius: "sharp" or "rounded" or "extra-rounded" or "circular"`

        - `"sharp"`

        - `"rounded"`

        - `"extra-rounded"`

        - `"circular"`

      - `border_width: "none" or "thin" or "fat"`

        - `"none"`

        - `"thin"`

        - `"fat"`

      - `colors: object { background, brand, danger, 5 more }`

        - `background: object { "1000", "600", "700", 2 more }`

          - `"1000": string`

          - `"600": string`

          - `"700": string`

          - `"800": string`

          - `"900": string`

        - `brand: object { "300", "400", "500", 2 more }`

          - `"300": string`

          - `"400": string`

          - `"500": string`

          - `"600": string`

          - `"700": string`

        - `danger: string`

        - `success: string`

        - `text: string`

        - `text_on_brand: string`

        - `video_bg: string`

        - `warning: string`

      - `spacing_base: number`

      - `theme: "darkest" or "dark" or "light"`

        - `"darkest"`

        - `"dark"`

        - `"light"`

      - `font_family: optional string`

      - `google_font: optional string`

      - `logo: optional string`

  - `updated_at: string`

    Timestamp this preset was last updated

- `success: boolean`

  Success status of the operation

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/presets/$PRESET_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "config": {
      "max_screenshare_count": 0,
      "max_video_streams": {
        "desktop": 0,
        "mobile": 0
      },
      "media": {
        "screenshare": {
          "frame_rate": 0,
          "quality": "hd"
        },
        "video": {
          "frame_rate": 30,
          "quality": "hd",
          "simulcast": true
        },
        "audio": {
          "enable_high_bitrate": true,
          "enable_stereo": true
        }
      },
      "view_type": "GROUP_CALL",
      "livestream_viewer_qualities": [
        0
      ]
    },
    "created_at": "2019-12-27T18:11:19.117Z",
    "name": "name",
    "permissions": {
      "accept_waiting_requests": true,
      "can_accept_production_requests": true,
      "can_change_participant_permissions": true,
      "can_edit_display_name": true,
      "can_livestream": true,
      "can_record": true,
      "can_spotlight": true,
      "chat": {
        "private": {
          "can_receive": true,
          "can_send": true,
          "files": true,
          "text": true
        },
        "public": {
          "can_send": true,
          "files": true,
          "text": true
        }
      },
      "connected_meetings": {
        "can_alter_connected_meetings": true,
        "can_switch_connected_meetings": true,
        "can_switch_to_parent_meeting": true
      },
      "disable_participant_audio": true,
      "disable_participant_screensharing": true,
      "disable_participant_video": true,
      "hidden_participant": true,
      "kick_participant": true,
      "media": {
        "audio": {
          "can_produce": "ALLOWED"
        },
        "screenshare": {
          "can_produce": "ALLOWED"
        },
        "video": {
          "can_produce": "ALLOWED"
        }
      },
      "pin_participant": true,
      "plugins": {
        "can_close": true,
        "can_edit_config": true,
        "can_start": true,
        "config": {
          "foo": {
            "access_control": "FULL_ACCESS",
            "handles_view_only": true
          }
        }
      },
      "polls": {
        "can_create": true,
        "can_view": true,
        "can_vote": true
      },
      "recorder_type": "RECORDER",
      "show_participant_list": true,
      "waiting_room_type": "SKIP",
      "accept_stage_requests": true,
      "is_recorder": true,
      "stage_access": "ALLOWED",
      "stage_enabled": true,
      "transcription_enabled": true
    },
    "ui": {
      "design_tokens": {
        "border_radius": "sharp",
        "border_width": "none",
        "colors": {
          "background": {
            "600": "600",
            "700": "700",
            "800": "800",
            "900": "900",
            "1000": "1000"
          },
          "brand": {
            "300": "300",
            "400": "400",
            "500": "500",
            "600": "600",
            "700": "700"
          },
          "danger": "danger",
          "success": "success",
          "text": "text",
          "text_on_brand": "text_on_brand",
          "video_bg": "video_bg",
          "warning": "warning"
        },
        "spacing_base": 1,
        "theme": "darkest",
        "font_family": "font_family",
        "google_font": "google_font",
        "logo": "https://example.com"
      }
    },
    "updated_at": "2019-12-27T18:11:19.117Z"
  },
  "success": true
}
```

## Delete a preset

**delete** `/accounts/{account_id}/realtime/kit/{app_id}/presets/{preset_id}`

Deletes a preset using the provided preset ID

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `preset_id: string`

### Returns

- `data: object { id, config, created_at, 4 more }`

  Data returned by the operation

  - `id: string`

    ID of the preset

  - `config: object { max_screenshare_count, max_video_streams, media, 2 more }`

    - `max_screenshare_count: number`

      Maximum number of screen shares that can be active at a given time

    - `max_video_streams: object { desktop, mobile }`

      Maximum number of streams that are visible on a device

      - `desktop: number`

        Maximum number of video streams visible on desktop devices

      - `mobile: number`

        Maximum number of streams visible on mobile devices

    - `media: object { screenshare, video, audio }`

      Media configuration options. eg: Video quality

      - `screenshare: object { frame_rate, quality }`

        Configuration options for participant screen shares

        - `frame_rate: number`

          Frame rate of screen share

        - `quality: "hd" or "vga" or "qvga" or 2 more`

          Quality of screen share

          - `"hd"`

          - `"vga"`

          - `"qvga"`

          - `"fhd"`

          - `"uhd"`

      - `video: object { frame_rate, quality, simulcast }`

        Configuration options for participant videos

        - `frame_rate: number`

          Frame rate of participants' video

        - `quality: "hd" or "vga" or "qvga" or 2 more`

          Video quality of participants

          - `"hd"`

          - `"vga"`

          - `"qvga"`

          - `"fhd"`

          - `"uhd"`

        - `simulcast: optional boolean`

          Enable simulcast for participant videos.

      - `audio: optional object { enable_high_bitrate, enable_stereo }`

        Control options for Audio quality.

        - `enable_high_bitrate: optional boolean`

          Enable High Quality Audio for your meetings

        - `enable_stereo: optional boolean`

          Enable Stereo for your meetings

    - `view_type: "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

      Type of the meeting

      - `"GROUP_CALL"`

      - `"WEBINAR"`

      - `"AUDIO_ROOM"`

      - `"LIVESTREAM"`

    - `livestream_viewer_qualities: optional array of number`

      Livestream viewer quality levels.

  - `created_at: string`

    Timestamp this preset was created at

  - `name: string`

    Name of the preset

  - `permissions: object { accept_waiting_requests, can_accept_production_requests, can_change_participant_permissions, 23 more }`

    - `accept_waiting_requests: boolean`

      Whether this participant can accept waiting requests

    - `can_accept_production_requests: boolean`

    - `can_change_participant_permissions: boolean`

    - `can_edit_display_name: boolean`

    - `can_livestream: boolean`

    - `can_record: boolean`

    - `can_spotlight: boolean`

    - `chat: object { private, public }`

      - `private: object { can_receive, can_send, files, text }`

        - `can_receive: boolean`

        - `can_send: boolean`

        - `files: boolean`

        - `text: boolean`

      - `public: object { can_send, files, text }`

        - `can_send: boolean`

          Can send messages in general

        - `files: boolean`

          Can send file messages

        - `text: boolean`

          Can send text messages

    - `connected_meetings: object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

      - `can_alter_connected_meetings: boolean`

      - `can_switch_connected_meetings: boolean`

      - `can_switch_to_parent_meeting: boolean`

    - `disable_participant_audio: boolean`

    - `disable_participant_screensharing: boolean`

    - `disable_participant_video: boolean`

    - `hidden_participant: boolean`

      Whether this participant is visible to others or not

    - `kick_participant: boolean`

    - `media: object { audio, screenshare, video }`

      Media permissions

      - `audio: object { can_produce }`

        Audio permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce audio

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

      - `screenshare: object { can_produce }`

        Screenshare permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce screen share video

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

      - `video: object { can_produce }`

        Video permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce video

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

    - `pin_participant: boolean`

    - `plugins: object { can_close, can_edit_config, can_start, config }`

      Plugin permissions

      - `can_close: boolean`

        Can close plugins that are already open

      - `can_edit_config: boolean`

        Can edit plugin config

      - `can_start: boolean`

        Can start plugins

      - `config: map[object { access_control, handles_view_only } ]`

        Plugin configuration keyed by plugin UUID.

        - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

          - `"FULL_ACCESS"`

          - `"VIEW_ONLY"`

        - `handles_view_only: optional boolean`

    - `polls: object { can_create, can_view, can_vote }`

      Poll permissions

      - `can_create: boolean`

        Can create polls

      - `can_view: boolean`

        Can view polls

      - `can_vote: boolean`

        Can vote on polls

    - `recorder_type: "RECORDER" or "LIVESTREAMER" or "NONE"`

      Type of the recording peer

      - `"RECORDER"`

      - `"LIVESTREAMER"`

      - `"NONE"`

    - `show_participant_list: boolean`

    - `waiting_room_type: "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

      Waiting room type

      - `"SKIP"`

      - `"ON_PRIVILEGED_USER_ENTRY"`

      - `"SKIP_ON_ACCEPT"`

    - `accept_stage_requests: optional boolean`

    - `is_recorder: optional boolean`

    - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

      - `"ALLOWED"`

      - `"NOT_ALLOWED"`

      - `"CAN_REQUEST"`

    - `stage_enabled: optional boolean`

    - `transcription_enabled: optional boolean`

  - `ui: object { design_tokens }`

    - `design_tokens: object { border_radius, border_width, colors, 5 more }`

      - `border_radius: "sharp" or "rounded" or "extra-rounded" or "circular"`

        - `"sharp"`

        - `"rounded"`

        - `"extra-rounded"`

        - `"circular"`

      - `border_width: "none" or "thin" or "fat"`

        - `"none"`

        - `"thin"`

        - `"fat"`

      - `colors: object { background, brand, danger, 5 more }`

        - `background: object { "1000", "600", "700", 2 more }`

          - `"1000": string`

          - `"600": string`

          - `"700": string`

          - `"800": string`

          - `"900": string`

        - `brand: object { "300", "400", "500", 2 more }`

          - `"300": string`

          - `"400": string`

          - `"500": string`

          - `"600": string`

          - `"700": string`

        - `danger: string`

        - `success: string`

        - `text: string`

        - `text_on_brand: string`

        - `video_bg: string`

        - `warning: string`

      - `spacing_base: number`

      - `theme: "darkest" or "dark" or "light"`

        - `"darkest"`

        - `"dark"`

        - `"light"`

      - `font_family: optional string`

      - `google_font: optional string`

      - `logo: optional string`

  - `updated_at: string`

    Timestamp this preset was last updated

- `success: boolean`

  Success status of the operation

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/presets/$PRESET_ID \
    -X DELETE \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "config": {
      "max_screenshare_count": 0,
      "max_video_streams": {
        "desktop": 0,
        "mobile": 0
      },
      "media": {
        "screenshare": {
          "frame_rate": 0,
          "quality": "hd"
        },
        "video": {
          "frame_rate": 30,
          "quality": "hd",
          "simulcast": true
        },
        "audio": {
          "enable_high_bitrate": true,
          "enable_stereo": true
        }
      },
      "view_type": "GROUP_CALL",
      "livestream_viewer_qualities": [
        0
      ]
    },
    "created_at": "2019-12-27T18:11:19.117Z",
    "name": "name",
    "permissions": {
      "accept_waiting_requests": true,
      "can_accept_production_requests": true,
      "can_change_participant_permissions": true,
      "can_edit_display_name": true,
      "can_livestream": true,
      "can_record": true,
      "can_spotlight": true,
      "chat": {
        "private": {
          "can_receive": true,
          "can_send": true,
          "files": true,
          "text": true
        },
        "public": {
          "can_send": true,
          "files": true,
          "text": true
        }
      },
      "connected_meetings": {
        "can_alter_connected_meetings": true,
        "can_switch_connected_meetings": true,
        "can_switch_to_parent_meeting": true
      },
      "disable_participant_audio": true,
      "disable_participant_screensharing": true,
      "disable_participant_video": true,
      "hidden_participant": true,
      "kick_participant": true,
      "media": {
        "audio": {
          "can_produce": "ALLOWED"
        },
        "screenshare": {
          "can_produce": "ALLOWED"
        },
        "video": {
          "can_produce": "ALLOWED"
        }
      },
      "pin_participant": true,
      "plugins": {
        "can_close": true,
        "can_edit_config": true,
        "can_start": true,
        "config": {
          "foo": {
            "access_control": "FULL_ACCESS",
            "handles_view_only": true
          }
        }
      },
      "polls": {
        "can_create": true,
        "can_view": true,
        "can_vote": true
      },
      "recorder_type": "RECORDER",
      "show_participant_list": true,
      "waiting_room_type": "SKIP",
      "accept_stage_requests": true,
      "is_recorder": true,
      "stage_access": "ALLOWED",
      "stage_enabled": true,
      "transcription_enabled": true
    },
    "ui": {
      "design_tokens": {
        "border_radius": "sharp",
        "border_width": "none",
        "colors": {
          "background": {
            "600": "600",
            "700": "700",
            "800": "800",
            "900": "900",
            "1000": "1000"
          },
          "brand": {
            "300": "300",
            "400": "400",
            "500": "500",
            "600": "600",
            "700": "700"
          },
          "danger": "danger",
          "success": "success",
          "text": "text",
          "text_on_brand": "text_on_brand",
          "video_bg": "video_bg",
          "warning": "warning"
        },
        "spacing_base": 1,
        "theme": "darkest",
        "font_family": "font_family",
        "google_font": "google_font",
        "logo": "https://example.com"
      }
    },
    "updated_at": "2019-12-27T18:11:19.117Z"
  },
  "success": true
}
```

## Update a preset

**patch** `/accounts/{account_id}/realtime/kit/{app_id}/presets/{preset_id}`

Update a preset by the provided preset ID

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `preset_id: string`

### Body Parameters

- `config: optional object { livestream_viewer_qualities, max_screenshare_count, max_video_streams, 2 more }`

  - `livestream_viewer_qualities: optional array of number`

    Livestream viewer quality levels.

  - `max_screenshare_count: optional number`

    Maximum number of screen shares that can be active at a given time

  - `max_video_streams: optional object { desktop, mobile }`

    Maximum number of streams that are visible on a device

    - `desktop: optional number`

      Maximum number of video streams visible on desktop devices

    - `mobile: optional number`

      Maximum number of streams visible on mobile devices

  - `media: optional object { audio, screenshare, video }`

    Media configuration options. eg: Video quality

    - `audio: optional object { enable_high_bitrate, enable_stereo }`

      Control options for Audio quality.

      - `enable_high_bitrate: optional boolean`

        Enable High Quality Audio for your meetings

      - `enable_stereo: optional boolean`

        Enable Stereo for your meetings

    - `screenshare: optional object { frame_rate, quality }`

      Configuration options for participant screen shares

      - `frame_rate: optional number`

        Frame rate of screen share

      - `quality: optional "hd" or "vga" or "qvga" or 2 more`

        Quality of screen share

        - `"hd"`

        - `"vga"`

        - `"qvga"`

        - `"fhd"`

        - `"uhd"`

    - `video: optional object { frame_rate, quality, simulcast }`

      Configuration options for participant videos

      - `frame_rate: optional number`

        Frame rate of participants' video

      - `quality: optional "hd" or "vga" or "qvga" or 2 more`

        Video quality of participants

        - `"hd"`

        - `"vga"`

        - `"qvga"`

        - `"fhd"`

        - `"uhd"`

      - `simulcast: optional boolean`

        Enable simulcast for participant videos.

  - `view_type: optional "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

    Type of the meeting

    - `"GROUP_CALL"`

    - `"WEBINAR"`

    - `"AUDIO_ROOM"`

    - `"LIVESTREAM"`

- `name: optional string`

  Name of the preset

- `permissions: optional object { accept_stage_requests, accept_waiting_requests, can_accept_production_requests, 23 more }`

  - `accept_stage_requests: optional boolean`

  - `accept_waiting_requests: optional boolean`

    Whether this participant can accept waiting requests

  - `can_accept_production_requests: optional boolean`

  - `can_change_participant_permissions: optional boolean`

  - `can_edit_display_name: optional boolean`

  - `can_livestream: optional boolean`

  - `can_record: optional boolean`

  - `can_spotlight: optional boolean`

  - `chat: optional object { private, public }`

    - `private: optional object { can_receive, can_send, files, text }`

      - `can_receive: optional boolean`

      - `can_send: optional boolean`

      - `files: optional boolean`

      - `text: optional boolean`

    - `public: optional object { can_send, files, text }`

      - `can_send: optional boolean`

        Can send messages in general

      - `files: optional boolean`

        Can send file messages

      - `text: optional boolean`

        Can send text messages

  - `connected_meetings: optional object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

    - `can_alter_connected_meetings: optional boolean`

    - `can_switch_connected_meetings: optional boolean`

    - `can_switch_to_parent_meeting: optional boolean`

  - `disable_participant_audio: optional boolean`

  - `disable_participant_screensharing: optional boolean`

  - `disable_participant_video: optional boolean`

  - `hidden_participant: optional boolean`

    Whether this participant is visible to others or not

  - `is_recorder: optional boolean`

  - `kick_participant: optional boolean`

  - `media: optional object { audio, screenshare, video }`

    Media permissions

    - `audio: optional object { can_produce }`

      Audio permissions

      - `can_produce: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        Can produce audio

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

    - `screenshare: optional object { can_produce }`

      Screenshare permissions

      - `can_produce: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        Can produce screen share video

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

    - `video: optional object { can_produce }`

      Video permissions

      - `can_produce: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        Can produce video

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

  - `pin_participant: optional boolean`

  - `plugins: optional object { can_close, can_edit_config, can_start, config }`

    Plugin permissions

    - `can_close: optional boolean`

      Can close plugins that are already open

    - `can_edit_config: optional boolean`

      Can edit plugin config

    - `can_start: optional boolean`

      Can start plugins

    - `config: optional map[object { access_control, handles_view_only } ]`

      Plugin configuration keyed by plugin UUID.

      - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

        - `"FULL_ACCESS"`

        - `"VIEW_ONLY"`

      - `handles_view_only: optional boolean`

  - `polls: optional object { can_create, can_view, can_vote }`

    Poll permissions

    - `can_create: optional boolean`

      Can create polls

    - `can_view: optional boolean`

      Can view polls

    - `can_vote: optional boolean`

      Can vote on polls

  - `recorder_type: optional "RECORDER" or "LIVESTREAMER" or "NONE"`

    Type of the recording peer

    - `"RECORDER"`

    - `"LIVESTREAMER"`

    - `"NONE"`

  - `show_participant_list: optional boolean`

  - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

    - `"ALLOWED"`

    - `"NOT_ALLOWED"`

    - `"CAN_REQUEST"`

  - `stage_enabled: optional boolean`

  - `transcription_enabled: optional boolean`

  - `waiting_room_type: optional "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

    Waiting room type

    - `"SKIP"`

    - `"ON_PRIVILEGED_USER_ENTRY"`

    - `"SKIP_ON_ACCEPT"`

- `ui: optional object { design_tokens }`

  - `design_tokens: optional object { border_radius, border_width, colors, 5 more }`

    - `border_radius: optional "sharp" or "rounded" or "extra-rounded" or "circular"`

      - `"sharp"`

      - `"rounded"`

      - `"extra-rounded"`

      - `"circular"`

    - `border_width: optional "none" or "thin" or "fat"`

      - `"none"`

      - `"thin"`

      - `"fat"`

    - `colors: optional object { background, brand, danger, 5 more }`

      - `background: optional object { "1000", "600", "700", 2 more }`

        - `"1000": optional string`

        - `"600": optional string`

        - `"700": optional string`

        - `"800": optional string`

        - `"900": optional string`

      - `brand: optional object { "300", "400", "500", 2 more }`

        - `"300": optional string`

        - `"400": optional string`

        - `"500": optional string`

        - `"600": optional string`

        - `"700": optional string`

      - `danger: optional string`

      - `success: optional string`

      - `text: optional string`

      - `text_on_brand: optional string`

      - `video_bg: optional string`

      - `warning: optional string`

    - `font_family: optional string`

    - `google_font: optional string`

    - `logo: optional string`

    - `spacing_base: optional number`

    - `theme: optional "darkest" or "dark" or "light"`

      - `"darkest"`

      - `"dark"`

      - `"light"`

### Returns

- `data: object { id, config, created_at, 4 more }`

  Data returned by the operation

  - `id: string`

    ID of the preset

  - `config: object { max_screenshare_count, max_video_streams, media, 2 more }`

    - `max_screenshare_count: number`

      Maximum number of screen shares that can be active at a given time

    - `max_video_streams: object { desktop, mobile }`

      Maximum number of streams that are visible on a device

      - `desktop: number`

        Maximum number of video streams visible on desktop devices

      - `mobile: number`

        Maximum number of streams visible on mobile devices

    - `media: object { screenshare, video, audio }`

      Media configuration options. eg: Video quality

      - `screenshare: object { frame_rate, quality }`

        Configuration options for participant screen shares

        - `frame_rate: number`

          Frame rate of screen share

        - `quality: "hd" or "vga" or "qvga" or 2 more`

          Quality of screen share

          - `"hd"`

          - `"vga"`

          - `"qvga"`

          - `"fhd"`

          - `"uhd"`

      - `video: object { frame_rate, quality, simulcast }`

        Configuration options for participant videos

        - `frame_rate: number`

          Frame rate of participants' video

        - `quality: "hd" or "vga" or "qvga" or 2 more`

          Video quality of participants

          - `"hd"`

          - `"vga"`

          - `"qvga"`

          - `"fhd"`

          - `"uhd"`

        - `simulcast: optional boolean`

          Enable simulcast for participant videos.

      - `audio: optional object { enable_high_bitrate, enable_stereo }`

        Control options for Audio quality.

        - `enable_high_bitrate: optional boolean`

          Enable High Quality Audio for your meetings

        - `enable_stereo: optional boolean`

          Enable Stereo for your meetings

    - `view_type: "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

      Type of the meeting

      - `"GROUP_CALL"`

      - `"WEBINAR"`

      - `"AUDIO_ROOM"`

      - `"LIVESTREAM"`

    - `livestream_viewer_qualities: optional array of number`

      Livestream viewer quality levels.

  - `created_at: string`

    Timestamp this preset was created at

  - `name: string`

    Name of the preset

  - `permissions: object { accept_waiting_requests, can_accept_production_requests, can_change_participant_permissions, 23 more }`

    - `accept_waiting_requests: boolean`

      Whether this participant can accept waiting requests

    - `can_accept_production_requests: boolean`

    - `can_change_participant_permissions: boolean`

    - `can_edit_display_name: boolean`

    - `can_livestream: boolean`

    - `can_record: boolean`

    - `can_spotlight: boolean`

    - `chat: object { private, public }`

      - `private: object { can_receive, can_send, files, text }`

        - `can_receive: boolean`

        - `can_send: boolean`

        - `files: boolean`

        - `text: boolean`

      - `public: object { can_send, files, text }`

        - `can_send: boolean`

          Can send messages in general

        - `files: boolean`

          Can send file messages

        - `text: boolean`

          Can send text messages

    - `connected_meetings: object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

      - `can_alter_connected_meetings: boolean`

      - `can_switch_connected_meetings: boolean`

      - `can_switch_to_parent_meeting: boolean`

    - `disable_participant_audio: boolean`

    - `disable_participant_screensharing: boolean`

    - `disable_participant_video: boolean`

    - `hidden_participant: boolean`

      Whether this participant is visible to others or not

    - `kick_participant: boolean`

    - `media: object { audio, screenshare, video }`

      Media permissions

      - `audio: object { can_produce }`

        Audio permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce audio

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

      - `screenshare: object { can_produce }`

        Screenshare permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce screen share video

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

      - `video: object { can_produce }`

        Video permissions

        - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

          Can produce video

          - `"ALLOWED"`

          - `"NOT_ALLOWED"`

          - `"CAN_REQUEST"`

    - `pin_participant: boolean`

    - `plugins: object { can_close, can_edit_config, can_start, config }`

      Plugin permissions

      - `can_close: boolean`

        Can close plugins that are already open

      - `can_edit_config: boolean`

        Can edit plugin config

      - `can_start: boolean`

        Can start plugins

      - `config: map[object { access_control, handles_view_only } ]`

        Plugin configuration keyed by plugin UUID.

        - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

          - `"FULL_ACCESS"`

          - `"VIEW_ONLY"`

        - `handles_view_only: optional boolean`

    - `polls: object { can_create, can_view, can_vote }`

      Poll permissions

      - `can_create: boolean`

        Can create polls

      - `can_view: boolean`

        Can view polls

      - `can_vote: boolean`

        Can vote on polls

    - `recorder_type: "RECORDER" or "LIVESTREAMER" or "NONE"`

      Type of the recording peer

      - `"RECORDER"`

      - `"LIVESTREAMER"`

      - `"NONE"`

    - `show_participant_list: boolean`

    - `waiting_room_type: "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

      Waiting room type

      - `"SKIP"`

      - `"ON_PRIVILEGED_USER_ENTRY"`

      - `"SKIP_ON_ACCEPT"`

    - `accept_stage_requests: optional boolean`

    - `is_recorder: optional boolean`

    - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

      - `"ALLOWED"`

      - `"NOT_ALLOWED"`

      - `"CAN_REQUEST"`

    - `stage_enabled: optional boolean`

    - `transcription_enabled: optional boolean`

  - `ui: object { design_tokens }`

    - `design_tokens: object { border_radius, border_width, colors, 5 more }`

      - `border_radius: "sharp" or "rounded" or "extra-rounded" or "circular"`

        - `"sharp"`

        - `"rounded"`

        - `"extra-rounded"`

        - `"circular"`

      - `border_width: "none" or "thin" or "fat"`

        - `"none"`

        - `"thin"`

        - `"fat"`

      - `colors: object { background, brand, danger, 5 more }`

        - `background: object { "1000", "600", "700", 2 more }`

          - `"1000": string`

          - `"600": string`

          - `"700": string`

          - `"800": string`

          - `"900": string`

        - `brand: object { "300", "400", "500", 2 more }`

          - `"300": string`

          - `"400": string`

          - `"500": string`

          - `"600": string`

          - `"700": string`

        - `danger: string`

        - `success: string`

        - `text: string`

        - `text_on_brand: string`

        - `video_bg: string`

        - `warning: string`

      - `spacing_base: number`

      - `theme: "darkest" or "dark" or "light"`

        - `"darkest"`

        - `"dark"`

        - `"light"`

      - `font_family: optional string`

      - `google_font: optional string`

      - `logo: optional string`

  - `updated_at: string`

    Timestamp this preset was last updated

- `success: boolean`

  Success status of the operation

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/presets/$PRESET_ID \
    -X PATCH \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{}'
```

#### Response

```json
{
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "config": {
      "max_screenshare_count": 0,
      "max_video_streams": {
        "desktop": 0,
        "mobile": 0
      },
      "media": {
        "screenshare": {
          "frame_rate": 0,
          "quality": "hd"
        },
        "video": {
          "frame_rate": 30,
          "quality": "hd",
          "simulcast": true
        },
        "audio": {
          "enable_high_bitrate": true,
          "enable_stereo": true
        }
      },
      "view_type": "GROUP_CALL",
      "livestream_viewer_qualities": [
        0
      ]
    },
    "created_at": "2019-12-27T18:11:19.117Z",
    "name": "name",
    "permissions": {
      "accept_waiting_requests": true,
      "can_accept_production_requests": true,
      "can_change_participant_permissions": true,
      "can_edit_display_name": true,
      "can_livestream": true,
      "can_record": true,
      "can_spotlight": true,
      "chat": {
        "private": {
          "can_receive": true,
          "can_send": true,
          "files": true,
          "text": true
        },
        "public": {
          "can_send": true,
          "files": true,
          "text": true
        }
      },
      "connected_meetings": {
        "can_alter_connected_meetings": true,
        "can_switch_connected_meetings": true,
        "can_switch_to_parent_meeting": true
      },
      "disable_participant_audio": true,
      "disable_participant_screensharing": true,
      "disable_participant_video": true,
      "hidden_participant": true,
      "kick_participant": true,
      "media": {
        "audio": {
          "can_produce": "ALLOWED"
        },
        "screenshare": {
          "can_produce": "ALLOWED"
        },
        "video": {
          "can_produce": "ALLOWED"
        }
      },
      "pin_participant": true,
      "plugins": {
        "can_close": true,
        "can_edit_config": true,
        "can_start": true,
        "config": {
          "foo": {
            "access_control": "FULL_ACCESS",
            "handles_view_only": true
          }
        }
      },
      "polls": {
        "can_create": true,
        "can_view": true,
        "can_vote": true
      },
      "recorder_type": "RECORDER",
      "show_participant_list": true,
      "waiting_room_type": "SKIP",
      "accept_stage_requests": true,
      "is_recorder": true,
      "stage_access": "ALLOWED",
      "stage_enabled": true,
      "transcription_enabled": true
    },
    "ui": {
      "design_tokens": {
        "border_radius": "sharp",
        "border_width": "none",
        "colors": {
          "background": {
            "600": "600",
            "700": "700",
            "800": "800",
            "900": "900",
            "1000": "1000"
          },
          "brand": {
            "300": "300",
            "400": "400",
            "500": "500",
            "600": "600",
            "700": "700"
          },
          "danger": "danger",
          "success": "success",
          "text": "text",
          "text_on_brand": "text_on_brand",
          "video_bg": "video_bg",
          "warning": "warning"
        },
        "spacing_base": 1,
        "theme": "darkest",
        "font_family": "font_family",
        "google_font": "google_font",
        "logo": "https://example.com"
      }
    },
    "updated_at": "2019-12-27T18:11:19.117Z"
  },
  "success": true
}
```

## Domain Types

### Preset Get Response

- `PresetGetResponse object { data, paging, success }`

  - `data: array of object { id, created_at, name, updated_at }`

    - `id: optional string`

      ID of the preset

    - `created_at: optional string`

      Timestamp this preset was created at

    - `name: optional string`

      Name of the preset

    - `updated_at: optional string`

      Timestamp this preset was last updated

  - `paging: object { end_offset, start_offset, total_count }`

    - `end_offset: number`

    - `start_offset: number`

    - `total_count: number`

  - `success: boolean`

### Preset Create Response

- `PresetCreateResponse object { data, success }`

  - `data: object { id, config, created_at, 4 more }`

    Data returned by the operation

    - `id: string`

      ID of the preset

    - `config: object { max_screenshare_count, max_video_streams, media, 2 more }`

      - `max_screenshare_count: number`

        Maximum number of screen shares that can be active at a given time

      - `max_video_streams: object { desktop, mobile }`

        Maximum number of streams that are visible on a device

        - `desktop: number`

          Maximum number of video streams visible on desktop devices

        - `mobile: number`

          Maximum number of streams visible on mobile devices

      - `media: object { screenshare, video, audio }`

        Media configuration options. eg: Video quality

        - `screenshare: object { frame_rate, quality }`

          Configuration options for participant screen shares

          - `frame_rate: number`

            Frame rate of screen share

          - `quality: "hd" or "vga" or "qvga" or 2 more`

            Quality of screen share

            - `"hd"`

            - `"vga"`

            - `"qvga"`

            - `"fhd"`

            - `"uhd"`

        - `video: object { frame_rate, quality, simulcast }`

          Configuration options for participant videos

          - `frame_rate: number`

            Frame rate of participants' video

          - `quality: "hd" or "vga" or "qvga" or 2 more`

            Video quality of participants

            - `"hd"`

            - `"vga"`

            - `"qvga"`

            - `"fhd"`

            - `"uhd"`

          - `simulcast: optional boolean`

            Enable simulcast for participant videos.

        - `audio: optional object { enable_high_bitrate, enable_stereo }`

          Control options for Audio quality.

          - `enable_high_bitrate: optional boolean`

            Enable High Quality Audio for your meetings

          - `enable_stereo: optional boolean`

            Enable Stereo for your meetings

      - `view_type: "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

        Type of the meeting

        - `"GROUP_CALL"`

        - `"WEBINAR"`

        - `"AUDIO_ROOM"`

        - `"LIVESTREAM"`

      - `livestream_viewer_qualities: optional array of number`

        Livestream viewer quality levels.

    - `created_at: string`

      Timestamp this preset was created at

    - `name: string`

      Name of the preset

    - `permissions: object { accept_waiting_requests, can_accept_production_requests, can_change_participant_permissions, 23 more }`

      - `accept_waiting_requests: boolean`

        Whether this participant can accept waiting requests

      - `can_accept_production_requests: boolean`

      - `can_change_participant_permissions: boolean`

      - `can_edit_display_name: boolean`

      - `can_livestream: boolean`

      - `can_record: boolean`

      - `can_spotlight: boolean`

      - `chat: object { private, public }`

        - `private: object { can_receive, can_send, files, text }`

          - `can_receive: boolean`

          - `can_send: boolean`

          - `files: boolean`

          - `text: boolean`

        - `public: object { can_send, files, text }`

          - `can_send: boolean`

            Can send messages in general

          - `files: boolean`

            Can send file messages

          - `text: boolean`

            Can send text messages

      - `connected_meetings: object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

        - `can_alter_connected_meetings: boolean`

        - `can_switch_connected_meetings: boolean`

        - `can_switch_to_parent_meeting: boolean`

      - `disable_participant_audio: boolean`

      - `disable_participant_screensharing: boolean`

      - `disable_participant_video: boolean`

      - `hidden_participant: boolean`

        Whether this participant is visible to others or not

      - `kick_participant: boolean`

      - `media: object { audio, screenshare, video }`

        Media permissions

        - `audio: object { can_produce }`

          Audio permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce audio

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

        - `screenshare: object { can_produce }`

          Screenshare permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce screen share video

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

        - `video: object { can_produce }`

          Video permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce video

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

      - `pin_participant: boolean`

      - `plugins: object { can_close, can_edit_config, can_start, config }`

        Plugin permissions

        - `can_close: boolean`

          Can close plugins that are already open

        - `can_edit_config: boolean`

          Can edit plugin config

        - `can_start: boolean`

          Can start plugins

        - `config: map[object { access_control, handles_view_only } ]`

          Plugin configuration keyed by plugin UUID.

          - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

            - `"FULL_ACCESS"`

            - `"VIEW_ONLY"`

          - `handles_view_only: optional boolean`

      - `polls: object { can_create, can_view, can_vote }`

        Poll permissions

        - `can_create: boolean`

          Can create polls

        - `can_view: boolean`

          Can view polls

        - `can_vote: boolean`

          Can vote on polls

      - `recorder_type: "RECORDER" or "LIVESTREAMER" or "NONE"`

        Type of the recording peer

        - `"RECORDER"`

        - `"LIVESTREAMER"`

        - `"NONE"`

      - `show_participant_list: boolean`

      - `waiting_room_type: "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

        Waiting room type

        - `"SKIP"`

        - `"ON_PRIVILEGED_USER_ENTRY"`

        - `"SKIP_ON_ACCEPT"`

      - `accept_stage_requests: optional boolean`

      - `is_recorder: optional boolean`

      - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

      - `stage_enabled: optional boolean`

      - `transcription_enabled: optional boolean`

    - `ui: object { design_tokens }`

      - `design_tokens: object { border_radius, border_width, colors, 5 more }`

        - `border_radius: "sharp" or "rounded" or "extra-rounded" or "circular"`

          - `"sharp"`

          - `"rounded"`

          - `"extra-rounded"`

          - `"circular"`

        - `border_width: "none" or "thin" or "fat"`

          - `"none"`

          - `"thin"`

          - `"fat"`

        - `colors: object { background, brand, danger, 5 more }`

          - `background: object { "1000", "600", "700", 2 more }`

            - `"1000": string`

            - `"600": string`

            - `"700": string`

            - `"800": string`

            - `"900": string`

          - `brand: object { "300", "400", "500", 2 more }`

            - `"300": string`

            - `"400": string`

            - `"500": string`

            - `"600": string`

            - `"700": string`

          - `danger: string`

          - `success: string`

          - `text: string`

          - `text_on_brand: string`

          - `video_bg: string`

          - `warning: string`

        - `spacing_base: number`

        - `theme: "darkest" or "dark" or "light"`

          - `"darkest"`

          - `"dark"`

          - `"light"`

        - `font_family: optional string`

        - `google_font: optional string`

        - `logo: optional string`

    - `updated_at: string`

      Timestamp this preset was last updated

  - `success: boolean`

    Success status of the operation

### Preset Get Preset By ID Response

- `PresetGetPresetByIDResponse object { data, success }`

  - `data: object { id, config, created_at, 4 more }`

    Data returned by the operation

    - `id: string`

      ID of the preset

    - `config: object { max_screenshare_count, max_video_streams, media, 2 more }`

      - `max_screenshare_count: number`

        Maximum number of screen shares that can be active at a given time

      - `max_video_streams: object { desktop, mobile }`

        Maximum number of streams that are visible on a device

        - `desktop: number`

          Maximum number of video streams visible on desktop devices

        - `mobile: number`

          Maximum number of streams visible on mobile devices

      - `media: object { screenshare, video, audio }`

        Media configuration options. eg: Video quality

        - `screenshare: object { frame_rate, quality }`

          Configuration options for participant screen shares

          - `frame_rate: number`

            Frame rate of screen share

          - `quality: "hd" or "vga" or "qvga" or 2 more`

            Quality of screen share

            - `"hd"`

            - `"vga"`

            - `"qvga"`

            - `"fhd"`

            - `"uhd"`

        - `video: object { frame_rate, quality, simulcast }`

          Configuration options for participant videos

          - `frame_rate: number`

            Frame rate of participants' video

          - `quality: "hd" or "vga" or "qvga" or 2 more`

            Video quality of participants

            - `"hd"`

            - `"vga"`

            - `"qvga"`

            - `"fhd"`

            - `"uhd"`

          - `simulcast: optional boolean`

            Enable simulcast for participant videos.

        - `audio: optional object { enable_high_bitrate, enable_stereo }`

          Control options for Audio quality.

          - `enable_high_bitrate: optional boolean`

            Enable High Quality Audio for your meetings

          - `enable_stereo: optional boolean`

            Enable Stereo for your meetings

      - `view_type: "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

        Type of the meeting

        - `"GROUP_CALL"`

        - `"WEBINAR"`

        - `"AUDIO_ROOM"`

        - `"LIVESTREAM"`

      - `livestream_viewer_qualities: optional array of number`

        Livestream viewer quality levels.

    - `created_at: string`

      Timestamp this preset was created at

    - `name: string`

      Name of the preset

    - `permissions: object { accept_waiting_requests, can_accept_production_requests, can_change_participant_permissions, 23 more }`

      - `accept_waiting_requests: boolean`

        Whether this participant can accept waiting requests

      - `can_accept_production_requests: boolean`

      - `can_change_participant_permissions: boolean`

      - `can_edit_display_name: boolean`

      - `can_livestream: boolean`

      - `can_record: boolean`

      - `can_spotlight: boolean`

      - `chat: object { private, public }`

        - `private: object { can_receive, can_send, files, text }`

          - `can_receive: boolean`

          - `can_send: boolean`

          - `files: boolean`

          - `text: boolean`

        - `public: object { can_send, files, text }`

          - `can_send: boolean`

            Can send messages in general

          - `files: boolean`

            Can send file messages

          - `text: boolean`

            Can send text messages

      - `connected_meetings: object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

        - `can_alter_connected_meetings: boolean`

        - `can_switch_connected_meetings: boolean`

        - `can_switch_to_parent_meeting: boolean`

      - `disable_participant_audio: boolean`

      - `disable_participant_screensharing: boolean`

      - `disable_participant_video: boolean`

      - `hidden_participant: boolean`

        Whether this participant is visible to others or not

      - `kick_participant: boolean`

      - `media: object { audio, screenshare, video }`

        Media permissions

        - `audio: object { can_produce }`

          Audio permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce audio

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

        - `screenshare: object { can_produce }`

          Screenshare permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce screen share video

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

        - `video: object { can_produce }`

          Video permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce video

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

      - `pin_participant: boolean`

      - `plugins: object { can_close, can_edit_config, can_start, config }`

        Plugin permissions

        - `can_close: boolean`

          Can close plugins that are already open

        - `can_edit_config: boolean`

          Can edit plugin config

        - `can_start: boolean`

          Can start plugins

        - `config: map[object { access_control, handles_view_only } ]`

          Plugin configuration keyed by plugin UUID.

          - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

            - `"FULL_ACCESS"`

            - `"VIEW_ONLY"`

          - `handles_view_only: optional boolean`

      - `polls: object { can_create, can_view, can_vote }`

        Poll permissions

        - `can_create: boolean`

          Can create polls

        - `can_view: boolean`

          Can view polls

        - `can_vote: boolean`

          Can vote on polls

      - `recorder_type: "RECORDER" or "LIVESTREAMER" or "NONE"`

        Type of the recording peer

        - `"RECORDER"`

        - `"LIVESTREAMER"`

        - `"NONE"`

      - `show_participant_list: boolean`

      - `waiting_room_type: "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

        Waiting room type

        - `"SKIP"`

        - `"ON_PRIVILEGED_USER_ENTRY"`

        - `"SKIP_ON_ACCEPT"`

      - `accept_stage_requests: optional boolean`

      - `is_recorder: optional boolean`

      - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

      - `stage_enabled: optional boolean`

      - `transcription_enabled: optional boolean`

    - `ui: object { design_tokens }`

      - `design_tokens: object { border_radius, border_width, colors, 5 more }`

        - `border_radius: "sharp" or "rounded" or "extra-rounded" or "circular"`

          - `"sharp"`

          - `"rounded"`

          - `"extra-rounded"`

          - `"circular"`

        - `border_width: "none" or "thin" or "fat"`

          - `"none"`

          - `"thin"`

          - `"fat"`

        - `colors: object { background, brand, danger, 5 more }`

          - `background: object { "1000", "600", "700", 2 more }`

            - `"1000": string`

            - `"600": string`

            - `"700": string`

            - `"800": string`

            - `"900": string`

          - `brand: object { "300", "400", "500", 2 more }`

            - `"300": string`

            - `"400": string`

            - `"500": string`

            - `"600": string`

            - `"700": string`

          - `danger: string`

          - `success: string`

          - `text: string`

          - `text_on_brand: string`

          - `video_bg: string`

          - `warning: string`

        - `spacing_base: number`

        - `theme: "darkest" or "dark" or "light"`

          - `"darkest"`

          - `"dark"`

          - `"light"`

        - `font_family: optional string`

        - `google_font: optional string`

        - `logo: optional string`

    - `updated_at: string`

      Timestamp this preset was last updated

  - `success: boolean`

    Success status of the operation

### Preset Delete Response

- `PresetDeleteResponse object { data, success }`

  - `data: object { id, config, created_at, 4 more }`

    Data returned by the operation

    - `id: string`

      ID of the preset

    - `config: object { max_screenshare_count, max_video_streams, media, 2 more }`

      - `max_screenshare_count: number`

        Maximum number of screen shares that can be active at a given time

      - `max_video_streams: object { desktop, mobile }`

        Maximum number of streams that are visible on a device

        - `desktop: number`

          Maximum number of video streams visible on desktop devices

        - `mobile: number`

          Maximum number of streams visible on mobile devices

      - `media: object { screenshare, video, audio }`

        Media configuration options. eg: Video quality

        - `screenshare: object { frame_rate, quality }`

          Configuration options for participant screen shares

          - `frame_rate: number`

            Frame rate of screen share

          - `quality: "hd" or "vga" or "qvga" or 2 more`

            Quality of screen share

            - `"hd"`

            - `"vga"`

            - `"qvga"`

            - `"fhd"`

            - `"uhd"`

        - `video: object { frame_rate, quality, simulcast }`

          Configuration options for participant videos

          - `frame_rate: number`

            Frame rate of participants' video

          - `quality: "hd" or "vga" or "qvga" or 2 more`

            Video quality of participants

            - `"hd"`

            - `"vga"`

            - `"qvga"`

            - `"fhd"`

            - `"uhd"`

          - `simulcast: optional boolean`

            Enable simulcast for participant videos.

        - `audio: optional object { enable_high_bitrate, enable_stereo }`

          Control options for Audio quality.

          - `enable_high_bitrate: optional boolean`

            Enable High Quality Audio for your meetings

          - `enable_stereo: optional boolean`

            Enable Stereo for your meetings

      - `view_type: "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

        Type of the meeting

        - `"GROUP_CALL"`

        - `"WEBINAR"`

        - `"AUDIO_ROOM"`

        - `"LIVESTREAM"`

      - `livestream_viewer_qualities: optional array of number`

        Livestream viewer quality levels.

    - `created_at: string`

      Timestamp this preset was created at

    - `name: string`

      Name of the preset

    - `permissions: object { accept_waiting_requests, can_accept_production_requests, can_change_participant_permissions, 23 more }`

      - `accept_waiting_requests: boolean`

        Whether this participant can accept waiting requests

      - `can_accept_production_requests: boolean`

      - `can_change_participant_permissions: boolean`

      - `can_edit_display_name: boolean`

      - `can_livestream: boolean`

      - `can_record: boolean`

      - `can_spotlight: boolean`

      - `chat: object { private, public }`

        - `private: object { can_receive, can_send, files, text }`

          - `can_receive: boolean`

          - `can_send: boolean`

          - `files: boolean`

          - `text: boolean`

        - `public: object { can_send, files, text }`

          - `can_send: boolean`

            Can send messages in general

          - `files: boolean`

            Can send file messages

          - `text: boolean`

            Can send text messages

      - `connected_meetings: object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

        - `can_alter_connected_meetings: boolean`

        - `can_switch_connected_meetings: boolean`

        - `can_switch_to_parent_meeting: boolean`

      - `disable_participant_audio: boolean`

      - `disable_participant_screensharing: boolean`

      - `disable_participant_video: boolean`

      - `hidden_participant: boolean`

        Whether this participant is visible to others or not

      - `kick_participant: boolean`

      - `media: object { audio, screenshare, video }`

        Media permissions

        - `audio: object { can_produce }`

          Audio permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce audio

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

        - `screenshare: object { can_produce }`

          Screenshare permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce screen share video

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

        - `video: object { can_produce }`

          Video permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce video

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

      - `pin_participant: boolean`

      - `plugins: object { can_close, can_edit_config, can_start, config }`

        Plugin permissions

        - `can_close: boolean`

          Can close plugins that are already open

        - `can_edit_config: boolean`

          Can edit plugin config

        - `can_start: boolean`

          Can start plugins

        - `config: map[object { access_control, handles_view_only } ]`

          Plugin configuration keyed by plugin UUID.

          - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

            - `"FULL_ACCESS"`

            - `"VIEW_ONLY"`

          - `handles_view_only: optional boolean`

      - `polls: object { can_create, can_view, can_vote }`

        Poll permissions

        - `can_create: boolean`

          Can create polls

        - `can_view: boolean`

          Can view polls

        - `can_vote: boolean`

          Can vote on polls

      - `recorder_type: "RECORDER" or "LIVESTREAMER" or "NONE"`

        Type of the recording peer

        - `"RECORDER"`

        - `"LIVESTREAMER"`

        - `"NONE"`

      - `show_participant_list: boolean`

      - `waiting_room_type: "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

        Waiting room type

        - `"SKIP"`

        - `"ON_PRIVILEGED_USER_ENTRY"`

        - `"SKIP_ON_ACCEPT"`

      - `accept_stage_requests: optional boolean`

      - `is_recorder: optional boolean`

      - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

      - `stage_enabled: optional boolean`

      - `transcription_enabled: optional boolean`

    - `ui: object { design_tokens }`

      - `design_tokens: object { border_radius, border_width, colors, 5 more }`

        - `border_radius: "sharp" or "rounded" or "extra-rounded" or "circular"`

          - `"sharp"`

          - `"rounded"`

          - `"extra-rounded"`

          - `"circular"`

        - `border_width: "none" or "thin" or "fat"`

          - `"none"`

          - `"thin"`

          - `"fat"`

        - `colors: object { background, brand, danger, 5 more }`

          - `background: object { "1000", "600", "700", 2 more }`

            - `"1000": string`

            - `"600": string`

            - `"700": string`

            - `"800": string`

            - `"900": string`

          - `brand: object { "300", "400", "500", 2 more }`

            - `"300": string`

            - `"400": string`

            - `"500": string`

            - `"600": string`

            - `"700": string`

          - `danger: string`

          - `success: string`

          - `text: string`

          - `text_on_brand: string`

          - `video_bg: string`

          - `warning: string`

        - `spacing_base: number`

        - `theme: "darkest" or "dark" or "light"`

          - `"darkest"`

          - `"dark"`

          - `"light"`

        - `font_family: optional string`

        - `google_font: optional string`

        - `logo: optional string`

    - `updated_at: string`

      Timestamp this preset was last updated

  - `success: boolean`

    Success status of the operation

### Preset Update Response

- `PresetUpdateResponse object { data, success }`

  - `data: object { id, config, created_at, 4 more }`

    Data returned by the operation

    - `id: string`

      ID of the preset

    - `config: object { max_screenshare_count, max_video_streams, media, 2 more }`

      - `max_screenshare_count: number`

        Maximum number of screen shares that can be active at a given time

      - `max_video_streams: object { desktop, mobile }`

        Maximum number of streams that are visible on a device

        - `desktop: number`

          Maximum number of video streams visible on desktop devices

        - `mobile: number`

          Maximum number of streams visible on mobile devices

      - `media: object { screenshare, video, audio }`

        Media configuration options. eg: Video quality

        - `screenshare: object { frame_rate, quality }`

          Configuration options for participant screen shares

          - `frame_rate: number`

            Frame rate of screen share

          - `quality: "hd" or "vga" or "qvga" or 2 more`

            Quality of screen share

            - `"hd"`

            - `"vga"`

            - `"qvga"`

            - `"fhd"`

            - `"uhd"`

        - `video: object { frame_rate, quality, simulcast }`

          Configuration options for participant videos

          - `frame_rate: number`

            Frame rate of participants' video

          - `quality: "hd" or "vga" or "qvga" or 2 more`

            Video quality of participants

            - `"hd"`

            - `"vga"`

            - `"qvga"`

            - `"fhd"`

            - `"uhd"`

          - `simulcast: optional boolean`

            Enable simulcast for participant videos.

        - `audio: optional object { enable_high_bitrate, enable_stereo }`

          Control options for Audio quality.

          - `enable_high_bitrate: optional boolean`

            Enable High Quality Audio for your meetings

          - `enable_stereo: optional boolean`

            Enable Stereo for your meetings

      - `view_type: "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or "LIVESTREAM"`

        Type of the meeting

        - `"GROUP_CALL"`

        - `"WEBINAR"`

        - `"AUDIO_ROOM"`

        - `"LIVESTREAM"`

      - `livestream_viewer_qualities: optional array of number`

        Livestream viewer quality levels.

    - `created_at: string`

      Timestamp this preset was created at

    - `name: string`

      Name of the preset

    - `permissions: object { accept_waiting_requests, can_accept_production_requests, can_change_participant_permissions, 23 more }`

      - `accept_waiting_requests: boolean`

        Whether this participant can accept waiting requests

      - `can_accept_production_requests: boolean`

      - `can_change_participant_permissions: boolean`

      - `can_edit_display_name: boolean`

      - `can_livestream: boolean`

      - `can_record: boolean`

      - `can_spotlight: boolean`

      - `chat: object { private, public }`

        - `private: object { can_receive, can_send, files, text }`

          - `can_receive: boolean`

          - `can_send: boolean`

          - `files: boolean`

          - `text: boolean`

        - `public: object { can_send, files, text }`

          - `can_send: boolean`

            Can send messages in general

          - `files: boolean`

            Can send file messages

          - `text: boolean`

            Can send text messages

      - `connected_meetings: object { can_alter_connected_meetings, can_switch_connected_meetings, can_switch_to_parent_meeting }`

        - `can_alter_connected_meetings: boolean`

        - `can_switch_connected_meetings: boolean`

        - `can_switch_to_parent_meeting: boolean`

      - `disable_participant_audio: boolean`

      - `disable_participant_screensharing: boolean`

      - `disable_participant_video: boolean`

      - `hidden_participant: boolean`

        Whether this participant is visible to others or not

      - `kick_participant: boolean`

      - `media: object { audio, screenshare, video }`

        Media permissions

        - `audio: object { can_produce }`

          Audio permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce audio

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

        - `screenshare: object { can_produce }`

          Screenshare permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce screen share video

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

        - `video: object { can_produce }`

          Video permissions

          - `can_produce: "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

            Can produce video

            - `"ALLOWED"`

            - `"NOT_ALLOWED"`

            - `"CAN_REQUEST"`

      - `pin_participant: boolean`

      - `plugins: object { can_close, can_edit_config, can_start, config }`

        Plugin permissions

        - `can_close: boolean`

          Can close plugins that are already open

        - `can_edit_config: boolean`

          Can edit plugin config

        - `can_start: boolean`

          Can start plugins

        - `config: map[object { access_control, handles_view_only } ]`

          Plugin configuration keyed by plugin UUID.

          - `access_control: optional "FULL_ACCESS" or "VIEW_ONLY"`

            - `"FULL_ACCESS"`

            - `"VIEW_ONLY"`

          - `handles_view_only: optional boolean`

      - `polls: object { can_create, can_view, can_vote }`

        Poll permissions

        - `can_create: boolean`

          Can create polls

        - `can_view: boolean`

          Can view polls

        - `can_vote: boolean`

          Can vote on polls

      - `recorder_type: "RECORDER" or "LIVESTREAMER" or "NONE"`

        Type of the recording peer

        - `"RECORDER"`

        - `"LIVESTREAMER"`

        - `"NONE"`

      - `show_participant_list: boolean`

      - `waiting_room_type: "SKIP" or "ON_PRIVILEGED_USER_ENTRY" or "SKIP_ON_ACCEPT"`

        Waiting room type

        - `"SKIP"`

        - `"ON_PRIVILEGED_USER_ENTRY"`

        - `"SKIP_ON_ACCEPT"`

      - `accept_stage_requests: optional boolean`

      - `is_recorder: optional boolean`

      - `stage_access: optional "ALLOWED" or "NOT_ALLOWED" or "CAN_REQUEST"`

        - `"ALLOWED"`

        - `"NOT_ALLOWED"`

        - `"CAN_REQUEST"`

      - `stage_enabled: optional boolean`

      - `transcription_enabled: optional boolean`

    - `ui: object { design_tokens }`

      - `design_tokens: object { border_radius, border_width, colors, 5 more }`

        - `border_radius: "sharp" or "rounded" or "extra-rounded" or "circular"`

          - `"sharp"`

          - `"rounded"`

          - `"extra-rounded"`

          - `"circular"`

        - `border_width: "none" or "thin" or "fat"`

          - `"none"`

          - `"thin"`

          - `"fat"`

        - `colors: object { background, brand, danger, 5 more }`

          - `background: object { "1000", "600", "700", 2 more }`

            - `"1000": string`

            - `"600": string`

            - `"700": string`

            - `"800": string`

            - `"900": string`

          - `brand: object { "300", "400", "500", 2 more }`

            - `"300": string`

            - `"400": string`

            - `"500": string`

            - `"600": string`

            - `"700": string`

          - `danger: string`

          - `success: string`

          - `text: string`

          - `text_on_brand: string`

          - `video_bg: string`

          - `warning: string`

        - `spacing_base: number`

        - `theme: "darkest" or "dark" or "light"`

          - `"darkest"`

          - `"dark"`

          - `"light"`

        - `font_family: optional string`

        - `google_font: optional string`

        - `logo: optional string`

    - `updated_at: string`

      Timestamp this preset was last updated

  - `success: boolean`

    Success status of the operation

# Sessions

## Fetch all sessions of an App

**get** `/accounts/{account_id}/realtime/kit/{app_id}/sessions`

Returns details of all sessions of an App.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Query Parameters

- `associated_id: optional string`

  ID of the meeting that sessions should be associated with

- `end_time: optional string`

  The end time range for which you want to retrieve the meetings. The time must be specified in ISO format.

- `page_no: optional number`

  The page number from which you want your page search results to be displayed.

- `participants: optional string`

- `per_page: optional number`

  Number of results per page

- `search: optional string`

  Search string that matches sessions based on meeting title, meeting ID, and session ID

- `sort_by: optional "minutesConsumed" or "createdAt"`

  - `"minutesConsumed"`

  - `"createdAt"`

- `sort_order: optional "ASC" or "DESC"`

  - `"ASC"`

  - `"DESC"`

- `start_time: optional string`

  The start time range for which you want to retrieve the meetings. The time must be specified in ISO format.

- `status: optional "LIVE" or "ENDED"`

  - `"LIVE"`

  - `"ENDED"`

### Returns

- `data: optional object { sessions }`

  - `sessions: optional array of object { id, associated_id, created_at, 11 more }`

    - `id: string`

      ID of the session

    - `associated_id: string`

      ID of the meeting this session is associated with. In the case of V2 meetings, it is always a UUID. In V1 meetings, it is a room name of the form `abcdef-ghijkl`

    - `created_at: string`

      timestamp when session created

    - `live_participants: number`

      number of participants currently in the session

    - `max_concurrent_participants: number`

      number of maximum participants that were in the session

    - `meeting_display_name: string`

      Title of the meeting this session belongs to

    - `minutes_consumed: number`

      number of minutes consumed since the session started

    - `organization_id: string`

      App id that hosted this session

    - `started_at: string`

      timestamp when session started

    - `status: "LIVE" or "ENDED"`

      current status of session

      - `"LIVE"`

      - `"ENDED"`

    - `type: "meeting" or "livestream" or "participant"`

      type of session

      - `"meeting"`

      - `"livestream"`

      - `"participant"`

    - `updated_at: string`

      timestamp when session was last updated

    - `breakout_rooms: optional array of unknown`

    - `ended_at: optional string`

      timestamp when session ended

- `paging: optional object { end_offset, start_offset, total_count }`

  - `end_offset: optional number`

  - `start_offset: optional number`

  - `total_count: optional number`

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "sessions": [
      {
        "id": "id",
        "associated_id": "associated_id",
        "created_at": "created_at",
        "live_participants": 0,
        "max_concurrent_participants": 0,
        "meeting_display_name": "meeting_display_name",
        "minutes_consumed": 0,
        "organization_id": "organization_id",
        "started_at": "started_at",
        "status": "LIVE",
        "type": "meeting",
        "updated_at": "updated_at",
        "breakout_rooms": [
          {}
        ],
        "ended_at": "ended_at"
      }
    ]
  },
  "paging": {
    "end_offset": 0,
    "start_offset": 0,
    "total_count": 0
  },
  "success": true
}
```

## Fetch details of a session

**get** `/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}`

Returns data of the given session ID including recording details.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `session_id: string`

### Query Parameters

- `include_breakout_rooms: optional boolean`

  List all breakout rooms

### Returns

- `data: optional object { id, associated_id, created_at, 11 more }`

  - `id: string`

    ID of the session

  - `associated_id: string`

    ID of the meeting this session is associated with. In the case of V2 meetings, it is always a UUID. In V1 meetings, it is a room name of the form `abcdef-ghijkl`

  - `created_at: string`

    timestamp when session created

  - `live_participants: number`

    number of participants currently in the session

  - `max_concurrent_participants: number`

    number of maximum participants that were in the session

  - `meeting_display_name: string`

    Title of the meeting this session belongs to

  - `minutes_consumed: number`

    number of minutes consumed since the session started

  - `organization_id: string`

    App id that hosted this session

  - `started_at: string`

    timestamp when session started

  - `status: "LIVE" or "ENDED"`

    current status of session

    - `"LIVE"`

    - `"ENDED"`

  - `type: "meeting" or "livestream" or "participant"`

    type of session

    - `"meeting"`

    - `"livestream"`

    - `"participant"`

  - `updated_at: string`

    timestamp when session was last updated

  - `breakout_rooms: optional array of unknown`

  - `ended_at: optional string`

    timestamp when session ended

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "id",
    "associated_id": "associated_id",
    "created_at": "created_at",
    "live_participants": 0,
    "max_concurrent_participants": 0,
    "meeting_display_name": "meeting_display_name",
    "minutes_consumed": 0,
    "organization_id": "organization_id",
    "started_at": "started_at",
    "status": "LIVE",
    "type": "meeting",
    "updated_at": "updated_at",
    "breakout_rooms": [
      {}
    ],
    "ended_at": "ended_at"
  },
  "success": true
}
```

## Fetch participants list of a session

**get** `/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}/participants`

Returns a list of participants for the given session ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `session_id: string`

### Query Parameters

- `include_peer_events: optional boolean`

  if true, response includes all the peer events of participants.

- `page_no: optional number`

  The page number from which you want your page search results to be displayed.

- `per_page: optional number`

  Number of results per page

- `search: optional string`

  The search query string. You can search using participant ID, custom participant ID, or display name.

- `sort_by: optional "joinedAt" or "duration"`

  - `"joinedAt"`

  - `"duration"`

- `sort_order: optional "ASC" or "DESC"`

  - `"ASC"`

  - `"DESC"`

- `view: optional "raw" or "consolidated"`

  In breakout room sessions, the view parameter can be set to `raw` for session specific duration for participants or `consolidated` to accumulate breakout room durations.

  - `"raw"`

  - `"consolidated"`

### Returns

- `data: optional object { participants }`

  - `participants: optional array of object { id, created_at, custom_participant_id, 8 more }`

    - `id: optional string`

      Participant ID. This maps to the corresponding peerId.

    - `created_at: optional string`

      timestamp when this participant was created.

    - `custom_participant_id: optional string`

      ID passed by client to create this participant.

    - `display_name: optional string`

      Display name of participant when joining the session.

    - `duration: optional number`

      number of minutes for which the participant was in the session.

    - `joined_at: optional string`

      timestamp at which participant joined the session.

    - `left_at: optional string`

      timestamp at which participant left the session.

    - `peer_events: optional array of object { id, created_at, event_name, 7 more }`

      Connection lifecycle events for the participant's peer. Only included when `include_peer_events` is true.

      - `id: optional string`

        ID of the peer event.

      - `created_at: optional string`

        Timestamp when this peer event was created.

      - `event_name: optional "PEER_CREATED" or "PEER_JOINING" or "PEER_LEAVING"`

        Name of the peer event.

        - `"PEER_CREATED"`

        - `"PEER_JOINING"`

        - `"PEER_LEAVING"`

      - `minutes_consumed: optional number`

        Minutes consumed attributed to this event.

      - `participant_id: optional string`

        ID of the participant this event belongs to.

      - `peer_id: optional string`

        Peer ID this event belongs to.

      - `preset_view_type: optional "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or 2 more`

        View type of the preset associated with the peer.

        - `"GROUP_CALL"`

        - `"WEBINAR"`

        - `"AUDIO_ROOM"`

        - `"LIVESTREAM"`

        - `"CHAT"`

      - `session_id: optional string`

        ID of the session this event belongs to.

      - `socket_session_id: optional string`

        ID of the socket session associated with this event.

      - `updated_at: optional string`

        Timestamp when this peer event was last updated.

    - `preset_name: optional string`

      Name of the preset associated with the participant.

    - `updated_at: optional string`

      timestamp when this participant's data was last updated.

    - `user_id: optional string`

      User id for this participant.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID/participants \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "paging": {
      "end_offset": 2,
      "start_offset": 1,
      "total_count": 123
    },
    "participants": [
      {
        "created_at": "2023-02-01T10:51:08.039Z",
        "custom_participant_id": "83qi0i",
        "display_name": "Mark",
        "duration": 5.8097,
        "id": "005f4e0c-4d08-4d4e-a391-a76be75cd296",
        "joined_at": "2023-02-01T10:51:08.030Z",
        "left_at": "2023-02-01T10:56:56.612Z",
        "preset_name": "webinar_participant",
        "updated_at": "2023-02-01T10:56:56.618Z",
        "user_id": "0a08343d-a9dc-45f0-9feb-6a64afcc4f81"
      },
      {
        "created_at": "2023-02-01T10:50:36.853Z",
        "custom_participant_id": "3uggr",
        "display_name": "Henry",
        "duration": 6.9263,
        "id": "51fdf95f-d893-471a-922b-7db7adb14453",
        "joined_at": "2023-02-01T10:50:36.846Z\"",
        "left_at": "2023-02-01T10:57:32.424Z",
        "preset_name": "webinar_participant",
        "updated_at": "2023-02-01T10:57:32.431Z",
        "user_id": "85e7f0fd-7c16-45e9-9d68-f17ef007c4eb"
      }
    ]
  },
  "success": true
}
```

## Fetch details of a participant

**get** `/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}/participants/{participant_id}`

Returns details of the given participant ID along with call statistics for the given session ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `session_id: string`

- `participant_id: string`

### Query Parameters

- `include_peer_events: optional boolean`

  if true, response includes all the peer events of participant.

### Returns

- `data: optional object { participant }`

  - `participant: optional object { id, created_at, custom_participant_id, 8 more }`

    - `id: optional string`

      Participant ID. This maps to the corresponding peerId.

    - `created_at: optional string`

      timestamp when this participant was created.

    - `custom_participant_id: optional string`

      ID passed by client to create this participant.

    - `display_name: optional string`

      Display name of participant when joining the session.

    - `duration: optional number`

      number of minutes for which the participant was in the session.

    - `joined_at: optional string`

      timestamp at which participant joined the session.

    - `left_at: optional string`

      timestamp at which participant left the session.

    - `peer_events: optional array of object { id, created_at, event_name, 7 more }`

      Connection lifecycle events for the participant's peer. Only included when `include_peer_events` is true.

      - `id: optional string`

        ID of the peer event.

      - `created_at: optional string`

        Timestamp when this peer event was created.

      - `event_name: optional "PEER_CREATED" or "PEER_JOINING" or "PEER_LEAVING"`

        Name of the peer event.

        - `"PEER_CREATED"`

        - `"PEER_JOINING"`

        - `"PEER_LEAVING"`

      - `minutes_consumed: optional number`

        Minutes consumed attributed to this event.

      - `participant_id: optional string`

        ID of the participant this event belongs to.

      - `peer_id: optional string`

        Peer ID this event belongs to.

      - `preset_view_type: optional "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or 2 more`

        View type of the preset associated with the peer.

        - `"GROUP_CALL"`

        - `"WEBINAR"`

        - `"AUDIO_ROOM"`

        - `"LIVESTREAM"`

        - `"CHAT"`

      - `session_id: optional string`

        ID of the session this event belongs to.

      - `socket_session_id: optional string`

        ID of the socket session associated with this event.

      - `updated_at: optional string`

        Timestamp when this peer event was last updated.

    - `preset_name: optional string`

      Name of the preset associated with the participant.

    - `updated_at: optional string`

      timestamp when this participant's data was last updated.

    - `user_id: optional string`

      User id for this participant.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID/participants/$PARTICIPANT_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "participant": {
      "id": "id",
      "created_at": "created_at",
      "custom_participant_id": "custom_participant_id",
      "display_name": "display_name",
      "duration": 0,
      "joined_at": "joined_at",
      "left_at": "left_at",
      "peer_events": [
        {
          "id": "id",
          "created_at": "created_at",
          "event_name": "PEER_CREATED",
          "minutes_consumed": 0,
          "participant_id": "participant_id",
          "peer_id": "peer_id",
          "preset_view_type": "GROUP_CALL",
          "session_id": "session_id",
          "socket_session_id": "socket_session_id",
          "updated_at": "updated_at"
        }
      ],
      "preset_name": "preset_name",
      "updated_at": "updated_at",
      "user_id": "user_id"
    }
  },
  "success": true
}
```

## Fetch all chat messages of a session

**get** `/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}/chat`

Returns a URL to download all chat messages of the session ID in CSV format.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `session_id: string`

### Returns

- `data: optional object { chat_download_url, chat_download_url_expiry }`

  - `chat_download_url: string`

    URL where the chat logs can be downloaded

  - `chat_download_url_expiry: string`

    Time when the download URL will expire

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID/chat \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "chat_download_url": "chat_download_url",
    "chat_download_url_expiry": "chat_download_url_expiry"
  },
  "success": true
}
```

## Fetch the complete transcript for a session

**get** `/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}/transcript`

Returns a URL to download the transcript for the session ID in CSV format.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `session_id: string`

### Query Parameters

- `format: optional "SRT" or "VTT" or "JSON" or "CSV"`

  Transcript file format to fetch.

  - `"SRT"`

  - `"VTT"`

  - `"JSON"`

  - `"CSV"`

### Returns

- `data: optional object { sessionId, transcript_download_url, transcript_download_url_expiry }`

  - `sessionId: string`

  - `transcript_download_url: string`

    URL where the transcript can be downloaded

  - `transcript_download_url_expiry: string`

    Time when the download URL will expire

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID/transcript \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "sessionId": "sessionId",
    "transcript_download_url": "transcript_download_url",
    "transcript_download_url_expiry": "transcript_download_url_expiry"
  },
  "success": true
}
```

## Fetch summary of transcripts for a session

**get** `/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}/summary`

Returns a Summary URL to download the Summary of Transcripts for the session ID as plain text.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `session_id: string`

### Returns

- `data: optional object { sessionId, summaryDownloadUrl, summaryDownloadUrlExpiry }`

  - `sessionId: string`

  - `summaryDownloadUrl: string`

    URL where the summary of transcripts can be downloaded

  - `summaryDownloadUrlExpiry: string`

    Time of Expiry before when you need to download the csv file.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID/summary \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "sessionId": "sessionId",
    "summaryDownloadUrl": "summaryDownloadUrl",
    "summaryDownloadUrlExpiry": "summaryDownloadUrlExpiry"
  },
  "success": true
}
```

## Generate summary of Transcripts for the session

**post** `/accounts/{account_id}/realtime/kit/{app_id}/sessions/{session_id}/summary`

Trigger Summary generation of Transcripts for the session ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `session_id: string`

### Returns

- `data: optional object { session_id, status }`

  - `session_id: optional string`

  - `status: optional string`

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/$SESSION_ID/summary \
    -X POST \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "session_id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "status": "status"
  },
  "success": true
}
```

## Fetch details of peer

**get** `/accounts/{account_id}/realtime/kit/{app_id}/sessions/peer-report/{peer_id}`

Returns participant details for the given peer ID along with call statistics.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `peer_id: string`

### Query Parameters

- `filters: optional "device_info" or "ip_information" or "precall_network_information" or 2 more`

  Filter to apply to the peer report.

  - `"device_info"`

  - `"ip_information"`

  - `"precall_network_information"`

  - `"events"`

  - `"quality_stats"`

- `include_peer_events: optional boolean`

  if true, response includes all the peer events of participant.

### Returns

- `data: optional object { participant }`

  - `participant: optional object { id, created_at, custom_participant_id, 10 more }`

    - `id: optional string`

      ID of the participant.

    - `created_at: optional string`

      timestamp when this participant was created.

    - `custom_participant_id: optional string`

      ID passed by client to create this participant.

    - `display_name: optional string`

      Display name of participant when joining the session.

    - `duration: optional number`

      number of minutes for which the participant was in the session.

    - `joined_at: optional string`

      timestamp at which participant joined the session.

    - `left_at: optional string`

      timestamp at which participant left the session.

    - `peer_events: optional array of object { id, created_at, event_name, 7 more }`

      Connection lifecycle events for the participant's peer.

      - `id: optional string`

        ID of the peer event.

      - `created_at: optional string`

        Timestamp when this peer event was created.

      - `event_name: optional "PEER_CREATED" or "PEER_JOINING" or "PEER_LEAVING"`

        Name of the peer event.

        - `"PEER_CREATED"`

        - `"PEER_JOINING"`

        - `"PEER_LEAVING"`

      - `minutes_consumed: optional number`

        Minutes consumed attributed to this event.

      - `participant_id: optional string`

        ID of the participant this event belongs to.

      - `peer_id: optional string`

        Peer ID this event belongs to.

      - `preset_view_type: optional "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or 2 more`

        View type of the preset associated with the peer.

        - `"GROUP_CALL"`

        - `"WEBINAR"`

        - `"AUDIO_ROOM"`

        - `"LIVESTREAM"`

        - `"CHAT"`

      - `session_id: optional string`

        ID of the session this event belongs to.

      - `socket_session_id: optional string`

        ID of the socket session associated with this event.

      - `updated_at: optional string`

        Timestamp when this peer event was last updated.

    - `peer_report: optional object { metadata, quality }`

      Peer call statistics report.

      - `metadata: optional object { audio_devices_updates, browser_metadata, candidate_pairs, 12 more }`

        Connection and device metadata for the participant.

        - `audio_devices_updates: optional array of object { added, removed, timestamp }`

          - `added: optional array of object { device_id, kind, label }`

            Devices that became available.

            - `device_id: optional string`

              ID of the device.

            - `kind: optional string`

              Kind of device, for example audioinput or videoinput.

            - `label: optional string`

              Human-readable label of the device.

          - `removed: optional array of object { device_id, kind, label }`

            Devices that became unavailable.

            - `device_id: optional string`

              ID of the device.

            - `kind: optional string`

              Kind of device, for example audioinput or videoinput.

            - `label: optional string`

              Human-readable label of the device.

          - `timestamp: optional string`

            Timestamp of the device update.

        - `browser_metadata: optional object { browser, browser_version, engine, 2 more }`

          - `browser: optional string`

          - `browser_version: optional string`

          - `engine: optional string`

          - `user_agent: optional string`

          - `webgl_support: optional boolean`

        - `candidate_pairs: optional object { consuming_transport, producing_transport }`

          - `consuming_transport: optional array of object { available_incoming_bitrate, available_outgoing_bitrate, bytes_discarded_on_send, 25 more }`

            - `available_incoming_bitrate: optional number`

            - `available_outgoing_bitrate: optional number`

            - `bytes_discarded_on_send: optional number`

            - `bytes_received: optional number`

            - `bytes_sent: optional number`

            - `current_round_trip_time: optional number`

            - `last_packet_received_timestamp: optional number`

              Epoch milliseconds when the last packet was received.

            - `last_packet_sent_timestamp: optional number`

              Epoch milliseconds when the last packet was sent.

            - `local_candidate_address: optional string`

            - `local_candidate_id: optional string`

            - `local_candidate_network_type: optional string`

            - `local_candidate_port: optional number`

            - `local_candidate_protocol: optional string`

            - `local_candidate_related_address: optional string`

            - `local_candidate_related_port: optional number`

            - `local_candidate_type: optional string`

            - `local_candidate_url: optional string`

            - `nominated: optional boolean`

            - `packets_discarded_on_send: optional number`

            - `packets_received: optional number`

            - `packets_sent: optional number`

            - `remote_candidate_address: optional string`

            - `remote_candidate_id: optional string`

            - `remote_candidate_port: optional number`

            - `remote_candidate_protocol: optional string`

            - `remote_candidate_type: optional string`

            - `remote_candidate_url: optional string`

            - `total_round_trip_time: optional number`

          - `producing_transport: optional array of object { available_incoming_bitrate, available_outgoing_bitrate, bytes_discarded_on_send, 25 more }`

            - `available_incoming_bitrate: optional number`

            - `available_outgoing_bitrate: optional number`

            - `bytes_discarded_on_send: optional number`

            - `bytes_received: optional number`

            - `bytes_sent: optional number`

            - `current_round_trip_time: optional number`

            - `last_packet_received_timestamp: optional number`

              Epoch milliseconds when the last packet was received.

            - `last_packet_sent_timestamp: optional number`

              Epoch milliseconds when the last packet was sent.

            - `local_candidate_address: optional string`

            - `local_candidate_id: optional string`

            - `local_candidate_network_type: optional string`

            - `local_candidate_port: optional number`

            - `local_candidate_protocol: optional string`

            - `local_candidate_related_address: optional string`

            - `local_candidate_related_port: optional number`

            - `local_candidate_type: optional string`

            - `local_candidate_url: optional string`

            - `nominated: optional boolean`

            - `packets_discarded_on_send: optional number`

            - `packets_received: optional number`

            - `packets_sent: optional number`

            - `remote_candidate_address: optional string`

            - `remote_candidate_id: optional string`

            - `remote_candidate_port: optional number`

            - `remote_candidate_protocol: optional string`

            - `remote_candidate_type: optional string`

            - `remote_candidate_url: optional string`

            - `total_round_trip_time: optional number`

        - `device_info: optional object { cpus, is_mobile, os, os_version }`

          - `cpus: optional number`

          - `is_mobile: optional boolean`

          - `os: optional string`

          - `os_version: optional string`

        - `events: optional array of object { metadata, name, timestamp }`

          - `metadata: optional map[string or number or boolean]`

            Event-specific metadata. Keys vary per event; values are primitive scalars (string, number, boolean, or null).

            - `string`

            - `number`

            - `boolean`

          - `name: optional string`

            Name of the event.

          - `timestamp: optional string`

            Timestamp when the event occurred.

        - `ip_information: optional object { asn, city, country, 4 more }`

          - `asn: optional object { asn, domain, name, 2 more }`

            - `asn: optional string`

            - `domain: optional string`

            - `name: optional string`

            - `route: optional string`

            - `type: optional string`

          - `city: optional string`

          - `country: optional string`

          - `ipv4: optional string`

          - `org: optional string`

          - `region: optional string`

          - `timezone: optional string`

        - `native_metadata: optional object { audio_encoder, video_encoder }`

          - `audio_encoder: optional string`

          - `video_encoder: optional string`

        - `pc_metadata: optional array of object { effective_network_type, reflexive_connectivity, relay_connectivity, 3 more }`

          - `effective_network_type: optional string`

          - `reflexive_connectivity: optional boolean`

          - `relay_connectivity: optional boolean`

          - `sdp: optional array of string`

          - `timestamp: optional string`

          - `turn_connectivity: optional boolean`

        - `room_view_type: optional string`

        - `sdk_name: optional string`

        - `sdk_type: optional string`

        - `sdk_version: optional string`

        - `selected_device_updates: optional array of object { device, timestamp }`

          - `device: optional object { device_id, kind, label }`

            A media device (camera, microphone, or speaker).

            - `device_id: optional string`

              ID of the device.

            - `kind: optional string`

              Kind of device, for example audioinput or videoinput.

            - `label: optional string`

              Human-readable label of the device.

          - `timestamp: optional string`

        - `speaker_devices_updates: optional array of object { added, removed, timestamp }`

          - `added: optional array of object { device_id, kind, label }`

            Devices that became available.

            - `device_id: optional string`

              ID of the device.

            - `kind: optional string`

              Kind of device, for example audioinput or videoinput.

            - `label: optional string`

              Human-readable label of the device.

          - `removed: optional array of object { device_id, kind, label }`

            Devices that became unavailable.

            - `device_id: optional string`

              ID of the device.

            - `kind: optional string`

              Kind of device, for example audioinput or videoinput.

            - `label: optional string`

              Human-readable label of the device.

          - `timestamp: optional string`

            Timestamp of the device update.

        - `video_devices_updates: optional array of object { added, removed, timestamp }`

          - `added: optional array of object { device_id, kind, label }`

            Devices that became available.

            - `device_id: optional string`

              ID of the device.

            - `kind: optional string`

              Kind of device, for example audioinput or videoinput.

            - `label: optional string`

              Human-readable label of the device.

          - `removed: optional array of object { device_id, kind, label }`

            Devices that became unavailable.

            - `device_id: optional string`

              ID of the device.

            - `kind: optional string`

              Kind of device, for example audioinput or videoinput.

            - `label: optional string`

              Human-readable label of the device.

          - `timestamp: optional string`

            Timestamp of the device update.

      - `quality: optional object { audio_consumer, audio_consumer_cumulative, audio_producer, 13 more }`

        Media quality statistics for the participant.

        - `audio_consumer: optional array of object { bytes_received, concealment_events, consumer_id, 11 more }`

          - `bytes_received: optional number`

          - `concealment_events: optional number`

          - `consumer_id: optional string`

          - `jitter: optional number`

          - `jitter_buffer_delay: optional number`

          - `jitter_buffer_emitted_count: optional number`

          - `mid: optional string`

          - `mos_quality: optional number`

          - `packets_lost: optional number`

          - `packets_received: optional number`

          - `peer_id: optional string`

          - `producer_id: optional string`

          - `ssrc: optional number`

          - `timestamp: optional string`

        - `audio_consumer_cumulative: optional object { jitter_buffer_delay, packet_loss, quality_mos }`

          Aggregated inbound (consumer) audio statistics for the session.

          - `jitter_buffer_delay: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

            Cumulative latency distribution (milliseconds-based thresholds).

            - `"100ms_or_greater_event_fraction": optional number`

            - `"250ms_or_greater_event_fraction": optional number`

            - `"500ms_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

            Cumulative packet loss distribution.

            - `"10_or_greater_event_fraction": optional number`

            - `"25_or_greater_event_fraction": optional number`

            - `"5_or_greater_event_fraction": optional number`

            - `"50_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `quality_mos: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

        - `audio_producer: optional array of object { bytes_sent, jitter, mid, 7 more }`

          - `bytes_sent: optional number`

          - `jitter: optional number`

          - `mid: optional string`

          - `mos_quality: optional number`

          - `packets_lost: optional number`

          - `packets_sent: optional number`

          - `producer_id: optional string`

          - `rtt: optional number`

          - `ssrc: optional number`

          - `timestamp: optional string`

        - `audio_producer_cumulative: optional object { packet_loss, quality_mos, rtt }`

          Aggregated outbound (producer) audio statistics for the session.

          - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

            Cumulative packet loss distribution.

            - `"10_or_greater_event_fraction": optional number`

            - `"25_or_greater_event_fraction": optional number`

            - `"5_or_greater_event_fraction": optional number`

            - `"50_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `quality_mos: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `rtt: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

            Cumulative latency distribution (milliseconds-based thresholds).

            - `"100ms_or_greater_event_fraction": optional number`

            - `"250ms_or_greater_event_fraction": optional number`

            - `"500ms_or_greater_event_fraction": optional number`

            - `avg: optional number`

        - `screenshare_audio_consumer: optional array of object { bytes_received, concealment_events, consumer_id, 11 more }`

          - `bytes_received: optional number`

          - `concealment_events: optional number`

          - `consumer_id: optional string`

          - `jitter: optional number`

          - `jitter_buffer_delay: optional number`

          - `jitter_buffer_emitted_count: optional number`

          - `mid: optional string`

          - `mos_quality: optional number`

          - `packets_lost: optional number`

          - `packets_received: optional number`

          - `peer_id: optional string`

          - `producer_id: optional string`

          - `ssrc: optional number`

          - `timestamp: optional string`

        - `screenshare_audio_consumer_cumulative: optional object { jitter_buffer_delay, packet_loss, quality_mos }`

          Aggregated inbound (consumer) audio statistics for the session.

          - `jitter_buffer_delay: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

            Cumulative latency distribution (milliseconds-based thresholds).

            - `"100ms_or_greater_event_fraction": optional number`

            - `"250ms_or_greater_event_fraction": optional number`

            - `"500ms_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

            Cumulative packet loss distribution.

            - `"10_or_greater_event_fraction": optional number`

            - `"25_or_greater_event_fraction": optional number`

            - `"5_or_greater_event_fraction": optional number`

            - `"50_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `quality_mos: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

        - `screenshare_audio_producer: optional array of object { bytes_sent, jitter, mid, 7 more }`

          - `bytes_sent: optional number`

          - `jitter: optional number`

          - `mid: optional string`

          - `mos_quality: optional number`

          - `packets_lost: optional number`

          - `packets_sent: optional number`

          - `producer_id: optional string`

          - `rtt: optional number`

          - `ssrc: optional number`

          - `timestamp: optional string`

        - `screenshare_audio_producer_cumulative: optional object { packet_loss, quality_mos, rtt }`

          Aggregated outbound (producer) audio statistics for the session.

          - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

            Cumulative packet loss distribution.

            - `"10_or_greater_event_fraction": optional number`

            - `"25_or_greater_event_fraction": optional number`

            - `"5_or_greater_event_fraction": optional number`

            - `"50_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `quality_mos: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `rtt: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

            Cumulative latency distribution (milliseconds-based thresholds).

            - `"100ms_or_greater_event_fraction": optional number`

            - `"250ms_or_greater_event_fraction": optional number`

            - `"500ms_or_greater_event_fraction": optional number`

            - `avg: optional number`

        - `screenshare_video_consumer: optional array of object { bytes_received, consumer_id, fir_count, 17 more }`

          - `bytes_received: optional number`

          - `consumer_id: optional string`

          - `fir_count: optional number`

          - `frame_height: optional number`

          - `frame_width: optional number`

          - `frames_decoded: optional number`

          - `frames_dropped: optional number`

          - `frames_per_second: optional number`

          - `jitter: optional number`

          - `jitter_buffer_delay: optional number`

          - `jitter_buffer_emitted_count: optional number`

          - `key_frames_decoded: optional number`

          - `mid: optional string`

          - `mos_quality: optional number`

          - `packets_lost: optional number`

          - `packets_received: optional number`

          - `peer_id: optional string`

          - `producer_id: optional string`

          - `ssrc: optional number`

          - `timestamp: optional string`

        - `screenshare_video_consumer_cumulative: optional object { frame_per_second, frame_width, issues, 4 more }`

          Aggregated inbound (consumer) video statistics for the session.

          - `frame_per_second: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `frame_width: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `issues: optional object { lag_fraction, no_video_fraction, poor_resolution_fraction }`

            - `lag_fraction: optional number`

            - `no_video_fraction: optional number`

            - `poor_resolution_fraction: optional number`

          - `jitter_buffer_delay: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

            Cumulative latency distribution (milliseconds-based thresholds).

            - `"100ms_or_greater_event_fraction": optional number`

            - `"250ms_or_greater_event_fraction": optional number`

            - `"500ms_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `key_frames_decoded_fraction: optional number`

          - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

            Cumulative packet loss distribution.

            - `"10_or_greater_event_fraction": optional number`

            - `"25_or_greater_event_fraction": optional number`

            - `"5_or_greater_event_fraction": optional number`

            - `"50_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `quality_mos: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

        - `screenshare_video_producer: optional array of object { bytes_sent, fir_count, frame_height, 17 more }`

          - `bytes_sent: optional number`

          - `fir_count: optional number`

          - `frame_height: optional number`

          - `frame_width: optional number`

          - `frames_encoded: optional number`

          - `frames_per_second: optional number`

          - `jitter: optional number`

          - `key_frames_encoded: optional number`

          - `mid: optional string`

          - `mos_quality: optional number`

          - `packets_lost: optional number`

          - `packets_sent: optional number`

          - `pli_count: optional number`

          - `producer_id: optional string`

          - `quality_limitation_durations: optional object { bandwidth, cpu, none, other }`

            - `bandwidth: optional number`

            - `cpu: optional number`

            - `none: optional number`

            - `other: optional number`

          - `quality_limitation_reason: optional "cpu" or "bandwidth" or "none" or "other"`

            - `"cpu"`

            - `"bandwidth"`

            - `"none"`

            - `"other"`

          - `quality_limitation_resolution_changes: optional number`

          - `rtt: optional number`

          - `ssrc: optional number`

          - `timestamp: optional string`

        - `screenshare_video_producer_cumulative: optional object { frame_per_second, frame_width, high_negative_feedback_fraction, 5 more }`

          Aggregated outbound (producer) video statistics for the session.

          - `frame_per_second: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `frame_width: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `high_negative_feedback_fraction: optional number`

          - `issues: optional object { bandwidth_quality_limitation_fraction, cpu_quality_limitation_fraction, no_video_fraction, 2 more }`

            - `bandwidth_quality_limitation_fraction: optional number`

            - `cpu_quality_limitation_fraction: optional number`

            - `no_video_fraction: optional number`

            - `poor_resolution_fraction: optional number`

            - `quality_limitation_fraction: optional number`

          - `key_frames_encoded_fraction: optional number`

          - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

            Cumulative packet loss distribution.

            - `"10_or_greater_event_fraction": optional number`

            - `"25_or_greater_event_fraction": optional number`

            - `"5_or_greater_event_fraction": optional number`

            - `"50_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `quality_mos: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `rtt: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

            Cumulative latency distribution (milliseconds-based thresholds).

            - `"100ms_or_greater_event_fraction": optional number`

            - `"250ms_or_greater_event_fraction": optional number`

            - `"500ms_or_greater_event_fraction": optional number`

            - `avg: optional number`

        - `video_consumer: optional array of object { bytes_received, consumer_id, fir_count, 17 more }`

          - `bytes_received: optional number`

          - `consumer_id: optional string`

          - `fir_count: optional number`

          - `frame_height: optional number`

          - `frame_width: optional number`

          - `frames_decoded: optional number`

          - `frames_dropped: optional number`

          - `frames_per_second: optional number`

          - `jitter: optional number`

          - `jitter_buffer_delay: optional number`

          - `jitter_buffer_emitted_count: optional number`

          - `key_frames_decoded: optional number`

          - `mid: optional string`

          - `mos_quality: optional number`

          - `packets_lost: optional number`

          - `packets_received: optional number`

          - `peer_id: optional string`

          - `producer_id: optional string`

          - `ssrc: optional number`

          - `timestamp: optional string`

        - `video_consumer_cumulative: optional object { frame_per_second, frame_width, issues, 4 more }`

          Aggregated inbound (consumer) video statistics for the session.

          - `frame_per_second: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `frame_width: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `issues: optional object { lag_fraction, no_video_fraction, poor_resolution_fraction }`

            - `lag_fraction: optional number`

            - `no_video_fraction: optional number`

            - `poor_resolution_fraction: optional number`

          - `jitter_buffer_delay: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

            Cumulative latency distribution (milliseconds-based thresholds).

            - `"100ms_or_greater_event_fraction": optional number`

            - `"250ms_or_greater_event_fraction": optional number`

            - `"500ms_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `key_frames_decoded_fraction: optional number`

          - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

            Cumulative packet loss distribution.

            - `"10_or_greater_event_fraction": optional number`

            - `"25_or_greater_event_fraction": optional number`

            - `"5_or_greater_event_fraction": optional number`

            - `"50_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `quality_mos: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

        - `video_producer: optional array of object { bytes_sent, fir_count, frame_height, 17 more }`

          - `bytes_sent: optional number`

          - `fir_count: optional number`

          - `frame_height: optional number`

          - `frame_width: optional number`

          - `frames_encoded: optional number`

          - `frames_per_second: optional number`

          - `jitter: optional number`

          - `key_frames_encoded: optional number`

          - `mid: optional string`

          - `mos_quality: optional number`

          - `packets_lost: optional number`

          - `packets_sent: optional number`

          - `pli_count: optional number`

          - `producer_id: optional string`

          - `quality_limitation_durations: optional object { bandwidth, cpu, none, other }`

            - `bandwidth: optional number`

            - `cpu: optional number`

            - `none: optional number`

            - `other: optional number`

          - `quality_limitation_reason: optional "cpu" or "bandwidth" or "none" or "other"`

            - `"cpu"`

            - `"bandwidth"`

            - `"none"`

            - `"other"`

          - `quality_limitation_resolution_changes: optional number`

          - `rtt: optional number`

          - `ssrc: optional number`

          - `timestamp: optional string`

        - `video_producer_cumulative: optional object { frame_per_second, frame_width, high_negative_feedback_fraction, 5 more }`

          Aggregated outbound (producer) video statistics for the session.

          - `frame_per_second: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `frame_width: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `high_negative_feedback_fraction: optional number`

          - `issues: optional object { bandwidth_quality_limitation_fraction, cpu_quality_limitation_fraction, no_video_fraction, 2 more }`

            - `bandwidth_quality_limitation_fraction: optional number`

            - `cpu_quality_limitation_fraction: optional number`

            - `no_video_fraction: optional number`

            - `poor_resolution_fraction: optional number`

            - `quality_limitation_fraction: optional number`

          - `key_frames_encoded_fraction: optional number`

          - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

            Cumulative packet loss distribution.

            - `"10_or_greater_event_fraction": optional number`

            - `"25_or_greater_event_fraction": optional number`

            - `"5_or_greater_event_fraction": optional number`

            - `"50_or_greater_event_fraction": optional number`

            - `avg: optional number`

          - `quality_mos: optional object { avg, p50, p75, p90 }`

            Distribution summary with average and percentiles.

            - `avg: optional number`

            - `p50: optional number`

            - `p75: optional number`

            - `p90: optional number`

          - `rtt: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

            Cumulative latency distribution (milliseconds-based thresholds).

            - `"100ms_or_greater_event_fraction": optional number`

            - `"250ms_or_greater_event_fraction": optional number`

            - `"500ms_or_greater_event_fraction": optional number`

            - `avg: optional number`

    - `role: optional string`

      Name of the preset associated with the participant.

    - `session_id: optional string`

    - `updated_at: optional string`

      timestamp when this participant's data was last updated.

    - `user_id: optional string`

      User id for this participant.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/sessions/peer-report/$PEER_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "participant": {
      "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
      "created_at": "created_at",
      "custom_participant_id": "custom_participant_id",
      "display_name": "display_name",
      "duration": 0,
      "joined_at": "joined_at",
      "left_at": "left_at",
      "peer_events": [
        {
          "id": "id",
          "created_at": "created_at",
          "event_name": "PEER_CREATED",
          "minutes_consumed": 0,
          "participant_id": "participant_id",
          "peer_id": "peer_id",
          "preset_view_type": "GROUP_CALL",
          "session_id": "session_id",
          "socket_session_id": "socket_session_id",
          "updated_at": "updated_at"
        }
      ],
      "peer_report": {
        "metadata": {
          "audio_devices_updates": [
            {
              "added": [
                {
                  "device_id": "device_id",
                  "kind": "kind",
                  "label": "label"
                }
              ],
              "removed": [
                {
                  "device_id": "device_id",
                  "kind": "kind",
                  "label": "label"
                }
              ],
              "timestamp": "timestamp"
            }
          ],
          "browser_metadata": {
            "browser": "browser",
            "browser_version": "browser_version",
            "engine": "engine",
            "user_agent": "user_agent",
            "webgl_support": true
          },
          "candidate_pairs": {
            "consuming_transport": [
              {
                "available_incoming_bitrate": 0,
                "available_outgoing_bitrate": 0,
                "bytes_discarded_on_send": 0,
                "bytes_received": 0,
                "bytes_sent": 0,
                "current_round_trip_time": 0,
                "last_packet_received_timestamp": 0,
                "last_packet_sent_timestamp": 0,
                "local_candidate_address": "local_candidate_address",
                "local_candidate_id": "local_candidate_id",
                "local_candidate_network_type": "local_candidate_network_type",
                "local_candidate_port": 0,
                "local_candidate_protocol": "local_candidate_protocol",
                "local_candidate_related_address": "local_candidate_related_address",
                "local_candidate_related_port": 0,
                "local_candidate_type": "local_candidate_type",
                "local_candidate_url": "local_candidate_url",
                "nominated": true,
                "packets_discarded_on_send": 0,
                "packets_received": 0,
                "packets_sent": 0,
                "remote_candidate_address": "remote_candidate_address",
                "remote_candidate_id": "remote_candidate_id",
                "remote_candidate_port": 0,
                "remote_candidate_protocol": "remote_candidate_protocol",
                "remote_candidate_type": "remote_candidate_type",
                "remote_candidate_url": "remote_candidate_url",
                "total_round_trip_time": 0
              }
            ],
            "producing_transport": [
              {
                "available_incoming_bitrate": 0,
                "available_outgoing_bitrate": 0,
                "bytes_discarded_on_send": 0,
                "bytes_received": 0,
                "bytes_sent": 0,
                "current_round_trip_time": 0,
                "last_packet_received_timestamp": 0,
                "last_packet_sent_timestamp": 0,
                "local_candidate_address": "local_candidate_address",
                "local_candidate_id": "local_candidate_id",
                "local_candidate_network_type": "local_candidate_network_type",
                "local_candidate_port": 0,
                "local_candidate_protocol": "local_candidate_protocol",
                "local_candidate_related_address": "local_candidate_related_address",
                "local_candidate_related_port": 0,
                "local_candidate_type": "local_candidate_type",
                "local_candidate_url": "local_candidate_url",
                "nominated": true,
                "packets_discarded_on_send": 0,
                "packets_received": 0,
                "packets_sent": 0,
                "remote_candidate_address": "remote_candidate_address",
                "remote_candidate_id": "remote_candidate_id",
                "remote_candidate_port": 0,
                "remote_candidate_protocol": "remote_candidate_protocol",
                "remote_candidate_type": "remote_candidate_type",
                "remote_candidate_url": "remote_candidate_url",
                "total_round_trip_time": 0
              }
            ]
          },
          "device_info": {
            "cpus": 0,
            "is_mobile": true,
            "os": "os",
            "os_version": "os_version"
          },
          "events": [
            {
              "metadata": {
                "foo": "string"
              },
              "name": "name",
              "timestamp": "timestamp"
            }
          ],
          "ip_information": {
            "asn": {
              "asn": "asn",
              "domain": "domain",
              "name": "name",
              "route": "route",
              "type": "type"
            },
            "city": "city",
            "country": "country",
            "ipv4": "ipv4",
            "org": "org",
            "region": "region",
            "timezone": "timezone"
          },
          "native_metadata": {
            "audio_encoder": "audio_encoder",
            "video_encoder": "video_encoder"
          },
          "pc_metadata": [
            {
              "effective_network_type": "effective_network_type",
              "reflexive_connectivity": true,
              "relay_connectivity": true,
              "sdp": [
                "string"
              ],
              "timestamp": "timestamp",
              "turn_connectivity": true
            }
          ],
          "room_view_type": "room_view_type",
          "sdk_name": "sdk_name",
          "sdk_type": "sdk_type",
          "sdk_version": "sdk_version",
          "selected_device_updates": [
            {
              "device": {
                "device_id": "device_id",
                "kind": "kind",
                "label": "label"
              },
              "timestamp": "timestamp"
            }
          ],
          "speaker_devices_updates": [
            {
              "added": [
                {
                  "device_id": "device_id",
                  "kind": "kind",
                  "label": "label"
                }
              ],
              "removed": [
                {
                  "device_id": "device_id",
                  "kind": "kind",
                  "label": "label"
                }
              ],
              "timestamp": "timestamp"
            }
          ],
          "video_devices_updates": [
            {
              "added": [
                {
                  "device_id": "device_id",
                  "kind": "kind",
                  "label": "label"
                }
              ],
              "removed": [
                {
                  "device_id": "device_id",
                  "kind": "kind",
                  "label": "label"
                }
              ],
              "timestamp": "timestamp"
            }
          ]
        },
        "quality": {
          "audio_consumer": [
            {
              "bytes_received": 0,
              "concealment_events": 0,
              "consumer_id": "consumer_id",
              "jitter": 0,
              "jitter_buffer_delay": 0,
              "jitter_buffer_emitted_count": 0,
              "mid": "mid",
              "mos_quality": 0,
              "packets_lost": 0,
              "packets_received": 0,
              "peer_id": "peer_id",
              "producer_id": "producer_id",
              "ssrc": 0,
              "timestamp": "timestamp"
            }
          ],
          "audio_consumer_cumulative": {
            "jitter_buffer_delay": {
              "100ms_or_greater_event_fraction": 0,
              "250ms_or_greater_event_fraction": 0,
              "500ms_or_greater_event_fraction": 0,
              "avg": 0
            },
            "packet_loss": {
              "10_or_greater_event_fraction": 0,
              "25_or_greater_event_fraction": 0,
              "5_or_greater_event_fraction": 0,
              "50_or_greater_event_fraction": 0,
              "avg": 0
            },
            "quality_mos": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            }
          },
          "audio_producer": [
            {
              "bytes_sent": 0,
              "jitter": 0,
              "mid": "mid",
              "mos_quality": 0,
              "packets_lost": 0,
              "packets_sent": 0,
              "producer_id": "producer_id",
              "rtt": 0,
              "ssrc": 0,
              "timestamp": "timestamp"
            }
          ],
          "audio_producer_cumulative": {
            "packet_loss": {
              "10_or_greater_event_fraction": 0,
              "25_or_greater_event_fraction": 0,
              "5_or_greater_event_fraction": 0,
              "50_or_greater_event_fraction": 0,
              "avg": 0
            },
            "quality_mos": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "rtt": {
              "100ms_or_greater_event_fraction": 0,
              "250ms_or_greater_event_fraction": 0,
              "500ms_or_greater_event_fraction": 0,
              "avg": 0
            }
          },
          "screenshare_audio_consumer": [
            {
              "bytes_received": 0,
              "concealment_events": 0,
              "consumer_id": "consumer_id",
              "jitter": 0,
              "jitter_buffer_delay": 0,
              "jitter_buffer_emitted_count": 0,
              "mid": "mid",
              "mos_quality": 0,
              "packets_lost": 0,
              "packets_received": 0,
              "peer_id": "peer_id",
              "producer_id": "producer_id",
              "ssrc": 0,
              "timestamp": "timestamp"
            }
          ],
          "screenshare_audio_consumer_cumulative": {
            "jitter_buffer_delay": {
              "100ms_or_greater_event_fraction": 0,
              "250ms_or_greater_event_fraction": 0,
              "500ms_or_greater_event_fraction": 0,
              "avg": 0
            },
            "packet_loss": {
              "10_or_greater_event_fraction": 0,
              "25_or_greater_event_fraction": 0,
              "5_or_greater_event_fraction": 0,
              "50_or_greater_event_fraction": 0,
              "avg": 0
            },
            "quality_mos": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            }
          },
          "screenshare_audio_producer": [
            {
              "bytes_sent": 0,
              "jitter": 0,
              "mid": "mid",
              "mos_quality": 0,
              "packets_lost": 0,
              "packets_sent": 0,
              "producer_id": "producer_id",
              "rtt": 0,
              "ssrc": 0,
              "timestamp": "timestamp"
            }
          ],
          "screenshare_audio_producer_cumulative": {
            "packet_loss": {
              "10_or_greater_event_fraction": 0,
              "25_or_greater_event_fraction": 0,
              "5_or_greater_event_fraction": 0,
              "50_or_greater_event_fraction": 0,
              "avg": 0
            },
            "quality_mos": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "rtt": {
              "100ms_or_greater_event_fraction": 0,
              "250ms_or_greater_event_fraction": 0,
              "500ms_or_greater_event_fraction": 0,
              "avg": 0
            }
          },
          "screenshare_video_consumer": [
            {
              "bytes_received": 0,
              "consumer_id": "consumer_id",
              "fir_count": 0,
              "frame_height": 0,
              "frame_width": 0,
              "frames_decoded": 0,
              "frames_dropped": 0,
              "frames_per_second": 0,
              "jitter": 0,
              "jitter_buffer_delay": 0,
              "jitter_buffer_emitted_count": 0,
              "key_frames_decoded": 0,
              "mid": "mid",
              "mos_quality": 0,
              "packets_lost": 0,
              "packets_received": 0,
              "peer_id": "peer_id",
              "producer_id": "producer_id",
              "ssrc": 0,
              "timestamp": "timestamp"
            }
          ],
          "screenshare_video_consumer_cumulative": {
            "frame_per_second": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "frame_width": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "issues": {
              "lag_fraction": 0,
              "no_video_fraction": 0,
              "poor_resolution_fraction": 0
            },
            "jitter_buffer_delay": {
              "100ms_or_greater_event_fraction": 0,
              "250ms_or_greater_event_fraction": 0,
              "500ms_or_greater_event_fraction": 0,
              "avg": 0
            },
            "key_frames_decoded_fraction": 0,
            "packet_loss": {
              "10_or_greater_event_fraction": 0,
              "25_or_greater_event_fraction": 0,
              "5_or_greater_event_fraction": 0,
              "50_or_greater_event_fraction": 0,
              "avg": 0
            },
            "quality_mos": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            }
          },
          "screenshare_video_producer": [
            {
              "bytes_sent": 0,
              "fir_count": 0,
              "frame_height": 0,
              "frame_width": 0,
              "frames_encoded": 0,
              "frames_per_second": 0,
              "jitter": 0,
              "key_frames_encoded": 0,
              "mid": "mid",
              "mos_quality": 0,
              "packets_lost": 0,
              "packets_sent": 0,
              "pli_count": 0,
              "producer_id": "producer_id",
              "quality_limitation_durations": {
                "bandwidth": 0,
                "cpu": 0,
                "none": 0,
                "other": 0
              },
              "quality_limitation_reason": "cpu",
              "quality_limitation_resolution_changes": 0,
              "rtt": 0,
              "ssrc": 0,
              "timestamp": "timestamp"
            }
          ],
          "screenshare_video_producer_cumulative": {
            "frame_per_second": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "frame_width": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "high_negative_feedback_fraction": 0,
            "issues": {
              "bandwidth_quality_limitation_fraction": 0,
              "cpu_quality_limitation_fraction": 0,
              "no_video_fraction": 0,
              "poor_resolution_fraction": 0,
              "quality_limitation_fraction": 0
            },
            "key_frames_encoded_fraction": 0,
            "packet_loss": {
              "10_or_greater_event_fraction": 0,
              "25_or_greater_event_fraction": 0,
              "5_or_greater_event_fraction": 0,
              "50_or_greater_event_fraction": 0,
              "avg": 0
            },
            "quality_mos": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "rtt": {
              "100ms_or_greater_event_fraction": 0,
              "250ms_or_greater_event_fraction": 0,
              "500ms_or_greater_event_fraction": 0,
              "avg": 0
            }
          },
          "video_consumer": [
            {
              "bytes_received": 0,
              "consumer_id": "consumer_id",
              "fir_count": 0,
              "frame_height": 0,
              "frame_width": 0,
              "frames_decoded": 0,
              "frames_dropped": 0,
              "frames_per_second": 0,
              "jitter": 0,
              "jitter_buffer_delay": 0,
              "jitter_buffer_emitted_count": 0,
              "key_frames_decoded": 0,
              "mid": "mid",
              "mos_quality": 0,
              "packets_lost": 0,
              "packets_received": 0,
              "peer_id": "peer_id",
              "producer_id": "producer_id",
              "ssrc": 0,
              "timestamp": "timestamp"
            }
          ],
          "video_consumer_cumulative": {
            "frame_per_second": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "frame_width": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "issues": {
              "lag_fraction": 0,
              "no_video_fraction": 0,
              "poor_resolution_fraction": 0
            },
            "jitter_buffer_delay": {
              "100ms_or_greater_event_fraction": 0,
              "250ms_or_greater_event_fraction": 0,
              "500ms_or_greater_event_fraction": 0,
              "avg": 0
            },
            "key_frames_decoded_fraction": 0,
            "packet_loss": {
              "10_or_greater_event_fraction": 0,
              "25_or_greater_event_fraction": 0,
              "5_or_greater_event_fraction": 0,
              "50_or_greater_event_fraction": 0,
              "avg": 0
            },
            "quality_mos": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            }
          },
          "video_producer": [
            {
              "bytes_sent": 0,
              "fir_count": 0,
              "frame_height": 0,
              "frame_width": 0,
              "frames_encoded": 0,
              "frames_per_second": 0,
              "jitter": 0,
              "key_frames_encoded": 0,
              "mid": "mid",
              "mos_quality": 0,
              "packets_lost": 0,
              "packets_sent": 0,
              "pli_count": 0,
              "producer_id": "producer_id",
              "quality_limitation_durations": {
                "bandwidth": 0,
                "cpu": 0,
                "none": 0,
                "other": 0
              },
              "quality_limitation_reason": "cpu",
              "quality_limitation_resolution_changes": 0,
              "rtt": 0,
              "ssrc": 0,
              "timestamp": "timestamp"
            }
          ],
          "video_producer_cumulative": {
            "frame_per_second": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "frame_width": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "high_negative_feedback_fraction": 0,
            "issues": {
              "bandwidth_quality_limitation_fraction": 0,
              "cpu_quality_limitation_fraction": 0,
              "no_video_fraction": 0,
              "poor_resolution_fraction": 0,
              "quality_limitation_fraction": 0
            },
            "key_frames_encoded_fraction": 0,
            "packet_loss": {
              "10_or_greater_event_fraction": 0,
              "25_or_greater_event_fraction": 0,
              "5_or_greater_event_fraction": 0,
              "50_or_greater_event_fraction": 0,
              "avg": 0
            },
            "quality_mos": {
              "avg": 0,
              "p50": 0,
              "p75": 0,
              "p90": 0
            },
            "rtt": {
              "100ms_or_greater_event_fraction": 0,
              "250ms_or_greater_event_fraction": 0,
              "500ms_or_greater_event_fraction": 0,
              "avg": 0
            }
          }
        }
      },
      "role": "role",
      "session_id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
      "updated_at": "updated_at",
      "user_id": "user_id"
    }
  },
  "success": true
}
```

## Domain Types

### Session Get Sessions Response

- `SessionGetSessionsResponse object { data, paging, success }`

  - `data: optional object { sessions }`

    - `sessions: optional array of object { id, associated_id, created_at, 11 more }`

      - `id: string`

        ID of the session

      - `associated_id: string`

        ID of the meeting this session is associated with. In the case of V2 meetings, it is always a UUID. In V1 meetings, it is a room name of the form `abcdef-ghijkl`

      - `created_at: string`

        timestamp when session created

      - `live_participants: number`

        number of participants currently in the session

      - `max_concurrent_participants: number`

        number of maximum participants that were in the session

      - `meeting_display_name: string`

        Title of the meeting this session belongs to

      - `minutes_consumed: number`

        number of minutes consumed since the session started

      - `organization_id: string`

        App id that hosted this session

      - `started_at: string`

        timestamp when session started

      - `status: "LIVE" or "ENDED"`

        current status of session

        - `"LIVE"`

        - `"ENDED"`

      - `type: "meeting" or "livestream" or "participant"`

        type of session

        - `"meeting"`

        - `"livestream"`

        - `"participant"`

      - `updated_at: string`

        timestamp when session was last updated

      - `breakout_rooms: optional array of unknown`

      - `ended_at: optional string`

        timestamp when session ended

  - `paging: optional object { end_offset, start_offset, total_count }`

    - `end_offset: optional number`

    - `start_offset: optional number`

    - `total_count: optional number`

  - `success: optional boolean`

### Session Get Session Details Response

- `SessionGetSessionDetailsResponse object { data, success }`

  - `data: optional object { id, associated_id, created_at, 11 more }`

    - `id: string`

      ID of the session

    - `associated_id: string`

      ID of the meeting this session is associated with. In the case of V2 meetings, it is always a UUID. In V1 meetings, it is a room name of the form `abcdef-ghijkl`

    - `created_at: string`

      timestamp when session created

    - `live_participants: number`

      number of participants currently in the session

    - `max_concurrent_participants: number`

      number of maximum participants that were in the session

    - `meeting_display_name: string`

      Title of the meeting this session belongs to

    - `minutes_consumed: number`

      number of minutes consumed since the session started

    - `organization_id: string`

      App id that hosted this session

    - `started_at: string`

      timestamp when session started

    - `status: "LIVE" or "ENDED"`

      current status of session

      - `"LIVE"`

      - `"ENDED"`

    - `type: "meeting" or "livestream" or "participant"`

      type of session

      - `"meeting"`

      - `"livestream"`

      - `"participant"`

    - `updated_at: string`

      timestamp when session was last updated

    - `breakout_rooms: optional array of unknown`

    - `ended_at: optional string`

      timestamp when session ended

  - `success: optional boolean`

### Session Get Session Participants Response

- `SessionGetSessionParticipantsResponse object { data, success }`

  - `data: optional object { participants }`

    - `participants: optional array of object { id, created_at, custom_participant_id, 8 more }`

      - `id: optional string`

        Participant ID. This maps to the corresponding peerId.

      - `created_at: optional string`

        timestamp when this participant was created.

      - `custom_participant_id: optional string`

        ID passed by client to create this participant.

      - `display_name: optional string`

        Display name of participant when joining the session.

      - `duration: optional number`

        number of minutes for which the participant was in the session.

      - `joined_at: optional string`

        timestamp at which participant joined the session.

      - `left_at: optional string`

        timestamp at which participant left the session.

      - `peer_events: optional array of object { id, created_at, event_name, 7 more }`

        Connection lifecycle events for the participant's peer. Only included when `include_peer_events` is true.

        - `id: optional string`

          ID of the peer event.

        - `created_at: optional string`

          Timestamp when this peer event was created.

        - `event_name: optional "PEER_CREATED" or "PEER_JOINING" or "PEER_LEAVING"`

          Name of the peer event.

          - `"PEER_CREATED"`

          - `"PEER_JOINING"`

          - `"PEER_LEAVING"`

        - `minutes_consumed: optional number`

          Minutes consumed attributed to this event.

        - `participant_id: optional string`

          ID of the participant this event belongs to.

        - `peer_id: optional string`

          Peer ID this event belongs to.

        - `preset_view_type: optional "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or 2 more`

          View type of the preset associated with the peer.

          - `"GROUP_CALL"`

          - `"WEBINAR"`

          - `"AUDIO_ROOM"`

          - `"LIVESTREAM"`

          - `"CHAT"`

        - `session_id: optional string`

          ID of the session this event belongs to.

        - `socket_session_id: optional string`

          ID of the socket session associated with this event.

        - `updated_at: optional string`

          Timestamp when this peer event was last updated.

      - `preset_name: optional string`

        Name of the preset associated with the participant.

      - `updated_at: optional string`

        timestamp when this participant's data was last updated.

      - `user_id: optional string`

        User id for this participant.

  - `success: optional boolean`

### Session Get Session Participant Details Response

- `SessionGetSessionParticipantDetailsResponse object { data, success }`

  - `data: optional object { participant }`

    - `participant: optional object { id, created_at, custom_participant_id, 8 more }`

      - `id: optional string`

        Participant ID. This maps to the corresponding peerId.

      - `created_at: optional string`

        timestamp when this participant was created.

      - `custom_participant_id: optional string`

        ID passed by client to create this participant.

      - `display_name: optional string`

        Display name of participant when joining the session.

      - `duration: optional number`

        number of minutes for which the participant was in the session.

      - `joined_at: optional string`

        timestamp at which participant joined the session.

      - `left_at: optional string`

        timestamp at which participant left the session.

      - `peer_events: optional array of object { id, created_at, event_name, 7 more }`

        Connection lifecycle events for the participant's peer. Only included when `include_peer_events` is true.

        - `id: optional string`

          ID of the peer event.

        - `created_at: optional string`

          Timestamp when this peer event was created.

        - `event_name: optional "PEER_CREATED" or "PEER_JOINING" or "PEER_LEAVING"`

          Name of the peer event.

          - `"PEER_CREATED"`

          - `"PEER_JOINING"`

          - `"PEER_LEAVING"`

        - `minutes_consumed: optional number`

          Minutes consumed attributed to this event.

        - `participant_id: optional string`

          ID of the participant this event belongs to.

        - `peer_id: optional string`

          Peer ID this event belongs to.

        - `preset_view_type: optional "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or 2 more`

          View type of the preset associated with the peer.

          - `"GROUP_CALL"`

          - `"WEBINAR"`

          - `"AUDIO_ROOM"`

          - `"LIVESTREAM"`

          - `"CHAT"`

        - `session_id: optional string`

          ID of the session this event belongs to.

        - `socket_session_id: optional string`

          ID of the socket session associated with this event.

        - `updated_at: optional string`

          Timestamp when this peer event was last updated.

      - `preset_name: optional string`

        Name of the preset associated with the participant.

      - `updated_at: optional string`

        timestamp when this participant's data was last updated.

      - `user_id: optional string`

        User id for this participant.

  - `success: optional boolean`

### Session Get Session Chat Response

- `SessionGetSessionChatResponse object { data, success }`

  - `data: optional object { chat_download_url, chat_download_url_expiry }`

    - `chat_download_url: string`

      URL where the chat logs can be downloaded

    - `chat_download_url_expiry: string`

      Time when the download URL will expire

  - `success: optional boolean`

### Session Get Session Transcripts Response

- `SessionGetSessionTranscriptsResponse object { data, success }`

  - `data: optional object { sessionId, transcript_download_url, transcript_download_url_expiry }`

    - `sessionId: string`

    - `transcript_download_url: string`

      URL where the transcript can be downloaded

    - `transcript_download_url_expiry: string`

      Time when the download URL will expire

  - `success: optional boolean`

### Session Get Session Summary Response

- `SessionGetSessionSummaryResponse object { data, success }`

  - `data: optional object { sessionId, summaryDownloadUrl, summaryDownloadUrlExpiry }`

    - `sessionId: string`

    - `summaryDownloadUrl: string`

      URL where the summary of transcripts can be downloaded

    - `summaryDownloadUrlExpiry: string`

      Time of Expiry before when you need to download the csv file.

  - `success: optional boolean`

### Session Generate Summary Of Transcripts Response

- `SessionGenerateSummaryOfTranscriptsResponse object { data, success }`

  - `data: optional object { session_id, status }`

    - `session_id: optional string`

    - `status: optional string`

  - `success: optional boolean`

### Session Get Participant Data From Peer ID Response

- `SessionGetParticipantDataFromPeerIDResponse object { data, success }`

  - `data: optional object { participant }`

    - `participant: optional object { id, created_at, custom_participant_id, 10 more }`

      - `id: optional string`

        ID of the participant.

      - `created_at: optional string`

        timestamp when this participant was created.

      - `custom_participant_id: optional string`

        ID passed by client to create this participant.

      - `display_name: optional string`

        Display name of participant when joining the session.

      - `duration: optional number`

        number of minutes for which the participant was in the session.

      - `joined_at: optional string`

        timestamp at which participant joined the session.

      - `left_at: optional string`

        timestamp at which participant left the session.

      - `peer_events: optional array of object { id, created_at, event_name, 7 more }`

        Connection lifecycle events for the participant's peer.

        - `id: optional string`

          ID of the peer event.

        - `created_at: optional string`

          Timestamp when this peer event was created.

        - `event_name: optional "PEER_CREATED" or "PEER_JOINING" or "PEER_LEAVING"`

          Name of the peer event.

          - `"PEER_CREATED"`

          - `"PEER_JOINING"`

          - `"PEER_LEAVING"`

        - `minutes_consumed: optional number`

          Minutes consumed attributed to this event.

        - `participant_id: optional string`

          ID of the participant this event belongs to.

        - `peer_id: optional string`

          Peer ID this event belongs to.

        - `preset_view_type: optional "GROUP_CALL" or "WEBINAR" or "AUDIO_ROOM" or 2 more`

          View type of the preset associated with the peer.

          - `"GROUP_CALL"`

          - `"WEBINAR"`

          - `"AUDIO_ROOM"`

          - `"LIVESTREAM"`

          - `"CHAT"`

        - `session_id: optional string`

          ID of the session this event belongs to.

        - `socket_session_id: optional string`

          ID of the socket session associated with this event.

        - `updated_at: optional string`

          Timestamp when this peer event was last updated.

      - `peer_report: optional object { metadata, quality }`

        Peer call statistics report.

        - `metadata: optional object { audio_devices_updates, browser_metadata, candidate_pairs, 12 more }`

          Connection and device metadata for the participant.

          - `audio_devices_updates: optional array of object { added, removed, timestamp }`

            - `added: optional array of object { device_id, kind, label }`

              Devices that became available.

              - `device_id: optional string`

                ID of the device.

              - `kind: optional string`

                Kind of device, for example audioinput or videoinput.

              - `label: optional string`

                Human-readable label of the device.

            - `removed: optional array of object { device_id, kind, label }`

              Devices that became unavailable.

              - `device_id: optional string`

                ID of the device.

              - `kind: optional string`

                Kind of device, for example audioinput or videoinput.

              - `label: optional string`

                Human-readable label of the device.

            - `timestamp: optional string`

              Timestamp of the device update.

          - `browser_metadata: optional object { browser, browser_version, engine, 2 more }`

            - `browser: optional string`

            - `browser_version: optional string`

            - `engine: optional string`

            - `user_agent: optional string`

            - `webgl_support: optional boolean`

          - `candidate_pairs: optional object { consuming_transport, producing_transport }`

            - `consuming_transport: optional array of object { available_incoming_bitrate, available_outgoing_bitrate, bytes_discarded_on_send, 25 more }`

              - `available_incoming_bitrate: optional number`

              - `available_outgoing_bitrate: optional number`

              - `bytes_discarded_on_send: optional number`

              - `bytes_received: optional number`

              - `bytes_sent: optional number`

              - `current_round_trip_time: optional number`

              - `last_packet_received_timestamp: optional number`

                Epoch milliseconds when the last packet was received.

              - `last_packet_sent_timestamp: optional number`

                Epoch milliseconds when the last packet was sent.

              - `local_candidate_address: optional string`

              - `local_candidate_id: optional string`

              - `local_candidate_network_type: optional string`

              - `local_candidate_port: optional number`

              - `local_candidate_protocol: optional string`

              - `local_candidate_related_address: optional string`

              - `local_candidate_related_port: optional number`

              - `local_candidate_type: optional string`

              - `local_candidate_url: optional string`

              - `nominated: optional boolean`

              - `packets_discarded_on_send: optional number`

              - `packets_received: optional number`

              - `packets_sent: optional number`

              - `remote_candidate_address: optional string`

              - `remote_candidate_id: optional string`

              - `remote_candidate_port: optional number`

              - `remote_candidate_protocol: optional string`

              - `remote_candidate_type: optional string`

              - `remote_candidate_url: optional string`

              - `total_round_trip_time: optional number`

            - `producing_transport: optional array of object { available_incoming_bitrate, available_outgoing_bitrate, bytes_discarded_on_send, 25 more }`

              - `available_incoming_bitrate: optional number`

              - `available_outgoing_bitrate: optional number`

              - `bytes_discarded_on_send: optional number`

              - `bytes_received: optional number`

              - `bytes_sent: optional number`

              - `current_round_trip_time: optional number`

              - `last_packet_received_timestamp: optional number`

                Epoch milliseconds when the last packet was received.

              - `last_packet_sent_timestamp: optional number`

                Epoch milliseconds when the last packet was sent.

              - `local_candidate_address: optional string`

              - `local_candidate_id: optional string`

              - `local_candidate_network_type: optional string`

              - `local_candidate_port: optional number`

              - `local_candidate_protocol: optional string`

              - `local_candidate_related_address: optional string`

              - `local_candidate_related_port: optional number`

              - `local_candidate_type: optional string`

              - `local_candidate_url: optional string`

              - `nominated: optional boolean`

              - `packets_discarded_on_send: optional number`

              - `packets_received: optional number`

              - `packets_sent: optional number`

              - `remote_candidate_address: optional string`

              - `remote_candidate_id: optional string`

              - `remote_candidate_port: optional number`

              - `remote_candidate_protocol: optional string`

              - `remote_candidate_type: optional string`

              - `remote_candidate_url: optional string`

              - `total_round_trip_time: optional number`

          - `device_info: optional object { cpus, is_mobile, os, os_version }`

            - `cpus: optional number`

            - `is_mobile: optional boolean`

            - `os: optional string`

            - `os_version: optional string`

          - `events: optional array of object { metadata, name, timestamp }`

            - `metadata: optional map[string or number or boolean]`

              Event-specific metadata. Keys vary per event; values are primitive scalars (string, number, boolean, or null).

              - `string`

              - `number`

              - `boolean`

            - `name: optional string`

              Name of the event.

            - `timestamp: optional string`

              Timestamp when the event occurred.

          - `ip_information: optional object { asn, city, country, 4 more }`

            - `asn: optional object { asn, domain, name, 2 more }`

              - `asn: optional string`

              - `domain: optional string`

              - `name: optional string`

              - `route: optional string`

              - `type: optional string`

            - `city: optional string`

            - `country: optional string`

            - `ipv4: optional string`

            - `org: optional string`

            - `region: optional string`

            - `timezone: optional string`

          - `native_metadata: optional object { audio_encoder, video_encoder }`

            - `audio_encoder: optional string`

            - `video_encoder: optional string`

          - `pc_metadata: optional array of object { effective_network_type, reflexive_connectivity, relay_connectivity, 3 more }`

            - `effective_network_type: optional string`

            - `reflexive_connectivity: optional boolean`

            - `relay_connectivity: optional boolean`

            - `sdp: optional array of string`

            - `timestamp: optional string`

            - `turn_connectivity: optional boolean`

          - `room_view_type: optional string`

          - `sdk_name: optional string`

          - `sdk_type: optional string`

          - `sdk_version: optional string`

          - `selected_device_updates: optional array of object { device, timestamp }`

            - `device: optional object { device_id, kind, label }`

              A media device (camera, microphone, or speaker).

              - `device_id: optional string`

                ID of the device.

              - `kind: optional string`

                Kind of device, for example audioinput or videoinput.

              - `label: optional string`

                Human-readable label of the device.

            - `timestamp: optional string`

          - `speaker_devices_updates: optional array of object { added, removed, timestamp }`

            - `added: optional array of object { device_id, kind, label }`

              Devices that became available.

              - `device_id: optional string`

                ID of the device.

              - `kind: optional string`

                Kind of device, for example audioinput or videoinput.

              - `label: optional string`

                Human-readable label of the device.

            - `removed: optional array of object { device_id, kind, label }`

              Devices that became unavailable.

              - `device_id: optional string`

                ID of the device.

              - `kind: optional string`

                Kind of device, for example audioinput or videoinput.

              - `label: optional string`

                Human-readable label of the device.

            - `timestamp: optional string`

              Timestamp of the device update.

          - `video_devices_updates: optional array of object { added, removed, timestamp }`

            - `added: optional array of object { device_id, kind, label }`

              Devices that became available.

              - `device_id: optional string`

                ID of the device.

              - `kind: optional string`

                Kind of device, for example audioinput or videoinput.

              - `label: optional string`

                Human-readable label of the device.

            - `removed: optional array of object { device_id, kind, label }`

              Devices that became unavailable.

              - `device_id: optional string`

                ID of the device.

              - `kind: optional string`

                Kind of device, for example audioinput or videoinput.

              - `label: optional string`

                Human-readable label of the device.

            - `timestamp: optional string`

              Timestamp of the device update.

        - `quality: optional object { audio_consumer, audio_consumer_cumulative, audio_producer, 13 more }`

          Media quality statistics for the participant.

          - `audio_consumer: optional array of object { bytes_received, concealment_events, consumer_id, 11 more }`

            - `bytes_received: optional number`

            - `concealment_events: optional number`

            - `consumer_id: optional string`

            - `jitter: optional number`

            - `jitter_buffer_delay: optional number`

            - `jitter_buffer_emitted_count: optional number`

            - `mid: optional string`

            - `mos_quality: optional number`

            - `packets_lost: optional number`

            - `packets_received: optional number`

            - `peer_id: optional string`

            - `producer_id: optional string`

            - `ssrc: optional number`

            - `timestamp: optional string`

          - `audio_consumer_cumulative: optional object { jitter_buffer_delay, packet_loss, quality_mos }`

            Aggregated inbound (consumer) audio statistics for the session.

            - `jitter_buffer_delay: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

              Cumulative latency distribution (milliseconds-based thresholds).

              - `"100ms_or_greater_event_fraction": optional number`

              - `"250ms_or_greater_event_fraction": optional number`

              - `"500ms_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

              Cumulative packet loss distribution.

              - `"10_or_greater_event_fraction": optional number`

              - `"25_or_greater_event_fraction": optional number`

              - `"5_or_greater_event_fraction": optional number`

              - `"50_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `quality_mos: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

          - `audio_producer: optional array of object { bytes_sent, jitter, mid, 7 more }`

            - `bytes_sent: optional number`

            - `jitter: optional number`

            - `mid: optional string`

            - `mos_quality: optional number`

            - `packets_lost: optional number`

            - `packets_sent: optional number`

            - `producer_id: optional string`

            - `rtt: optional number`

            - `ssrc: optional number`

            - `timestamp: optional string`

          - `audio_producer_cumulative: optional object { packet_loss, quality_mos, rtt }`

            Aggregated outbound (producer) audio statistics for the session.

            - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

              Cumulative packet loss distribution.

              - `"10_or_greater_event_fraction": optional number`

              - `"25_or_greater_event_fraction": optional number`

              - `"5_or_greater_event_fraction": optional number`

              - `"50_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `quality_mos: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `rtt: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

              Cumulative latency distribution (milliseconds-based thresholds).

              - `"100ms_or_greater_event_fraction": optional number`

              - `"250ms_or_greater_event_fraction": optional number`

              - `"500ms_or_greater_event_fraction": optional number`

              - `avg: optional number`

          - `screenshare_audio_consumer: optional array of object { bytes_received, concealment_events, consumer_id, 11 more }`

            - `bytes_received: optional number`

            - `concealment_events: optional number`

            - `consumer_id: optional string`

            - `jitter: optional number`

            - `jitter_buffer_delay: optional number`

            - `jitter_buffer_emitted_count: optional number`

            - `mid: optional string`

            - `mos_quality: optional number`

            - `packets_lost: optional number`

            - `packets_received: optional number`

            - `peer_id: optional string`

            - `producer_id: optional string`

            - `ssrc: optional number`

            - `timestamp: optional string`

          - `screenshare_audio_consumer_cumulative: optional object { jitter_buffer_delay, packet_loss, quality_mos }`

            Aggregated inbound (consumer) audio statistics for the session.

            - `jitter_buffer_delay: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

              Cumulative latency distribution (milliseconds-based thresholds).

              - `"100ms_or_greater_event_fraction": optional number`

              - `"250ms_or_greater_event_fraction": optional number`

              - `"500ms_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

              Cumulative packet loss distribution.

              - `"10_or_greater_event_fraction": optional number`

              - `"25_or_greater_event_fraction": optional number`

              - `"5_or_greater_event_fraction": optional number`

              - `"50_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `quality_mos: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

          - `screenshare_audio_producer: optional array of object { bytes_sent, jitter, mid, 7 more }`

            - `bytes_sent: optional number`

            - `jitter: optional number`

            - `mid: optional string`

            - `mos_quality: optional number`

            - `packets_lost: optional number`

            - `packets_sent: optional number`

            - `producer_id: optional string`

            - `rtt: optional number`

            - `ssrc: optional number`

            - `timestamp: optional string`

          - `screenshare_audio_producer_cumulative: optional object { packet_loss, quality_mos, rtt }`

            Aggregated outbound (producer) audio statistics for the session.

            - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

              Cumulative packet loss distribution.

              - `"10_or_greater_event_fraction": optional number`

              - `"25_or_greater_event_fraction": optional number`

              - `"5_or_greater_event_fraction": optional number`

              - `"50_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `quality_mos: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `rtt: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

              Cumulative latency distribution (milliseconds-based thresholds).

              - `"100ms_or_greater_event_fraction": optional number`

              - `"250ms_or_greater_event_fraction": optional number`

              - `"500ms_or_greater_event_fraction": optional number`

              - `avg: optional number`

          - `screenshare_video_consumer: optional array of object { bytes_received, consumer_id, fir_count, 17 more }`

            - `bytes_received: optional number`

            - `consumer_id: optional string`

            - `fir_count: optional number`

            - `frame_height: optional number`

            - `frame_width: optional number`

            - `frames_decoded: optional number`

            - `frames_dropped: optional number`

            - `frames_per_second: optional number`

            - `jitter: optional number`

            - `jitter_buffer_delay: optional number`

            - `jitter_buffer_emitted_count: optional number`

            - `key_frames_decoded: optional number`

            - `mid: optional string`

            - `mos_quality: optional number`

            - `packets_lost: optional number`

            - `packets_received: optional number`

            - `peer_id: optional string`

            - `producer_id: optional string`

            - `ssrc: optional number`

            - `timestamp: optional string`

          - `screenshare_video_consumer_cumulative: optional object { frame_per_second, frame_width, issues, 4 more }`

            Aggregated inbound (consumer) video statistics for the session.

            - `frame_per_second: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `frame_width: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `issues: optional object { lag_fraction, no_video_fraction, poor_resolution_fraction }`

              - `lag_fraction: optional number`

              - `no_video_fraction: optional number`

              - `poor_resolution_fraction: optional number`

            - `jitter_buffer_delay: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

              Cumulative latency distribution (milliseconds-based thresholds).

              - `"100ms_or_greater_event_fraction": optional number`

              - `"250ms_or_greater_event_fraction": optional number`

              - `"500ms_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `key_frames_decoded_fraction: optional number`

            - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

              Cumulative packet loss distribution.

              - `"10_or_greater_event_fraction": optional number`

              - `"25_or_greater_event_fraction": optional number`

              - `"5_or_greater_event_fraction": optional number`

              - `"50_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `quality_mos: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

          - `screenshare_video_producer: optional array of object { bytes_sent, fir_count, frame_height, 17 more }`

            - `bytes_sent: optional number`

            - `fir_count: optional number`

            - `frame_height: optional number`

            - `frame_width: optional number`

            - `frames_encoded: optional number`

            - `frames_per_second: optional number`

            - `jitter: optional number`

            - `key_frames_encoded: optional number`

            - `mid: optional string`

            - `mos_quality: optional number`

            - `packets_lost: optional number`

            - `packets_sent: optional number`

            - `pli_count: optional number`

            - `producer_id: optional string`

            - `quality_limitation_durations: optional object { bandwidth, cpu, none, other }`

              - `bandwidth: optional number`

              - `cpu: optional number`

              - `none: optional number`

              - `other: optional number`

            - `quality_limitation_reason: optional "cpu" or "bandwidth" or "none" or "other"`

              - `"cpu"`

              - `"bandwidth"`

              - `"none"`

              - `"other"`

            - `quality_limitation_resolution_changes: optional number`

            - `rtt: optional number`

            - `ssrc: optional number`

            - `timestamp: optional string`

          - `screenshare_video_producer_cumulative: optional object { frame_per_second, frame_width, high_negative_feedback_fraction, 5 more }`

            Aggregated outbound (producer) video statistics for the session.

            - `frame_per_second: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `frame_width: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `high_negative_feedback_fraction: optional number`

            - `issues: optional object { bandwidth_quality_limitation_fraction, cpu_quality_limitation_fraction, no_video_fraction, 2 more }`

              - `bandwidth_quality_limitation_fraction: optional number`

              - `cpu_quality_limitation_fraction: optional number`

              - `no_video_fraction: optional number`

              - `poor_resolution_fraction: optional number`

              - `quality_limitation_fraction: optional number`

            - `key_frames_encoded_fraction: optional number`

            - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

              Cumulative packet loss distribution.

              - `"10_or_greater_event_fraction": optional number`

              - `"25_or_greater_event_fraction": optional number`

              - `"5_or_greater_event_fraction": optional number`

              - `"50_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `quality_mos: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `rtt: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

              Cumulative latency distribution (milliseconds-based thresholds).

              - `"100ms_or_greater_event_fraction": optional number`

              - `"250ms_or_greater_event_fraction": optional number`

              - `"500ms_or_greater_event_fraction": optional number`

              - `avg: optional number`

          - `video_consumer: optional array of object { bytes_received, consumer_id, fir_count, 17 more }`

            - `bytes_received: optional number`

            - `consumer_id: optional string`

            - `fir_count: optional number`

            - `frame_height: optional number`

            - `frame_width: optional number`

            - `frames_decoded: optional number`

            - `frames_dropped: optional number`

            - `frames_per_second: optional number`

            - `jitter: optional number`

            - `jitter_buffer_delay: optional number`

            - `jitter_buffer_emitted_count: optional number`

            - `key_frames_decoded: optional number`

            - `mid: optional string`

            - `mos_quality: optional number`

            - `packets_lost: optional number`

            - `packets_received: optional number`

            - `peer_id: optional string`

            - `producer_id: optional string`

            - `ssrc: optional number`

            - `timestamp: optional string`

          - `video_consumer_cumulative: optional object { frame_per_second, frame_width, issues, 4 more }`

            Aggregated inbound (consumer) video statistics for the session.

            - `frame_per_second: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `frame_width: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `issues: optional object { lag_fraction, no_video_fraction, poor_resolution_fraction }`

              - `lag_fraction: optional number`

              - `no_video_fraction: optional number`

              - `poor_resolution_fraction: optional number`

            - `jitter_buffer_delay: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

              Cumulative latency distribution (milliseconds-based thresholds).

              - `"100ms_or_greater_event_fraction": optional number`

              - `"250ms_or_greater_event_fraction": optional number`

              - `"500ms_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `key_frames_decoded_fraction: optional number`

            - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

              Cumulative packet loss distribution.

              - `"10_or_greater_event_fraction": optional number`

              - `"25_or_greater_event_fraction": optional number`

              - `"5_or_greater_event_fraction": optional number`

              - `"50_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `quality_mos: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

          - `video_producer: optional array of object { bytes_sent, fir_count, frame_height, 17 more }`

            - `bytes_sent: optional number`

            - `fir_count: optional number`

            - `frame_height: optional number`

            - `frame_width: optional number`

            - `frames_encoded: optional number`

            - `frames_per_second: optional number`

            - `jitter: optional number`

            - `key_frames_encoded: optional number`

            - `mid: optional string`

            - `mos_quality: optional number`

            - `packets_lost: optional number`

            - `packets_sent: optional number`

            - `pli_count: optional number`

            - `producer_id: optional string`

            - `quality_limitation_durations: optional object { bandwidth, cpu, none, other }`

              - `bandwidth: optional number`

              - `cpu: optional number`

              - `none: optional number`

              - `other: optional number`

            - `quality_limitation_reason: optional "cpu" or "bandwidth" or "none" or "other"`

              - `"cpu"`

              - `"bandwidth"`

              - `"none"`

              - `"other"`

            - `quality_limitation_resolution_changes: optional number`

            - `rtt: optional number`

            - `ssrc: optional number`

            - `timestamp: optional string`

          - `video_producer_cumulative: optional object { frame_per_second, frame_width, high_negative_feedback_fraction, 5 more }`

            Aggregated outbound (producer) video statistics for the session.

            - `frame_per_second: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `frame_width: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `high_negative_feedback_fraction: optional number`

            - `issues: optional object { bandwidth_quality_limitation_fraction, cpu_quality_limitation_fraction, no_video_fraction, 2 more }`

              - `bandwidth_quality_limitation_fraction: optional number`

              - `cpu_quality_limitation_fraction: optional number`

              - `no_video_fraction: optional number`

              - `poor_resolution_fraction: optional number`

              - `quality_limitation_fraction: optional number`

            - `key_frames_encoded_fraction: optional number`

            - `packet_loss: optional object { "10_or_greater_event_fraction", "25_or_greater_event_fraction", "5_or_greater_event_fraction", 2 more }`

              Cumulative packet loss distribution.

              - `"10_or_greater_event_fraction": optional number`

              - `"25_or_greater_event_fraction": optional number`

              - `"5_or_greater_event_fraction": optional number`

              - `"50_or_greater_event_fraction": optional number`

              - `avg: optional number`

            - `quality_mos: optional object { avg, p50, p75, p90 }`

              Distribution summary with average and percentiles.

              - `avg: optional number`

              - `p50: optional number`

              - `p75: optional number`

              - `p90: optional number`

            - `rtt: optional object { "100ms_or_greater_event_fraction", "250ms_or_greater_event_fraction", "500ms_or_greater_event_fraction", avg }`

              Cumulative latency distribution (milliseconds-based thresholds).

              - `"100ms_or_greater_event_fraction": optional number`

              - `"250ms_or_greater_event_fraction": optional number`

              - `"500ms_or_greater_event_fraction": optional number`

              - `avg: optional number`

      - `role: optional string`

        Name of the preset associated with the participant.

      - `session_id: optional string`

      - `updated_at: optional string`

        timestamp when this participant's data was last updated.

      - `user_id: optional string`

        User id for this participant.

  - `success: optional boolean`

# Recordings

## Fetch all recordings for an App

**get** `/accounts/{account_id}/realtime/kit/{app_id}/recordings`

Returns all recordings for an App. If the `meeting_id` parameter is passed, returns all recordings for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Query Parameters

- `end_time: optional string`

  The end time range for which you want to retrieve the meetings. The time must be specified in ISO format.

- `expired: optional boolean`

  If passed, only shows expired/non-expired recordings on RealtimeKit's bucket

- `meeting_id: optional string`

  ID of a meeting. Optional. Will limit results to only this meeting if passed.

- `page_no: optional number`

  The page number from which you want your page search results to be displayed.

- `per_page: optional number`

  Number of results per page

- `search: optional string`

  The search query string. You can search using the meeting ID or title.

- `sort_by: optional "invokedTime"`

  - `"invokedTime"`

- `sort_order: optional "ASC" or "DESC"`

  - `"ASC"`

  - `"DESC"`

- `start_time: optional string`

  The start time range for which you want to retrieve the meetings. The time must be specified in ISO format.

- `status: optional array of "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

  Filter by one or more recording status

  - `"INVOKED"`

  - `"RECORDING"`

  - `"UPLOADING"`

  - `"UPLOADED"`

  - `"ERRORED"`

  - `"PAUSED"`

### Returns

- `data: array of object { id, audio_download_url, download_url, 11 more }`

  - `id: string`

    ID of the recording

  - `audio_download_url: string`

    If the audio_config is passed, the URL for downloading the audio recording is returned.

  - `download_url: string`

    URL where the recording can be downloaded.

  - `download_url_expiry: string`

    Timestamp when the download URL expires.

  - `file_size: number`

    File size of the recording, in bytes.

  - `invoked_time: string`

    Timestamp when this recording was invoked.

  - `output_file_name: string`

    File name of the recording.

  - `session_id: string`

    ID of the meeting session this recording is for.

  - `started_time: string`

    Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

  - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

    Current status of the recording.

    - `"INVOKED"`

    - `"RECORDING"`

    - `"UPLOADING"`

    - `"UPLOADED"`

    - `"ERRORED"`

    - `"PAUSED"`

  - `stopped_time: string`

    Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

  - `meeting: optional object { id, created_at, updated_at, 9 more }`

    - `id: string`

      ID of the meeting.

    - `created_at: string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `updated_at: string`

      Timestamp the object was updated at. The time is returned in ISO format.

    - `live_stream_on_start: optional boolean`

      Specifies if the meeting should start getting livestreamed on start.

    - `persist_chat: optional boolean`

      Specifies if Chat within a meeting should persist for a week.

    - `record_on_start: optional boolean`

      Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

    - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

      Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

      - `audio_config: optional object { channel, codec, export_file }`

        Object containing configuration regarding the audio that is being recorded.

        - `channel: optional "mono" or "stereo"`

          Audio signal pathway within an audio file that carries a specific sound source.

          - `"mono"`

          - `"stereo"`

        - `codec: optional "MP3" or "AAC"`

          Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

          - `"MP3"`

          - `"AAC"`

        - `export_file: optional boolean`

          Controls whether to export audio file seperately

      - `file_name_prefix: optional string`

        Adds a prefix to the beginning of the file name of the recording.

      - `live_streaming_config: optional object { rtmp_url }`

        - `rtmp_url: optional string`

          RTMP URL to stream to

      - `max_seconds: optional number`

        Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

      - `realtimekit_bucket_config: optional object { enabled }`

        - `enabled: boolean`

          Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

      - `storage_config: optional object { type, access_key, auth_method, 9 more }`

        - `type: "aws" or "azure" or "digitalocean" or 2 more`

          Type of storage media.

          - `"aws"`

          - `"azure"`

          - `"digitalocean"`

          - `"gcs"`

          - `"sftp"`

        - `access_key: optional string`

          Access key of the storage medium. Access key is not required for the `gcs` storage media type.

          Note that this field is not readable by clients, only writeable.

        - `auth_method: optional "KEY" or "PASSWORD"`

          Authentication method used for "sftp" type storage medium

          - `"KEY"`

          - `"PASSWORD"`

        - `bucket: optional string`

          Name of the storage medium's bucket.

        - `host: optional string`

          SSH destination server host for SFTP type storage medium

        - `password: optional string`

          SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

        - `path: optional string`

          Path relative to the bucket root at which the recording will be placed.

        - `port: optional number`

          SSH destination server port for SFTP type storage medium

        - `private_key: optional string`

          Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

        - `region: optional string`

          Region of the storage medium.

        - `secret: optional string`

          Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

        - `username: optional string`

          SSH destination server username for SFTP type storage medium

      - `video_config: optional object { codec, export_file, height, 2 more }`

        - `codec: optional "H264" or "VP8"`

          Codec using which the recording will be encoded.

          - `"H264"`

          - `"VP8"`

        - `export_file: optional boolean`

          Controls whether to export video file seperately

        - `height: optional number`

          Height of the recording video in pixels

        - `watermark: optional object { position, size, url }`

          Watermark to be added to the recording

          - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

            Position of the watermark

            - `"left top"`

            - `"right top"`

            - `"left bottom"`

            - `"right bottom"`

          - `size: optional object { height, width }`

            Size of the watermark

            - `height: optional number`

              Height of the watermark in px

            - `width: optional number`

              Width of the watermark in px

          - `url: optional string`

            URL of the watermark image

        - `width: optional number`

          Width of the recording video in pixels

    - `session_keep_alive_time_in_secs: optional number`

      Time in seconds, for which a session remains active, after the last participant has left the meeting.

    - `status: optional "ACTIVE" or "INACTIVE"`

      Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

      - `"ACTIVE"`

      - `"INACTIVE"`

    - `summarize_on_end: optional boolean`

      Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

    - `title: optional string`

      Title of the meeting.

    - `transcribe_on_end: optional boolean`

      Automatically generate transcripts when the meeting ends.

  - `recording_duration: optional number`

    Total recording time in seconds.

  - `storage_config: optional object { type, access_key, auth_method, 9 more }`

    - `type: "aws" or "azure" or "digitalocean" or 2 more`

      Type of storage media.

      - `"aws"`

      - `"azure"`

      - `"digitalocean"`

      - `"gcs"`

      - `"sftp"`

    - `access_key: optional string`

      Access key of the storage medium. Access key is not required for the `gcs` storage media type.

      Note that this field is not readable by clients, only writeable.

    - `auth_method: optional "KEY" or "PASSWORD"`

      Authentication method used for "sftp" type storage medium

      - `"KEY"`

      - `"PASSWORD"`

    - `bucket: optional string`

      Name of the storage medium's bucket.

    - `host: optional string`

      SSH destination server host for SFTP type storage medium

    - `password: optional string`

      SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

    - `path: optional string`

      Path relative to the bucket root at which the recording will be placed.

    - `port: optional number`

      SSH destination server port for SFTP type storage medium

    - `private_key: optional string`

      Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

    - `region: optional string`

      Region of the storage medium.

    - `secret: optional string`

      Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

    - `username: optional string`

      SSH destination server username for SFTP type storage medium

- `paging: object { end_offset, start_offset, total_count }`

  - `end_offset: number`

  - `start_offset: number`

  - `total_count: number`

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/recordings \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": [
    {
      "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
      "audio_download_url": "https://example.com",
      "download_url": "https://example.com",
      "download_url_expiry": "2019-12-27T18:11:19.117Z",
      "file_size": 0,
      "invoked_time": "2019-12-27T18:11:19.117Z",
      "output_file_name": "output_file_name",
      "session_id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
      "started_time": "2019-12-27T18:11:19.117Z",
      "status": "INVOKED",
      "stopped_time": "2019-12-27T18:11:19.117Z",
      "meeting": {
        "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
        "created_at": "2019-12-27T18:11:19.117Z",
        "updated_at": "2019-12-27T18:11:19.117Z",
        "live_stream_on_start": true,
        "persist_chat": true,
        "record_on_start": true,
        "recording_config": {
          "audio_config": {
            "channel": "mono",
            "codec": "MP3",
            "export_file": true
          },
          "file_name_prefix": "file_name_prefix",
          "live_streaming_config": {
            "rtmp_url": "rtmp://a.rtmp.youtube.com/live2"
          },
          "max_seconds": 60,
          "realtimekit_bucket_config": {
            "enabled": true
          },
          "storage_config": {
            "type": "aws",
            "auth_method": "KEY",
            "bucket": "bucket",
            "host": "host",
            "password": "password",
            "path": "path",
            "port": 0,
            "private_key": "private_key",
            "region": "us-east-1",
            "secret": "secret",
            "username": "username"
          },
          "video_config": {
            "codec": "H264",
            "export_file": true,
            "height": 720,
            "watermark": {
              "position": "left top",
              "size": {
                "height": 1,
                "width": 1
              },
              "url": "https://example.com"
            },
            "width": 1280
          }
        },
        "session_keep_alive_time_in_secs": 60,
        "status": "ACTIVE",
        "summarize_on_end": true,
        "title": "title",
        "transcribe_on_end": true
      },
      "recording_duration": 0,
      "storage_config": {
        "type": "aws",
        "auth_method": "KEY",
        "bucket": "bucket",
        "host": "host",
        "password": "password",
        "path": "path",
        "port": 0,
        "private_key": "private_key",
        "region": "us-east-1",
        "secret": "secret",
        "username": "username"
      }
    }
  ],
  "paging": {
    "end_offset": 30,
    "start_offset": 1,
    "total_count": 30
  },
  "success": true
}
```

## Start recording a meeting

**post** `/accounts/{account_id}/realtime/kit/{app_id}/recordings`

Starts recording a meeting. The meeting can be started by an App admin directly, or a participant with permissions to start a recording, based on the type of authorization used.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Body Parameters

- `meeting_id: string`

  ID of the meeting to record.

- `allow_multiple_recordings: optional boolean`

  By default, a meeting allows only one recording to run at a time. Enabling the `allow_multiple_recordings` parameter to true allows you to initiate multiple recordings concurrently in the same meeting. This allows you to record separate videos of the same meeting with different configurations, such as portrait mode or landscape mode.

- `audio_config: optional object { channel, codec, export_file }`

  Object containing configuration regarding the audio that is being recorded.

  - `channel: optional "mono" or "stereo"`

    Audio signal pathway within an audio file that carries a specific sound source.

    - `"mono"`

    - `"stereo"`

  - `codec: optional "MP3" or "AAC"`

    Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

    - `"MP3"`

    - `"AAC"`

  - `export_file: optional boolean`

    Controls whether to export audio file seperately

- `file_name_prefix: optional string`

  Update the recording file name.

- `interactive_config: optional object { type }`

  Allows you to add timed metadata to your recordings, which are digital markers inserted into a video file to provide contextual information at specific points in the content range. The ID3 tags containing this information are available to clients on the playback timeline in HLS format. The output files are generated in a compressed .tar format.

  - `type: optional "ID3"`

    The metadata is presented in the form of ID3 tags.

    - `"ID3"`

- `max_seconds: optional number`

  Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

- `realtimekit_bucket_config: optional object { enabled }`

  - `enabled: boolean`

    Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

- `rtmp_out_config: optional object { rtmp_url }`

  - `rtmp_url: optional string`

    RTMP URL to stream to

- `storage_config: optional object { type, access_key, auth_method, 9 more }`

  - `type: "aws" or "azure" or "digitalocean" or 2 more`

    Type of storage media.

    - `"aws"`

    - `"azure"`

    - `"digitalocean"`

    - `"gcs"`

    - `"sftp"`

  - `access_key: optional string`

    Access key of the storage medium. Access key is not required for the `gcs` storage media type.

    Note that this field is not readable by clients, only writeable.

  - `auth_method: optional "KEY" or "PASSWORD"`

    Authentication method used for "sftp" type storage medium

    - `"KEY"`

    - `"PASSWORD"`

  - `bucket: optional string`

    Name of the storage medium's bucket.

  - `host: optional string`

    SSH destination server host for SFTP type storage medium

  - `password: optional string`

    SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

  - `path: optional string`

    Path relative to the bucket root at which the recording will be placed.

  - `port: optional number`

    SSH destination server port for SFTP type storage medium

  - `private_key: optional string`

    Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

  - `region: optional string`

    Region of the storage medium.

  - `secret: optional string`

    Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

  - `username: optional string`

    SSH destination server username for SFTP type storage medium

- `url: optional string`

  Pass a custom url to record arbitary screen

- `video_config: optional object { codec, export_file, height, 2 more }`

  - `codec: optional "H264" or "VP8"`

    Codec using which the recording will be encoded.

    - `"H264"`

    - `"VP8"`

  - `export_file: optional boolean`

    Controls whether to export video file seperately

  - `height: optional number`

    Height of the recording video in pixels

  - `watermark: optional object { position, size, url }`

    Watermark to be added to the recording

    - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

      Position of the watermark

      - `"left top"`

      - `"right top"`

      - `"left bottom"`

      - `"right bottom"`

    - `size: optional object { height, width }`

      Size of the watermark

      - `height: optional number`

        Height of the watermark in px

      - `width: optional number`

        Width of the watermark in px

    - `url: optional string`

      URL of the watermark image

  - `width: optional number`

    Width of the recording video in pixels

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { id, audio_download_url, download_url, 12 more }`

  Data returned by the operation

  - `id: string`

    ID of the recording

  - `audio_download_url: string`

    If the audio_config is passed, the URL for downloading the audio recording is returned.

  - `download_url: string`

    URL where the recording can be downloaded.

  - `download_url_expiry: string`

    Timestamp when the download URL expires.

  - `file_size: number`

    File size of the recording, in bytes.

  - `invoked_time: string`

    Timestamp when this recording was invoked.

  - `output_file_name: string`

    File name of the recording.

  - `session_id: string`

    ID of the meeting session this recording is for.

  - `started_time: string`

    Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

  - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

    Current status of the recording.

    - `"INVOKED"`

    - `"RECORDING"`

    - `"UPLOADING"`

    - `"UPLOADED"`

    - `"ERRORED"`

    - `"PAUSED"`

  - `stopped_time: string`

    Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

  - `recording_duration: optional number`

    Total recording time in seconds.

  - `start_reason: optional object { caller, reason }`

    - `caller: optional object { name, type, user_Id }`

      - `name: optional string`

        Name of the user who started the recording.

      - `type: optional "ORGANIZATION" or "USER"`

        The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

        - `"ORGANIZATION"`

        - `"USER"`

      - `user_Id: optional string`

        The user ID of the person who started the recording.

    - `reason: optional "API_CALL" or "RECORD_ON_START"`

      Specifies if the recording was started using the "Start a Recording"API or using the parameter RECORD_ON_START in the "Create a meeting" API.

      If the recording is initiated using the "RECORD_ON_START" parameter, the user details will not be populated.

      - `"API_CALL"`

      - `"RECORD_ON_START"`

  - `stop_reason: optional object { caller, reason }`

    - `caller: optional object { name, type, user_Id }`

      - `name: optional string`

        Name of the user who stopped the recording.

      - `type: optional "ORGANIZATION" or "USER"`

        The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

        - `"ORGANIZATION"`

        - `"USER"`

      - `user_Id: optional string`

        The user ID of the person who stopped the recording.

    - `reason: optional "API_CALL" or "INTERNAL_ERROR" or "ALL_PEERS_LEFT"`

      Specifies the reason why the recording stopped.

      - `"API_CALL"`

      - `"INTERNAL_ERROR"`

      - `"ALL_PEERS_LEFT"`

  - `storage_config: optional object { type, access_key, auth_method, 9 more }`

    - `type: "aws" or "azure" or "digitalocean" or 2 more`

      Type of storage media.

      - `"aws"`

      - `"azure"`

      - `"digitalocean"`

      - `"gcs"`

      - `"sftp"`

    - `access_key: optional string`

      Access key of the storage medium. Access key is not required for the `gcs` storage media type.

      Note that this field is not readable by clients, only writeable.

    - `auth_method: optional "KEY" or "PASSWORD"`

      Authentication method used for "sftp" type storage medium

      - `"KEY"`

      - `"PASSWORD"`

    - `bucket: optional string`

      Name of the storage medium's bucket.

    - `host: optional string`

      SSH destination server host for SFTP type storage medium

    - `password: optional string`

      SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

    - `path: optional string`

      Path relative to the bucket root at which the recording will be placed.

    - `port: optional number`

      SSH destination server port for SFTP type storage medium

    - `private_key: optional string`

      Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

    - `region: optional string`

      Region of the storage medium.

    - `secret: optional string`

      Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

    - `username: optional string`

      SSH destination server username for SFTP type storage medium

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/recordings \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "meeting_id": "97440c6a-140b-40a9-9499-b23fd7a3868a"
        }'
```

#### Response

```json
{
  "success": true,
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "audio_download_url": "https://example.com",
    "download_url": "https://example.com",
    "download_url_expiry": "2019-12-27T18:11:19.117Z",
    "file_size": 0,
    "invoked_time": "2019-12-27T18:11:19.117Z",
    "output_file_name": "output_file_name",
    "session_id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "started_time": "2019-12-27T18:11:19.117Z",
    "status": "INVOKED",
    "stopped_time": "2019-12-27T18:11:19.117Z",
    "recording_duration": 0,
    "start_reason": {
      "caller": {
        "name": "RealtimeKit_test",
        "type": "ORGANIZATION",
        "user_Id": "d61f6956-e68f-4375-bf10-c38a704d1bec"
      },
      "reason": "API_CALL"
    },
    "stop_reason": {
      "caller": {
        "name": "RealtimeKit_test",
        "type": "ORGANIZATION",
        "user_Id": "d61f6956-e68f-4375-bf10-c38a704d1bec"
      },
      "reason": "API_CALL"
    },
    "storage_config": {
      "type": "aws",
      "auth_method": "KEY",
      "bucket": "bucket",
      "host": "host",
      "password": "password",
      "path": "path",
      "port": 0,
      "private_key": "private_key",
      "region": "us-east-1",
      "secret": "secret",
      "username": "username"
    }
  }
}
```

## Fetch active recording

**get** `/accounts/{account_id}/realtime/kit/{app_id}/recordings/active-recording/{meeting_id}`

Returns the active recording details for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Returns

- `data: object { id, audio_download_url, download_url, 9 more }`

  Data returned by the operation

  - `id: string`

    ID of the recording

  - `audio_download_url: string`

    If the audio_config is passed, the URL for downloading the audio recording is returned.

  - `download_url: string`

    URL where the recording can be downloaded.

  - `download_url_expiry: string`

    Timestamp when the download URL expires.

  - `file_size: number`

    File size of the recording, in bytes.

  - `invoked_time: string`

    Timestamp when this recording was invoked.

  - `output_file_name: string`

    File name of the recording.

  - `session_id: string`

    ID of the meeting session this recording is for.

  - `started_time: string`

    Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

  - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

    Current status of the recording.

    - `"INVOKED"`

    - `"RECORDING"`

    - `"UPLOADING"`

    - `"UPLOADED"`

    - `"ERRORED"`

    - `"PAUSED"`

  - `stopped_time: string`

    Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

  - `recording_duration: optional number`

    Total recording time in seconds.

- `success: boolean`

  Success status of the operation

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/recordings/active-recording/$MEETING_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "audio_download_url": "https://example.com",
    "download_url": "https://example.com",
    "download_url_expiry": "2019-12-27T18:11:19.117Z",
    "file_size": 0,
    "invoked_time": "2019-12-27T18:11:19.117Z",
    "output_file_name": "output_file_name",
    "session_id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "started_time": "2019-12-27T18:11:19.117Z",
    "status": "INVOKED",
    "stopped_time": "2019-12-27T18:11:19.117Z",
    "recording_duration": 0
  },
  "success": true
}
```

## Fetch details of a recording

**get** `/accounts/{account_id}/realtime/kit/{app_id}/recordings/{recording_id}`

Returns details of a recording for the given recording ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `recording_id: string`

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { id, audio_download_url, download_url, 12 more }`

  Data returned by the operation

  - `id: string`

    ID of the recording

  - `audio_download_url: string`

    If the audio_config is passed, the URL for downloading the audio recording is returned.

  - `download_url: string`

    URL where the recording can be downloaded.

  - `download_url_expiry: string`

    Timestamp when the download URL expires.

  - `file_size: number`

    File size of the recording, in bytes.

  - `invoked_time: string`

    Timestamp when this recording was invoked.

  - `output_file_name: string`

    File name of the recording.

  - `session_id: string`

    ID of the meeting session this recording is for.

  - `started_time: string`

    Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

  - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

    Current status of the recording.

    - `"INVOKED"`

    - `"RECORDING"`

    - `"UPLOADING"`

    - `"UPLOADED"`

    - `"ERRORED"`

    - `"PAUSED"`

  - `stopped_time: string`

    Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

  - `recording_duration: optional number`

    Total recording time in seconds.

  - `start_reason: optional object { caller, reason }`

    - `caller: optional object { name, type, user_Id }`

      - `name: optional string`

        Name of the user who started the recording.

      - `type: optional "ORGANIZATION" or "USER"`

        The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

        - `"ORGANIZATION"`

        - `"USER"`

      - `user_Id: optional string`

        The user ID of the person who started the recording.

    - `reason: optional "API_CALL" or "RECORD_ON_START"`

      Specifies if the recording was started using the "Start a Recording"API or using the parameter RECORD_ON_START in the "Create a meeting" API.

      If the recording is initiated using the "RECORD_ON_START" parameter, the user details will not be populated.

      - `"API_CALL"`

      - `"RECORD_ON_START"`

  - `stop_reason: optional object { caller, reason }`

    - `caller: optional object { name, type, user_Id }`

      - `name: optional string`

        Name of the user who stopped the recording.

      - `type: optional "ORGANIZATION" or "USER"`

        The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

        - `"ORGANIZATION"`

        - `"USER"`

      - `user_Id: optional string`

        The user ID of the person who stopped the recording.

    - `reason: optional "API_CALL" or "INTERNAL_ERROR" or "ALL_PEERS_LEFT"`

      Specifies the reason why the recording stopped.

      - `"API_CALL"`

      - `"INTERNAL_ERROR"`

      - `"ALL_PEERS_LEFT"`

  - `storage_config: optional object { type, access_key, auth_method, 9 more }`

    - `type: "aws" or "azure" or "digitalocean" or 2 more`

      Type of storage media.

      - `"aws"`

      - `"azure"`

      - `"digitalocean"`

      - `"gcs"`

      - `"sftp"`

    - `access_key: optional string`

      Access key of the storage medium. Access key is not required for the `gcs` storage media type.

      Note that this field is not readable by clients, only writeable.

    - `auth_method: optional "KEY" or "PASSWORD"`

      Authentication method used for "sftp" type storage medium

      - `"KEY"`

      - `"PASSWORD"`

    - `bucket: optional string`

      Name of the storage medium's bucket.

    - `host: optional string`

      SSH destination server host for SFTP type storage medium

    - `password: optional string`

      SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

    - `path: optional string`

      Path relative to the bucket root at which the recording will be placed.

    - `port: optional number`

      SSH destination server port for SFTP type storage medium

    - `private_key: optional string`

      Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

    - `region: optional string`

      Region of the storage medium.

    - `secret: optional string`

      Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

    - `username: optional string`

      SSH destination server username for SFTP type storage medium

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/recordings/$RECORDING_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "success": true,
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "audio_download_url": "https://example.com",
    "download_url": "https://example.com",
    "download_url_expiry": "2019-12-27T18:11:19.117Z",
    "file_size": 0,
    "invoked_time": "2019-12-27T18:11:19.117Z",
    "output_file_name": "output_file_name",
    "session_id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "started_time": "2019-12-27T18:11:19.117Z",
    "status": "INVOKED",
    "stopped_time": "2019-12-27T18:11:19.117Z",
    "recording_duration": 0,
    "start_reason": {
      "caller": {
        "name": "RealtimeKit_test",
        "type": "ORGANIZATION",
        "user_Id": "d61f6956-e68f-4375-bf10-c38a704d1bec"
      },
      "reason": "API_CALL"
    },
    "stop_reason": {
      "caller": {
        "name": "RealtimeKit_test",
        "type": "ORGANIZATION",
        "user_Id": "d61f6956-e68f-4375-bf10-c38a704d1bec"
      },
      "reason": "API_CALL"
    },
    "storage_config": {
      "type": "aws",
      "auth_method": "KEY",
      "bucket": "bucket",
      "host": "host",
      "password": "password",
      "path": "path",
      "port": 0,
      "private_key": "private_key",
      "region": "us-east-1",
      "secret": "secret",
      "username": "username"
    }
  }
}
```

## Pause/Resume/Stop recording

**put** `/accounts/{account_id}/realtime/kit/{app_id}/recordings/{recording_id}`

Pause/Resume/Stop a given recording ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

- `recording_id: string`

### Body Parameters

- `action: "stop" or "pause" or "resume"`

  - `"stop"`

  - `"pause"`

  - `"resume"`

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { id, audio_download_url, download_url, 12 more }`

  Data returned by the operation

  - `id: string`

    ID of the recording

  - `audio_download_url: string`

    If the audio_config is passed, the URL for downloading the audio recording is returned.

  - `download_url: string`

    URL where the recording can be downloaded.

  - `download_url_expiry: string`

    Timestamp when the download URL expires.

  - `file_size: number`

    File size of the recording, in bytes.

  - `invoked_time: string`

    Timestamp when this recording was invoked.

  - `output_file_name: string`

    File name of the recording.

  - `session_id: string`

    ID of the meeting session this recording is for.

  - `started_time: string`

    Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

  - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

    Current status of the recording.

    - `"INVOKED"`

    - `"RECORDING"`

    - `"UPLOADING"`

    - `"UPLOADED"`

    - `"ERRORED"`

    - `"PAUSED"`

  - `stopped_time: string`

    Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

  - `recording_duration: optional number`

    Total recording time in seconds.

  - `start_reason: optional object { caller, reason }`

    - `caller: optional object { name, type, user_Id }`

      - `name: optional string`

        Name of the user who started the recording.

      - `type: optional "ORGANIZATION" or "USER"`

        The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

        - `"ORGANIZATION"`

        - `"USER"`

      - `user_Id: optional string`

        The user ID of the person who started the recording.

    - `reason: optional "API_CALL" or "RECORD_ON_START"`

      Specifies if the recording was started using the "Start a Recording"API or using the parameter RECORD_ON_START in the "Create a meeting" API.

      If the recording is initiated using the "RECORD_ON_START" parameter, the user details will not be populated.

      - `"API_CALL"`

      - `"RECORD_ON_START"`

  - `stop_reason: optional object { caller, reason }`

    - `caller: optional object { name, type, user_Id }`

      - `name: optional string`

        Name of the user who stopped the recording.

      - `type: optional "ORGANIZATION" or "USER"`

        The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

        - `"ORGANIZATION"`

        - `"USER"`

      - `user_Id: optional string`

        The user ID of the person who stopped the recording.

    - `reason: optional "API_CALL" or "INTERNAL_ERROR" or "ALL_PEERS_LEFT"`

      Specifies the reason why the recording stopped.

      - `"API_CALL"`

      - `"INTERNAL_ERROR"`

      - `"ALL_PEERS_LEFT"`

  - `storage_config: optional object { type, access_key, auth_method, 9 more }`

    - `type: "aws" or "azure" or "digitalocean" or 2 more`

      Type of storage media.

      - `"aws"`

      - `"azure"`

      - `"digitalocean"`

      - `"gcs"`

      - `"sftp"`

    - `access_key: optional string`

      Access key of the storage medium. Access key is not required for the `gcs` storage media type.

      Note that this field is not readable by clients, only writeable.

    - `auth_method: optional "KEY" or "PASSWORD"`

      Authentication method used for "sftp" type storage medium

      - `"KEY"`

      - `"PASSWORD"`

    - `bucket: optional string`

      Name of the storage medium's bucket.

    - `host: optional string`

      SSH destination server host for SFTP type storage medium

    - `password: optional string`

      SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

    - `path: optional string`

      Path relative to the bucket root at which the recording will be placed.

    - `port: optional number`

      SSH destination server port for SFTP type storage medium

    - `private_key: optional string`

      Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

    - `region: optional string`

      Region of the storage medium.

    - `secret: optional string`

      Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

    - `username: optional string`

      SSH destination server username for SFTP type storage medium

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/recordings/$RECORDING_ID \
    -X PUT \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "action": "stop"
        }'
```

#### Response

```json
{
  "success": true,
  "data": {
    "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "audio_download_url": "https://example.com",
    "download_url": "https://example.com",
    "download_url_expiry": "2019-12-27T18:11:19.117Z",
    "file_size": 0,
    "invoked_time": "2019-12-27T18:11:19.117Z",
    "output_file_name": "output_file_name",
    "session_id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
    "started_time": "2019-12-27T18:11:19.117Z",
    "status": "INVOKED",
    "stopped_time": "2019-12-27T18:11:19.117Z",
    "recording_duration": 0,
    "start_reason": {
      "caller": {
        "name": "RealtimeKit_test",
        "type": "ORGANIZATION",
        "user_Id": "d61f6956-e68f-4375-bf10-c38a704d1bec"
      },
      "reason": "API_CALL"
    },
    "stop_reason": {
      "caller": {
        "name": "RealtimeKit_test",
        "type": "ORGANIZATION",
        "user_Id": "d61f6956-e68f-4375-bf10-c38a704d1bec"
      },
      "reason": "API_CALL"
    },
    "storage_config": {
      "type": "aws",
      "auth_method": "KEY",
      "bucket": "bucket",
      "host": "host",
      "password": "password",
      "path": "path",
      "port": 0,
      "private_key": "private_key",
      "region": "us-east-1",
      "secret": "secret",
      "username": "username"
    }
  }
}
```

## Start recording participant audio tracks

**post** `/accounts/{account_id}/realtime/kit/{app_id}/recordings/track`

Starts track recording for a meeting. Track recording currently records separate participant audio tracks as WebM files in the RealtimeKit bucket. Video track recording is in development. For more information, refer to [Track recording](/realtime/realtimekit/recording-guide/track-recording/).

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Body Parameters

- `meeting_id: string`

  ID of the meeting to record.

- `layers: optional map[object { file_name_prefix, media_kind } ]`

  Optional audio layer configuration. If omitted, RealtimeKit records all participant audio using the default file name prefix.

  - `file_name_prefix: optional string`

    A file name prefix to apply for files generated from this layer

  - `media_kind: optional "audio"`

    Media kind to record. Track recording currently supports audio only.

    - `"audio"`

- `user_ids: optional array of string`

  Optional list of participant user IDs to record. Selective track recording (`user_ids`) is in early beta contact support to use this feature.

### Returns

- `success: boolean`

  Success status of the operation

- `data: optional object { recording }`

  Data returned by the operation

  - `recording: object { id, audio_download_url, download_url, 9 more }`

    - `id: string`

      ID of the recording

    - `audio_download_url: string`

      If the audio_config is passed, the URL for downloading the audio recording is returned.

    - `download_url: string`

      URL where the recording can be downloaded.

    - `download_url_expiry: string`

      Timestamp when the download URL expires.

    - `file_size: number`

      File size of the recording, in bytes.

    - `invoked_time: string`

      Timestamp when this recording was invoked.

    - `output_file_name: string`

      File name of the recording.

    - `session_id: string`

      ID of the meeting session this recording is for.

    - `started_time: string`

      Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

    - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

      Current status of the recording.

      - `"INVOKED"`

      - `"RECORDING"`

      - `"UPLOADING"`

      - `"UPLOADED"`

      - `"ERRORED"`

      - `"PAUSED"`

    - `stopped_time: string`

      Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

    - `recording_duration: optional number`

      Total recording time in seconds.

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/recordings/track \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "meeting_id": "97440c6a-140b-40a9-9499-b23fd7a3868a"
        }'
```

#### Response

```json
{
  "success": true,
  "data": {
    "recording": {
      "id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
      "audio_download_url": "https://example.com",
      "download_url": "https://example.com",
      "download_url_expiry": "2019-12-27T18:11:19.117Z",
      "file_size": 0,
      "invoked_time": "2019-12-27T18:11:19.117Z",
      "output_file_name": "output_file_name",
      "session_id": "182bd5e5-6e1a-4fe4-a799-aa6d9a6ab26e",
      "started_time": "2019-12-27T18:11:19.117Z",
      "status": "INVOKED",
      "stopped_time": "2019-12-27T18:11:19.117Z",
      "recording_duration": 0
    }
  }
}
```

## Domain Types

### Recording Get Recordings Response

- `RecordingGetRecordingsResponse object { data, paging, success }`

  - `data: array of object { id, audio_download_url, download_url, 11 more }`

    - `id: string`

      ID of the recording

    - `audio_download_url: string`

      If the audio_config is passed, the URL for downloading the audio recording is returned.

    - `download_url: string`

      URL where the recording can be downloaded.

    - `download_url_expiry: string`

      Timestamp when the download URL expires.

    - `file_size: number`

      File size of the recording, in bytes.

    - `invoked_time: string`

      Timestamp when this recording was invoked.

    - `output_file_name: string`

      File name of the recording.

    - `session_id: string`

      ID of the meeting session this recording is for.

    - `started_time: string`

      Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

    - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

      Current status of the recording.

      - `"INVOKED"`

      - `"RECORDING"`

      - `"UPLOADING"`

      - `"UPLOADED"`

      - `"ERRORED"`

      - `"PAUSED"`

    - `stopped_time: string`

      Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

    - `meeting: optional object { id, created_at, updated_at, 9 more }`

      - `id: string`

        ID of the meeting.

      - `created_at: string`

        Timestamp the object was created at. The time is returned in ISO format.

      - `updated_at: string`

        Timestamp the object was updated at. The time is returned in ISO format.

      - `live_stream_on_start: optional boolean`

        Specifies if the meeting should start getting livestreamed on start.

      - `persist_chat: optional boolean`

        Specifies if Chat within a meeting should persist for a week.

      - `record_on_start: optional boolean`

        Specifies if the meeting should start getting recorded as soon as someone joins the meeting.

      - `recording_config: optional object { audio_config, file_name_prefix, live_streaming_config, 4 more }`

        Recording Configurations to be used for this meeting. This level of configs takes higher preference over App level configs on the RealtimeKit developer portal.

        - `audio_config: optional object { channel, codec, export_file }`

          Object containing configuration regarding the audio that is being recorded.

          - `channel: optional "mono" or "stereo"`

            Audio signal pathway within an audio file that carries a specific sound source.

            - `"mono"`

            - `"stereo"`

          - `codec: optional "MP3" or "AAC"`

            Codec using which the recording will be encoded. If VP8/VP9 is selected for videoConfig, changing audioConfig is not allowed. In this case, the codec in the audioConfig is automatically set to vorbis.

            - `"MP3"`

            - `"AAC"`

          - `export_file: optional boolean`

            Controls whether to export audio file seperately

        - `file_name_prefix: optional string`

          Adds a prefix to the beginning of the file name of the recording.

        - `live_streaming_config: optional object { rtmp_url }`

          - `rtmp_url: optional string`

            RTMP URL to stream to

        - `max_seconds: optional number`

          Specifies the maximum duration for recording in seconds, ranging from a minimum of 60 seconds to a maximum of 24 hours.

        - `realtimekit_bucket_config: optional object { enabled }`

          - `enabled: boolean`

            Controls whether recordings are uploaded to RealtimeKit's bucket. If set to false, `download_url`, `audio_download_url`, `download_url_expiry` won't be generated for a recording.

        - `storage_config: optional object { type, access_key, auth_method, 9 more }`

          - `type: "aws" or "azure" or "digitalocean" or 2 more`

            Type of storage media.

            - `"aws"`

            - `"azure"`

            - `"digitalocean"`

            - `"gcs"`

            - `"sftp"`

          - `access_key: optional string`

            Access key of the storage medium. Access key is not required for the `gcs` storage media type.

            Note that this field is not readable by clients, only writeable.

          - `auth_method: optional "KEY" or "PASSWORD"`

            Authentication method used for "sftp" type storage medium

            - `"KEY"`

            - `"PASSWORD"`

          - `bucket: optional string`

            Name of the storage medium's bucket.

          - `host: optional string`

            SSH destination server host for SFTP type storage medium

          - `password: optional string`

            SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

          - `path: optional string`

            Path relative to the bucket root at which the recording will be placed.

          - `port: optional number`

            SSH destination server port for SFTP type storage medium

          - `private_key: optional string`

            Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

          - `region: optional string`

            Region of the storage medium.

          - `secret: optional string`

            Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

          - `username: optional string`

            SSH destination server username for SFTP type storage medium

        - `video_config: optional object { codec, export_file, height, 2 more }`

          - `codec: optional "H264" or "VP8"`

            Codec using which the recording will be encoded.

            - `"H264"`

            - `"VP8"`

          - `export_file: optional boolean`

            Controls whether to export video file seperately

          - `height: optional number`

            Height of the recording video in pixels

          - `watermark: optional object { position, size, url }`

            Watermark to be added to the recording

            - `position: optional "left top" or "right top" or "left bottom" or "right bottom"`

              Position of the watermark

              - `"left top"`

              - `"right top"`

              - `"left bottom"`

              - `"right bottom"`

            - `size: optional object { height, width }`

              Size of the watermark

              - `height: optional number`

                Height of the watermark in px

              - `width: optional number`

                Width of the watermark in px

            - `url: optional string`

              URL of the watermark image

          - `width: optional number`

            Width of the recording video in pixels

      - `session_keep_alive_time_in_secs: optional number`

        Time in seconds, for which a session remains active, after the last participant has left the meeting.

      - `status: optional "ACTIVE" or "INACTIVE"`

        Whether the meeting is `ACTIVE` or `INACTIVE`. Users will not be able to join an `INACTIVE` meeting.

        - `"ACTIVE"`

        - `"INACTIVE"`

      - `summarize_on_end: optional boolean`

        Automatically generate summary of meetings using transcripts. Requires Transcriptions to be enabled, and can be retrieved via Webhooks or summary API.

      - `title: optional string`

        Title of the meeting.

      - `transcribe_on_end: optional boolean`

        Automatically generate transcripts when the meeting ends.

    - `recording_duration: optional number`

      Total recording time in seconds.

    - `storage_config: optional object { type, access_key, auth_method, 9 more }`

      - `type: "aws" or "azure" or "digitalocean" or 2 more`

        Type of storage media.

        - `"aws"`

        - `"azure"`

        - `"digitalocean"`

        - `"gcs"`

        - `"sftp"`

      - `access_key: optional string`

        Access key of the storage medium. Access key is not required for the `gcs` storage media type.

        Note that this field is not readable by clients, only writeable.

      - `auth_method: optional "KEY" or "PASSWORD"`

        Authentication method used for "sftp" type storage medium

        - `"KEY"`

        - `"PASSWORD"`

      - `bucket: optional string`

        Name of the storage medium's bucket.

      - `host: optional string`

        SSH destination server host for SFTP type storage medium

      - `password: optional string`

        SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

      - `path: optional string`

        Path relative to the bucket root at which the recording will be placed.

      - `port: optional number`

        SSH destination server port for SFTP type storage medium

      - `private_key: optional string`

        Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

      - `region: optional string`

        Region of the storage medium.

      - `secret: optional string`

        Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

      - `username: optional string`

        SSH destination server username for SFTP type storage medium

  - `paging: object { end_offset, start_offset, total_count }`

    - `end_offset: number`

    - `start_offset: number`

    - `total_count: number`

  - `success: boolean`

### Recording Start Recordings Response

- `RecordingStartRecordingsResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { id, audio_download_url, download_url, 12 more }`

    Data returned by the operation

    - `id: string`

      ID of the recording

    - `audio_download_url: string`

      If the audio_config is passed, the URL for downloading the audio recording is returned.

    - `download_url: string`

      URL where the recording can be downloaded.

    - `download_url_expiry: string`

      Timestamp when the download URL expires.

    - `file_size: number`

      File size of the recording, in bytes.

    - `invoked_time: string`

      Timestamp when this recording was invoked.

    - `output_file_name: string`

      File name of the recording.

    - `session_id: string`

      ID of the meeting session this recording is for.

    - `started_time: string`

      Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

    - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

      Current status of the recording.

      - `"INVOKED"`

      - `"RECORDING"`

      - `"UPLOADING"`

      - `"UPLOADED"`

      - `"ERRORED"`

      - `"PAUSED"`

    - `stopped_time: string`

      Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

    - `recording_duration: optional number`

      Total recording time in seconds.

    - `start_reason: optional object { caller, reason }`

      - `caller: optional object { name, type, user_Id }`

        - `name: optional string`

          Name of the user who started the recording.

        - `type: optional "ORGANIZATION" or "USER"`

          The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

          - `"ORGANIZATION"`

          - `"USER"`

        - `user_Id: optional string`

          The user ID of the person who started the recording.

      - `reason: optional "API_CALL" or "RECORD_ON_START"`

        Specifies if the recording was started using the "Start a Recording"API or using the parameter RECORD_ON_START in the "Create a meeting" API.

        If the recording is initiated using the "RECORD_ON_START" parameter, the user details will not be populated.

        - `"API_CALL"`

        - `"RECORD_ON_START"`

    - `stop_reason: optional object { caller, reason }`

      - `caller: optional object { name, type, user_Id }`

        - `name: optional string`

          Name of the user who stopped the recording.

        - `type: optional "ORGANIZATION" or "USER"`

          The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

          - `"ORGANIZATION"`

          - `"USER"`

        - `user_Id: optional string`

          The user ID of the person who stopped the recording.

      - `reason: optional "API_CALL" or "INTERNAL_ERROR" or "ALL_PEERS_LEFT"`

        Specifies the reason why the recording stopped.

        - `"API_CALL"`

        - `"INTERNAL_ERROR"`

        - `"ALL_PEERS_LEFT"`

    - `storage_config: optional object { type, access_key, auth_method, 9 more }`

      - `type: "aws" or "azure" or "digitalocean" or 2 more`

        Type of storage media.

        - `"aws"`

        - `"azure"`

        - `"digitalocean"`

        - `"gcs"`

        - `"sftp"`

      - `access_key: optional string`

        Access key of the storage medium. Access key is not required for the `gcs` storage media type.

        Note that this field is not readable by clients, only writeable.

      - `auth_method: optional "KEY" or "PASSWORD"`

        Authentication method used for "sftp" type storage medium

        - `"KEY"`

        - `"PASSWORD"`

      - `bucket: optional string`

        Name of the storage medium's bucket.

      - `host: optional string`

        SSH destination server host for SFTP type storage medium

      - `password: optional string`

        SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

      - `path: optional string`

        Path relative to the bucket root at which the recording will be placed.

      - `port: optional number`

        SSH destination server port for SFTP type storage medium

      - `private_key: optional string`

        Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

      - `region: optional string`

        Region of the storage medium.

      - `secret: optional string`

        Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

      - `username: optional string`

        SSH destination server username for SFTP type storage medium

### Recording Get Active Recordings Response

- `RecordingGetActiveRecordingsResponse object { data, success }`

  - `data: object { id, audio_download_url, download_url, 9 more }`

    Data returned by the operation

    - `id: string`

      ID of the recording

    - `audio_download_url: string`

      If the audio_config is passed, the URL for downloading the audio recording is returned.

    - `download_url: string`

      URL where the recording can be downloaded.

    - `download_url_expiry: string`

      Timestamp when the download URL expires.

    - `file_size: number`

      File size of the recording, in bytes.

    - `invoked_time: string`

      Timestamp when this recording was invoked.

    - `output_file_name: string`

      File name of the recording.

    - `session_id: string`

      ID of the meeting session this recording is for.

    - `started_time: string`

      Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

    - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

      Current status of the recording.

      - `"INVOKED"`

      - `"RECORDING"`

      - `"UPLOADING"`

      - `"UPLOADED"`

      - `"ERRORED"`

      - `"PAUSED"`

    - `stopped_time: string`

      Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

    - `recording_duration: optional number`

      Total recording time in seconds.

  - `success: boolean`

    Success status of the operation

### Recording Get One Recording Response

- `RecordingGetOneRecordingResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { id, audio_download_url, download_url, 12 more }`

    Data returned by the operation

    - `id: string`

      ID of the recording

    - `audio_download_url: string`

      If the audio_config is passed, the URL for downloading the audio recording is returned.

    - `download_url: string`

      URL where the recording can be downloaded.

    - `download_url_expiry: string`

      Timestamp when the download URL expires.

    - `file_size: number`

      File size of the recording, in bytes.

    - `invoked_time: string`

      Timestamp when this recording was invoked.

    - `output_file_name: string`

      File name of the recording.

    - `session_id: string`

      ID of the meeting session this recording is for.

    - `started_time: string`

      Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

    - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

      Current status of the recording.

      - `"INVOKED"`

      - `"RECORDING"`

      - `"UPLOADING"`

      - `"UPLOADED"`

      - `"ERRORED"`

      - `"PAUSED"`

    - `stopped_time: string`

      Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

    - `recording_duration: optional number`

      Total recording time in seconds.

    - `start_reason: optional object { caller, reason }`

      - `caller: optional object { name, type, user_Id }`

        - `name: optional string`

          Name of the user who started the recording.

        - `type: optional "ORGANIZATION" or "USER"`

          The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

          - `"ORGANIZATION"`

          - `"USER"`

        - `user_Id: optional string`

          The user ID of the person who started the recording.

      - `reason: optional "API_CALL" or "RECORD_ON_START"`

        Specifies if the recording was started using the "Start a Recording"API or using the parameter RECORD_ON_START in the "Create a meeting" API.

        If the recording is initiated using the "RECORD_ON_START" parameter, the user details will not be populated.

        - `"API_CALL"`

        - `"RECORD_ON_START"`

    - `stop_reason: optional object { caller, reason }`

      - `caller: optional object { name, type, user_Id }`

        - `name: optional string`

          Name of the user who stopped the recording.

        - `type: optional "ORGANIZATION" or "USER"`

          The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

          - `"ORGANIZATION"`

          - `"USER"`

        - `user_Id: optional string`

          The user ID of the person who stopped the recording.

      - `reason: optional "API_CALL" or "INTERNAL_ERROR" or "ALL_PEERS_LEFT"`

        Specifies the reason why the recording stopped.

        - `"API_CALL"`

        - `"INTERNAL_ERROR"`

        - `"ALL_PEERS_LEFT"`

    - `storage_config: optional object { type, access_key, auth_method, 9 more }`

      - `type: "aws" or "azure" or "digitalocean" or 2 more`

        Type of storage media.

        - `"aws"`

        - `"azure"`

        - `"digitalocean"`

        - `"gcs"`

        - `"sftp"`

      - `access_key: optional string`

        Access key of the storage medium. Access key is not required for the `gcs` storage media type.

        Note that this field is not readable by clients, only writeable.

      - `auth_method: optional "KEY" or "PASSWORD"`

        Authentication method used for "sftp" type storage medium

        - `"KEY"`

        - `"PASSWORD"`

      - `bucket: optional string`

        Name of the storage medium's bucket.

      - `host: optional string`

        SSH destination server host for SFTP type storage medium

      - `password: optional string`

        SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

      - `path: optional string`

        Path relative to the bucket root at which the recording will be placed.

      - `port: optional number`

        SSH destination server port for SFTP type storage medium

      - `private_key: optional string`

        Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

      - `region: optional string`

        Region of the storage medium.

      - `secret: optional string`

        Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

      - `username: optional string`

        SSH destination server username for SFTP type storage medium

### Recording Pause Resume Stop Recording Response

- `RecordingPauseResumeStopRecordingResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { id, audio_download_url, download_url, 12 more }`

    Data returned by the operation

    - `id: string`

      ID of the recording

    - `audio_download_url: string`

      If the audio_config is passed, the URL for downloading the audio recording is returned.

    - `download_url: string`

      URL where the recording can be downloaded.

    - `download_url_expiry: string`

      Timestamp when the download URL expires.

    - `file_size: number`

      File size of the recording, in bytes.

    - `invoked_time: string`

      Timestamp when this recording was invoked.

    - `output_file_name: string`

      File name of the recording.

    - `session_id: string`

      ID of the meeting session this recording is for.

    - `started_time: string`

      Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

    - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

      Current status of the recording.

      - `"INVOKED"`

      - `"RECORDING"`

      - `"UPLOADING"`

      - `"UPLOADED"`

      - `"ERRORED"`

      - `"PAUSED"`

    - `stopped_time: string`

      Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

    - `recording_duration: optional number`

      Total recording time in seconds.

    - `start_reason: optional object { caller, reason }`

      - `caller: optional object { name, type, user_Id }`

        - `name: optional string`

          Name of the user who started the recording.

        - `type: optional "ORGANIZATION" or "USER"`

          The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

          - `"ORGANIZATION"`

          - `"USER"`

        - `user_Id: optional string`

          The user ID of the person who started the recording.

      - `reason: optional "API_CALL" or "RECORD_ON_START"`

        Specifies if the recording was started using the "Start a Recording"API or using the parameter RECORD_ON_START in the "Create a meeting" API.

        If the recording is initiated using the "RECORD_ON_START" parameter, the user details will not be populated.

        - `"API_CALL"`

        - `"RECORD_ON_START"`

    - `stop_reason: optional object { caller, reason }`

      - `caller: optional object { name, type, user_Id }`

        - `name: optional string`

          Name of the user who stopped the recording.

        - `type: optional "ORGANIZATION" or "USER"`

          The type can be an App or a user. If the type is `user`, then only the `user_Id` and `name` are returned.

          - `"ORGANIZATION"`

          - `"USER"`

        - `user_Id: optional string`

          The user ID of the person who stopped the recording.

      - `reason: optional "API_CALL" or "INTERNAL_ERROR" or "ALL_PEERS_LEFT"`

        Specifies the reason why the recording stopped.

        - `"API_CALL"`

        - `"INTERNAL_ERROR"`

        - `"ALL_PEERS_LEFT"`

    - `storage_config: optional object { type, access_key, auth_method, 9 more }`

      - `type: "aws" or "azure" or "digitalocean" or 2 more`

        Type of storage media.

        - `"aws"`

        - `"azure"`

        - `"digitalocean"`

        - `"gcs"`

        - `"sftp"`

      - `access_key: optional string`

        Access key of the storage medium. Access key is not required for the `gcs` storage media type.

        Note that this field is not readable by clients, only writeable.

      - `auth_method: optional "KEY" or "PASSWORD"`

        Authentication method used for "sftp" type storage medium

        - `"KEY"`

        - `"PASSWORD"`

      - `bucket: optional string`

        Name of the storage medium's bucket.

      - `host: optional string`

        SSH destination server host for SFTP type storage medium

      - `password: optional string`

        SSH destination server password for SFTP type storage medium when auth_method is "PASSWORD". If auth_method is "KEY", this specifies the password for the ssh private key.

      - `path: optional string`

        Path relative to the bucket root at which the recording will be placed.

      - `port: optional number`

        SSH destination server port for SFTP type storage medium

      - `private_key: optional string`

        Private key used to login to destination SSH server for SFTP type storage medium, when auth_method used is "KEY"

      - `region: optional string`

        Region of the storage medium.

      - `secret: optional string`

        Secret key of the storage medium. Similar to `access_key`, it is only writeable by clients, not readable.

      - `username: optional string`

        SSH destination server username for SFTP type storage medium

### Recording Start Track Recording Response

- `RecordingStartTrackRecordingResponse object { success, data }`

  - `success: boolean`

    Success status of the operation

  - `data: optional object { recording }`

    Data returned by the operation

    - `recording: object { id, audio_download_url, download_url, 9 more }`

      - `id: string`

        ID of the recording

      - `audio_download_url: string`

        If the audio_config is passed, the URL for downloading the audio recording is returned.

      - `download_url: string`

        URL where the recording can be downloaded.

      - `download_url_expiry: string`

        Timestamp when the download URL expires.

      - `file_size: number`

        File size of the recording, in bytes.

      - `invoked_time: string`

        Timestamp when this recording was invoked.

      - `output_file_name: string`

        File name of the recording.

      - `session_id: string`

        ID of the meeting session this recording is for.

      - `started_time: string`

        Timestamp when this recording actually started after being invoked. Usually a few seconds after `invoked_time`.

      - `status: "INVOKED" or "RECORDING" or "UPLOADING" or 3 more`

        Current status of the recording.

        - `"INVOKED"`

        - `"RECORDING"`

        - `"UPLOADING"`

        - `"UPLOADED"`

        - `"ERRORED"`

        - `"PAUSED"`

      - `stopped_time: string`

        Timestamp when this recording was stopped. Optional; is present only when the recording has actually been stopped.

      - `recording_duration: optional number`

        Total recording time in seconds.

# Webhooks

## Fetch all webhooks details

**get** `/accounts/{account_id}/realtime/kit/{app_id}/webhooks`

Returns details of all webhooks for an App.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Returns

- `data: array of object { id, created_at, enabled, 4 more }`

  - `id: string`

    ID of the webhook

  - `created_at: string`

    Timestamp when this webhook was created

  - `enabled: boolean`

    Set to true if the webhook is active

  - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

    Events this webhook will send updates for

    - `"meeting.started"`

    - `"meeting.ended"`

    - `"meeting.participantJoined"`

    - `"meeting.participantLeft"`

    - `"meeting.chatSynced"`

    - `"recording.statusUpdate"`

    - `"livestreaming.statusUpdate"`

    - `"meeting.transcript"`

    - `"meeting.summary"`

  - `name: string`

    Name of the webhook

  - `updated_at: string`

    Timestamp when this webhook was updated

  - `url: string`

    URL the webhook will send events to

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": [
    {
      "id": "0d1f069d-43bb-489a-ad8c-7eb95592ba8e",
      "created_at": "2022-05-28T07:01:53.075Z",
      "enabled": true,
      "events": [
        "meeting.started",
        "meeting.ended",
        "meeting.participantJoined",
        "meeting.participantLeft",
        "meeting.chatSynced",
        "recording.statusUpdate",
        "livestreaming.statusUpdate",
        "meeting.transcript",
        "meeting.summary"
      ],
      "name": "All events webhook",
      "updated_at": "2022-05-28T07:01:53.075Z",
      "url": "https://webhook.site/b23a5bbd-c7b0-4ced-a9e2-78ae7889897e"
    }
  ],
  "success": true
}
```

## Add a webhook

**post** `/accounts/{account_id}/realtime/kit/{app_id}/webhooks`

Adds a new webhook to an App.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Body Parameters

- `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

  Events that this webhook will get triggered by

  - `"meeting.started"`

  - `"meeting.ended"`

  - `"meeting.participantJoined"`

  - `"meeting.participantLeft"`

  - `"meeting.chatSynced"`

  - `"recording.statusUpdate"`

  - `"livestreaming.statusUpdate"`

  - `"meeting.transcript"`

  - `"meeting.summary"`

- `name: string`

  Name of the webhook

- `url: string`

  URL this webhook will send events to

- `enabled: optional boolean`

  Set whether or not the webhook should be active when created

### Returns

- `data: object { id, created_at, enabled, 4 more }`

  - `id: string`

    ID of the webhook

  - `created_at: string`

    Timestamp when this webhook was created

  - `enabled: boolean`

    Set to true if the webhook is active

  - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

    Events this webhook will send updates for

    - `"meeting.started"`

    - `"meeting.ended"`

    - `"meeting.participantJoined"`

    - `"meeting.participantLeft"`

    - `"meeting.chatSynced"`

    - `"recording.statusUpdate"`

    - `"livestreaming.statusUpdate"`

    - `"meeting.transcript"`

    - `"meeting.summary"`

  - `name: string`

    Name of the webhook

  - `updated_at: string`

    Timestamp when this webhook was updated

  - `url: string`

    URL the webhook will send events to

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "events": [
            "meeting.started",
            "meeting.ended",
            "meeting.participantJoined",
            "meeting.participantLeft",
            "meeting.chatSynced",
            "recording.statusUpdate",
            "livestreaming.statusUpdate",
            "meeting.transcript",
            "meeting.summary"
          ],
          "name": "All events webhook",
          "url": "https://webhook.site/b23a5bbd-c7b0-4ced-a9e2-78ae7889897e"
        }'
```

#### Response

```json
{
  "data": {
    "id": "0d1f069d-43bb-489a-ad8c-7eb95592ba8e",
    "created_at": "2022-05-28T07:01:53.075Z",
    "enabled": true,
    "events": [
      "meeting.started",
      "meeting.ended",
      "meeting.participantJoined",
      "meeting.participantLeft",
      "meeting.chatSynced",
      "recording.statusUpdate",
      "livestreaming.statusUpdate",
      "meeting.transcript",
      "meeting.summary"
    ],
    "name": "All events webhook",
    "updated_at": "2022-05-28T07:01:53.075Z",
    "url": "https://webhook.site/b23a5bbd-c7b0-4ced-a9e2-78ae7889897e"
  },
  "success": true
}
```

## Fetch details of a webhook

**get** `/accounts/{account_id}/realtime/kit/{app_id}/webhooks/{webhook_id}`

Returns webhook details for the given webhook ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `webhook_id: string`

### Returns

- `data: object { id, created_at, enabled, 4 more }`

  - `id: string`

    ID of the webhook

  - `created_at: string`

    Timestamp when this webhook was created

  - `enabled: boolean`

    Set to true if the webhook is active

  - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

    Events this webhook will send updates for

    - `"meeting.started"`

    - `"meeting.ended"`

    - `"meeting.participantJoined"`

    - `"meeting.participantLeft"`

    - `"meeting.chatSynced"`

    - `"recording.statusUpdate"`

    - `"livestreaming.statusUpdate"`

    - `"meeting.transcript"`

    - `"meeting.summary"`

  - `name: string`

    Name of the webhook

  - `updated_at: string`

    Timestamp when this webhook was updated

  - `url: string`

    URL the webhook will send events to

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks/$WEBHOOK_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "0d1f069d-43bb-489a-ad8c-7eb95592ba8e",
    "created_at": "2022-05-28T07:01:53.075Z",
    "enabled": true,
    "events": [
      "meeting.started",
      "meeting.ended",
      "meeting.participantJoined",
      "meeting.participantLeft",
      "meeting.chatSynced",
      "recording.statusUpdate",
      "livestreaming.statusUpdate",
      "meeting.transcript",
      "meeting.summary"
    ],
    "name": "All events webhook",
    "updated_at": "2022-05-28T07:01:53.075Z",
    "url": "https://webhook.site/b23a5bbd-c7b0-4ced-a9e2-78ae7889897e"
  },
  "success": true
}
```

## Replace a webhook

**put** `/accounts/{account_id}/realtime/kit/{app_id}/webhooks/{webhook_id}`

Replace all details for the given webhook ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `webhook_id: string`

### Body Parameters

- `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

  Events that this webhook will get triggered by

  - `"meeting.started"`

  - `"meeting.ended"`

  - `"meeting.participantJoined"`

  - `"meeting.participantLeft"`

  - `"meeting.chatSynced"`

  - `"recording.statusUpdate"`

  - `"livestreaming.statusUpdate"`

  - `"meeting.transcript"`

  - `"meeting.summary"`

- `name: string`

  Name of the webhook

- `url: string`

  URL this webhook will send events to

- `enabled: optional boolean`

  Set whether or not the webhook should be active when created

### Returns

- `data: object { id, created_at, enabled, 4 more }`

  - `id: string`

    ID of the webhook

  - `created_at: string`

    Timestamp when this webhook was created

  - `enabled: boolean`

    Set to true if the webhook is active

  - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

    Events this webhook will send updates for

    - `"meeting.started"`

    - `"meeting.ended"`

    - `"meeting.participantJoined"`

    - `"meeting.participantLeft"`

    - `"meeting.chatSynced"`

    - `"recording.statusUpdate"`

    - `"livestreaming.statusUpdate"`

    - `"meeting.transcript"`

    - `"meeting.summary"`

  - `name: string`

    Name of the webhook

  - `updated_at: string`

    Timestamp when this webhook was updated

  - `url: string`

    URL the webhook will send events to

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks/$WEBHOOK_ID \
    -X PUT \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "events": [
            "meeting.started",
            "meeting.ended",
            "meeting.participantJoined",
            "meeting.participantLeft",
            "meeting.chatSynced",
            "recording.statusUpdate",
            "livestreaming.statusUpdate",
            "meeting.transcript",
            "meeting.summary"
          ],
          "name": "All events webhook",
          "url": "https://webhook.site/b23a5bbd-c7b0-4ced-a9e2-78ae7889897e"
        }'
```

#### Response

```json
{
  "data": {
    "id": "0d1f069d-43bb-489a-ad8c-7eb95592ba8e",
    "created_at": "2022-05-28T07:01:53.075Z",
    "enabled": true,
    "events": [
      "meeting.started",
      "meeting.ended",
      "meeting.participantJoined",
      "meeting.participantLeft",
      "meeting.chatSynced",
      "recording.statusUpdate",
      "livestreaming.statusUpdate",
      "meeting.transcript",
      "meeting.summary"
    ],
    "name": "All events webhook",
    "updated_at": "2022-05-28T07:01:53.075Z",
    "url": "https://webhook.site/b23a5bbd-c7b0-4ced-a9e2-78ae7889897e"
  },
  "success": true
}
```

## Edit a webhook

**patch** `/accounts/{account_id}/realtime/kit/{app_id}/webhooks/{webhook_id}`

Edits the webhook details for the given webhook ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `webhook_id: string`

### Body Parameters

- `enabled: optional boolean`

- `events: optional array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

  Events that the webhook will get triggered by

  - `"meeting.started"`

  - `"meeting.ended"`

  - `"meeting.participantJoined"`

  - `"meeting.participantLeft"`

  - `"recording.statusUpdate"`

  - `"livestreaming.statusUpdate"`

  - `"meeting.chatSynced"`

  - `"meeting.transcript"`

  - `"meeting.summary"`

- `name: optional string`

  Name of the webhook

- `url: optional string`

  URL the webhook will send events to

### Returns

- `data: object { id, created_at, enabled, 4 more }`

  - `id: string`

    ID of the webhook

  - `created_at: string`

    Timestamp when this webhook was created

  - `enabled: boolean`

    Set to true if the webhook is active

  - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

    Events this webhook will send updates for

    - `"meeting.started"`

    - `"meeting.ended"`

    - `"meeting.participantJoined"`

    - `"meeting.participantLeft"`

    - `"meeting.chatSynced"`

    - `"recording.statusUpdate"`

    - `"livestreaming.statusUpdate"`

    - `"meeting.transcript"`

    - `"meeting.summary"`

  - `name: string`

    Name of the webhook

  - `updated_at: string`

    Timestamp when this webhook was updated

  - `url: string`

    URL the webhook will send events to

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks/$WEBHOOK_ID \
    -X PATCH \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "url": "https://webhook.site/b23a5bbd-c7b0-4ced-a9e2-78ae7889897e"
        }'
```

#### Response

```json
{
  "data": {
    "id": "0d1f069d-43bb-489a-ad8c-7eb95592ba8e",
    "created_at": "2022-05-28T07:01:53.075Z",
    "enabled": true,
    "events": [
      "meeting.started",
      "meeting.ended",
      "meeting.participantJoined",
      "meeting.participantLeft",
      "meeting.chatSynced",
      "recording.statusUpdate",
      "livestreaming.statusUpdate",
      "meeting.transcript",
      "meeting.summary"
    ],
    "name": "All events webhook",
    "updated_at": "2022-05-28T07:01:53.075Z",
    "url": "https://webhook.site/b23a5bbd-c7b0-4ced-a9e2-78ae7889897e"
  },
  "success": true
}
```

## Delete a webhook

**delete** `/accounts/{account_id}/realtime/kit/{app_id}/webhooks/{webhook_id}`

Removes a webhook for the given webhook ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `webhook_id: string`

### Returns

- `data: object { id, created_at, enabled, 4 more }`

  - `id: string`

    ID of the webhook

  - `created_at: string`

    Timestamp when this webhook was created

  - `enabled: boolean`

    Set to true if the webhook is active

  - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

    Events this webhook will send updates for

    - `"meeting.started"`

    - `"meeting.ended"`

    - `"meeting.participantJoined"`

    - `"meeting.participantLeft"`

    - `"meeting.chatSynced"`

    - `"recording.statusUpdate"`

    - `"livestreaming.statusUpdate"`

    - `"meeting.transcript"`

    - `"meeting.summary"`

  - `name: string`

    Name of the webhook

  - `updated_at: string`

    Timestamp when this webhook was updated

  - `url: string`

    URL the webhook will send events to

- `success: boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks/$WEBHOOK_ID \
    -X DELETE \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "0d1f069d-43bb-489a-ad8c-7eb95592ba8e",
    "created_at": "2022-05-28T07:01:53.075Z",
    "enabled": true,
    "events": [
      "meeting.started",
      "meeting.ended",
      "meeting.participantJoined",
      "meeting.participantLeft",
      "meeting.chatSynced",
      "recording.statusUpdate",
      "livestreaming.statusUpdate",
      "meeting.transcript",
      "meeting.summary"
    ],
    "name": "All events webhook",
    "updated_at": "2022-05-28T07:01:53.075Z",
    "url": "https://webhook.site/b23a5bbd-c7b0-4ced-a9e2-78ae7889897e"
  },
  "success": true
}
```

## Domain Types

### Webhook Get Webhooks Response

- `WebhookGetWebhooksResponse object { data, success }`

  - `data: array of object { id, created_at, enabled, 4 more }`

    - `id: string`

      ID of the webhook

    - `created_at: string`

      Timestamp when this webhook was created

    - `enabled: boolean`

      Set to true if the webhook is active

    - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

      Events this webhook will send updates for

      - `"meeting.started"`

      - `"meeting.ended"`

      - `"meeting.participantJoined"`

      - `"meeting.participantLeft"`

      - `"meeting.chatSynced"`

      - `"recording.statusUpdate"`

      - `"livestreaming.statusUpdate"`

      - `"meeting.transcript"`

      - `"meeting.summary"`

    - `name: string`

      Name of the webhook

    - `updated_at: string`

      Timestamp when this webhook was updated

    - `url: string`

      URL the webhook will send events to

  - `success: boolean`

### Webhook Create Webhook Response

- `WebhookCreateWebhookResponse object { data, success }`

  - `data: object { id, created_at, enabled, 4 more }`

    - `id: string`

      ID of the webhook

    - `created_at: string`

      Timestamp when this webhook was created

    - `enabled: boolean`

      Set to true if the webhook is active

    - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

      Events this webhook will send updates for

      - `"meeting.started"`

      - `"meeting.ended"`

      - `"meeting.participantJoined"`

      - `"meeting.participantLeft"`

      - `"meeting.chatSynced"`

      - `"recording.statusUpdate"`

      - `"livestreaming.statusUpdate"`

      - `"meeting.transcript"`

      - `"meeting.summary"`

    - `name: string`

      Name of the webhook

    - `updated_at: string`

      Timestamp when this webhook was updated

    - `url: string`

      URL the webhook will send events to

  - `success: boolean`

### Webhook Get Webhook By ID Response

- `WebhookGetWebhookByIDResponse object { data, success }`

  - `data: object { id, created_at, enabled, 4 more }`

    - `id: string`

      ID of the webhook

    - `created_at: string`

      Timestamp when this webhook was created

    - `enabled: boolean`

      Set to true if the webhook is active

    - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

      Events this webhook will send updates for

      - `"meeting.started"`

      - `"meeting.ended"`

      - `"meeting.participantJoined"`

      - `"meeting.participantLeft"`

      - `"meeting.chatSynced"`

      - `"recording.statusUpdate"`

      - `"livestreaming.statusUpdate"`

      - `"meeting.transcript"`

      - `"meeting.summary"`

    - `name: string`

      Name of the webhook

    - `updated_at: string`

      Timestamp when this webhook was updated

    - `url: string`

      URL the webhook will send events to

  - `success: boolean`

### Webhook Replace Webhook Response

- `WebhookReplaceWebhookResponse object { data, success }`

  - `data: object { id, created_at, enabled, 4 more }`

    - `id: string`

      ID of the webhook

    - `created_at: string`

      Timestamp when this webhook was created

    - `enabled: boolean`

      Set to true if the webhook is active

    - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

      Events this webhook will send updates for

      - `"meeting.started"`

      - `"meeting.ended"`

      - `"meeting.participantJoined"`

      - `"meeting.participantLeft"`

      - `"meeting.chatSynced"`

      - `"recording.statusUpdate"`

      - `"livestreaming.statusUpdate"`

      - `"meeting.transcript"`

      - `"meeting.summary"`

    - `name: string`

      Name of the webhook

    - `updated_at: string`

      Timestamp when this webhook was updated

    - `url: string`

      URL the webhook will send events to

  - `success: boolean`

### Webhook Edit Webhook Response

- `WebhookEditWebhookResponse object { data, success }`

  - `data: object { id, created_at, enabled, 4 more }`

    - `id: string`

      ID of the webhook

    - `created_at: string`

      Timestamp when this webhook was created

    - `enabled: boolean`

      Set to true if the webhook is active

    - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

      Events this webhook will send updates for

      - `"meeting.started"`

      - `"meeting.ended"`

      - `"meeting.participantJoined"`

      - `"meeting.participantLeft"`

      - `"meeting.chatSynced"`

      - `"recording.statusUpdate"`

      - `"livestreaming.statusUpdate"`

      - `"meeting.transcript"`

      - `"meeting.summary"`

    - `name: string`

      Name of the webhook

    - `updated_at: string`

      Timestamp when this webhook was updated

    - `url: string`

      URL the webhook will send events to

  - `success: boolean`

### Webhook Delete Webhook Response

- `WebhookDeleteWebhookResponse object { data, success }`

  - `data: object { id, created_at, enabled, 4 more }`

    - `id: string`

      ID of the webhook

    - `created_at: string`

      Timestamp when this webhook was created

    - `enabled: boolean`

      Set to true if the webhook is active

    - `events: array of "meeting.started" or "meeting.ended" or "meeting.participantJoined" or 6 more`

      Events this webhook will send updates for

      - `"meeting.started"`

      - `"meeting.ended"`

      - `"meeting.participantJoined"`

      - `"meeting.participantLeft"`

      - `"meeting.chatSynced"`

      - `"recording.statusUpdate"`

      - `"livestreaming.statusUpdate"`

      - `"meeting.transcript"`

      - `"meeting.summary"`

    - `name: string`

      Name of the webhook

    - `updated_at: string`

      Timestamp when this webhook was updated

    - `url: string`

      URL the webhook will send events to

  - `success: boolean`

# Active Session

## Fetch details of an active session

**get** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/active-session`

Returns details of an ongoing active session for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Returns

- `data: optional object { id, associated_id, created_at, 11 more }`

  - `id: string`

    ID of the session

  - `associated_id: string`

    ID of the meeting this session is associated with. In the case of V2 meetings, it is always a UUID. In V1 meetings, it is a room name of the form `abcdef-ghijkl`

  - `created_at: string`

    timestamp when session created

  - `live_participants: number`

    number of participants currently in the session

  - `max_concurrent_participants: number`

    number of maximum participants that were in the session

  - `meeting_display_name: string`

    Title of the meeting this session belongs to

  - `minutes_consumed: number`

    number of minutes consumed since the session started

  - `organization_id: string`

    App id that hosted this session

  - `started_at: string`

    timestamp when session started

  - `status: "LIVE" or "ENDED"`

    current status of session

    - `"LIVE"`

    - `"ENDED"`

  - `type: "meeting" or "livestream" or "participant"`

    type of session

    - `"meeting"`

    - `"livestream"`

    - `"participant"`

  - `updated_at: string`

    timestamp when session was last updated

  - `breakout_rooms: optional array of unknown`

  - `ended_at: optional string`

    timestamp when session ended

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/active-session \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "id",
    "associated_id": "associated_id",
    "created_at": "created_at",
    "live_participants": 0,
    "max_concurrent_participants": 0,
    "meeting_display_name": "meeting_display_name",
    "minutes_consumed": 0,
    "organization_id": "organization_id",
    "started_at": "started_at",
    "status": "LIVE",
    "type": "meeting",
    "updated_at": "updated_at",
    "breakout_rooms": [
      {}
    ],
    "ended_at": "ended_at"
  },
  "success": true
}
```

## Kick participants from an active session

**post** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/active-session/kick`

Kicks one or more participants from an active session using user ID or custom participant ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Body Parameters

- `custom_participant_ids: array of string`

- `participant_ids: array of string`

### Returns

- `data: optional object { action, participants }`

  - `action: optional string`

  - `participants: optional array of object { id, created_at, updated_at, 3 more }`

    - `id: string`

      ID of the session participant

    - `created_at: string`

    - `updated_at: string`

    - `email: optional string`

      Email of the session participant.

    - `name: optional string`

      Name of the session participant.

    - `picture: optional string`

      A URL pointing to a picture of the participant.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/active-session/kick \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "custom_participant_ids": [
            "string"
          ],
          "participant_ids": [
            "string"
          ]
        }'
```

#### Response

```json
{
  "data": {
    "action": "action",
    "participants": [
      {
        "id": "id",
        "created_at": "created_at",
        "updated_at": "updated_at",
        "email": "email",
        "name": "name",
        "picture": "picture"
      }
    ]
  },
  "success": true
}
```

## Kick all participants

**post** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/active-session/kick-all`

Kicks all participants from an active session for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Returns

- `data: optional object { action, kicked_participants_count }`

  - `action: optional string`

  - `kicked_participants_count: optional number`

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/active-session/kick-all \
    -X POST \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "action": "action",
    "kicked_participants_count": 0
  },
  "success": true
}
```

## Create a poll

**post** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/active-session/poll`

Creates a new poll in an active session for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Body Parameters

- `options: array of string`

  Different options for the question

- `question: string`

  Question of the poll

- `anonymous: optional boolean`

  if voters on a poll are anonymous

- `hide_votes: optional boolean`

  if votes on an option are visible before a person votes

### Returns

- `data: optional object { action, poll }`

  - `action: optional string`

  - `poll: optional object { id, options, question, 4 more }`

    - `id: string`

      ID of the poll

    - `options: array of object { count, text, votes }`

      Answer options

      - `count: number`

      - `text: string`

        Text of the answer option

      - `votes: array of object { id, name }`

        - `id: string`

        - `name: string`

    - `question: string`

      Question asked by the poll

    - `anonymous: optional boolean`

    - `created_by: optional string`

    - `hide_votes: optional boolean`

    - `voted: optional array of string`

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/active-session/poll \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{
          "options": [
            "string"
          ],
          "question": "question"
        }'
```

#### Response

```json
{
  "data": {
    "action": "action",
    "poll": {
      "id": "id",
      "options": [
        {
          "count": 0,
          "text": "text",
          "votes": [
            {
              "id": "id",
              "name": "name"
            }
          ]
        }
      ],
      "question": "question",
      "anonymous": true,
      "created_by": "created_by",
      "hide_votes": true,
      "voted": [
        "string"
      ]
    }
  },
  "success": true
}
```

## Domain Types

### Active Session Get Active Session Response

- `ActiveSessionGetActiveSessionResponse object { data, success }`

  - `data: optional object { id, associated_id, created_at, 11 more }`

    - `id: string`

      ID of the session

    - `associated_id: string`

      ID of the meeting this session is associated with. In the case of V2 meetings, it is always a UUID. In V1 meetings, it is a room name of the form `abcdef-ghijkl`

    - `created_at: string`

      timestamp when session created

    - `live_participants: number`

      number of participants currently in the session

    - `max_concurrent_participants: number`

      number of maximum participants that were in the session

    - `meeting_display_name: string`

      Title of the meeting this session belongs to

    - `minutes_consumed: number`

      number of minutes consumed since the session started

    - `organization_id: string`

      App id that hosted this session

    - `started_at: string`

      timestamp when session started

    - `status: "LIVE" or "ENDED"`

      current status of session

      - `"LIVE"`

      - `"ENDED"`

    - `type: "meeting" or "livestream" or "participant"`

      type of session

      - `"meeting"`

      - `"livestream"`

      - `"participant"`

    - `updated_at: string`

      timestamp when session was last updated

    - `breakout_rooms: optional array of unknown`

    - `ended_at: optional string`

      timestamp when session ended

  - `success: optional boolean`

### Active Session Kick Participants Response

- `ActiveSessionKickParticipantsResponse object { data, success }`

  - `data: optional object { action, participants }`

    - `action: optional string`

    - `participants: optional array of object { id, created_at, updated_at, 3 more }`

      - `id: string`

        ID of the session participant

      - `created_at: string`

      - `updated_at: string`

      - `email: optional string`

        Email of the session participant.

      - `name: optional string`

        Name of the session participant.

      - `picture: optional string`

        A URL pointing to a picture of the participant.

  - `success: optional boolean`

### Active Session Kick All Participants Response

- `ActiveSessionKickAllParticipantsResponse object { data, success }`

  - `data: optional object { action, kicked_participants_count }`

    - `action: optional string`

    - `kicked_participants_count: optional number`

  - `success: optional boolean`

### Active Session Create Poll Response

- `ActiveSessionCreatePollResponse object { data, success }`

  - `data: optional object { action, poll }`

    - `action: optional string`

    - `poll: optional object { id, options, question, 4 more }`

      - `id: string`

        ID of the poll

      - `options: array of object { count, text, votes }`

        Answer options

        - `count: number`

        - `text: string`

          Text of the answer option

        - `votes: array of object { id, name }`

          - `id: string`

          - `name: string`

      - `question: string`

        Question asked by the poll

      - `anonymous: optional boolean`

      - `created_by: optional string`

      - `hide_votes: optional boolean`

      - `voted: optional array of string`

  - `success: optional boolean`

# Livestreams

## Create an independent livestream

**post** `/accounts/{account_id}/realtime/kit/{app_id}/livestreams`

Creates a livestream for the given App ID and returns ingest server, stream key, and playback URL. You can pass custom input to the ingest server and stream key, and freely distribute the content using the playback URL on any player that supports HLS/LHLS.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Body Parameters

- `name: optional string`

  Name of the livestream

### Returns

- `data: optional object { id, disabled, ingest_server, 5 more }`

  - `id: optional string`

    The livestream ID.

  - `disabled: optional boolean`

    Specifies if the livestream was disabled.

  - `ingest_server: optional string`

    The server URL to which the RTMP encoder should send the video and audio data.

  - `meeting_id: optional string`

  - `name: optional string`

  - `playback_url: optional string`

    The web address that viewers can use to watch the livestream.

  - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

    - `"LIVE"`

    - `"IDLE"`

    - `"ERRORED"`

    - `"INVOKED"`

  - `stream_key: optional string`

    Unique key for accessing each livestream.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/livestreams \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{}'
```

#### Response

```json
{
  "data": {
    "disabled": false,
    "id": "78dd0b50-4147-4bb8-88d3-2ccc2e98bff0",
    "ingest_server": "rtmps://live.cloudflare.com:443/live/",
    "meeting_id": null,
    "name": "Livestreaming-Demo",
    "playback_url": "https://customer-s8oj0c1n5ek8ah1e.cloudflarestream.com/7de6a3fec0f9c05bf1df140950d3a237/manifest/video.m3u8",
    "status": "INVOKED",
    "stream_key": "f26566285faca6fbe2e79a73a66rsrrsrrsr3cde23a2bb7dbc6c2c1761b98f4e4"
  },
  "success": true
}
```

## Fetch all livestreams

**get** `/accounts/{account_id}/realtime/kit/{app_id}/livestreams`

Returns details of livestreams associated with the given App ID. It includes livestreams created by your App and RealtimeKit meetings that are livestreamed by your App. If you only want details of livestreams created by your App and not RealtimeKit meetings, you can use the `exclude_meetings` query parameter.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Query Parameters

- `end_time: optional string`

  Specify the end time range in ISO format to access the live stream.

- `exclude_meetings: optional boolean`

  Exclude the RealtimeKit meetings that are livestreamed.

- `page_no: optional number`

  The page number from which you want your page search results to be displayed.

- `per_page: optional number`

  Number of results per page.

- `sort_order: optional "ASC" or "DSC"`

  Specifies the sorting order for the results.

  - `"ASC"`

  - `"DSC"`

- `start_time: optional string`

  Specify the start time range in ISO format to access the live stream.

- `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

  Specifies the status of the operation.

  - `"LIVE"`

  - `"IDLE"`

  - `"ERRORED"`

  - `"INVOKED"`

### Returns

- `data: optional object { id, created_at, disabled, 8 more }`

  - `id: optional string`

    The ID of the livestream.

  - `created_at: optional string`

    Timestamp the object was created at. The time is returned in ISO format.

  - `disabled: optional string`

    Specifies if the livestream was disabled.

  - `ingest_server: optional string`

    The server URL to which the RTMP encoder sends the video and audio data.

  - `meeting_id: optional string`

    ID of the meeting.

  - `name: optional string`

    Name of the livestream.

  - `paging: optional object { end_offset, start_offset, total_count }`

    - `end_offset: optional number`

    - `start_offset: optional number`

    - `total_count: optional number`

  - `playback_url: optional string`

    The web address that viewers can use to watch the livestream.

  - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

    - `"LIVE"`

    - `"IDLE"`

    - `"ERRORED"`

    - `"INVOKED"`

  - `stream_key: optional string`

    Unique key for accessing each livestream.

  - `updated_at: optional string`

    Timestamp the object was updated at. The time is returned in ISO format.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/livestreams \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "3fd739f4-3c41-456e-bfba-6ebd51e16d2d",
    "created_at": "2023-07-15T11:48:34.753Z",
    "disabled": "disabled",
    "ingest_server": "rtmps://live.cloudflare.com:443/live/",
    "meeting_id": "meeting_id",
    "name": "test",
    "paging": {
      "end_offset": 1,
      "start_offset": 1,
      "total_count": 1
    },
    "playback_url": "https://customer-s8oj0c1n5ek8ah1e.cloudflarestream.com/7de6a3fec0f9c05bf1df140950d3a237/manifest/video.m3u8",
    "status": "LIVE",
    "stream_key": "f26566285faca6fbe2e79a73a66rsrrsrrsr3cde23a2bb7dbc6c2c1761b98f4e4",
    "updated_at": "2023-07-15T11:48:34.753Z"
  },
  "success": true
}
```

## Stop livestreaming a meeting

**post** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/active-livestream/stop`

Stops the active livestream of a meeting associated with the given meeting ID. Retreive the meeting ID using the `Create a meeting` API.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Returns

- `data: optional object { message }`

  - `message: optional string`

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/active-livestream/stop \
    -X POST \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "message": "Stopped live stream successfully"
  },
  "success": true
}
```

## Start livestreaming a meeting

**post** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/livestreams`

Starts livestream of a meeting associated with the given meeting ID. Retreive the meeting ID using the `Create a meeting` API.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Body Parameters

- `name: optional string`

- `video_config: optional object { height, width }`

  - `height: optional number`

    Height of the livestreaming video in pixels

  - `width: optional number`

    Width of the livestreaming video in pixels

### Returns

- `data: optional object { id, ingest_server, playback_url, 2 more }`

  - `id: optional string`

    The livestream ID.

  - `ingest_server: optional string`

    The server URL to which the RTMP encoder sends the video and audio data.

  - `playback_url: optional string`

    The web address that viewers can use to watch the livestream.

  - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

    - `"LIVE"`

    - `"IDLE"`

    - `"ERRORED"`

    - `"INVOKED"`

  - `stream_key: optional string`

    Unique key for accessing each livestream.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/livestreams \
    -H 'Content-Type: application/json' \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
    -d '{}'
```

#### Response

```json
{
  "data": {
    "id": "7088bba8-f522-49a8-b59b-3cd0e946bbb0",
    "ingest_server": "rtmps://live.cloudflare.com:443/live/",
    "playback_url": "https://customer-s8oj0c1n5ek8ah1e.cloudflarestream.com/7de6a3fec0f9c05bf1df140950d3a237/manifest/video.m3u8",
    "status": "INVOKED",
    "stream_key": "f26566285faca6fbe2e79a73a66rsrrsrrsr3cde23a2bb7dbc6c2c1761b98f4e4"
  },
  "success": true
}
```

## Fetch complete analytics data for your livestreams

**get** `/accounts/{account_id}/realtime/kit/{app_id}/analytics/livestreams/overall`

Returns livestream analytics for the specified time range.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Query Parameters

- `end_time: optional number`

  Specify the end time as a Unix timestamp in seconds to access the livestream analytics.

- `filters: optional string`

  Optional filters for livestream analytics.

- `start_time: optional number`

  Specify the start time as a Unix timestamp in seconds to access the livestream analytics.

### Returns

- `data: optional object { count, total_ingest_seconds, total_viewer_seconds }`

  - `count: optional number`

    Count of total livestreams.

  - `total_ingest_seconds: optional number`

    Total time duration for which the input was given or the meeting was streamed.

  - `total_viewer_seconds: optional number`

    Total view time for which the viewers watched the stream.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/analytics/livestreams/overall \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "count": 4,
    "total_ingest_seconds": 531,
    "total_viewer_seconds": 116
  },
  "success": true
}
```

## Fetch day-wise analytics data for your livestreams

**get** `/accounts/{account_id}/realtime/kit/{app_id}/analytics/livestreams/daywise`

Returns day-wise livestream analytics for the specified time range.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Query Parameters

- `end_time: optional number`

  Specify the end time as a Unix timestamp in seconds to access the livestream analytics.

- `filters: optional string`

  Optional filters for livestream analytics.

- `start_time: optional number`

  Specify the start time as a Unix timestamp in seconds to access the livestream analytics.

### Returns

- `data: optional array of object { count, date, total_ingest_seconds, total_viewer_seconds }`

  - `count: optional number`

    Count of total livestream sessions.

  - `date: optional string`

    Analytics date.

  - `total_ingest_seconds: optional number`

    Total time duration for which the input was given or the meeting was streamed.

  - `total_viewer_seconds: optional number`

    Total view time for which the viewers watched the stream.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/analytics/livestreams/daywise \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": [
    {
      "count": 4,
      "date": "2023-07-15",
      "total_ingest_seconds": 531,
      "total_viewer_seconds": 116
    }
  ],
  "success": true
}
```

## Fetch day-wise session and recording analytics data for an App

**get** `/accounts/{account_id}/realtime/kit/{app_id}/analytics/daywise`

Returns day-wise session and recording analytics data of an App for the specified time range start_date to end_date. If start_date and end_date are not provided, the default time range is set from 30 days ago to the current date.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Query Parameters

- `end_date: optional string`

  end date in YYYY-MM-DD format

- `start_date: optional string`

  start date in YYYY-MM-DD format

### Returns

- `data: optional object { recording_stats, session_stats }`

  - `recording_stats: optional object { day_stats, recording_count, recording_minutes_consumed }`

    Recording statistics of an App during the range specified

    - `day_stats: optional array of object { day, total_recording_minutes, total_recordings }`

      Day wise recording stats

      - `day: optional string`

      - `total_recording_minutes: optional number`

        Total recording minutes for a specific day

      - `total_recordings: optional number`

        Total number of recordings for a specific day

    - `recording_count: optional number`

      Total number of recordings during the range specified

    - `recording_minutes_consumed: optional number`

      Total recording minutes during the range specified

  - `session_stats: optional object { day_stats, sessions_count, sessions_minutes_consumed }`

    Session statistics of an App during the range specified

    - `day_stats: optional array of object { day, total_session_minutes, total_sessions }`

      Day wise session stats

      - `day: optional string`

      - `total_session_minutes: optional number`

        Total session minutes for a specific day

      - `total_sessions: optional number`

        Total number of sessions for a specific day

    - `sessions_count: optional number`

      Total number of sessions during the range specified

    - `sessions_minutes_consumed: optional number`

      Total session minutes during the range specified

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/analytics/daywise \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "recording_stats": {
      "day_stats": [
        {
          "day": "day",
          "total_recording_minutes": 0,
          "total_recordings": 0
        }
      ],
      "recording_count": 0,
      "recording_minutes_consumed": 0
    },
    "session_stats": {
      "day_stats": [
        {
          "day": "day",
          "total_session_minutes": 0,
          "total_sessions": 0
        }
      ],
      "sessions_count": 0,
      "sessions_minutes_consumed": 0
    }
  },
  "success": true
}
```

## Fetch active livestreams for a meeting

**get** `/accounts/{account_id}/realtime/kit/{app_id}/meetings/{meeting_id}/active-livestream`

Returns details of all active livestreams for the given meeting ID.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `meeting_id: string`

### Returns

- `data: optional object { id, created_at, disabled, 7 more }`

  - `id: optional string`

    The livestream ID.

  - `created_at: optional string`

    Timestamp the object was created at. The time is returned in ISO format.

  - `disabled: optional string`

    Specifies if the livestream was disabled.

  - `ingest_server: optional string`

    The server URL to which the RTMP encoder sends the video and audio data.

  - `meeting_id: optional string`

  - `name: optional string`

    Name of the livestream.

  - `playback_url: optional string`

    The web address that viewers can use to watch the livestream.

  - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

    - `"LIVE"`

    - `"IDLE"`

    - `"ERRORED"`

    - `"INVOKED"`

  - `stream_key: optional string`

    Unique key for accessing each livestream.

  - `updated_at: optional string`

    Timestamp the object was updated at. The time is returned in ISO format.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/meetings/$MEETING_ID/active-livestream \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "id",
    "created_at": "2019-12-27T18:11:19.117Z",
    "disabled": "disabled",
    "ingest_server": "ingest_server",
    "meeting_id": "meeting_id",
    "name": "name",
    "playback_url": "playback_url",
    "status": "LIVE",
    "stream_key": "stream_key",
    "updated_at": "2019-12-27T18:11:19.117Z"
  },
  "success": true
}
```

## Fetch livestream session details using livestream session ID

**get** `/accounts/{account_id}/realtime/kit/{app_id}/livestreams/sessions/{livestream-session-id}`

Returns livestream session details for the given livestream session ID. Retrieve the `livestream_session_id`using the `Fetch livestream session details using a session ID` API.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `"livestream-session-id": string`

### Returns

- `data: optional object { id, created_at, err_message, 6 more }`

  - `id: optional string`

    The livestream ID.

  - `created_at: optional string`

    Timestamp the object was created at. The time is returned in ISO format.

  - `err_message: optional string`

    The server URL to which the RTMP encoder sends the video and audio data.

  - `ingest_seconds: optional number`

    Name of the livestream.

  - `livestream_id: optional string`

  - `started_time: optional string`

    Unique key for accessing each livestream.

  - `stopped_time: optional string`

    The web address that viewers can use to watch the livestream.

  - `updated_at: optional string`

    Timestamp the object was updated at. The time is returned in ISO format.

  - `viewer_seconds: optional number`

    Specifies if the livestream was disabled.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/livestreams/sessions/$LIVESTREAM_SESSION_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "id": "id",
    "created_at": "2019-12-27T18:11:19.117Z",
    "err_message": "err_message",
    "ingest_seconds": 0,
    "livestream_id": "livestream_id",
    "started_time": "started_time",
    "stopped_time": "stopped_time",
    "updated_at": "updated_at",
    "viewer_seconds": 0
  },
  "success": true
}
```

## Fetch active livestream session details

**get** `/accounts/{account_id}/realtime/kit/{app_id}/livestreams/{livestream_id}/active-livestream-session`

Returns details of all active livestreams for the given livestream ID. Retreive the livestream ID using the `Start livestreaming a meeting` API.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `livestream_id: string`

### Returns

- `data: optional object { livestream, session }`

  - `livestream: optional object { id, created_at, disabled, 7 more }`

    - `id: optional string`

    - `created_at: optional string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `disabled: optional string`

      Specifies if the livestream was disabled.

    - `ingest_server: optional string`

      The server URL to which the RTMP encoder sends the video and audio data.

    - `meeting_id: optional string`

      ID of the meeting.

    - `name: optional string`

      Name of the livestream.

    - `playback_url: optional string`

      The web address that viewers can use to watch the livestream.

    - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

      - `"LIVE"`

      - `"IDLE"`

      - `"ERRORED"`

      - `"INVOKED"`

    - `stream_key: optional string`

      Unique key for accessing each livestream.

    - `updated_at: optional string`

      Timestamp the object was updated at. The time is returned in ISO format.

  - `session: optional object { id, created_at, err_message, 7 more }`

    - `id: optional string`

    - `created_at: optional string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `err_message: optional string`

    - `ingest_seconds: optional string`

      The time duration for which the input was given or the meeting was streamed.

    - `invoked_time: optional string`

      Timestamp the object was invoked. The time is returned in ISO format.

    - `livestream_id: optional string`

    - `started_time: optional string`

      Timestamp the object was started. The time is returned in ISO format.

    - `stopped_time: optional string`

      Timestamp the object was stopped. The time is returned in ISO format.

    - `updated_at: optional string`

      Timestamp the object was updated at. The time is returned in ISO format.

    - `viewer_seconds: optional string`

      The total view time for which the viewers watched the stream.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/livestreams/$LIVESTREAM_ID/active-livestream-session \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "livestream": {
      "id": "id",
      "created_at": "2019-12-27T18:11:19.117Z",
      "disabled": "disabled",
      "ingest_server": "ingest_server",
      "meeting_id": "meeting_id",
      "name": "name",
      "playback_url": "playback_url",
      "status": "LIVE",
      "stream_key": "stream_key",
      "updated_at": "2019-12-27T18:11:19.117Z"
    },
    "session": {
      "id": "id",
      "created_at": "2019-12-27T18:11:19.117Z",
      "err_message": "err_message",
      "ingest_seconds": "ingest_seconds",
      "invoked_time": "2019-12-27T18:11:19.117Z",
      "livestream_id": "livestream_id",
      "started_time": "2019-12-27T18:11:19.117Z",
      "stopped_time": "2019-12-27T18:11:19.117Z",
      "updated_at": "2019-12-27T18:11:19.117Z",
      "viewer_seconds": "viewer_seconds"
    }
  },
  "success": true
}
```

## Fetch livestream details using livestream ID

**get** `/accounts/{account_id}/realtime/kit/{app_id}/livestreams/{livestream_id}`

Returns details of a livestream with sessions for the given livestream ID. Retreive the livestream ID using the `Start livestreaming a meeting` API.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

- `livestream_id: string`

### Query Parameters

- `page_no: optional number`

  The page number from which you want your page search results to be displayed.

- `per_page: optional number`

  Number of results per page.

### Returns

- `data: optional object { livestream, paging, session }`

  - `livestream: optional object { id, created_at, disabled, 7 more }`

    - `id: optional string`

      ID of the livestream.

    - `created_at: optional string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `disabled: optional string`

      Specifies if the livestream was disabled.

    - `ingest_server: optional string`

      The server URL to which the RTMP encoder sends the video and audio data.

    - `meeting_id: optional string`

      The ID of the meeting.

    - `name: optional string`

      Name of the livestream.

    - `playback_url: optional string`

      The web address that viewers can use to watch the livestream.

    - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

      - `"LIVE"`

      - `"IDLE"`

      - `"ERRORED"`

      - `"INVOKED"`

    - `stream_key: optional string`

      Unique key for accessing each livestream.

    - `updated_at: optional string`

      Timestamp the object was updated at. The time is returned in ISO format.

  - `paging: optional object { end_offset, start_offset, total_count }`

    - `end_offset: optional number`

    - `start_offset: optional number`

    - `total_count: optional number`

  - `session: optional object { id, created_at, err_message, 7 more }`

    - `id: optional string`

      ID of the session.

    - `created_at: optional string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `err_message: optional string`

    - `ingest_seconds: optional number`

      The time duration for which the input was given or the meeting was streamed.

    - `invoked_time: optional string`

      Timestamp the object was invoked. The time is returned in ISO format.

    - `livestream_id: optional string`

    - `started_time: optional string`

      Timestamp the object was started. The time is returned in ISO format.

    - `stopped_time: optional string`

      Timestamp the object was stopped. The time is returned in ISO format.

    - `updated_at: optional string`

      Timestamp the object was updated at. The time is returned in ISO format.

    - `viewer_seconds: optional number`

      The total view time for which the viewers watched the stream.

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/livestreams/$LIVESTREAM_ID \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "livestream": {
      "id": "id",
      "created_at": "created_at",
      "disabled": "disabled",
      "ingest_server": "ingest_server",
      "meeting_id": "meeting_id",
      "name": "name",
      "playback_url": "playback_url",
      "status": "LIVE",
      "stream_key": "stream_key",
      "updated_at": "updated_at"
    },
    "paging": {
      "end_offset": 1,
      "start_offset": 1,
      "total_count": 1
    },
    "session": {
      "id": "id",
      "created_at": "2019-12-27T18:11:19.117Z",
      "err_message": "err_message",
      "ingest_seconds": 0,
      "invoked_time": "2019-12-27T18:11:19.117Z",
      "livestream_id": "livestream_id",
      "started_time": "2019-12-27T18:11:19.117Z",
      "stopped_time": "2019-12-27T18:11:19.117Z",
      "updated_at": "2019-12-27T18:11:19.117Z",
      "viewer_seconds": 0
    }
  },
  "success": true
}
```

## Domain Types

### Livestream Create Independent Livestream Response

- `LivestreamCreateIndependentLivestreamResponse object { data, success }`

  - `data: optional object { id, disabled, ingest_server, 5 more }`

    - `id: optional string`

      The livestream ID.

    - `disabled: optional boolean`

      Specifies if the livestream was disabled.

    - `ingest_server: optional string`

      The server URL to which the RTMP encoder should send the video and audio data.

    - `meeting_id: optional string`

    - `name: optional string`

    - `playback_url: optional string`

      The web address that viewers can use to watch the livestream.

    - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

      - `"LIVE"`

      - `"IDLE"`

      - `"ERRORED"`

      - `"INVOKED"`

    - `stream_key: optional string`

      Unique key for accessing each livestream.

  - `success: optional boolean`

### Livestream Get All Livestreams Response

- `LivestreamGetAllLivestreamsResponse object { data, success }`

  - `data: optional object { id, created_at, disabled, 8 more }`

    - `id: optional string`

      The ID of the livestream.

    - `created_at: optional string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `disabled: optional string`

      Specifies if the livestream was disabled.

    - `ingest_server: optional string`

      The server URL to which the RTMP encoder sends the video and audio data.

    - `meeting_id: optional string`

      ID of the meeting.

    - `name: optional string`

      Name of the livestream.

    - `paging: optional object { end_offset, start_offset, total_count }`

      - `end_offset: optional number`

      - `start_offset: optional number`

      - `total_count: optional number`

    - `playback_url: optional string`

      The web address that viewers can use to watch the livestream.

    - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

      - `"LIVE"`

      - `"IDLE"`

      - `"ERRORED"`

      - `"INVOKED"`

    - `stream_key: optional string`

      Unique key for accessing each livestream.

    - `updated_at: optional string`

      Timestamp the object was updated at. The time is returned in ISO format.

  - `success: optional boolean`

### Livestream Stop Livestreaming A Meeting Response

- `LivestreamStopLivestreamingAMeetingResponse object { data, success }`

  - `data: optional object { message }`

    - `message: optional string`

  - `success: optional boolean`

### Livestream Start Livestreaming A Meeting Response

- `LivestreamStartLivestreamingAMeetingResponse object { data, success }`

  - `data: optional object { id, ingest_server, playback_url, 2 more }`

    - `id: optional string`

      The livestream ID.

    - `ingest_server: optional string`

      The server URL to which the RTMP encoder sends the video and audio data.

    - `playback_url: optional string`

      The web address that viewers can use to watch the livestream.

    - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

      - `"LIVE"`

      - `"IDLE"`

      - `"ERRORED"`

      - `"INVOKED"`

    - `stream_key: optional string`

      Unique key for accessing each livestream.

  - `success: optional boolean`

### Livestream Get Livestream Analytics Complete Response

- `LivestreamGetLivestreamAnalyticsCompleteResponse object { data, success }`

  - `data: optional object { count, total_ingest_seconds, total_viewer_seconds }`

    - `count: optional number`

      Count of total livestreams.

    - `total_ingest_seconds: optional number`

      Total time duration for which the input was given or the meeting was streamed.

    - `total_viewer_seconds: optional number`

      Total view time for which the viewers watched the stream.

  - `success: optional boolean`

### Livestream Get Livestream Analytics Daywise Response

- `LivestreamGetLivestreamAnalyticsDaywiseResponse object { data, success }`

  - `data: optional array of object { count, date, total_ingest_seconds, total_viewer_seconds }`

    - `count: optional number`

      Count of total livestream sessions.

    - `date: optional string`

      Analytics date.

    - `total_ingest_seconds: optional number`

      Total time duration for which the input was given or the meeting was streamed.

    - `total_viewer_seconds: optional number`

      Total view time for which the viewers watched the stream.

  - `success: optional boolean`

### Livestream Get Org Analytics Response

- `LivestreamGetOrgAnalyticsResponse object { data, success }`

  - `data: optional object { recording_stats, session_stats }`

    - `recording_stats: optional object { day_stats, recording_count, recording_minutes_consumed }`

      Recording statistics of an App during the range specified

      - `day_stats: optional array of object { day, total_recording_minutes, total_recordings }`

        Day wise recording stats

        - `day: optional string`

        - `total_recording_minutes: optional number`

          Total recording minutes for a specific day

        - `total_recordings: optional number`

          Total number of recordings for a specific day

      - `recording_count: optional number`

        Total number of recordings during the range specified

      - `recording_minutes_consumed: optional number`

        Total recording minutes during the range specified

    - `session_stats: optional object { day_stats, sessions_count, sessions_minutes_consumed }`

      Session statistics of an App during the range specified

      - `day_stats: optional array of object { day, total_session_minutes, total_sessions }`

        Day wise session stats

        - `day: optional string`

        - `total_session_minutes: optional number`

          Total session minutes for a specific day

        - `total_sessions: optional number`

          Total number of sessions for a specific day

      - `sessions_count: optional number`

        Total number of sessions during the range specified

      - `sessions_minutes_consumed: optional number`

        Total session minutes during the range specified

  - `success: optional boolean`

### Livestream Get Meeting Active Livestreams Response

- `LivestreamGetMeetingActiveLivestreamsResponse object { data, success }`

  - `data: optional object { id, created_at, disabled, 7 more }`

    - `id: optional string`

      The livestream ID.

    - `created_at: optional string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `disabled: optional string`

      Specifies if the livestream was disabled.

    - `ingest_server: optional string`

      The server URL to which the RTMP encoder sends the video and audio data.

    - `meeting_id: optional string`

    - `name: optional string`

      Name of the livestream.

    - `playback_url: optional string`

      The web address that viewers can use to watch the livestream.

    - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

      - `"LIVE"`

      - `"IDLE"`

      - `"ERRORED"`

      - `"INVOKED"`

    - `stream_key: optional string`

      Unique key for accessing each livestream.

    - `updated_at: optional string`

      Timestamp the object was updated at. The time is returned in ISO format.

  - `success: optional boolean`

### Livestream Get Livestream Session Details For Session ID Response

- `LivestreamGetLivestreamSessionDetailsForSessionIDResponse object { data, success }`

  - `data: optional object { id, created_at, err_message, 6 more }`

    - `id: optional string`

      The livestream ID.

    - `created_at: optional string`

      Timestamp the object was created at. The time is returned in ISO format.

    - `err_message: optional string`

      The server URL to which the RTMP encoder sends the video and audio data.

    - `ingest_seconds: optional number`

      Name of the livestream.

    - `livestream_id: optional string`

    - `started_time: optional string`

      Unique key for accessing each livestream.

    - `stopped_time: optional string`

      The web address that viewers can use to watch the livestream.

    - `updated_at: optional string`

      Timestamp the object was updated at. The time is returned in ISO format.

    - `viewer_seconds: optional number`

      Specifies if the livestream was disabled.

  - `success: optional boolean`

### Livestream Get Active Livestreams For Livestream ID Response

- `LivestreamGetActiveLivestreamsForLivestreamIDResponse object { data, success }`

  - `data: optional object { livestream, session }`

    - `livestream: optional object { id, created_at, disabled, 7 more }`

      - `id: optional string`

      - `created_at: optional string`

        Timestamp the object was created at. The time is returned in ISO format.

      - `disabled: optional string`

        Specifies if the livestream was disabled.

      - `ingest_server: optional string`

        The server URL to which the RTMP encoder sends the video and audio data.

      - `meeting_id: optional string`

        ID of the meeting.

      - `name: optional string`

        Name of the livestream.

      - `playback_url: optional string`

        The web address that viewers can use to watch the livestream.

      - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

        - `"LIVE"`

        - `"IDLE"`

        - `"ERRORED"`

        - `"INVOKED"`

      - `stream_key: optional string`

        Unique key for accessing each livestream.

      - `updated_at: optional string`

        Timestamp the object was updated at. The time is returned in ISO format.

    - `session: optional object { id, created_at, err_message, 7 more }`

      - `id: optional string`

      - `created_at: optional string`

        Timestamp the object was created at. The time is returned in ISO format.

      - `err_message: optional string`

      - `ingest_seconds: optional string`

        The time duration for which the input was given or the meeting was streamed.

      - `invoked_time: optional string`

        Timestamp the object was invoked. The time is returned in ISO format.

      - `livestream_id: optional string`

      - `started_time: optional string`

        Timestamp the object was started. The time is returned in ISO format.

      - `stopped_time: optional string`

        Timestamp the object was stopped. The time is returned in ISO format.

      - `updated_at: optional string`

        Timestamp the object was updated at. The time is returned in ISO format.

      - `viewer_seconds: optional string`

        The total view time for which the viewers watched the stream.

  - `success: optional boolean`

### Livestream Get Livestream Session For Livestream ID Response

- `LivestreamGetLivestreamSessionForLivestreamIDResponse object { data, success }`

  - `data: optional object { livestream, paging, session }`

    - `livestream: optional object { id, created_at, disabled, 7 more }`

      - `id: optional string`

        ID of the livestream.

      - `created_at: optional string`

        Timestamp the object was created at. The time is returned in ISO format.

      - `disabled: optional string`

        Specifies if the livestream was disabled.

      - `ingest_server: optional string`

        The server URL to which the RTMP encoder sends the video and audio data.

      - `meeting_id: optional string`

        The ID of the meeting.

      - `name: optional string`

        Name of the livestream.

      - `playback_url: optional string`

        The web address that viewers can use to watch the livestream.

      - `status: optional "LIVE" or "IDLE" or "ERRORED" or "INVOKED"`

        - `"LIVE"`

        - `"IDLE"`

        - `"ERRORED"`

        - `"INVOKED"`

      - `stream_key: optional string`

        Unique key for accessing each livestream.

      - `updated_at: optional string`

        Timestamp the object was updated at. The time is returned in ISO format.

    - `paging: optional object { end_offset, start_offset, total_count }`

      - `end_offset: optional number`

      - `start_offset: optional number`

      - `total_count: optional number`

    - `session: optional object { id, created_at, err_message, 7 more }`

      - `id: optional string`

        ID of the session.

      - `created_at: optional string`

        Timestamp the object was created at. The time is returned in ISO format.

      - `err_message: optional string`

      - `ingest_seconds: optional number`

        The time duration for which the input was given or the meeting was streamed.

      - `invoked_time: optional string`

        Timestamp the object was invoked. The time is returned in ISO format.

      - `livestream_id: optional string`

      - `started_time: optional string`

        Timestamp the object was started. The time is returned in ISO format.

      - `stopped_time: optional string`

        Timestamp the object was stopped. The time is returned in ISO format.

      - `updated_at: optional string`

        Timestamp the object was updated at. The time is returned in ISO format.

      - `viewer_seconds: optional number`

        The total view time for which the viewers watched the stream.

  - `success: optional boolean`

# Analytics

## Fetch day-wise session and recording analytics data for an App

**get** `/accounts/{account_id}/realtime/kit/{app_id}/analytics/daywise`

Returns day-wise session and recording analytics data of an App for the specified time range start_date to end_date. If start_date and end_date are not provided, the default time range is set from 30 days ago to the current date.

### Path Parameters

- `account_id: string`

  The account identifier tag.

- `app_id: string`

  The app identifier tag.

### Query Parameters

- `end_date: optional string`

  end date in YYYY-MM-DD format

- `start_date: optional string`

  start date in YYYY-MM-DD format

### Returns

- `data: optional object { recording_stats, session_stats }`

  - `recording_stats: optional object { day_stats, recording_count, recording_minutes_consumed }`

    Recording statistics of an App during the range specified

    - `day_stats: optional array of object { day, total_recording_minutes, total_recordings }`

      Day wise recording stats

      - `day: optional string`

      - `total_recording_minutes: optional number`

        Total recording minutes for a specific day

      - `total_recordings: optional number`

        Total number of recordings for a specific day

    - `recording_count: optional number`

      Total number of recordings during the range specified

    - `recording_minutes_consumed: optional number`

      Total recording minutes during the range specified

  - `session_stats: optional object { day_stats, sessions_count, sessions_minutes_consumed }`

    Session statistics of an App during the range specified

    - `day_stats: optional array of object { day, total_session_minutes, total_sessions }`

      Day wise session stats

      - `day: optional string`

      - `total_session_minutes: optional number`

        Total session minutes for a specific day

      - `total_sessions: optional number`

        Total number of sessions for a specific day

    - `sessions_count: optional number`

      Total number of sessions during the range specified

    - `sessions_minutes_consumed: optional number`

      Total session minutes during the range specified

- `success: optional boolean`

### Example

```http
curl https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/analytics/daywise \
    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

#### Response

```json
{
  "data": {
    "recording_stats": {
      "day_stats": [
        {
          "day": "day",
          "total_recording_minutes": 0,
          "total_recordings": 0
        }
      ],
      "recording_count": 0,
      "recording_minutes_consumed": 0
    },
    "session_stats": {
      "day_stats": [
        {
          "day": "day",
          "total_session_minutes": 0,
          "total_sessions": 0
        }
      ],
      "sessions_count": 0,
      "sessions_minutes_consumed": 0
    }
  },
  "success": true
}
```

## Domain Types

### Analytics Get Org Analytics Response

- `AnalyticsGetOrgAnalyticsResponse object { data, success }`

  - `data: optional object { recording_stats, session_stats }`

    - `recording_stats: optional object { day_stats, recording_count, recording_minutes_consumed }`

      Recording statistics of an App during the range specified

      - `day_stats: optional array of object { day, total_recording_minutes, total_recordings }`

        Day wise recording stats

        - `day: optional string`

        - `total_recording_minutes: optional number`

          Total recording minutes for a specific day

        - `total_recordings: optional number`

          Total number of recordings for a specific day

      - `recording_count: optional number`

        Total number of recordings during the range specified

      - `recording_minutes_consumed: optional number`

        Total recording minutes during the range specified

    - `session_stats: optional object { day_stats, sessions_count, sessions_minutes_consumed }`

      Session statistics of an App during the range specified

      - `day_stats: optional array of object { day, total_session_minutes, total_sessions }`

        Day wise session stats

        - `day: optional string`

        - `total_session_minutes: optional number`

          Total session minutes for a specific day

        - `total_sessions: optional number`

          Total number of sessions for a specific day

      - `sessions_count: optional number`

        Total number of sessions during the range specified

      - `sessions_minutes_consumed: optional number`

        Total session minutes during the range specified

  - `success: optional boolean`

---

---
description: Choose between RealtimeKit UI Kit and Core SDK for your platform and framework.
title: Select SDK(s)
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Select SDK(s)

Last updated Jun 12, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/sdk-selection/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Note

If you have not already, we recommend trying out our [demo app ↗](https://examples.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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/sdk-selection/#page","headline":"Select SDK(s) · Cloudflare Realtime docs","description":"Choose between RealtimeKit UI Kit and Core SDK for your platform and framework.","url":"https://developers.cloudflare.com/realtime/realtimekit/sdk-selection/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-12","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Get started with the RealtimeKit UI Kit to add a prebuilt meeting experience to your application.
title: Build using UI Kit
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Build using UI Kit

Last updated Jul 9, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```bash
npm i @cloudflare/realtimekit-react @cloudflare/realtimekit-react-ui
```

_Optional:_ You can also build on top of our ready-made template:

```bash
git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/react-examples/examples/default-meeting-ui
```

Please install the following dependencies into your project repository:

```bash
npm i @cloudflare/realtimekit-web @cloudflare/realtimekit-ui
```

_Optional:_ You can also build on top of our ready-made template:

```bash
git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/html-examples/examples/default-meeting-ui
```

Please install the following dependencies into your project repository:

```bash
npm i @cloudflare/realtimekit-angular @cloudflare/realtimekit-angular-ui
```

_Optional:_ You can also build on top of our ready-made template:

```bash
git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/angular-examples/examples/default-meeting-ui
```

Add the following dependency to your `build.gradle` file:

```java
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.

```xml
<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:

```bash
flutter pub add realtimekit_ui
```

Then import the package into your project:

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';
```

Set `compileSdkVersion 36` and `minSdkVersion 24` in your `build.gradle` file at `<project root>/android/app/build.gradle`:

```java
defaultConfig {
  ...
  compileSdkVersion 36
  minSdkVersion 24
  ...
}
```

Change the Kotlin version to `1.9.0`:

```java
ext.kotlin_version = '1.9.0'
```

Set your platform to iOS 13.0 or above in your `Podfile`:

```txt
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.

```xml
<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`:

```xml
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>UIFileSharingEnabled</key>
<true/>
```

**Minimum requirements:** React Native 0.84 or above, React 19 or above.

Install the dependencies:

```bash
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@^15.13.0 react-native-safe-area-context@^5.0.0
```

**Minimum Expo version:** 56 or above.

Install the dependencies:

```bash
npx expo install @cloudflare/realtimekit-react-native-ui @cloudflare/realtimekit-react-native @cloudflare/react-native-webrtc @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview react-native-svg@^15.13.0 react-native-safe-area-context@^5.0.0
```

Install Expo config plugins:

```bash
npx expo install @expo/config-plugins
```

Add the plugins to your `app.json`:

```json
{
	"expo": {
		"plugins": [
			"@cloudflare/realtimekit-react-native",
			"@cloudflare/react-native-webrtc"
		]
	}
}
```

Run `prebuild` to set up native modules:

```bash
npx expo prebuild
```

The following instructions are for release builds. Debug builds should work without additional steps.

Edit your `android/gradle.properties` and add the following lines:

```txt
android.useFullClasspathForDexingTransform=true
```

Add a required `blob_provider_authority` string resource in the `strings.xml` file:

```xml
<resources>
  ...
  <string name="blob_provider_authority">YOUR_APP_RESOURCE_NAME</string>
  ...
</resources>
```

Create or append to the file `android/app/proguard-rules.pro`:

```txt
-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:

```java
buildTypes {
  release {
    ...
    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  }
}
```

#### Background audio and video (Android)

The SDK includes an Android foreground service that keeps audio and video running when the app moves to the background. The service starts automatically when a participant joins a meeting and stops when they leave.

By default the service is enabled with generic notification text. To customize the notification or disable the service, pass `keepAliveService` to the `useRealtimeKitClient` hook before calling `initMeeting`:

```tsx
const [meeting, initMeeting] = useRealtimeKitClient({
  keepAliveService: {
    enabled: true,                        // set to false to disable entirely
    title: "Team call",                   // notification title
    text: "Tap to return to your meeting", // notification body
  },
});
```

On Android 13 and above, the SDK automatically requests the `POST_NOTIFICATIONS` permission so the notification appears in the shade. No additional setup is required.

**Minimum supported iOS version: 15.1.**

Open your `Podfile` and set the platform to iOS 15.1:

```txt
platform :ios, '15.1'
```

Add the following permission entries to your `Info.plist` file:

```xml
<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/>
```

#### Screen sharing (iOS)

iOS screen sharing requires a Broadcast Upload Extension and additional native setup. Refer to the [Screen Share Setup (iOS)](https://developers.cloudflare.com/realtime/realtimekit/core/local-participant/#screen-share-setup-ios) guide for full instructions.

Once native setup is complete, pass `iOSScreenshareEnabled={true}` to `RtkMeeting` to enable the screen share button in the UI:

```tsx
<RtkMeeting meeting={meeting} iOSScreenshareEnabled={true} />
```

## Initialize the SDK

Add the following code to your React application:

```ts
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.

```ts
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`:

```ts
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:

```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:

```html
<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`.

```html
<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.

```ts
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`.

```ts
{
	"compilerOptions": {
		"allowSyntheticDefaultImports": true
	}
}
```

## Display the meeting

Load the `RtkMeeting` component in your template file (`component.html`):

```html
<rtk-meeting #myid></rtk-meeting>
```

## Initialize the SDK

```ts
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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/#page","headline":"Build using UI Kit · Cloudflare Realtime docs","description":"Get started with the RealtimeKit UI Kit to add a prebuilt meeting experience to your application.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-09","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Extend RealtimeKit UI Kit with addon components for host controls, reactions, and more.
title: UI Kit Addons
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# UI Kit Addons

Last updated May 11, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/addons/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A collection of UI Kit addons that extend RealtimeKit's prebuilt UI Kit capabilities with additional interactive components and controls for enhanced meeting experiences.

This page is not available for the **iOS, Android, Flutter, React Native**platform.

WebMobile

ReactWeb ComponentsAngular

Note

UI Kit Addons are currently only available for web platforms (React, Web Components, and Angular). Mobile platform support (iOS, Android, Flutter, and React Native) is not available at this time.

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

npmyarnpnpmbun

```
npm i @cloudflare/realtimekit-ui-addons
```

```
yarn add @cloudflare/realtimekit-ui-addons
```

```
pnpm add @cloudflare/realtimekit-ui-addons
```

```
bun add @cloudflare/realtimekit-ui-addons
```

npmyarnpnpmbun

```
npm i @cloudflare/realtimekit-ui-addons
```

```
yarn add @cloudflare/realtimekit-ui-addons
```

```
pnpm add @cloudflare/realtimekit-ui-addons
```

```
bun add @cloudflare/realtimekit-ui-addons
```

npmyarnpnpmbun

```
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

```jsx
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:

```jsx
<RtkUiProvider meeting={meeting} config={config}>
	{/* Your custom UI components here */}
</RtkUiProvider>
```

Add the UI Kit library to your HTML:

```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:

```html
<body>
	<rtk-meeting></rtk-meeting>
</body>
```

Initialize the meeting and configure addons in your script:

```html
<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:

```html
<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:

```html
<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:

```html
<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();
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/addons/#page","headline":"UI Kit Addons · Cloudflare Realtime docs","description":"Extend RealtimeKit UI Kit with addon components for host controls, reactions, and more.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/addons/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-05-11","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RealtimeKit UI Kit components, props, and configuration options.
title: Component Reference
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Component Reference

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/#page","headline":"Component Reference · Cloudflare Realtime docs","description":"API reference for RealtimeKit UI Kit components, props, and configuration options.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Complete API reference for Android library components
title: Android
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Android

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/#page","headline":"Android · Cloudflare Realtime docs","description":"Complete API reference for Android library components","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAudioDeviceSelector component (Android Library)
title: RtkAudioDeviceSelector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAudioDeviceSelector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/audio-device-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

An audio device selector component which can be used to select audio devices.

## Properties

| Property       | Type   | Required | Default | Description       |
| -------------- | ------ | -------- | ------- | ----------------- |
| rtk\_ds\_label | string | ❌        | Audio   | Custom label text |

## Methods

| Method            | Parameters                    | Description                               |
| ----------------- | ----------------------------- | ----------------------------------------- |
| activate          | meeting: RealtimeKitClient    | Bind the selector to the meeting state    |
| disableLabel      | \-                            | Disable the label text above the dropdown |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming    |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkAudioDeviceSelector
    android:id="@+id/audioSelector"
    app:rtk_ds_label="Audio"
    android:layout_width="0dp"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val audioSelector = findViewById<RtkAudioDeviceSelector>(R.id.audioSelector)
audioSelector.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/audio-device-selector/#page","headline":"RtkAudioDeviceSelector · Cloudflare Realtime docs","description":"API reference for RtkAudioDeviceSelector component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/audio-device-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAvatarView component (Android Library)
title: RtkAvatarView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAvatarView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/avatar-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Avatar component which renders a participant's profile picture or their initials.

## Methods

| Method            | Parameters                         | Description                                        |
| ----------------- | ---------------------------------- | -------------------------------------------------- |
| activate          | participant: RtkMeetingParticipant | Bind the avatar to a participant                   |
| refresh           | \-                                 | Refresh the avatar based on the participant's name |
| applyDesignTokens | designTokens: RtkDesignTokens      | Apply custom design tokens for theming             |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.avatarview.RtkAvatarView
    android:id="@+id/rtk_avatar"
    android:layout_width="48dp"
    android:layout_height="48dp" />
```

### With Methods

```kotlin
val avatar = findViewById<RtkAvatarView>(R.id.rtk_avatar)
avatar.activate(participant)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/avatar-view/#page","headline":"RtkAvatarView · Cloudflare Realtime docs","description":"API reference for RtkAvatarView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/avatar-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkButton component (Android Library)
title: RtkButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button that follows the RealtimeKit design system.

## Properties

| Property          | Type                 | Required | Default | Description |                |
| ----------------- | -------------------- | -------- | ------- | ----------- | -------------- |
| rtk\_btn\_variant | primary \| secondary | danger   | ❌       | \-          | Button variant |

## Methods

| Method            | Parameters                    | Description                                 |
| ----------------- | ----------------------------- | ------------------------------------------- |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming      |
| refresh           | uiTokens: RtkDesignTokens     | Refresh the button with the provided tokens |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.button.RtkButton
    android:id="@+id/btn_id"
    android:layout_width="200dp"
    android:layout_height="48dp"
    android:text="Text on Button"
    app:rtk_btn_variant="primary" />
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/button/#page","headline":"RtkButton · Cloudflare Realtime docs","description":"API reference for RtkButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkCameraToggleButton component (Android Library)
title: RtkCameraToggleButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkCameraToggleButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/camera-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles the local user's camera. It automatically listens to self video events to update its state.

## Methods

| Method     | Parameters                 | Description                                  |
| ---------- | -------------------------- | -------------------------------------------- |
| activate   | meeting: RealtimeKitClient | Bind the button to the meeting state         |
| deactivate | \-                         | Unbind the button and remove event listeners |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkCameraToggleButton
    android:id="@+id/btn_camera_toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val cameraToggleButton = findViewById<RtkCameraToggleButton>(R.id.btn_camera_toggle)
cameraToggleButton.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/camera-toggle/#page","headline":"RtkCameraToggleButton · Cloudflare Realtime docs","description":"API reference for RtkCameraToggleButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/camera-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatBottomSheet component (Android Library)
title: RtkChatBottomSheet
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatBottomSheet

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/chat/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Fully featured chat screen with image and file upload and auto-scroll.

## Methods

| Method | Parameters                                     | Description                   |
| ------ | ---------------------------------------------- | ----------------------------- |
| show   | fragmentManager: FragmentManager, tag: String? | Display the chat bottom sheet |

## Usage Examples

### Basic Usage

```kotlin
val rtkChatBottomSheet = RtkChatBottomSheet()
rtkChatBottomSheet.show(fragmentManager, "CHAT_TAG")
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/chat/#page","headline":"RtkChatBottomSheet · Cloudflare Realtime docs","description":"API reference for RtkChatBottomSheet component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/chat/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkClockView component (Android Library)
title: RtkClockView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkClockView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/clock-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A clock component which shows the elapsed time of a meeting.

## Methods

| Method            | Parameters                    | Description                            |
| ----------------- | ----------------------------- | -------------------------------------- |
| activate          | meeting: RealtimeKitClient    | Bind the clock to the meeting state    |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkClockView
    android:id="@+id/rtk_clock_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val clockView = findViewById<RtkClockView>(R.id.rtk_clock_view)
clockView.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/clock-view/#page","headline":"RtkClockView · Cloudflare Realtime docs","description":"API reference for RtkClockView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/clock-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkControlBarButton component (Android Library)
title: RtkControlBarButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkControlBarButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/control-bar-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A skeleton component used for composing custom controlbar buttons.

## Properties

| Property              | Type                 | Required | Default | Description                           |
| --------------------- | -------------------- | -------- | ------- | ------------------------------------- |
| rtk\_cbb\_icon        | reference            | ❌        | \-      | Drawable resource for the button icon |
| rtk\_cbb\_variant     | button \| horizontal | ❌        | button  | Layout variant                        |
| rtk\_cbb\_showText    | boolean              | ❌        | true    | Whether to show the label text        |
| rtk\_cbb\_iconSize    | dimension            | ❌        | \-      | Size of the icon                      |
| rtk\_cbb\_iconPadding | dimension            | ❌        | \-      | Padding between icon and label        |

## Methods

| Method             | Parameters                    | Description                            |
| ------------------ | ----------------------------- | -------------------------------------- |
| applyDesignTokens  | designTokens: RtkDesignTokens | Apply custom design tokens for theming |
| setIconDrawable    | drawable: Drawable?           | Set the button icon                    |
| setIconTint        | color: Int                    | Set the icon tint color                |
| setText            | text: String?                 | Set the button label text              |
| setProcessingState | processing: Boolean           | Show or hide a loading spinner         |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkControlBarButton
    android:id="@+id/rtk_control_bar_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:rtk_cbb_showText="true"
    app:rtk_cbb_variant="button" />
```

### With Methods

```kotlin
val buttonView = findViewById<RtkControlBarButton>(R.id.rtk_control_bar_button)
buttonView.setOnClickListener { }
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/control-bar-button/#page","headline":"RtkControlBarButton · Cloudflare Realtime docs","description":"API reference for RtkControlBarButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/control-bar-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkControlBarView component (Android Library)
title: RtkControlBarView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkControlBarView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/control-bar-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A base container for control bar buttons. Provides design token support and background styling.

## Methods

| Method            | Parameters                    | Description                            |
| ----------------- | ----------------------------- | -------------------------------------- |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbars.RtkControlBarView
    android:id="@+id/rtk_control_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/control-bar-view/#page","headline":"RtkControlBarView · Cloudflare Realtime docs","description":"API reference for RtkControlBarView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/control-bar-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkCreatePollBottomSheet component (Android Library)
title: RtkCreatePollBottomSheet
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkCreatePollBottomSheet

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/create-poll/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component that lets you create a poll.

## Methods

| Method | Parameters                                     | Description                          |
| ------ | ---------------------------------------------- | ------------------------------------ |
| show   | fragmentManager: FragmentManager, tag: String? | Display the create poll bottom sheet |

## Usage Examples

### Basic Usage

```kotlin
val rtkCreatePollBottomSheet = RtkCreatePollBottomSheet()
rtkCreatePollBottomSheet.show(fragmentManager, "CREATE_POLL_TAG")
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/create-poll/#page","headline":"RtkCreatePollBottomSheet · Cloudflare Realtime docs","description":"API reference for RtkCreatePollBottomSheet component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/create-poll/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDesignTokens component (Android Library)
title: RtkDesignTokens
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDesignTokens

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/design-tokens/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The top-level design token container for customizing the look and feel of all UI Kit components.

## Properties

| Property     | Type                 | Required | Default | Description         |
| ------------ | -------------------- | -------- | ------- | ------------------- |
| colors       | RtkColorTokens       | ❌        | \-      | Color theme tokens  |
| borderWidth  | RtkBorderWidthToken  | ❌        | \-      | Border width token  |
| borderRadius | RtkBorderRadiusToken | ❌        | \-      | Border radius token |

## Usage Examples

### Basic Usage

```kotlin
val designTokens = RtkDesignTokens(
    colors = RtkColorTokens(
        brand = BrandColor(
            shade300 = Color.parseColor("#497CFD"),
            shade400 = Color.parseColor("#356EFD"),
            shade500 = Color.parseColor("#2160FD"),
            shade600 = Color.parseColor("#0D52FD"),
            shade700 = Color.parseColor("#0046E5")
        ),
        background = BackgroundColor(
            shade600 = Color.parseColor("#2C2C2C"),
            shade700 = Color.parseColor("#242424"),
            shade800 = Color.parseColor("#1C1C1C"),
            shade900 = Color.parseColor("#141414"),
            shade1000 = Color.parseColor("#0C0C0C")
        )
    ),
    borderRadius = RtkBorderRadiusToken.Rounded,
    borderWidth = RtkBorderWidthToken.Thin
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/design-tokens/#page","headline":"RtkDesignTokens · Cloudflare Realtime docs","description":"API reference for RtkDesignTokens component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/design-tokens/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkErrorView component (Android Library)
title: RtkErrorView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkErrorView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/error-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A full-screen error view that displays an error message and a retry button.

## Methods

| Method  | Parameters                                       | Description                                     |
| ------- | ------------------------------------------------ | ----------------------------------------------- |
| refresh | errorMessage: String, onRetryClicked: () -> Unit | Set the error message and retry button callback |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkErrorView
    android:id="@+id/rtk_error_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
```

### With Methods

```kotlin
val errorView = findViewById<RtkErrorView>(R.id.rtk_error_view)
errorView.refresh("Failed to connect") {
    // Retry connection
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/error-view/#page","headline":"RtkErrorView · Cloudflare Realtime docs","description":"API reference for RtkErrorView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/error-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkGridPaginatorView component (Android Library)
title: RtkGridPaginatorView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkGridPaginatorView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/grid-paginator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which allows you to change the current page of the active participants grid.

## Methods

| Method   | Parameters                                                     | Description                             |
| -------- | -------------------------------------------------------------- | --------------------------------------- |
| activate | rtkAndroidClient: RealtimeKitClient, uiTokens: RtkDesignTokens | Bind the paginator to the meeting state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkGridPaginatorView
    android:id="@+id/rtk_grid_paginator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val paginatorView = findViewById<RtkGridPaginatorView>(R.id.rtk_grid_paginator)
paginatorView.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/grid-paginator/#page","headline":"RtkGridPaginatorView · Cloudflare Realtime docs","description":"API reference for RtkGridPaginatorView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/grid-paginator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkGridView component (Android Library)
title: RtkGridView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkGridView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/grid-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The main grid component which handles the participant grid layout, pagination, and focus modes.

## Methods

| Method            | Parameters                    | Description                                                                                                                                |
| ----------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| activate          | meeting: RealtimeKitClient    | Bind the grid to the meeting state                                                                                                         |
| refresh           | force: Boolean                | Force a refresh of the grid layout and participants                                                                                        |
| enableFocusMode   | \-                            | Enable focus mode, which hides the horizontal peer strip and full-screen toggle to keep attention on the primary speaker or shared content |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming                                                                                                     |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.grid.RtkGridView
    android:id="@+id/rtk_grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
```

### With Methods

```kotlin
val grid = findViewById<RtkGridView>(R.id.rtk_grid)
grid.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/grid-view/#page","headline":"RtkGridView · Cloudflare Realtime docs","description":"API reference for RtkGridView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/grid-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkHeaderView component (Android Library)
title: RtkHeaderView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkHeaderView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/header-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A base header view component. Provides background styling and design token support.

## Methods

| Method            | Parameters                    | Description                            |
| ----------------- | ----------------------------- | -------------------------------------- |
| activate          | meeting: RealtimeKitClient    | Bind the header to the meeting state   |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.headers.RtkHeaderView
    android:id="@+id/rtk_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val header = findViewById<RtkHeaderView>(R.id.rtk_header)
header.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/header-view/#page","headline":"RtkHeaderView · Cloudflare Realtime docs","description":"API reference for RtkHeaderView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/header-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkJoinButton component (Android Library)
title: RtkJoinButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkJoinButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/join-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button that performs the room join operation. Displays "Join" by default and changes to "Joining..." during the join process. Automatically disables after a successful join.

## Methods

| Method   | Parameters                                                | Description                                                                                                                                                                                                                                                     |
| -------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| activate | meeting: RealtimeKitClient, localUserNameField: EditText? | Bind the button to the meeting state. Pass an optional EditText reference to validate the display name before joining — if the user has canEditDisplayName permission and the field is blank, the button shows a "Please enter name" toast and blocks the join. |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkJoinButton
    android:id="@+id/rtk_join_button"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    app:rtk_btn_variant="primary" />
```

### With Methods

```kotlin
val joinButton = findViewById<RtkJoinButton>(R.id.rtk_join_button)
val nameField = findViewById<EditText>(R.id.name_field)
joinButton.activate(meeting, nameField)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/join-button/#page","headline":"RtkJoinButton · Cloudflare Realtime docs","description":"API reference for RtkJoinButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/join-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkJoinLivestreamButton component (Android Library)
title: RtkJoinLivestreamButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkJoinLivestreamButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/join-livestream-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button for joining or leaving the livestream stage.

## Methods

| Method   | Parameters                 | Description                          |
| -------- | -------------------------- | ------------------------------------ |
| activate | meeting: RealtimeKitClient | Bind the button to the meeting state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkJoinLivestreamButton
    android:id="@+id/rtk_join_livestream"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val joinLivestreamButton = findViewById<RtkJoinLivestreamButton>(R.id.rtk_join_livestream)
joinLivestreamButton.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/join-livestream-button/#page","headline":"RtkJoinLivestreamButton · Cloudflare Realtime docs","description":"API reference for RtkJoinLivestreamButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/join-livestream-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkJoinStageDialog component (Android Library)
title: RtkJoinStageDialog
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkJoinStageDialog

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/join-stage-dialog/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A confirmation dialog screen shown when the user's request to join stage is approved or when the host invites the local user to join stage.

## Methods

| Method            | Parameters                    | Description                            |
| ----------------- | ----------------------------- | -------------------------------------- |
| activate          | meeting: RealtimeKitClient    | Bind the dialog to the meeting state   |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming |
| show              | \-                            | Display the dialog                     |
| dismiss           | \-                            | Dismiss the dialog                     |

## Usage Examples

### Basic Usage

```kotlin
val rtkJoinStage = RtkJoinStageDialog(requireContext())
rtkJoinStage.show()
rtkJoinStage.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/join-stage-dialog/#page","headline":"RtkJoinStageDialog · Cloudflare Realtime docs","description":"API reference for RtkJoinStageDialog component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/join-stage-dialog/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLeaveButton component (Android Library)
title: RtkLeaveButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLeaveButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/leave-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of the leave confirmation dialog.

## Methods

| Method   | Parameters                 | Description                          |
| -------- | -------------------------- | ------------------------------------ |
| activate | meeting: RealtimeKitClient | Bind the button to the meeting state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkLeaveButton
    android:id="@+id/rtk_leave_button"
    android:layout_width="48dp"
    android:layout_height="48dp" />
```

### With Methods

```kotlin
val leaveButton = findViewById<RtkLeaveButton>(R.id.rtk_leave_button)
leaveButton.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/leave-button/#page","headline":"RtkLeaveButton · Cloudflare Realtime docs","description":"API reference for RtkLeaveButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/leave-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLeaveMeetingView component (Android Library)
title: RtkLeaveMeetingView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLeaveMeetingView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/leave-meeting-dialog/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which allows you to leave a meeting or end meeting for all, if you have the permission.

## Methods

| Method  | Parameters | Description        |
| ------- | ---------- | ------------------ |
| show    | \-         | Display the dialog |
| dismiss | \-         | Dismiss the dialog |

## Usage Examples

### Basic Usage

```kotlin
val endCallDialog = RtkLeaveMeetingView(context, meeting)
endCallDialog.show()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/leave-meeting-dialog/#page","headline":"RtkLeaveMeetingView · Cloudflare Realtime docs","description":"API reference for RtkLeaveMeetingView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/leave-meeting-dialog/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLivestreamControlBarView component (Android Library)
title: RtkLivestreamControlBarView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLivestreamControlBarView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pre-built control bar for livestream meetings. Contains mic toggle, camera toggle, livestream toggle, join stage button, more toggle, and leave button.

## Methods

| Method   | Parameters                 | Description                               |
| -------- | -------------------------- | ----------------------------------------- |
| activate | meeting: RealtimeKitClient | Bind the control bar to the meeting state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbars.RtkLivestreamControlBarView
    android:id="@+id/rtk_livestream_control_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val controlBar = findViewById<RtkLivestreamControlBarView>(R.id.rtk_livestream_control_bar)
controlBar.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-control-bar/#page","headline":"RtkLivestreamControlBarView · Cloudflare Realtime docs","description":"API reference for RtkLivestreamControlBarView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLivestreamHeaderView component (Android Library)
title: RtkLivestreamHeaderView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLivestreamHeaderView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-header-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pre-built header for livestream meetings. Contains the livestream indicator, viewer count, clock, and meeting title.

## Methods

| Method   | Parameters                 | Description                          |
| -------- | -------------------------- | ------------------------------------ |
| activate | meeting: RealtimeKitClient | Bind the header to the meeting state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkLivestreamHeaderView
    android:id="@+id/rtk_livestream_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val header = findViewById<RtkLivestreamHeaderView>(R.id.rtk_livestream_header)
header.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-header-view/#page","headline":"RtkLivestreamHeaderView · Cloudflare Realtime docs","description":"API reference for RtkLivestreamHeaderView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-header-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLivestreamIndicator component (Android Library)
title: RtkLivestreamIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLivestreamIndicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A visual indicator that shows when a livestream is active.

## Methods

| Method  | Parameters                 | Description                                                |
| ------- | -------------------------- | ---------------------------------------------------------- |
| refresh | meeting: RealtimeKitClient | Update the indicator based on the current livestream state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkLivestreamIndicator
    android:id="@+id/rtk_livestream_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val indicator = findViewById<RtkLivestreamIndicator>(R.id.rtk_livestream_indicator)
indicator.refresh(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-indicator/#page","headline":"RtkLivestreamIndicator · Cloudflare Realtime docs","description":"API reference for RtkLivestreamIndicator component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLivestreamToggleButton component (Android Library)
title: RtkLivestreamToggleButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLivestreamToggleButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-toggle-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A toggle button for starting or stopping a livestream.

## Methods

| Method   | Parameters                 | Description                          |
| -------- | -------------------------- | ------------------------------------ |
| activate | meeting: RealtimeKitClient | Bind the button to the meeting state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkLivestreamToggleButton
    android:id="@+id/rtk_livestream_toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val livestreamToggle = findViewById<RtkLivestreamToggleButton>(R.id.rtk_livestream_toggle)
livestreamToggle.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-toggle-button/#page","headline":"RtkLivestreamToggleButton · Cloudflare Realtime docs","description":"API reference for RtkLivestreamToggleButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-toggle-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLivestreamViewerCount component (Android Library)
title: RtkLivestreamViewerCount
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLivestreamViewerCount

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-viewer-count/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays the current viewer count for a livestream.

## Methods

| Method  | Parameters                 | Description                                                |
| ------- | -------------------------- | ---------------------------------------------------------- |
| refresh | meeting: RealtimeKitClient | Update the viewer count based on the current meeting state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkLivestreamViewerCount
    android:id="@+id/rtk_viewer_count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val viewerCount = findViewById<RtkLivestreamViewerCount>(R.id.rtk_viewer_count)
viewerCount.refresh(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-viewer-count/#page","headline":"RtkLivestreamViewerCount · Cloudflare Realtime docs","description":"API reference for RtkLivestreamViewerCount component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/livestream-viewer-count/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLoaderView component (Android Library)
title: RtkLoaderView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLoaderView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/loader-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A full-screen loader component that can be displayed while a connection is being established with the RealtimeKit server. You must manually control the visibility of this view based on your application's connection state.

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkLoaderView
    android:id="@+id/clLoader"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/loader-view/#page","headline":"RtkLoaderView · Cloudflare Realtime docs","description":"API reference for RtkLoaderView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/loader-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingActivity component (Android Library)
title: RtkMeetingActivity
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingActivity

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-activity/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The main meeting activity that manages the full meeting lifecycle. Handles transitions between loading, setup, waiting room, group call, webinar, and error states. This is the activity launched by `RealtimeKitUI.startMeeting()`.

## Usage Examples

### Basic Usage

```kotlin
val meetingInfo = RtkMeetingInfo(authToken = authToken, baseUrl = baseUrl)
val realtimeKitUIInfo = RealtimeKitUIInfo(activity = this, rtkMeetingInfo = meetingInfo)
val realtimeKitUI = RealtimeKitUIBuilder.build(realtimeKitUIInfo)
realtimeKitUI.startMeeting()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-activity/#page","headline":"RtkMeetingActivity · Cloudflare Realtime docs","description":"API reference for RtkMeetingActivity component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-activity/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingControlBarView component (Android Library)
title: RtkMeetingControlBarView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingControlBarView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pre-built control bar for group call meetings. Contains mic toggle, camera toggle, more toggle, and leave button.

## Methods

| Method   | Parameters                 | Description                               |
| -------- | -------------------------- | ----------------------------------------- |
| activate | meeting: RealtimeKitClient | Bind the control bar to the meeting state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbars.RtkMeetingControlBarView
    android:id="@+id/rtk_meeting_control_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val controlBar = findViewById<RtkMeetingControlBarView>(R.id.rtk_meeting_control_bar)
controlBar.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-control-bar/#page","headline":"RtkMeetingControlBarView · Cloudflare Realtime docs","description":"API reference for RtkMeetingControlBarView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingHeaderView component (Android Library)
title: RtkMeetingHeaderView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingHeaderView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-header/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pre-built meeting header that contains meeting title, clock, recording indicator, participant count, grid paginator, and switch camera button.

## Methods

| Method            | Parameters                    | Description                            |
| ----------------- | ----------------------------- | -------------------------------------- |
| activate          | meeting: RealtimeKitClient    | Bind the header to the meeting state   |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.headers.RtkMeetingHeaderView
    android:id="@+id/rtk_meeting_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val header = findViewById<RtkMeetingHeaderView>(R.id.rtk_meeting_header)
header.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-header/#page","headline":"RtkMeetingHeaderView · Cloudflare Realtime docs","description":"API reference for RtkMeetingHeaderView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-header/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingOptionBottomSheet component (Android Library)
title: RtkMeetingOptionBottomSheet
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingOptionBottomSheet

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-option-bottomsheet/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A bottom sheet shown when tapping the more button. Contains options for participants, chat, polls, plugins, recording, screen share, mute all, and settings.

## Methods

| Method | Parameters                                     | Description                              |
| ------ | ---------------------------------------------- | ---------------------------------------- |
| show   | fragmentManager: FragmentManager, tag: String? | Display the meeting options bottom sheet |

## Usage Examples

### Basic Usage

```kotlin
val meetingOptions = RtkMeetingOptionBottomSheet()
meetingOptions.show(fragmentManager, "MEETING_OPTIONS_TAG")
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-option-bottomsheet/#page","headline":"RtkMeetingOptionBottomSheet · Cloudflare Realtime docs","description":"API reference for RtkMeetingOptionBottomSheet component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-option-bottomsheet/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingTitleView component (Android Library)
title: RtkMeetingTitleView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingTitleView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-title-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A text view that displays the meeting title. It automatically updates when the meeting title changes.

## Methods

| Method            | Parameters                    | Description                            |
| ----------------- | ----------------------------- | -------------------------------------- |
| activate          | meeting: RealtimeKitClient    | Bind the view to the meeting state     |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkMeetingTitleView
    android:id="@+id/rtk_meeting_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val titleView = findViewById<RtkMeetingTitleView>(R.id.rtk_meeting_title)
titleView.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-title-view/#page","headline":"RtkMeetingTitleView · Cloudflare Realtime docs","description":"API reference for RtkMeetingTitleView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/meeting-title-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMicToggleButton component (Android Library)
title: RtkMicToggleButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMicToggleButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/mic-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles the local user's microphone. It automatically listens to self audio events to update its state.

## Methods

| Method     | Parameters                 | Description                                  |
| ---------- | -------------------------- | -------------------------------------------- |
| activate   | meeting: RealtimeKitClient | Bind the button to the meeting state         |
| deactivate | \-                         | Unbind the button and remove event listeners |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMicToggleButton
    android:id="@+id/btn_mic_toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val micToggleButton = findViewById<RtkMicToggleButton>(R.id.btn_mic_toggle)
micToggleButton.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/mic-toggle/#page","headline":"RtkMicToggleButton · Cloudflare Realtime docs","description":"API reference for RtkMicToggleButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/mic-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMoreToggleButton component (Android Library)
title: RtkMoreToggleButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMoreToggleButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/more-toggle-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of a more menu.

## Methods

| Method   | Parameters                 | Description                          |
| -------- | -------------------------- | ------------------------------------ |
| activate | meeting: RealtimeKitClient | Bind the button to the meeting state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMoreToggleButton
    android:id="@+id/rtk_more_toggle"
    android:layout_width="50dp"
    android:layout_height="50dp" />
```

### With Methods

```kotlin
val moreToggleButton = findViewById<RtkMoreToggleButton>(R.id.rtk_more_toggle)
moreToggleButton.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/more-toggle-button/#page","headline":"RtkMoreToggleButton · Cloudflare Realtime docs","description":"API reference for RtkMoreToggleButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/more-toggle-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNameTagView component (Android Library)
title: RtkNameTagView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNameTagView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/name-tag-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays a participant's name and an audio indicator.

## Methods

| Method            | Parameters                                                 | Description                                   |
| ----------------- | ---------------------------------------------------------- | --------------------------------------------- |
| activate          | participant: RtkMeetingParticipant, isScreenShare: Boolean | Bind the name tag to a participant            |
| setMaxLength      | length: Int                                                | Set the maximum length for the displayed name |
| refresh           | \-                                                         | Refresh the name and audio indicator          |
| applyDesignTokens | designTokens: RtkDesignTokens                              | Apply custom design tokens for theming        |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.nametagview.RtkNameTagView
    android:id="@+id/rtk_name_tag"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val nameTag = findViewById<RtkNameTagView>(R.id.rtk_name_tag)
nameTag.activate(participant)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/name-tag-view/#page","headline":"RtkNameTagView · Cloudflare Realtime docs","description":"API reference for RtkNameTagView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/name-tag-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantAudioIndicator component (Android Library)
title: RtkParticipantAudioIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantAudioIndicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-audio-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

An audio visualizer component which visualizes a participant's audio.

## Methods

| Method   | Parameters                         | Description                                  |
| -------- | ---------------------------------- | -------------------------------------------- |
| activate | participant: RtkMeetingParticipant | Bind the indicator to a participant          |
| refresh  | \-                                 | Force a refresh of the audio indicator state |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkParticipantAudioIndicator
    android:id="@+id/audio_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val audioIndicator = findViewById<RtkParticipantAudioIndicator>(R.id.audio_indicator)
audioIndicator.activate(participant)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-audio-indicator/#page","headline":"RtkParticipantAudioIndicator · Cloudflare Realtime docs","description":"API reference for RtkParticipantAudioIndicator component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-audio-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantCountView component (Android Library)
title: RtkParticipantCountView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantCountView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-count-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A text view that displays the current number of participants in a meeting. It automatically updates when the participant count changes.

## Methods

| Method            | Parameters                    | Description                            |
| ----------------- | ----------------------------- | -------------------------------------- |
| activate          | meeting: RealtimeKitClient    | Bind the view to the meeting state     |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkParticipantCountView
    android:id="@+id/rtk_participant_count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val countView = findViewById<RtkParticipantCountView>(R.id.rtk_participant_count)
countView.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-count-view/#page","headline":"RtkParticipantCountView · Cloudflare Realtime docs","description":"API reference for RtkParticipantCountView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-count-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantTileView component (Android Library)
title: RtkParticipantTileView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantTileView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-tile-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which plays a participant's video and allows for placement of components like name tag and avatar.

## Properties

| Property                  | Type                        | Required | Default      | Description                  |
| ------------------------- | --------------------------- | -------- | ------------ | ---------------------------- |
| rtk\_ptv\_nameTagPosition | BOTTOM\_LEFT \| TOP\_CENTER | ❌        | BOTTOM\_LEFT | Position of the name tag     |
| cardBackgroundColor       | color                       | ❌        | \-           | Background color of the tile |
| cardCornerRadius          | dimension                   | ❌        | \-           | Corner radius of the tile    |

## Methods

| Method                  | Parameters                         | Description                             |
| ----------------------- | ---------------------------------- | --------------------------------------- |
| activate                | participant: RtkMeetingParticipant | Bind the tile to a specific participant |
| refreshParticipantName  | \-                                 | Refresh the name tag and avatar         |
| refreshParticipantVideo | \-                                 | Refresh the video view state            |
| applyDesignTokens       | designTokens: RtkDesignTokens      | Apply custom design tokens for theming  |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.participanttile.RtkParticipantTileView
    android:id="@+id/rtk_participant_tile"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    app:rtk_ptv_nameTagPosition="BOTTOM_LEFT" />
```

### With Methods

```kotlin
val tile = findViewById<RtkParticipantTileView>(R.id.rtk_participant_tile)
tile.activate(participant)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-tile-view/#page","headline":"RtkParticipantTileView · Cloudflare Realtime docs","description":"API reference for RtkParticipantTileView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-tile-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantVideoIndicator component (Android Library)
title: RtkParticipantVideoIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantVideoIndicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-video-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A video indicator that shows a participant's camera status.

## Methods

| Method   | Parameters                         | Description                         |
| -------- | ---------------------------------- | ----------------------------------- |
| activate | participant: RtkMeetingParticipant | Bind the indicator to a participant |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkParticipantVideoIndicator
    android:id="@+id/video_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val videoIndicator = findViewById<RtkParticipantVideoIndicator>(R.id.video_indicator)
videoIndicator.activate(participant)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-video-indicator/#page","headline":"RtkParticipantVideoIndicator · Cloudflare Realtime docs","description":"API reference for RtkParticipantVideoIndicator component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participant-video-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantsFragment component (Android Library)
title: RtkParticipantsFragment
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantsFragment

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lists all participants, with the ability to run privileged actions on each participant according to your permissions.

## Methods

| Method | Parameters                                     | Description                               |
| ------ | ---------------------------------------------- | ----------------------------------------- |
| show   | fragmentManager: FragmentManager, tag: String? | Display the participant list bottom sheet |

## Usage Examples

### Basic Usage

```kotlin
val rtkParticipantsFragment = RtkParticipantsFragment()
rtkParticipantsFragment.show(fragmentManager, "PARTICIPANTS_TAG")
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participants/#page","headline":"RtkParticipantsFragment · Cloudflare Realtime docs","description":"API reference for RtkParticipantsFragment component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/participants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPluginsBottomSheet component (Android Library)
title: RtkPluginsBottomSheet
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPluginsBottomSheet

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/plugins/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lists all available plugins from their preset, with the ability to enable or disable plugins.

## Methods

| Method | Parameters                                     | Description                      |
| ------ | ---------------------------------------------- | -------------------------------- |
| show   | fragmentManager: FragmentManager, tag: String? | Display the plugins bottom sheet |

## Usage Examples

### Basic Usage

```kotlin
val rtkPluginsBottomSheet = RtkPluginsBottomSheet()
rtkPluginsBottomSheet.show(fragmentManager, "PLUGINS_TAG")
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/plugins/#page","headline":"RtkPluginsBottomSheet · Cloudflare Realtime docs","description":"API reference for RtkPluginsBottomSheet component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/plugins/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPollsBottomSheet component (Android Library)
title: RtkPollsBottomSheet
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPollsBottomSheet

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/polls/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lists all available polls a user can access.

## Methods

| Method | Parameters                                     | Description                    |
| ------ | ---------------------------------------------- | ------------------------------ |
| show   | fragmentManager: FragmentManager, tag: String? | Display the polls bottom sheet |

## Usage Examples

### Basic Usage

```kotlin
val rtkPollsBottomSheet = RtkPollsBottomSheet()
rtkPollsBottomSheet.show(fragmentManager, "POLLS_TAG")
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/polls/#page","headline":"RtkPollsBottomSheet · Cloudflare Realtime docs","description":"API reference for RtkPollsBottomSheet component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/polls/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkRecordingIndicator component (Android Library)
title: RtkRecordingIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkRecordingIndicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/recording-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which indicates the recording status of a meeting. It does not render anything if no recording is taking place.

## Methods

| Method            | Parameters                    | Description                             |
| ----------------- | ----------------------------- | --------------------------------------- |
| activate          | meeting: RealtimeKitClient    | Bind the indicator to the meeting state |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming  |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkRecordingIndicator
    android:id="@+id/rtk_recording_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val recordingIndicator = findViewById<RtkRecordingIndicator>(R.id.rtk_recording_indicator)
recordingIndicator.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/recording-indicator/#page","headline":"RtkRecordingIndicator · Cloudflare Realtime docs","description":"API reference for RtkRecordingIndicator component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/recording-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettingsBottomsheet component (Android Library)
title: RtkSettingsBottomsheet
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettingsBottomsheet

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/settings-bottomsheet/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A settings bottom sheet that contains audio and video device selectors and a self-preview tile. Used in portrait orientation.

## Methods

| Method | Parameters                                     | Description                       |
| ------ | ---------------------------------------------- | --------------------------------- |
| show   | fragmentManager: FragmentManager, tag: String? | Display the settings bottom sheet |

## Usage Examples

### Basic Usage

```kotlin
val settingsBottomSheet = RtkSettingsBottomsheet()
settingsBottomSheet.show(fragmentManager, "SETTINGS_TAG")
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/settings-bottomsheet/#page","headline":"RtkSettingsBottomsheet · Cloudflare Realtime docs","description":"API reference for RtkSettingsBottomsheet component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/settings-bottomsheet/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettingsFragment component (Android Library)
title: RtkSettingsFragment
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettingsFragment

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/settings-fragment/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A settings dialog that contains audio and video device selectors and a self-preview tile. Used in landscape orientation.

## Methods

| Method                | Parameters                                     | Description                                        |
| --------------------- | ---------------------------------------------- | -------------------------------------------------- |
| show                  | fragmentManager: FragmentManager, tag: String? | Display the settings dialog                        |
| setBottomSheetEnabled | onClick: () -> Unit                            | Enable a button to switch to the bottom sheet view |

## Usage Examples

### Basic Usage

```kotlin
val settingsFragment = RtkSettingsFragment()
settingsFragment.show(fragmentManager, "SETTINGS_TAG")
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/settings-fragment/#page","headline":"RtkSettingsFragment · Cloudflare Realtime docs","description":"API reference for RtkSettingsFragment component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/settings-fragment/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSetupFragment component (Android Library)
title: RtkSetupFragment
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSetupFragment

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/setup-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A screen shown before joining the meeting, where you can edit your display name and media settings.

## Usage Examples

### Basic Usage

```kotlin
val rtkSetupFragment = RtkSetupFragment()
supportFragmentManager.beginTransaction()
    .add(R.id.fragmentContainer, rtkSetupFragment)
    .commit()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/setup-screen/#page","headline":"RtkSetupFragment · Cloudflare Realtime docs","description":"API reference for RtkSetupFragment component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/setup-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkTabSyncToggleButton component (Android Library)
title: RtkTabSyncToggleButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkTabSyncToggleButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/tab-sync-toggle-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A toggle button for syncing plugin tabs.

## Methods

| Method            | Parameters                    | Description                            |
| ----------------- | ----------------------------- | -------------------------------------- |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkTabSyncToggleButton
    android:id="@+id/rtk_tab_sync"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val tabSyncButton = findViewById<RtkTabSyncToggleButton>(R.id.rtk_tab_sync)
tabSyncButton.isActivated = true
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/tab-sync-toggle-button/#page","headline":"RtkTabSyncToggleButton · Cloudflare Realtime docs","description":"API reference for RtkTabSyncToggleButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/tab-sync-toggle-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkVideoDeviceSelector component (Android Library)
title: RtkVideoDeviceSelector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkVideoDeviceSelector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/video-device-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A video device selector component which can be used to select video devices.

## Properties

| Property       | Type   | Required | Default | Description       |
| -------------- | ------ | -------- | ------- | ----------------- |
| rtk\_ds\_label | string | ❌        | Video   | Custom label text |

## Methods

| Method            | Parameters                    | Description                               |
| ----------------- | ----------------------------- | ----------------------------------------- |
| activate          | meeting: RealtimeKitClient    | Bind the selector to the meeting state    |
| disableLabel      | \-                            | Disable the label text above the dropdown |
| applyDesignTokens | designTokens: RtkDesignTokens | Apply custom design tokens for theming    |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkVideoDeviceSelector
    android:id="@+id/videoSelector"
    app:rtk_ds_label="Camera"
    android:layout_width="0dp"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val videoSelector = findViewById<RtkVideoDeviceSelector>(R.id.videoSelector)
videoSelector.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/video-device-selector/#page","headline":"RtkVideoDeviceSelector · Cloudflare Realtime docs","description":"API reference for RtkVideoDeviceSelector component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/video-device-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkVideoPeer component (Android Library)
title: RtkVideoPeer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkVideoPeer

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/video-peer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A view that renders a participant's video stream with an avatar fallback when video is disabled.

## Methods

| Method  | Parameters                                                 | Description                               |
| ------- | ---------------------------------------------------------- | ----------------------------------------- |
| refresh | participant: RtkMeetingParticipant, isScreenShare: Boolean | Update the view with the participant data |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.RtkVideoPeer
    android:id="@+id/rtk_video_peer"
    android:layout_width="match_parent"
    android:layout_height="200dp" />
```

### With Methods

```kotlin
val videoPeer = findViewById<RtkVideoPeer>(R.id.rtk_video_peer)
videoPeer.refresh(participant, isScreenShare = false)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/video-peer/#page","headline":"RtkVideoPeer · Cloudflare Realtime docs","description":"API reference for RtkVideoPeer component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/video-peer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkWebinarControlBarView component (Android Library)
title: RtkWebinarControlBarView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkWebinarControlBarView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/webinar-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pre-built control bar for webinar meetings. Contains mic toggle, camera toggle, webinar stage toggle, more toggle, and leave button.

## Methods

| Method                   | Parameters                 | Description                                       |
| ------------------------ | -------------------------- | ------------------------------------------------- |
| activate                 | meeting: RealtimeKitClient | Bind the control bar to the meeting state         |
| deactivate               | \-                         | Unbind the control bar and remove event listeners |
| refreshStageToggleButton | \-                         | Force a refresh of the stage toggle button state  |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbars.RtkWebinarControlBarView
    android:id="@+id/rtk_webinar_control_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val controlBar = findViewById<RtkWebinarControlBarView>(R.id.rtk_webinar_control_bar)
controlBar.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/webinar-control-bar/#page","headline":"RtkWebinarControlBarView · Cloudflare Realtime docs","description":"API reference for RtkWebinarControlBarView component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/webinar-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkWebinarStageToggleButton component (Android Library)
title: RtkWebinarStageToggleButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkWebinarStageToggleButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/webinar-stage-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Component that lets you add provision for the local user to join the webinar stage.

## Methods

| Method     | Parameters                 | Description                                  |
| ---------- | -------------------------- | -------------------------------------------- |
| activate   | meeting: RealtimeKitClient | Bind the button to the meeting state         |
| deactivate | \-                         | Unbind the button and remove event listeners |
| refresh    | \-                         | Force a refresh of the button state          |

## Usage Examples

### Basic Usage

```xml
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.webinarstagetogglebutton.RtkWebinarStageToggleButton
    android:id="@+id/rtk_webinar_stage_toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
```

### With Methods

```kotlin
val stageToggleButton = findViewById<RtkWebinarStageToggleButton>(R.id.rtk_webinar_stage_toggle)
stageToggleButton.activate(meeting)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/webinar-stage-toggle/#page","headline":"RtkWebinarStageToggleButton · Cloudflare Realtime docs","description":"API reference for RtkWebinarStageToggleButton component (Android Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/android/webinar-stage-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Complete API reference for Angular library components
title: Angular
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Angular

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/#page","headline":"Angular · Cloudflare Realtime docs","description":"Complete API reference for Angular library components","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ai component (Angular Library)
title: rtk-ai
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ai

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-ai></rtk-ai>
```

### With Properties

```html
<!-- component.html -->
<rtk-ai
 [meeting]="meeting"
 size="md"
 [view]="aiview">
</rtk-ai>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai/#page","headline":"rtk-ai · Cloudflare Realtime docs","description":"API reference for rtk-ai component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ai-toggle component (Angular Library)
title: rtk-ai-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ai-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-ai-toggle></rtk-ai-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-ai-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-ai-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-toggle/#page","headline":"rtk-ai-toggle · Cloudflare Realtime docs","description":"API reference for rtk-ai-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ai-transcriptions component (Angular Library)
title: rtk-ai-transcriptions
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ai-transcriptions

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-transcriptions/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property              | Type           | Required | Default       | Description            |
| --------------------- | -------------- | -------- | ------------- | ---------------------- |
| initialTranscriptions | Transcript\[\] | ✅        | \-            | Initial transcriptions |
| meeting               | Meeting        | ✅        | \-            | Meeting object         |
| t                     | RtkI18n        | ❌        | useLanguage() | Language               |

## Usage Examples

### Basic Usage

```html
<!-- component.html -->
<rtk-ai-transcriptions></rtk-ai-transcriptions>
```

### With Properties

```html
<!-- component.html -->
<rtk-ai-transcriptions
 [initialTranscriptions]="[]"
 [meeting]="meeting">
</rtk-ai-transcriptions>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-transcriptions/#page","headline":"rtk-ai-transcriptions · Cloudflare Realtime docs","description":"API reference for rtk-ai-transcriptions component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ai-transcriptions/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-audio-grid component (Angular Library)
title: rtk-audio-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-audio-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-audio-grid></rtk-audio-grid>
```

### With Properties

```html
<!-- component.html -->
<rtk-audio-grid
 [config]="defaultUiConfig"
 [hideSelf]="true"
 [meeting]="meeting">
</rtk-audio-grid>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-grid/#page","headline":"rtk-audio-grid · Cloudflare Realtime docs","description":"API reference for rtk-audio-grid component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-audio-tile component (Angular Library)
title: rtk-audio-tile
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-audio-tile

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-tile/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-audio-tile></rtk-audio-tile>
```

### With Properties

```html
<!-- component.html -->
<rtk-audio-tile
 [config]="defaultUiConfig"
 [meeting]="meeting"
 [participant]="participant">
</rtk-audio-tile>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-tile/#page","headline":"rtk-audio-tile · Cloudflare Realtime docs","description":"API reference for rtk-audio-tile component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-tile/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-audio-visualizer component (Angular Library)
title: rtk-audio-visualizer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-audio-visualizer

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-visualizer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-audio-visualizer></rtk-audio-visualizer>
```

### With Properties

```html
<!-- component.html -->
<rtk-audio-visualizer
 [hideMuted]="true"
 [isScreenShare]="true"
 [participant]="participant">
</rtk-audio-visualizer>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-visualizer/#page","headline":"rtk-audio-visualizer · Cloudflare Realtime docs","description":"API reference for rtk-audio-visualizer component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-audio-visualizer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-avatar component (Angular Library)
title: rtk-avatar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-avatar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-avatar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-avatar></rtk-avatar>
```

### With Properties

```html
<!-- component.html -->
<rtk-avatar
 participant="example"
 size="md"
 variant="circular">
</rtk-avatar>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-avatar/#page","headline":"rtk-avatar · Cloudflare Realtime docs","description":"API reference for rtk-avatar component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-avatar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-breakout-room-manager component (Angular Library)
title: rtk-breakout-room-manager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-breakout-room-manager

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-manager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-breakout-room-manager></rtk-breakout-room-manager>
```

### With Properties

```html
<!-- component.html -->
<rtk-breakout-room-manager
 [allowDelete]="true"
 [assigningParticipants]="true"
 [defaultExpanded]="true">
</rtk-breakout-room-manager>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-manager/#page","headline":"rtk-breakout-room-manager · Cloudflare Realtime docs","description":"API reference for rtk-breakout-room-manager component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-manager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-breakout-room-participants component (Angular Library)
title: rtk-breakout-room-participants
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-breakout-room-participants

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-participants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-breakout-room-participants></rtk-breakout-room-participants>
```

### With Properties

```html
<!-- component.html -->
<rtk-breakout-room-participants
 [meeting]="meeting"
 participantIds="example"
 selectedParticipantIds="example">
</rtk-breakout-room-participants>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-participants/#page","headline":"rtk-breakout-room-participants · Cloudflare Realtime docs","description":"API reference for rtk-breakout-room-participants component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-room-participants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-breakout-rooms-manager component (Angular Library)
title: rtk-breakout-rooms-manager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-breakout-rooms-manager

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-manager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-breakout-rooms-manager></rtk-breakout-rooms-manager>
```

### With Properties

```html
<!-- component.html -->
<rtk-breakout-rooms-manager
 [meeting]="meeting">
</rtk-breakout-rooms-manager>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-manager/#page","headline":"rtk-breakout-rooms-manager · Cloudflare Realtime docs","description":"API reference for rtk-breakout-rooms-manager component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-manager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-breakout-rooms-toggle component (Angular Library)
title: rtk-breakout-rooms-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-breakout-rooms-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-breakout-rooms-toggle></rtk-breakout-rooms-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-breakout-rooms-toggle
 [iconPack]="defaultIconPack"
 [meeting]="meeting"
 size="md">
</rtk-breakout-rooms-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-toggle/#page","headline":"rtk-breakout-rooms-toggle · Cloudflare Realtime docs","description":"API reference for rtk-breakout-rooms-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-breakout-rooms-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-broadcast-message-modal component (Angular Library)
title: rtk-broadcast-message-modal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-broadcast-message-modal

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-broadcast-message-modal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-broadcast-message-modal></rtk-broadcast-message-modal>
```

### With Properties

```html
<!-- component.html -->
<rtk-broadcast-message-modal
 [meeting]="meeting">
</rtk-broadcast-message-modal>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-broadcast-message-modal/#page","headline":"rtk-broadcast-message-modal · Cloudflare Realtime docs","description":"API reference for rtk-broadcast-message-modal component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-broadcast-message-modal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-button component (Angular Library)
title: rtk-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-button></rtk-button>
```

### With Properties

```html
<!-- component.html -->
<rtk-button
 [disabled]="true"
 [kind]="buttonkind"
 [reverse]="true">
</rtk-button>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-button/#page","headline":"rtk-button · Cloudflare Realtime docs","description":"API reference for rtk-button component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-camera-selector component (Angular Library)
title: rtk-camera-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-camera-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```html
<!-- component.html -->
<rtk-camera-selector></rtk-camera-selector>
```

### With Properties

```html
<!-- component.html -->
<rtk-camera-selector
 [meeting]="meeting"
 size="md"
 [variant]="'full' | 'inline'">
</rtk-camera-selector>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-selector/#page","headline":"rtk-camera-selector · Cloudflare Realtime docs","description":"API reference for rtk-camera-selector component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-camera-toggle component (Angular Library)
title: rtk-camera-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-camera-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-camera-toggle></rtk-camera-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-camera-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-camera-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-toggle/#page","headline":"rtk-camera-toggle · Cloudflare Realtime docs","description":"API reference for rtk-camera-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-camera-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-caption-toggle component (Angular Library)
title: rtk-caption-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-caption-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-caption-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-caption-toggle></rtk-caption-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-caption-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-caption-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-caption-toggle/#page","headline":"rtk-caption-toggle · Cloudflare Realtime docs","description":"API reference for rtk-caption-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-caption-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat component (Angular Library)
title: rtk-chat
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-chat></rtk-chat>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat
 [meeting]="meeting"
 size="md">
</rtk-chat>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat/#page","headline":"rtk-chat · Cloudflare Realtime docs","description":"API reference for rtk-chat component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-composer-ui component (Angular Library)
title: rtk-chat-composer-ui
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-composer-ui

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-ui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<!-- component.html -->
<rtk-chat-composer-ui></rtk-chat-composer-ui>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat-composer-ui
 [canSendFiles]="true"
 [canSendTextMessage]="true"
 size="md">
</rtk-chat-composer-ui>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-ui/#page","headline":"rtk-chat-composer-ui · Cloudflare Realtime docs","description":"API reference for rtk-chat-composer-ui component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-ui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-composer-view component (Angular Library)
title: rtk-chat-composer-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-composer-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-chat-composer-view></rtk-chat-composer-view>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat-composer-view
 [canSendFiles]="true"
 [canSendTextMessage]="true"
 inputTextPlaceholder="example">
</rtk-chat-composer-view>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-view/#page","headline":"rtk-chat-composer-view · Cloudflare Realtime docs","description":"API reference for rtk-chat-composer-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-composer-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-header component (Angular Library)
title: rtk-chat-header
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-header

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-header/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

_No properties available._

## Usage Examples

### Basic Usage

```html
<!-- component.html -->
<rtk-chat-header></rtk-chat-header>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-header/#page","headline":"rtk-chat-header · Cloudflare Realtime docs","description":"API reference for rtk-chat-header component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-header/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-message component (Angular Library)
title: rtk-chat-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<!-- component.html -->
<rtk-chat-message></rtk-chat-message>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat-message
 [alignRight]="true"
 [canDelete]="true"
 [canEdit]="true">
</rtk-chat-message>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-message/#page","headline":"rtk-chat-message · Cloudflare Realtime docs","description":"API reference for rtk-chat-message component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-messages-ui component (Angular Library)
title: rtk-chat-messages-ui
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-messages-ui

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<!-- component.html -->
<rtk-chat-messages-ui></rtk-chat-messages-ui>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat-messages-ui
 [canPinMessages]="true"
 [messages]="[]"
 selectedGroup="example">
</rtk-chat-messages-ui>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui/#page","headline":"rtk-chat-messages-ui · Cloudflare Realtime docs","description":"API reference for rtk-chat-messages-ui component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-messages-ui-paginated component (Angular Library)
title: rtk-chat-messages-ui-paginated
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-messages-ui-paginated

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui-paginated/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-chat-messages-ui-paginated></rtk-chat-messages-ui-paginated>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat-messages-ui-paginated
 [meeting]="meeting"
 [privateChatRecipient]="participant | null"
 size="md">
</rtk-chat-messages-ui-paginated>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui-paginated/#page","headline":"rtk-chat-messages-ui-paginated · Cloudflare Realtime docs","description":"API reference for rtk-chat-messages-ui-paginated component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-messages-ui-paginated/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-search-results component (Angular Library)
title: rtk-chat-search-results
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-search-results

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-search-results/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<!-- component.html -->
<rtk-chat-search-results></rtk-chat-search-results>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat-search-results
 channelId="example"
 [meeting]="meeting"
 query="example">
</rtk-chat-search-results>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-search-results/#page","headline":"rtk-chat-search-results · Cloudflare Realtime docs","description":"API reference for rtk-chat-search-results component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-search-results/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-selector component (Angular Library)
title: rtk-chat-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-chat-selector></rtk-chat-selector>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat-selector
 [meeting]="meeting"
 size="md">
</rtk-chat-selector>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector/#page","headline":"rtk-chat-selector · Cloudflare Realtime docs","description":"API reference for rtk-chat-selector component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-selector-ui component (Angular Library)
title: rtk-chat-selector-ui
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-selector-ui

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector-ui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-chat-selector-ui></rtk-chat-selector-ui>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat-selector-ui
 [groups]="[]"
 selectedGroupId="example"
 selfUserId="example">
</rtk-chat-selector-ui>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector-ui/#page","headline":"rtk-chat-selector-ui · Cloudflare Realtime docs","description":"API reference for rtk-chat-selector-ui component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-selector-ui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-toggle component (Angular Library)
title: rtk-chat-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```ts
{ 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

```html
<!-- component.html -->
<rtk-chat-toggle></rtk-chat-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-chat-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-chat-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-toggle/#page","headline":"rtk-chat-toggle · Cloudflare Realtime docs","description":"API reference for rtk-chat-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-chat-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-clock component (Angular Library)
title: rtk-clock
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-clock

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-clock/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-clock></rtk-clock>
```

### With Properties

```html
<!-- component.html -->
<rtk-clock
 [meeting]="meeting"
 size="md">
</rtk-clock>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-clock/#page","headline":"rtk-clock · Cloudflare Realtime docs","description":"API reference for rtk-clock component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-clock/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-confirmation-modal component (Angular Library)
title: rtk-confirmation-modal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-confirmation-modal

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-confirmation-modal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-confirmation-modal></rtk-confirmation-modal>
```

### With Properties

```html
<!-- component.html -->
<rtk-confirmation-modal
 [meeting]="meeting">
</rtk-confirmation-modal>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-confirmation-modal/#page","headline":"rtk-confirmation-modal · Cloudflare Realtime docs","description":"API reference for rtk-confirmation-modal component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-confirmation-modal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-controlbar component (Angular Library)
title: rtk-controlbar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-controlbar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-controlbar></rtk-controlbar>
```

### With Properties

```html
<!-- component.html -->
<rtk-controlbar
 [disableRender]="true"
 [meeting]="meeting"
 size="md">
</rtk-controlbar>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar/#page","headline":"rtk-controlbar · Cloudflare Realtime docs","description":"API reference for rtk-controlbar component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-controlbar-button component (Angular Library)
title: rtk-controlbar-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-controlbar-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-controlbar-button></rtk-controlbar-button>
```

### With Properties

```html
<!-- component.html -->
<rtk-controlbar-button
 [brandIcon]="true"
 [disabled]="true"
 icon="example">
</rtk-controlbar-button>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar-button/#page","headline":"rtk-controlbar-button · Cloudflare Realtime docs","description":"API reference for rtk-controlbar-button component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-controlbar-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-counter component (Angular Library)
title: rtk-counter
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-counter

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-counter/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-counter></rtk-counter>
```

### With Properties

```html
<!-- component.html -->
<rtk-counter
 minValue="42"
 size="md"
 value="42">
</rtk-counter>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-counter/#page","headline":"rtk-counter · Cloudflare Realtime docs","description":"API reference for rtk-counter component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-counter/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger component (Angular Library)
title: rtk-debugger
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-debugger></rtk-debugger>
```

### With Properties

```html
<!-- component.html -->
<rtk-debugger
 [meeting]="meeting"
 size="md">
</rtk-debugger>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger/#page","headline":"rtk-debugger · Cloudflare Realtime docs","description":"API reference for rtk-debugger component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-audio component (Angular Library)
title: rtk-debugger-audio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-audio

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-audio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-debugger-audio></rtk-debugger-audio>
```

### With Properties

```html
<!-- component.html -->
<rtk-debugger-audio
 [meeting]="meeting"
 size="md">
</rtk-debugger-audio>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-audio/#page","headline":"rtk-debugger-audio · Cloudflare Realtime docs","description":"API reference for rtk-debugger-audio component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-audio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-screenshare component (Angular Library)
title: rtk-debugger-screenshare
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-screenshare

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-screenshare/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-debugger-screenshare></rtk-debugger-screenshare>
```

### With Properties

```html
<!-- component.html -->
<rtk-debugger-screenshare
 [meeting]="meeting"
 size="md">
</rtk-debugger-screenshare>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-screenshare/#page","headline":"rtk-debugger-screenshare · Cloudflare Realtime docs","description":"API reference for rtk-debugger-screenshare component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-screenshare/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-system component (Angular Library)
title: rtk-debugger-system
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-system

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-system/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-debugger-system></rtk-debugger-system>
```

### With Properties

```html
<!-- component.html -->
<rtk-debugger-system
 [meeting]="meeting"
 size="md">
</rtk-debugger-system>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-system/#page","headline":"rtk-debugger-system · Cloudflare Realtime docs","description":"API reference for rtk-debugger-system component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-system/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-toggle component (Angular Library)
title: rtk-debugger-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-debugger-toggle></rtk-debugger-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-debugger-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-debugger-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-toggle/#page","headline":"rtk-debugger-toggle · Cloudflare Realtime docs","description":"API reference for rtk-debugger-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-video component (Angular Library)
title: rtk-debugger-video
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-video

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-video/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-debugger-video></rtk-debugger-video>
```

### With Properties

```html
<!-- component.html -->
<rtk-debugger-video
 [meeting]="meeting"
 size="md">
</rtk-debugger-video>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-video/#page","headline":"rtk-debugger-video · Cloudflare Realtime docs","description":"API reference for rtk-debugger-video component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-debugger-video/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-dialog component (Angular Library)
title: rtk-dialog
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-dialog

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-dialog></rtk-dialog>
```

### With Properties

```html
<!-- component.html -->
<rtk-dialog
 [disableEscapeKey]="true"
 [hideCloseButton]="true"
 [meeting]="meeting">
</rtk-dialog>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog/#page","headline":"rtk-dialog · Cloudflare Realtime docs","description":"API reference for rtk-dialog component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-dialog-manager component (Angular Library)
title: rtk-dialog-manager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-dialog-manager

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog-manager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-dialog-manager></rtk-dialog-manager>
```

### With Properties

```html
<!-- component.html -->
<rtk-dialog-manager
 [meeting]="meeting"
 size="md">
</rtk-dialog-manager>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog-manager/#page","headline":"rtk-dialog-manager · Cloudflare Realtime docs","description":"API reference for rtk-dialog-manager component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-dialog-manager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-draft-attachment-view component (Angular Library)
title: rtk-draft-attachment-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-draft-attachment-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-draft-attachment-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-draft-attachment-view></rtk-draft-attachment-view>
```

### With Properties

```html
<!-- component.html -->
<rtk-draft-attachment-view
 [attachment=]"{}">
</rtk-draft-attachment-view>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-draft-attachment-view/#page","headline":"rtk-draft-attachment-view · Cloudflare Realtime docs","description":"API reference for rtk-draft-attachment-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-draft-attachment-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-emoji-picker component (Angular Library)
title: rtk-emoji-picker
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-emoji-picker

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-emoji-picker></rtk-emoji-picker>
```

### With Properties

```html
<!-- component.html -->
<rtk-emoji-picker
 [focusWhenOpened]="true">
</rtk-emoji-picker>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker/#page","headline":"rtk-emoji-picker · Cloudflare Realtime docs","description":"API reference for rtk-emoji-picker component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-emoji-picker-button component (Angular Library)
title: rtk-emoji-picker-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-emoji-picker-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property | Type      | Required | Default         | Description            |
| -------- | --------- | -------- | --------------- | ---------------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack              |
| isActive | boolean   | ✅        | \-              | Active state indicator |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language               |

## Usage Examples

### Basic Usage

```html
<!-- component.html -->
<rtk-emoji-picker-button></rtk-emoji-picker-button>
```

### With Properties

```html
<!-- component.html -->
<rtk-emoji-picker-button
 [isActive]="true">
</rtk-emoji-picker-button>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker-button/#page","headline":"rtk-emoji-picker-button · Cloudflare Realtime docs","description":"API reference for rtk-emoji-picker-button component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-emoji-picker-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ended-screen component (Angular Library)
title: rtk-ended-screen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ended-screen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ended-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-ended-screen></rtk-ended-screen>
```

### With Properties

```html
<!-- component.html -->
<rtk-ended-screen
 [meeting]="meeting"
 size="md">
</rtk-ended-screen>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ended-screen/#page","headline":"rtk-ended-screen · Cloudflare Realtime docs","description":"API reference for rtk-ended-screen component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ended-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-file-dropzone component (Angular Library)
title: rtk-file-dropzone
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-file-dropzone

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-dropzone/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-file-dropzone></rtk-file-dropzone>
```

### With Properties

```html
<!-- component.html -->
<rtk-file-dropzone
 [hostEl]="htmlelement">
</rtk-file-dropzone>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-dropzone/#page","headline":"rtk-file-dropzone · Cloudflare Realtime docs","description":"API reference for rtk-file-dropzone component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-dropzone/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-file-message component (Angular Library)
title: rtk-file-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-file-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<!-- component.html -->
<rtk-file-message></rtk-file-message>
```

### With Properties

```html
<!-- component.html -->
<rtk-file-message
 [isContinued]="true"
 [message]="filemessage"
 [now]="date">
</rtk-file-message>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message/#page","headline":"rtk-file-message · Cloudflare Realtime docs","description":"API reference for rtk-file-message component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-file-message-view component (Angular Library)
title: rtk-file-message-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-file-message-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-file-message-view></rtk-file-message-view>
```

### With Properties

```html
<!-- component.html -->
<rtk-file-message-view
 name="example"
 size="42"
 url="example">
</rtk-file-message-view>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message-view/#page","headline":"rtk-file-message-view · Cloudflare Realtime docs","description":"API reference for rtk-file-message-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-message-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-file-picker-button component (Angular Library)
title: rtk-file-picker-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-file-picker-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-picker-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-file-picker-button></rtk-file-picker-button>
```

### With Properties

```html
<!-- component.html -->
<rtk-file-picker-button
 filter="example"
 [icon]="defaultIconPack"
 label="example">
</rtk-file-picker-button>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-picker-button/#page","headline":"rtk-file-picker-button · Cloudflare Realtime docs","description":"API reference for rtk-file-picker-button component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-file-picker-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-fullscreen-toggle component (Angular Library)
title: rtk-fullscreen-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-fullscreen-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-fullscreen-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-fullscreen-toggle></rtk-fullscreen-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-fullscreen-toggle
 size="md"
 [targetElement]="htmlelement"
 variant="button">
</rtk-fullscreen-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-fullscreen-toggle/#page","headline":"rtk-fullscreen-toggle · Cloudflare Realtime docs","description":"API reference for rtk-fullscreen-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-fullscreen-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-grid component (Angular Library)
title: rtk-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-grid></rtk-grid>
```

### With Properties

```html
<!-- component.html -->
<rtk-grid
 aspectRatio="example"
 gap="42"
 gridSize="md">
</rtk-grid>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid/#page","headline":"rtk-grid · Cloudflare Realtime docs","description":"API reference for rtk-grid component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-grid-pagination component (Angular Library)
title: rtk-grid-pagination
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-grid-pagination

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid-pagination/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-grid-pagination></rtk-grid-pagination>
```

### With Properties

```html
<!-- component.html -->
<rtk-grid-pagination
 [meeting]="meeting"
 size="md"
 [variant]="gridpaginationvariants">
</rtk-grid-pagination>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid-pagination/#page","headline":"rtk-grid-pagination · Cloudflare Realtime docs","description":"API reference for rtk-grid-pagination component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-grid-pagination/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-header component (Angular Library)
title: rtk-header
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-header

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-header/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-header></rtk-header>
```

### With Properties

```html
<!-- component.html -->
<rtk-header
 [disableRender]="true"
 [meeting]="meeting"
 size="md">
</rtk-header>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-header/#page","headline":"rtk-header · Cloudflare Realtime docs","description":"API reference for rtk-header component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-header/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-icon component (Angular Library)
title: rtk-icon
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-icon

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-icon/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-icon></rtk-icon>
```

### With Properties

```html
<!-- component.html -->
<rtk-icon
 icon="example"
 size="md"
 variant="primary">
</rtk-icon>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-icon/#page","headline":"rtk-icon · Cloudflare Realtime docs","description":"API reference for rtk-icon component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-icon/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-idle-screen component (Angular Library)
title: rtk-idle-screen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-idle-screen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-idle-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-idle-screen></rtk-idle-screen>
```

### With Properties

```html
<!-- component.html -->
<rtk-idle-screen
 [meeting]="meeting">
</rtk-idle-screen>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-idle-screen/#page","headline":"rtk-idle-screen · Cloudflare Realtime docs","description":"API reference for rtk-idle-screen component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-idle-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-image-message component (Angular Library)
title: rtk-image-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-image-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<!-- component.html -->
<rtk-image-message></rtk-image-message>
```

### With Properties

```html
<!-- component.html -->
<rtk-image-message
 [isContinued]="true"
 [message]="imagemessage"
 [now]="date">
</rtk-image-message>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message/#page","headline":"rtk-image-message · Cloudflare Realtime docs","description":"API reference for rtk-image-message component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-image-message-view component (Angular Library)
title: rtk-image-message-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-image-message-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-image-message-view></rtk-image-message-view>
```

### With Properties

```html
<!-- component.html -->
<rtk-image-message-view
 url="example">
</rtk-image-message-view>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message-view/#page","headline":"rtk-image-message-view · Cloudflare Realtime docs","description":"API reference for rtk-image-message-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-message-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-image-viewer component (Angular Library)
title: rtk-image-viewer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-image-viewer

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-viewer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-image-viewer></rtk-image-viewer>
```

### With Properties

```html
<!-- component.html -->
<rtk-image-viewer
 [image]="imagemessage"
 size="md">
</rtk-image-viewer>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-viewer/#page","headline":"rtk-image-viewer · Cloudflare Realtime docs","description":"API reference for rtk-image-viewer component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-image-viewer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-information-tooltip component (Angular Library)
title: rtk-information-tooltip
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-information-tooltip

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-information-tooltip/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property | Type      | Required | Default         | Description |
| -------- | --------- | -------- | --------------- | ----------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack   |

## Usage Examples

### Basic Usage

```html
<!-- component.html -->
<rtk-information-tooltip></rtk-information-tooltip>
```

### With Properties

```html
<!-- component.html -->
<rtk-information-tooltip
 [iconPack]="defaultIconPack">
</rtk-information-tooltip>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-information-tooltip/#page","headline":"rtk-information-tooltip · Cloudflare Realtime docs","description":"API reference for rtk-information-tooltip component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-information-tooltip/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-join-stage component (Angular Library)
title: rtk-join-stage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-join-stage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-join-stage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-join-stage></rtk-join-stage>
```

### With Properties

```html
<!-- component.html -->
<rtk-join-stage
 [dataConfig]="modaldataconfig"
 [meeting]="meeting"
 size="md">
</rtk-join-stage>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-join-stage/#page","headline":"rtk-join-stage · Cloudflare Realtime docs","description":"API reference for rtk-join-stage component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-join-stage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-leave-button component (Angular Library)
title: rtk-leave-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-leave-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-leave-button></rtk-leave-button>
```

### With Properties

```html
<!-- component.html -->
<rtk-leave-button
 size="md"
 variant="button">
</rtk-leave-button>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-button/#page","headline":"rtk-leave-button · Cloudflare Realtime docs","description":"API reference for rtk-leave-button component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-leave-meeting component (Angular Library)
title: rtk-leave-meeting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-leave-meeting

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-meeting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-leave-meeting></rtk-leave-meeting>
```

### With Properties

```html
<!-- component.html -->
<rtk-leave-meeting
 [meeting]="meeting">
</rtk-leave-meeting>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-meeting/#page","headline":"rtk-leave-meeting · Cloudflare Realtime docs","description":"API reference for rtk-leave-meeting component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-leave-meeting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-livestream-indicator component (Angular Library)
title: rtk-livestream-indicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-livestream-indicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-livestream-indicator></rtk-livestream-indicator>
```

### With Properties

```html
<!-- component.html -->
<rtk-livestream-indicator
 [meeting]="meeting"
 size="md">
</rtk-livestream-indicator>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-indicator/#page","headline":"rtk-livestream-indicator · Cloudflare Realtime docs","description":"API reference for rtk-livestream-indicator component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-livestream-player component (Angular Library)
title: rtk-livestream-player
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-livestream-player

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-player/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-livestream-player></rtk-livestream-player>
```

### With Properties

```html
<!-- component.html -->
<rtk-livestream-player
 [meeting]="meeting"
 size="md">
</rtk-livestream-player>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-player/#page","headline":"rtk-livestream-player · Cloudflare Realtime docs","description":"API reference for rtk-livestream-player component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-player/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-livestream-toggle component (Angular Library)
title: rtk-livestream-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-livestream-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-livestream-toggle></rtk-livestream-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-livestream-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-livestream-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-toggle/#page","headline":"rtk-livestream-toggle · Cloudflare Realtime docs","description":"API reference for rtk-livestream-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-livestream-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-logo component (Angular Library)
title: rtk-logo
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-logo

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-logo/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-logo></rtk-logo>
```

### With Properties

```html
<!-- component.html -->
<rtk-logo
 logoUrl="example"
 [meeting]="meeting">
</rtk-logo>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-logo/#page","headline":"rtk-logo · Cloudflare Realtime docs","description":"API reference for rtk-logo component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-logo/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-markdown-view component (Angular Library)
title: rtk-markdown-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-markdown-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-markdown-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-markdown-view></rtk-markdown-view>
```

### With Properties

```html
<!-- component.html -->
<rtk-markdown-view
 maxLength="42"
 text="example">
</rtk-markdown-view>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-markdown-view/#page","headline":"rtk-markdown-view · Cloudflare Realtime docs","description":"API reference for rtk-markdown-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-markdown-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-meeting component (Angular Library)
title: rtk-meeting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-meeting

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-meeting></rtk-meeting>
```

### With Properties

```html
<!-- component.html -->
<rtk-meeting
 [applyDesignSystem]="true"
 [config]="defaultUiConfig"
 [gridLayout]="gridlayout1">
</rtk-meeting>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting/#page","headline":"rtk-meeting · Cloudflare Realtime docs","description":"API reference for rtk-meeting component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-meeting-title component (Angular Library)
title: rtk-meeting-title
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-meeting-title

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting-title/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-meeting-title></rtk-meeting-title>
```

### With Properties

```html
<!-- component.html -->
<rtk-meeting-title
 [meeting]="meeting">
</rtk-meeting-title>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting-title/#page","headline":"rtk-meeting-title · Cloudflare Realtime docs","description":"API reference for rtk-meeting-title component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-meeting-title/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-menu component (Angular Library)
title: rtk-menu
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-menu

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-menu></rtk-menu>
```

### With Properties

```html
<!-- component.html -->
<rtk-menu
 offset="42"
 [placement]="placement"
 size="md">
</rtk-menu>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu/#page","headline":"rtk-menu · Cloudflare Realtime docs","description":"API reference for rtk-menu component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-menu-item component (Angular Library)
title: rtk-menu-item
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-menu-item

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-item/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-menu-item></rtk-menu-item>
```

### With Properties

```html
<!-- component.html -->
<rtk-menu-item
 [menuVariant]="'primary' | 'secondary'"
 size="md">
</rtk-menu-item>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-item/#page","headline":"rtk-menu-item · Cloudflare Realtime docs","description":"API reference for rtk-menu-item component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-item/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-menu-list component (Angular Library)
title: rtk-menu-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-menu-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-menu-list></rtk-menu-list>
```

### With Properties

```html
<!-- component.html -->
<rtk-menu-list
 [menuVariant]="'primary' | 'secondary'">
</rtk-menu-list>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-list/#page","headline":"rtk-menu-list · Cloudflare Realtime docs","description":"API reference for rtk-menu-list component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-menu-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-message-list-view component (Angular Library)
title: rtk-message-list-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-message-list-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-list-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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 prepended |
| messages          | Message\[\]                       | ✅        | \-              | Messages to render                                                            |
| renderer          | (message: Message, index: number) | ✅        | \-              | Render function of the message                                                |
| visibleItemsCount | number                            | ✅        | \-              | Maximum visible messages                                                      |

## Usage Examples

### Basic Usage

```html
<!-- component.html -->
<rtk-message-list-view></rtk-message-list-view>
```

### With Properties

```html
<!-- component.html -->
<rtk-message-list-view
 estimateItemSize="42"
 [loadMore]="(lastmessage: message)"
 [messages]="[]">
</rtk-message-list-view>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-list-view/#page","headline":"rtk-message-list-view · Cloudflare Realtime docs","description":"API reference for rtk-message-list-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-list-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-message-view component (Angular Library)
title: rtk-message-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-message-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-message-view></rtk-message-view>
```

### With Properties

```html
<!-- component.html -->
<rtk-message-view
 [actions]="[]"
 authorName="example"
 avatarUrl="example">
</rtk-message-view>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-view/#page","headline":"rtk-message-view · Cloudflare Realtime docs","description":"API reference for rtk-message-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-message-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-mic-toggle component (Angular Library)
title: rtk-mic-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-mic-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mic-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-mic-toggle></rtk-mic-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-mic-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-mic-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mic-toggle/#page","headline":"rtk-mic-toggle · Cloudflare Realtime docs","description":"API reference for rtk-mic-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mic-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-microphone-selector component (Angular Library)
title: rtk-microphone-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-microphone-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-microphone-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```html
<!-- component.html -->
<rtk-microphone-selector></rtk-microphone-selector>
```

### With Properties

```html
<!-- component.html -->
<rtk-microphone-selector
 [meeting]="meeting"
 size="md"
 [variant]="'full' | 'inline'">
</rtk-microphone-selector>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-microphone-selector/#page","headline":"rtk-microphone-selector · Cloudflare Realtime docs","description":"API reference for rtk-microphone-selector component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-microphone-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-mixed-grid component (Angular Library)
title: rtk-mixed-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-mixed-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mixed-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-mixed-grid></rtk-mixed-grid>
```

### With Properties

```html
<!-- component.html -->
<rtk-mixed-grid
 aspectRatio="example"
 gap="42"
 gridSize="md">
</rtk-mixed-grid>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mixed-grid/#page","headline":"rtk-mixed-grid · Cloudflare Realtime docs","description":"API reference for rtk-mixed-grid component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mixed-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-more-toggle component (Angular Library)
title: rtk-more-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-more-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-more-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of a more menu. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```html
<!-- component.html -->
<rtk-more-toggle></rtk-more-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-more-toggle
 size="md">
</rtk-more-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-more-toggle/#page","headline":"rtk-more-toggle · Cloudflare Realtime docs","description":"API reference for rtk-more-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-more-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-mute-all-button component (Angular Library)
title: rtk-mute-all-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-mute-all-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-mute-all-button></rtk-mute-all-button>
```

### With Properties

```html
<!-- component.html -->
<rtk-mute-all-button
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-mute-all-button>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-button/#page","headline":"rtk-mute-all-button · Cloudflare Realtime docs","description":"API reference for rtk-mute-all-button component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-mute-all-confirmation component (Angular Library)
title: rtk-mute-all-confirmation
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-mute-all-confirmation

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-confirmation/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-mute-all-confirmation></rtk-mute-all-confirmation>
```

### With Properties

```html
<!-- component.html -->
<rtk-mute-all-confirmation
 [meeting]="meeting">
</rtk-mute-all-confirmation>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-confirmation/#page","headline":"rtk-mute-all-confirmation · Cloudflare Realtime docs","description":"API reference for rtk-mute-all-confirmation component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-mute-all-confirmation/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-name-tag component (Angular Library)
title: rtk-name-tag
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-name-tag

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-name-tag/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-name-tag></rtk-name-tag>
```

### With Properties

```html
<!-- component.html -->
<rtk-name-tag
 [isScreenShare]="true"
 [meeting]="meeting"
 [participant]="participant">
</rtk-name-tag>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-name-tag/#page","headline":"rtk-name-tag · Cloudflare Realtime docs","description":"API reference for rtk-name-tag component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-name-tag/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-network-indicator component (Angular Library)
title: rtk-network-indicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-network-indicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-network-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-network-indicator></rtk-network-indicator>
```

### With Properties

```html
<!-- component.html -->
<rtk-network-indicator
 [isScreenShare]="true"
 [meeting]="meeting"
 [participant]="participant">
</rtk-network-indicator>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-network-indicator/#page","headline":"rtk-network-indicator · Cloudflare Realtime docs","description":"API reference for rtk-network-indicator component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-network-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-notification component (Angular Library)
title: rtk-notification
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-notification

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notification/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-notification></rtk-notification>
```

### With Properties

```html
<!-- component.html -->
<rtk-notification
 [notification]="notification"
 [paused]="true"
 size="md">
</rtk-notification>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notification/#page","headline":"rtk-notification · Cloudflare Realtime docs","description":"API reference for rtk-notification component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notification/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-notifications component (Angular Library)
title: rtk-notifications
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-notifications

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notifications/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-notifications></rtk-notifications>
```

### With Properties

```html
<!-- component.html -->
<rtk-notifications
 [meeting]="meeting"
 size="md">
</rtk-notifications>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notifications/#page","headline":"rtk-notifications · Cloudflare Realtime docs","description":"API reference for rtk-notifications component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-notifications/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-overlay-modal component (Angular Library)
title: rtk-overlay-modal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-overlay-modal

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-overlay-modal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-overlay-modal></rtk-overlay-modal>
```

### With Properties

```html
<!-- component.html -->
<rtk-overlay-modal
 [meeting]="meeting">
</rtk-overlay-modal>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-overlay-modal/#page","headline":"rtk-overlay-modal · Cloudflare Realtime docs","description":"API reference for rtk-overlay-modal component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-overlay-modal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-paginated-list component (Angular Library)
title: rtk-paginated-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-paginated-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-paginated-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-paginated-list></rtk-paginated-list>
```

### With Properties

```html
<!-- component.html -->
<rtk-paginated-list
 [autoScroll]="true"
 [createNodes]="[]"
 emptyListLabel="example">
</rtk-paginated-list>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-paginated-list/#page","headline":"rtk-paginated-list · Cloudflare Realtime docs","description":"API reference for rtk-paginated-list component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-paginated-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participant component (Angular Library)
title: rtk-participant
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participant

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-participant></rtk-participant>
```

### With Properties

```html
<!-- component.html -->
<rtk-participant
 [meeting]="meeting"
 [participant]="participant"
 [view]="participantviewmode">
</rtk-participant>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant/#page","headline":"rtk-participant · Cloudflare Realtime docs","description":"API reference for rtk-participant component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participant-count component (Angular Library)
title: rtk-participant-count
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participant-count

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-count/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-participant-count></rtk-participant-count>
```

### With Properties

```html
<!-- component.html -->
<rtk-participant-count
 [meeting]="meeting"
 size="md">
</rtk-participant-count>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-count/#page","headline":"rtk-participant-count · Cloudflare Realtime docs","description":"API reference for rtk-participant-count component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-count/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participant-setup component (Angular Library)
title: rtk-participant-setup
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participant-setup

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-setup/index.md)|[Agent setup](https://developers.cloudflare.com/agent-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

```html
<!-- component.html -->
<rtk-participant-setup></rtk-participant-setup>
```

### With Properties

```html
<!-- 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>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-setup/#page","headline":"rtk-participant-setup · Cloudflare Realtime docs","description":"API reference for rtk-participant-setup component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-setup/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participant-tile component (Angular Library)
title: rtk-participant-tile
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participant-tile

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-tile/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-participant-tile></rtk-participant-tile>
```

### With Properties

```html
<!-- 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>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-tile/#page","headline":"rtk-participant-tile · Cloudflare Realtime docs","description":"API reference for rtk-participant-tile component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participant-tile/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants component (Angular Library)
title: rtk-participants
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-participants></rtk-participants>
```

### With Properties

```html
<!-- component.html -->
<rtk-participants
 [defaultParticipantsTabId]="participantstabid"
 [meeting]="meeting"
 size="md">
</rtk-participants>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants/#page","headline":"rtk-participants · Cloudflare Realtime docs","description":"API reference for rtk-participants component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-audio component (Angular Library)
title: rtk-participants-audio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-audio

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-audio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-participants-audio></rtk-participants-audio>
```

### With Properties

```html
<!-- component.html -->
<rtk-participants-audio
 [meeting]="meeting"
 [preloadedAudioElem]="htmlaudioelement">
</rtk-participants-audio>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-audio/#page","headline":"rtk-participants-audio · Cloudflare Realtime docs","description":"API reference for rtk-participants-audio component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-audio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-stage-list component (Angular Library)
title: rtk-participants-stage-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-stage-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-participants-stage-list></rtk-participants-stage-list>
```

### With Properties

```html
<!-- component.html -->
<rtk-participants-stage-list
 [hideHeader]="true"
 [meeting]="meeting"
 search="example">
</rtk-participants-stage-list>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-list/#page","headline":"rtk-participants-stage-list · Cloudflare Realtime docs","description":"API reference for rtk-participants-stage-list component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-stage-queue component (Angular Library)
title: rtk-participants-stage-queue
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-stage-queue

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-queue/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-participants-stage-queue></rtk-participants-stage-queue>
```

### With Properties

```html
<!-- component.html -->
<rtk-participants-stage-queue
 [meeting]="meeting"
 size="md"
 [view]="participantsviewmode">
</rtk-participants-stage-queue>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-queue/#page","headline":"rtk-participants-stage-queue · Cloudflare Realtime docs","description":"API reference for rtk-participants-stage-queue component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-stage-queue/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-toggle component (Angular Library)
title: rtk-participants-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of participants. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```html
<!-- component.html -->
<rtk-participants-toggle></rtk-participants-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-participants-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-participants-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-toggle/#page","headline":"rtk-participants-toggle · Cloudflare Realtime docs","description":"API reference for rtk-participants-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-viewer-list component (Angular Library)
title: rtk-participants-viewer-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-viewer-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-viewer-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-participants-viewer-list></rtk-participants-viewer-list>
```

### With Properties

```html
<!-- component.html -->
<rtk-participants-viewer-list
 [hideHeader]="true"
 [meeting]="meeting"
 search="example">
</rtk-participants-viewer-list>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-viewer-list/#page","headline":"rtk-participants-viewer-list · Cloudflare Realtime docs","description":"API reference for rtk-participants-viewer-list component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-viewer-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-waiting-list component (Angular Library)
title: rtk-participants-waiting-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-waiting-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-waiting-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-participants-waiting-list></rtk-participants-waiting-list>
```

### With Properties

```html
<!-- component.html -->
<rtk-participants-waiting-list
 [meeting]="meeting"
 size="md"
 [view]="participantsviewmode">
</rtk-participants-waiting-list>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-waiting-list/#page","headline":"rtk-participants-waiting-list · Cloudflare Realtime docs","description":"API reference for rtk-participants-waiting-list component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-participants-waiting-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-permissions-message component (Angular Library)
title: rtk-permissions-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-permissions-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-permissions-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-permissions-message></rtk-permissions-message>
```

### With Properties

```html
<!-- component.html -->
<rtk-permissions-message
 [meeting]="meeting">
</rtk-permissions-message>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-permissions-message/#page","headline":"rtk-permissions-message · Cloudflare Realtime docs","description":"API reference for rtk-permissions-message component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-permissions-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-pinned-message-selector component (Angular Library)
title: rtk-pinned-message-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-pinned-message-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pinned-message-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```html
<!-- component.html -->
<rtk-pinned-message-selector></rtk-pinned-message-selector>
```

### With Properties

```html
<!-- component.html -->
<rtk-pinned-message-selector
 [meeting]="meeting">
</rtk-pinned-message-selector>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pinned-message-selector/#page","headline":"rtk-pinned-message-selector · Cloudflare Realtime docs","description":"API reference for rtk-pinned-message-selector component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pinned-message-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-pip-toggle component (Angular Library)
title: rtk-pip-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-pip-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pip-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-pip-toggle></rtk-pip-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-pip-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-pip-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pip-toggle/#page","headline":"rtk-pip-toggle · Cloudflare Realtime docs","description":"API reference for rtk-pip-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-pip-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-plugin-main component (Angular Library)
title: rtk-plugin-main
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-plugin-main

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugin-main/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which renders a plugin's UI.

The plugin's `component` (an HTMLElement) is placed into this element's light DOM and projected into the shadow DOM layout via a `<slot>`. This ensures external CSS from the consuming application continues to apply to the plugin content.

## 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

```html
<!-- component.html -->
<rtk-plugin-main></rtk-plugin-main>
```

### With Properties

```html
<!-- component.html -->
<rtk-plugin-main
 [meeting]="meeting"
 [plugin]="rtkplugin">
</rtk-plugin-main>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugin-main/#page","headline":"rtk-plugin-main · Cloudflare Realtime docs","description":"API reference for rtk-plugin-main component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugin-main/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-plugins component (Angular Library)
title: rtk-plugins
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-plugins

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-plugins></rtk-plugins>
```

### With Properties

```html
<!-- component.html -->
<rtk-plugins
 [meeting]="meeting"
 size="md">
</rtk-plugins>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins/#page","headline":"rtk-plugins · Cloudflare Realtime docs","description":"API reference for rtk-plugins component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-plugins-toggle component (Angular Library)
title: rtk-plugins-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-plugins-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of plugins. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```html
<!-- component.html -->
<rtk-plugins-toggle></rtk-plugins-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-plugins-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-plugins-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins-toggle/#page","headline":"rtk-plugins-toggle · Cloudflare Realtime docs","description":"API reference for rtk-plugins-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-plugins-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-poll component (Angular Library)
title: rtk-poll
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-poll

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-poll></rtk-poll>
```

### With Properties

```html
<!-- component.html -->
<rtk-poll
 [permissions]="rtkpermissionspreset"
 [poll]="poll"
 self="example">
</rtk-poll>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll/#page","headline":"rtk-poll · Cloudflare Realtime docs","description":"API reference for rtk-poll component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-poll-form component (Angular Library)
title: rtk-poll-form
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-poll-form

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll-form/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-poll-form></rtk-poll-form>
```

### With Properties

```html
<!-- component.html -->
<rtk-poll-form
 [iconPack]="defaultIconPack"
 [t]="rtki18n">
</rtk-poll-form>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll-form/#page","headline":"rtk-poll-form · Cloudflare Realtime docs","description":"API reference for rtk-poll-form component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-poll-form/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-polls component (Angular Library)
title: rtk-polls
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-polls

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-polls></rtk-polls>
```

### With Properties

```html
<!-- component.html -->
<rtk-polls
 [meeting]="meeting"
 size="md">
</rtk-polls>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls/#page","headline":"rtk-polls · Cloudflare Realtime docs","description":"API reference for rtk-polls component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-polls-toggle component (Angular Library)
title: rtk-polls-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-polls-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```ts
{ 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

```html
<!-- component.html -->
<rtk-polls-toggle></rtk-polls-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-polls-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-polls-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls-toggle/#page","headline":"rtk-polls-toggle · Cloudflare Realtime docs","description":"API reference for rtk-polls-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-polls-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-recording-indicator component (Angular Library)
title: rtk-recording-indicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-recording-indicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-recording-indicator></rtk-recording-indicator>
```

### With Properties

```html
<!-- component.html -->
<rtk-recording-indicator
 [meeting]="meeting"
 size="md">
</rtk-recording-indicator>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-indicator/#page","headline":"rtk-recording-indicator · Cloudflare Realtime docs","description":"API reference for rtk-recording-indicator component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-recording-toggle component (Angular Library)
title: rtk-recording-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-recording-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-recording-toggle></rtk-recording-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-recording-toggle
 [disabled]="true"
 [meeting]="meeting"
 size="md">
</rtk-recording-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-toggle/#page","headline":"rtk-recording-toggle · Cloudflare Realtime docs","description":"API reference for rtk-recording-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-recording-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-screen-share-toggle component (Angular Library)
title: rtk-screen-share-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-screen-share-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screen-share-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-screen-share-toggle></rtk-screen-share-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-screen-share-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-screen-share-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screen-share-toggle/#page","headline":"rtk-screen-share-toggle · Cloudflare Realtime docs","description":"API reference for rtk-screen-share-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screen-share-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-screenshare-view component (Angular Library)
title: rtk-screenshare-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-screenshare-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screenshare-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-screenshare-view></rtk-screenshare-view>
```

### With Properties

```html
<!-- 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>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screenshare-view/#page","headline":"rtk-screenshare-view · Cloudflare Realtime docs","description":"API reference for rtk-screenshare-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-screenshare-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-settings component (Angular Library)
title: rtk-settings
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-settings

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-settings></rtk-settings>
```

### With Properties

```html
<!-- component.html -->
<rtk-settings
 [meeting]="meeting"
 size="md">
</rtk-settings>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings/#page","headline":"rtk-settings · Cloudflare Realtime docs","description":"API reference for rtk-settings component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-settings-audio component (Angular Library)
title: rtk-settings-audio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-settings-audio

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-audio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```html
<!-- component.html -->
<rtk-settings-audio></rtk-settings-audio>
```

### With Properties

```html
<!-- component.html -->
<rtk-settings-audio
 [meeting]="meeting"
 size="md">
</rtk-settings-audio>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-audio/#page","headline":"rtk-settings-audio · Cloudflare Realtime docs","description":"API reference for rtk-settings-audio component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-audio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-settings-toggle component (Angular Library)
title: rtk-settings-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-settings-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of settings module. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```html
<!-- component.html -->
<rtk-settings-toggle></rtk-settings-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-settings-toggle
 size="md"
 variant="button">
</rtk-settings-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-toggle/#page","headline":"rtk-settings-toggle · Cloudflare Realtime docs","description":"API reference for rtk-settings-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-settings-video component (Angular Library)
title: rtk-settings-video
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-settings-video

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-video/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your camera devices and your video preferences. Emits `rtkStateUpdate` event with data for toggling mirroring of self video:

```ts
{
 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

```html
<!-- component.html -->
<rtk-settings-video></rtk-settings-video>
```

### With Properties

```html
<!-- component.html -->
<rtk-settings-video
 [meeting]="meeting"
 size="md">
</rtk-settings-video>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-video/#page","headline":"rtk-settings-video · Cloudflare Realtime docs","description":"API reference for rtk-settings-video component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-settings-video/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-setup-screen component (Angular Library)
title: rtk-setup-screen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-setup-screen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-setup-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-setup-screen></rtk-setup-screen>
```

### With Properties

```html
<!-- component.html -->
<rtk-setup-screen
 [meeting]="meeting"
 size="md">
</rtk-setup-screen>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-setup-screen/#page","headline":"rtk-setup-screen · Cloudflare Realtime docs","description":"API reference for rtk-setup-screen component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-setup-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-sidebar component (Angular Library)
title: rtk-sidebar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-sidebar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-sidebar></rtk-sidebar>
```

### With Properties

```html
<!-- component.html -->
<rtk-sidebar
 [defaultSection]="rtksidebarsection"
 [enabledSections]="[]"
 [meeting]="meeting">
</rtk-sidebar>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar/#page","headline":"rtk-sidebar · Cloudflare Realtime docs","description":"API reference for rtk-sidebar component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-sidebar-ui component (Angular Library)
title: rtk-sidebar-ui
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-sidebar-ui

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar-ui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-sidebar-ui></rtk-sidebar-ui>
```

### With Properties

```html
<!-- component.html -->
<rtk-sidebar-ui
 currentTab="example"
 [focusCloseButton]="true"
 [hideCloseAction]="true">
</rtk-sidebar-ui>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar-ui/#page","headline":"rtk-sidebar-ui · Cloudflare Realtime docs","description":"API reference for rtk-sidebar-ui component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-sidebar-ui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-simple-grid component (Angular Library)
title: rtk-simple-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-simple-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-simple-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-simple-grid></rtk-simple-grid>
```

### With Properties

```html
<!-- component.html -->
<rtk-simple-grid
 aspectRatio="example"
 gap="42"
 [meeting]="meeting">
</rtk-simple-grid>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-simple-grid/#page","headline":"rtk-simple-grid · Cloudflare Realtime docs","description":"API reference for rtk-simple-grid component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-simple-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-speaker-selector component (Angular Library)
title: rtk-speaker-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-speaker-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-speaker-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```html
<!-- component.html -->
<rtk-speaker-selector></rtk-speaker-selector>
```

### With Properties

```html
<!-- component.html -->
<rtk-speaker-selector
 [meeting]="meeting"
 size="md"
 [variant]="'full' | 'inline'">
</rtk-speaker-selector>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-speaker-selector/#page","headline":"rtk-speaker-selector · Cloudflare Realtime docs","description":"API reference for rtk-speaker-selector component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-speaker-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-spinner component (Angular Library)
title: rtk-spinner
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-spinner

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spinner/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-spinner></rtk-spinner>
```

### With Properties

```html
<!-- component.html -->
<rtk-spinner
 size="md">
</rtk-spinner>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spinner/#page","headline":"rtk-spinner · Cloudflare Realtime docs","description":"API reference for rtk-spinner component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spinner/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-spotlight-grid component (Angular Library)
title: rtk-spotlight-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-spotlight-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-spotlight-grid></rtk-spotlight-grid>
```

### With Properties

```html
<!-- component.html -->
<rtk-spotlight-grid
 aspectRatio="example"
 gap="42"
 gridSize="md">
</rtk-spotlight-grid>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-grid/#page","headline":"rtk-spotlight-grid · Cloudflare Realtime docs","description":"API reference for rtk-spotlight-grid component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-spotlight-indicator component (Angular Library)
title: rtk-spotlight-indicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-spotlight-indicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-spotlight-indicator></rtk-spotlight-indicator>
```

### With Properties

```html
<!-- component.html -->
<rtk-spotlight-indicator
 [meeting]="meeting"
 size="md">
</rtk-spotlight-indicator>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-indicator/#page","headline":"rtk-spotlight-indicator · Cloudflare Realtime docs","description":"API reference for rtk-spotlight-indicator component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-spotlight-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-stage component (Angular Library)
title: rtk-stage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-stage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-stage></rtk-stage>
```

### With Properties

```html
<!-- component.html -->
<rtk-stage
 [iconPack]="defaultIconPack"
 [t]="rtki18n">
</rtk-stage>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage/#page","headline":"rtk-stage · Cloudflare Realtime docs","description":"API reference for rtk-stage component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-stage-toggle component (Angular Library)
title: rtk-stage-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-stage-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-stage-toggle></rtk-stage-toggle>
```

### With Properties

```html
<!-- component.html -->
<rtk-stage-toggle
 [meeting]="meeting"
 size="md"
 variant="button">
</rtk-stage-toggle>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage-toggle/#page","headline":"rtk-stage-toggle · Cloudflare Realtime docs","description":"API reference for rtk-stage-toggle component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-stage-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-switch component (Angular Library)
title: rtk-switch
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-switch

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-switch/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-switch></rtk-switch>
```

### With Properties

```html
<!-- component.html -->
<rtk-switch
 [checked]="true"
 [disabled]="true"
 [readonly]="true">
</rtk-switch>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-switch/#page","headline":"rtk-switch · Cloudflare Realtime docs","description":"API reference for rtk-switch component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-switch/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-tab-bar component (Angular Library)
title: rtk-tab-bar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-tab-bar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tab-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-tab-bar></rtk-tab-bar>
```

### With Properties

```html
<!-- component.html -->
<rtk-tab-bar
 [activeTab]="tab"
 [layout]="gridlayout1"
 [meeting]="meeting">
</rtk-tab-bar>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tab-bar/#page","headline":"rtk-tab-bar · Cloudflare Realtime docs","description":"API reference for rtk-tab-bar component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tab-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-text-composer-view component (Angular Library)
title: rtk-text-composer-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-text-composer-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-composer-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-text-composer-view></rtk-text-composer-view>
```

### With Properties

```html
<!-- component.html -->
<rtk-text-composer-view
 [disabled]="true"
 [keyDownHandler]="(e: keyboardevent)"
 maxLength="42">
</rtk-text-composer-view>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-composer-view/#page","headline":"rtk-text-composer-view · Cloudflare Realtime docs","description":"API reference for rtk-text-composer-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-composer-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-text-message component (Angular Library)
title: rtk-text-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-text-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<!-- component.html -->
<rtk-text-message></rtk-text-message>
```

### With Properties

```html
<!-- component.html -->
<rtk-text-message
 [isContinued]="true"
 [message]="textmessage"
 [now]="date">
</rtk-text-message>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message/#page","headline":"rtk-text-message · Cloudflare Realtime docs","description":"API reference for rtk-text-message component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-text-message-view component (Angular Library)
title: rtk-text-message-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-text-message-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-text-message-view></rtk-text-message-view>
```

### With Properties

```html
<!-- component.html -->
<rtk-text-message-view
 [isMarkdown]="true"
 text="example">
</rtk-text-message-view>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message-view/#page","headline":"rtk-text-message-view · Cloudflare Realtime docs","description":"API reference for rtk-text-message-view component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-text-message-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-tooltip component (Angular Library)
title: rtk-tooltip
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-tooltip

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tooltip/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-tooltip></rtk-tooltip>
```

### With Properties

```html
<!-- component.html -->
<rtk-tooltip
 delay="42"
 [disabled]="true"
 [kind]="tooltipkind">
</rtk-tooltip>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tooltip/#page","headline":"rtk-tooltip · Cloudflare Realtime docs","description":"API reference for rtk-tooltip component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-tooltip/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-transcript component (Angular Library)
title: rtk-transcript
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-transcript

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcript/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-transcript></rtk-transcript>
```

### With Properties

```html
<!-- component.html -->
<rtk-transcript
 [t]="rtki18n"
 transcript="example">
</rtk-transcript>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcript/#page","headline":"rtk-transcript · Cloudflare Realtime docs","description":"API reference for rtk-transcript component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcript/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-transcripts component (Angular Library)
title: rtk-transcripts
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-transcripts

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcripts/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-transcripts></rtk-transcripts>
```

### With Properties

```html
<!-- component.html -->
<rtk-transcripts
 [meeting]="meeting">
</rtk-transcripts>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcripts/#page","headline":"rtk-transcripts · Cloudflare Realtime docs","description":"API reference for rtk-transcripts component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-transcripts/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ui-provider component (Angular Library)
title: rtk-ui-provider
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ui-provider

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ui-provider/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-ui-provider></rtk-ui-provider>
```

### With Properties

```html
<!-- component.html -->
<rtk-ui-provider
 [config]="defaultUiConfig"
 [mode]="meeting"
 [showSetupScreen]="true">
</rtk-ui-provider>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ui-provider/#page","headline":"rtk-ui-provider · Cloudflare Realtime docs","description":"API reference for rtk-ui-provider component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-ui-provider/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-viewer-count component (Angular Library)
title: rtk-viewer-count
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-viewer-count

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-viewer-count/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<!-- component.html -->
<rtk-viewer-count></rtk-viewer-count>
```

### With Properties

```html
<!-- component.html -->
<rtk-viewer-count
 [meeting]="meeting"
 variant="primary">
</rtk-viewer-count>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-viewer-count/#page","headline":"rtk-viewer-count · Cloudflare Realtime docs","description":"API reference for rtk-viewer-count component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-viewer-count/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-virtualized-participant-list component (Angular Library)
title: rtk-virtualized-participant-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-virtualized-participant-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-virtualized-participant-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-virtualized-participant-list></rtk-virtualized-participant-list>
```

### With Properties

```html
<!-- component.html -->
<rtk-virtualized-participant-list
 bufferedItemsCount="42"
 [emptyListElement]="htmlelement"
 itemHeight="42">
</rtk-virtualized-participant-list>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-virtualized-participant-list/#page","headline":"rtk-virtualized-participant-list · Cloudflare Realtime docs","description":"API reference for rtk-virtualized-participant-list component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-virtualized-participant-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-waiting-screen component (Angular Library)
title: rtk-waiting-screen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-waiting-screen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-waiting-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<!-- component.html -->
<rtk-waiting-screen></rtk-waiting-screen>
```

### With Properties

```html
<!-- component.html -->
<rtk-waiting-screen
 [meeting]="meeting">
</rtk-waiting-screen>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-waiting-screen/#page","headline":"rtk-waiting-screen · Cloudflare Realtime docs","description":"API reference for rtk-waiting-screen component (Angular Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/angular/rtk-waiting-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Complete API reference for Web Components (HTML) library components
title: Web Components (HTML)
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Web Components (HTML)

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/#page","headline":"Web Components (HTML) · Cloudflare Realtime docs","description":"Complete API reference for Web Components (HTML) library components","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ai component (Web Components (HTML) Library)
title: rtk-ai
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ai

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-ai></rtk-ai>
```

### With Properties

```html
<rtk-ai
 size="md">
</rtk-ai>
```

```html
<script>
  const el = document.querySelector("rtk-ai");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai/#page","headline":"rtk-ai · Cloudflare Realtime docs","description":"API reference for rtk-ai component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ai-toggle component (Web Components (HTML) Library)
title: rtk-ai-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ai-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-ai-toggle></rtk-ai-toggle>
```

### With Properties

```html
<rtk-ai-toggle
 size="md"
 variant"button">
</rtk-ai-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-ai-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-toggle/#page","headline":"rtk-ai-toggle · Cloudflare Realtime docs","description":"API reference for rtk-ai-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ai-transcriptions component (Web Components (HTML) Library)
title: rtk-ai-transcriptions
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ai-transcriptions

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-transcriptions/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property              | Type           | Required | Default       | Description            |
| --------------------- | -------------- | -------- | ------------- | ---------------------- |
| initialTranscriptions | Transcript\[\] | ✅        | \-            | Initial transcriptions |
| meeting               | Meeting        | ✅        | \-            | Meeting object         |
| t                     | RtkI18n        | ❌        | useLanguage() | Language               |

## Usage Examples

### Basic Usage

```html
<rtk-ai-transcriptions></rtk-ai-transcriptions>
```

### With Properties

```html
<rtk-ai-transcriptions>
</rtk-ai-transcriptions>
```

```html
<script>
  const el = document.querySelector("rtk-ai-transcriptions");

  el.initialTranscriptions= [];
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-transcriptions/#page","headline":"rtk-ai-transcriptions · Cloudflare Realtime docs","description":"API reference for rtk-ai-transcriptions component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ai-transcriptions/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-audio-grid component (Web Components (HTML) Library)
title: rtk-audio-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-audio-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-audio-grid></rtk-audio-grid>
```

### With Properties

```html
<rtk-audio-grid>
</rtk-audio-grid>
```

```html
<script>
  const el = document.querySelector("rtk-audio-grid");

  el.config= defaultUiConfig
  el.hideSelf= true;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-grid/#page","headline":"rtk-audio-grid · Cloudflare Realtime docs","description":"API reference for rtk-audio-grid component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-audio-tile component (Web Components (HTML) Library)
title: rtk-audio-tile
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-audio-tile

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-tile/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-audio-tile></rtk-audio-tile>
```

### With Properties

```html
<rtk-audio-tile>
</rtk-audio-tile>
```

```html
<script>
  const el = document.querySelector("rtk-audio-tile");

  el.config= defaultUiConfig
  el.meeting= meeting
  el.participant= participant
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-tile/#page","headline":"rtk-audio-tile · Cloudflare Realtime docs","description":"API reference for rtk-audio-tile component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-tile/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-audio-visualizer component (Web Components (HTML) Library)
title: rtk-audio-visualizer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-audio-visualizer

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-visualizer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-audio-visualizer></rtk-audio-visualizer>
```

### With Properties

```html
<rtk-audio-visualizer>
</rtk-audio-visualizer>
```

```html
<script>
  const el = document.querySelector("rtk-audio-visualizer");

  el.hideMuted= true;
  el.isScreenShare= true;
  el.participant= participant
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-visualizer/#page","headline":"rtk-audio-visualizer · Cloudflare Realtime docs","description":"API reference for rtk-audio-visualizer component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-audio-visualizer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-avatar component (Web Components (HTML) Library)
title: rtk-avatar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-avatar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-avatar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-avatar></rtk-avatar>
```

### With Properties

```html
<rtk-avatar
 participant="example"
 size="md"
 variant="circular">
</rtk-avatar>
```

```html
<script>
  const el = document.querySelector("rtk-avatar");

  el.participant= {};
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-avatar/#page","headline":"rtk-avatar · Cloudflare Realtime docs","description":"API reference for rtk-avatar component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-avatar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-breakout-room-manager component (Web Components (HTML) Library)
title: rtk-breakout-room-manager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-breakout-room-manager

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-manager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-breakout-room-manager></rtk-breakout-room-manager>
```

### With Properties

```html
<rtk-breakout-room-manager>
</rtk-breakout-room-manager>
```

```html
<script>
  const el = document.querySelector("rtk-breakout-room-manager");

  el.allowDelete= true;
  el.assigningParticipants= true;
  el.defaultExpanded= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-manager/#page","headline":"rtk-breakout-room-manager · Cloudflare Realtime docs","description":"API reference for rtk-breakout-room-manager component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-manager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-breakout-room-participants component (Web Components (HTML) Library)
title: rtk-breakout-room-participants
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-breakout-room-participants

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-participants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-breakout-room-participants></rtk-breakout-room-participants>
```

### With Properties

```html
<rtk-breakout-room-participants
 participantIds="example"
 selectedParticipantIds="example">
</rtk-breakout-room-participants>
```

```html
<script>
  const el = document.querySelector("rtk-breakout-room-participants");

  el.meeting= meeting
  el.participantIds= [];
  el.selectedParticipantIds= [];
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-participants/#page","headline":"rtk-breakout-room-participants · Cloudflare Realtime docs","description":"API reference for rtk-breakout-room-participants component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-room-participants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-breakout-rooms-manager component (Web Components (HTML) Library)
title: rtk-breakout-rooms-manager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-breakout-rooms-manager

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-manager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-breakout-rooms-manager></rtk-breakout-rooms-manager>
```

### With Properties

```html
<rtk-breakout-rooms-manager>
</rtk-breakout-rooms-manager>
```

```html
<script>
  const el = document.querySelector("rtk-breakout-rooms-manager");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-manager/#page","headline":"rtk-breakout-rooms-manager · Cloudflare Realtime docs","description":"API reference for rtk-breakout-rooms-manager component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-manager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-breakout-rooms-toggle component (Web Components (HTML) Library)
title: rtk-breakout-rooms-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-breakout-rooms-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-breakout-rooms-toggle></rtk-breakout-rooms-toggle>
```

### With Properties

```html
<rtk-breakout-rooms-toggle
 size="md">
</rtk-breakout-rooms-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-breakout-rooms-toggle");

  el.iconPack= defaultIconPack
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-toggle/#page","headline":"rtk-breakout-rooms-toggle · Cloudflare Realtime docs","description":"API reference for rtk-breakout-rooms-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-breakout-rooms-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-broadcast-message-modal component (Web Components (HTML) Library)
title: rtk-broadcast-message-modal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-broadcast-message-modal

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-broadcast-message-modal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-broadcast-message-modal></rtk-broadcast-message-modal>
```

### With Properties

```html
<rtk-broadcast-message-modal>
</rtk-broadcast-message-modal>
```

```html
<script>
  const el = document.querySelector("rtk-broadcast-message-modal");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-broadcast-message-modal/#page","headline":"rtk-broadcast-message-modal · Cloudflare Realtime docs","description":"API reference for rtk-broadcast-message-modal component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-broadcast-message-modal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-button component (Web Components (HTML) Library)
title: rtk-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-button></rtk-button>
```

### With Properties

```html
<rtk-button>
</rtk-button>
```

```html
<script>
  const el = document.querySelector("rtk-button");

  el.disabled= true;
  el.reverse= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-button/#page","headline":"rtk-button · Cloudflare Realtime docs","description":"API reference for rtk-button component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-camera-selector component (Web Components (HTML) Library)
title: rtk-camera-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-camera-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```html
<rtk-camera-selector></rtk-camera-selector>
```

### With Properties

```html
<rtk-camera-selector
 size="md">
</rtk-camera-selector>
```

```html
<script>
  const el = document.querySelector("rtk-camera-selector");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-selector/#page","headline":"rtk-camera-selector · Cloudflare Realtime docs","description":"API reference for rtk-camera-selector component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-camera-toggle component (Web Components (HTML) Library)
title: rtk-camera-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-camera-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-camera-toggle></rtk-camera-toggle>
```

### With Properties

```html
<rtk-camera-toggle
 size="md"
 variant"button">
</rtk-camera-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-camera-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-toggle/#page","headline":"rtk-camera-toggle · Cloudflare Realtime docs","description":"API reference for rtk-camera-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-camera-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-caption-toggle component (Web Components (HTML) Library)
title: rtk-caption-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-caption-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-caption-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-caption-toggle></rtk-caption-toggle>
```

### With Properties

```html
<rtk-caption-toggle
 size="md"
 variant"button">
</rtk-caption-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-caption-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-caption-toggle/#page","headline":"rtk-caption-toggle · Cloudflare Realtime docs","description":"API reference for rtk-caption-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-caption-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat component (Web Components (HTML) Library)
title: rtk-chat
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-chat></rtk-chat>
```

### With Properties

```html
<rtk-chat
 size="md">
</rtk-chat>
```

```html
<script>
  const el = document.querySelector("rtk-chat");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat/#page","headline":"rtk-chat · Cloudflare Realtime docs","description":"API reference for rtk-chat component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-composer-ui component (Web Components (HTML) Library)
title: rtk-chat-composer-ui
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-composer-ui

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-ui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<rtk-chat-composer-ui></rtk-chat-composer-ui>
```

### With Properties

```html
<rtk-chat-composer-ui
 size="md">
</rtk-chat-composer-ui>
```

```html
<script>
  const el = document.querySelector("rtk-chat-composer-ui");

  el.canSendFiles= true;
  el.canSendTextMessage= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-ui/#page","headline":"rtk-chat-composer-ui · Cloudflare Realtime docs","description":"API reference for rtk-chat-composer-ui component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-ui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-composer-view component (Web Components (HTML) Library)
title: rtk-chat-composer-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-composer-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-chat-composer-view></rtk-chat-composer-view>
```

### With Properties

```html
<rtk-chat-composer-view
 inputTextPlaceholder="example">
</rtk-chat-composer-view>
```

```html
<script>
  const el = document.querySelector("rtk-chat-composer-view");

  el.canSendFiles= true;
  el.canSendTextMessage= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-view/#page","headline":"rtk-chat-composer-view · Cloudflare Realtime docs","description":"API reference for rtk-chat-composer-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-composer-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-header component (Web Components (HTML) Library)
title: rtk-chat-header
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-header

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-header/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

_No properties available._

## Usage Examples

### Basic Usage

```html
<rtk-chat-header></rtk-chat-header>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-header/#page","headline":"rtk-chat-header · Cloudflare Realtime docs","description":"API reference for rtk-chat-header component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-header/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-message component (Web Components (HTML) Library)
title: rtk-chat-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<rtk-chat-message></rtk-chat-message>
```

### With Properties

```html
<rtk-chat-message>
</rtk-chat-message>
```

```html
<script>
  const el = document.querySelector("rtk-chat-message");

  el.alignRight= true;
  el.canDelete= true;
  el.canEdit= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-message/#page","headline":"rtk-chat-message · Cloudflare Realtime docs","description":"API reference for rtk-chat-message component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-messages-ui component (Web Components (HTML) Library)
title: rtk-chat-messages-ui
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-messages-ui

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<rtk-chat-messages-ui></rtk-chat-messages-ui>
```

### With Properties

```html
<rtk-chat-messages-ui
 selectedGroup="example">
</rtk-chat-messages-ui>
```

```html
<script>
  const el = document.querySelector("rtk-chat-messages-ui");

  el.canPinMessages= true;
  el.messages= [];
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui/#page","headline":"rtk-chat-messages-ui · Cloudflare Realtime docs","description":"API reference for rtk-chat-messages-ui component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-messages-ui-paginated component (Web Components (HTML) Library)
title: rtk-chat-messages-ui-paginated
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-messages-ui-paginated

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui-paginated/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-chat-messages-ui-paginated></rtk-chat-messages-ui-paginated>
```

### With Properties

```html
<rtk-chat-messages-ui-paginated
 size="md">
</rtk-chat-messages-ui-paginated>
```

```html
<script>
  const el = document.querySelector("rtk-chat-messages-ui-paginated");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui-paginated/#page","headline":"rtk-chat-messages-ui-paginated · Cloudflare Realtime docs","description":"API reference for rtk-chat-messages-ui-paginated component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-messages-ui-paginated/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-search-results component (Web Components (HTML) Library)
title: rtk-chat-search-results
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-search-results

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-search-results/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<rtk-chat-search-results></rtk-chat-search-results>
```

### With Properties

```html
<rtk-chat-search-results
 channelId="example"
 query="example">
</rtk-chat-search-results>
```

```html
<script>
  const el = document.querySelector("rtk-chat-search-results");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-search-results/#page","headline":"rtk-chat-search-results · Cloudflare Realtime docs","description":"API reference for rtk-chat-search-results component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-search-results/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-selector component (Web Components (HTML) Library)
title: rtk-chat-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-chat-selector></rtk-chat-selector>
```

### With Properties

```html
<rtk-chat-selector
 size="md">
</rtk-chat-selector>
```

```html
<script>
  const el = document.querySelector("rtk-chat-selector");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector/#page","headline":"rtk-chat-selector · Cloudflare Realtime docs","description":"API reference for rtk-chat-selector component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-selector-ui component (Web Components (HTML) Library)
title: rtk-chat-selector-ui
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-selector-ui

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector-ui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-chat-selector-ui></rtk-chat-selector-ui>
```

### With Properties

```html
<rtk-chat-selector-ui
 selectedGroupId="example"
 selfUserId="example">
</rtk-chat-selector-ui>
```

```html
<script>
  const el = document.querySelector("rtk-chat-selector-ui");

  el.groups= [];
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector-ui/#page","headline":"rtk-chat-selector-ui · Cloudflare Realtime docs","description":"API reference for rtk-chat-selector-ui component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-selector-ui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-chat-toggle component (Web Components (HTML) Library)
title: rtk-chat-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-chat-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```ts
{ 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

```html
<rtk-chat-toggle></rtk-chat-toggle>
```

### With Properties

```html
<rtk-chat-toggle
 size="md"
 variant"button">
</rtk-chat-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-chat-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-toggle/#page","headline":"rtk-chat-toggle · Cloudflare Realtime docs","description":"API reference for rtk-chat-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-chat-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-clock component (Web Components (HTML) Library)
title: rtk-clock
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-clock

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-clock/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-clock></rtk-clock>
```

### With Properties

```html
<rtk-clock
 size="md">
</rtk-clock>
```

```html
<script>
  const el = document.querySelector("rtk-clock");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-clock/#page","headline":"rtk-clock · Cloudflare Realtime docs","description":"API reference for rtk-clock component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-clock/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-confirmation-modal component (Web Components (HTML) Library)
title: rtk-confirmation-modal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-confirmation-modal

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-confirmation-modal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-confirmation-modal></rtk-confirmation-modal>
```

### With Properties

```html
<rtk-confirmation-modal>
</rtk-confirmation-modal>
```

```html
<script>
  const el = document.querySelector("rtk-confirmation-modal");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-confirmation-modal/#page","headline":"rtk-confirmation-modal · Cloudflare Realtime docs","description":"API reference for rtk-confirmation-modal component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-confirmation-modal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-controlbar component (Web Components (HTML) Library)
title: rtk-controlbar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-controlbar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-controlbar></rtk-controlbar>
```

### With Properties

```html
<rtk-controlbar
 size="md">
</rtk-controlbar>
```

```html
<script>
  const el = document.querySelector("rtk-controlbar");

  el.disableRender= true;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar/#page","headline":"rtk-controlbar · Cloudflare Realtime docs","description":"API reference for rtk-controlbar component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-controlbar-button component (Web Components (HTML) Library)
title: rtk-controlbar-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-controlbar-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-controlbar-button></rtk-controlbar-button>
```

### With Properties

```html
<rtk-controlbar-button
 icon="example">
</rtk-controlbar-button>
```

```html
<script>
  const el = document.querySelector("rtk-controlbar-button");

  el.brandIcon= true;
  el.disabled= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar-button/#page","headline":"rtk-controlbar-button · Cloudflare Realtime docs","description":"API reference for rtk-controlbar-button component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-controlbar-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-counter component (Web Components (HTML) Library)
title: rtk-counter
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-counter

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-counter/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-counter></rtk-counter>
```

### With Properties

```html
<rtk-counter
 size="md">
</rtk-counter>
```

```html
<script>
  const el = document.querySelector("rtk-counter");

  el.minValue= 42;
  el.value= 42;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-counter/#page","headline":"rtk-counter · Cloudflare Realtime docs","description":"API reference for rtk-counter component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-counter/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger component (Web Components (HTML) Library)
title: rtk-debugger
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-debugger></rtk-debugger>
```

### With Properties

```html
<rtk-debugger
 size="md">
</rtk-debugger>
```

```html
<script>
  const el = document.querySelector("rtk-debugger");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger/#page","headline":"rtk-debugger · Cloudflare Realtime docs","description":"API reference for rtk-debugger component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-audio component (Web Components (HTML) Library)
title: rtk-debugger-audio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-audio

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-audio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-debugger-audio></rtk-debugger-audio>
```

### With Properties

```html
<rtk-debugger-audio
 size="md">
</rtk-debugger-audio>
```

```html
<script>
  const el = document.querySelector("rtk-debugger-audio");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-audio/#page","headline":"rtk-debugger-audio · Cloudflare Realtime docs","description":"API reference for rtk-debugger-audio component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-audio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-screenshare component (Web Components (HTML) Library)
title: rtk-debugger-screenshare
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-screenshare

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-screenshare/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-debugger-screenshare></rtk-debugger-screenshare>
```

### With Properties

```html
<rtk-debugger-screenshare
 size="md">
</rtk-debugger-screenshare>
```

```html
<script>
  const el = document.querySelector("rtk-debugger-screenshare");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-screenshare/#page","headline":"rtk-debugger-screenshare · Cloudflare Realtime docs","description":"API reference for rtk-debugger-screenshare component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-screenshare/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-system component (Web Components (HTML) Library)
title: rtk-debugger-system
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-system

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-system/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-debugger-system></rtk-debugger-system>
```

### With Properties

```html
<rtk-debugger-system
 size="md">
</rtk-debugger-system>
```

```html
<script>
  const el = document.querySelector("rtk-debugger-system");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-system/#page","headline":"rtk-debugger-system · Cloudflare Realtime docs","description":"API reference for rtk-debugger-system component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-system/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-toggle component (Web Components (HTML) Library)
title: rtk-debugger-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-debugger-toggle></rtk-debugger-toggle>
```

### With Properties

```html
<rtk-debugger-toggle
 size="md"
 variant"button">
</rtk-debugger-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-debugger-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-toggle/#page","headline":"rtk-debugger-toggle · Cloudflare Realtime docs","description":"API reference for rtk-debugger-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-debugger-video component (Web Components (HTML) Library)
title: rtk-debugger-video
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-debugger-video

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-video/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-debugger-video></rtk-debugger-video>
```

### With Properties

```html
<rtk-debugger-video
 size="md">
</rtk-debugger-video>
```

```html
<script>
  const el = document.querySelector("rtk-debugger-video");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-video/#page","headline":"rtk-debugger-video · Cloudflare Realtime docs","description":"API reference for rtk-debugger-video component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-debugger-video/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-dialog component (Web Components (HTML) Library)
title: rtk-dialog
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-dialog

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-dialog></rtk-dialog>
```

### With Properties

```html
<rtk-dialog>
</rtk-dialog>
```

```html
<script>
  const el = document.querySelector("rtk-dialog");

  el.disableEscapeKey= true;
  el.hideCloseButton= true;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog/#page","headline":"rtk-dialog · Cloudflare Realtime docs","description":"API reference for rtk-dialog component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-dialog-manager component (Web Components (HTML) Library)
title: rtk-dialog-manager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-dialog-manager

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog-manager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-dialog-manager></rtk-dialog-manager>
```

### With Properties

```html
<rtk-dialog-manager
 size="md">
</rtk-dialog-manager>
```

```html
<script>
  const el = document.querySelector("rtk-dialog-manager");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog-manager/#page","headline":"rtk-dialog-manager · Cloudflare Realtime docs","description":"API reference for rtk-dialog-manager component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-dialog-manager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-draft-attachment-view component (Web Components (HTML) Library)
title: rtk-draft-attachment-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-draft-attachment-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-draft-attachment-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-draft-attachment-view></rtk-draft-attachment-view>
```

### With Properties

```html
<rtk-draft-attachment-view>
</rtk-draft-attachment-view>
```

```html
<script>
  const el = document.querySelector("rtk-draft-attachment-view");

  el.attachment= {};
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-draft-attachment-view/#page","headline":"rtk-draft-attachment-view · Cloudflare Realtime docs","description":"API reference for rtk-draft-attachment-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-draft-attachment-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-emoji-picker component (Web Components (HTML) Library)
title: rtk-emoji-picker
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-emoji-picker

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-emoji-picker></rtk-emoji-picker>
```

### With Properties

```html
<rtk-emoji-picker>
</rtk-emoji-picker>
```

```html
<script>
  const el = document.querySelector("rtk-emoji-picker");

  el.focusWhenOpened= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker/#page","headline":"rtk-emoji-picker · Cloudflare Realtime docs","description":"API reference for rtk-emoji-picker component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-emoji-picker-button component (Web Components (HTML) Library)
title: rtk-emoji-picker-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-emoji-picker-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property | Type      | Required | Default         | Description            |
| -------- | --------- | -------- | --------------- | ---------------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack              |
| isActive | boolean   | ✅        | \-              | Active state indicator |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language               |

## Usage Examples

### Basic Usage

```html
<rtk-emoji-picker-button></rtk-emoji-picker-button>
```

### With Properties

```html
<rtk-emoji-picker-button>
</rtk-emoji-picker-button>
```

```html
<script>
  const el = document.querySelector("rtk-emoji-picker-button");

  el.isActive= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker-button/#page","headline":"rtk-emoji-picker-button · Cloudflare Realtime docs","description":"API reference for rtk-emoji-picker-button component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-emoji-picker-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ended-screen component (Web Components (HTML) Library)
title: rtk-ended-screen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ended-screen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ended-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-ended-screen></rtk-ended-screen>
```

### With Properties

```html
<rtk-ended-screen
 size="md">
</rtk-ended-screen>
```

```html
<script>
  const el = document.querySelector("rtk-ended-screen");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ended-screen/#page","headline":"rtk-ended-screen · Cloudflare Realtime docs","description":"API reference for rtk-ended-screen component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ended-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-file-dropzone component (Web Components (HTML) Library)
title: rtk-file-dropzone
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-file-dropzone

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-dropzone/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-file-dropzone></rtk-file-dropzone>
```

### With Properties

```html
<rtk-file-dropzone>
</rtk-file-dropzone>
```

```html
<script>
  const el = document.querySelector("rtk-file-dropzone");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-dropzone/#page","headline":"rtk-file-dropzone · Cloudflare Realtime docs","description":"API reference for rtk-file-dropzone component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-dropzone/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-file-message component (Web Components (HTML) Library)
title: rtk-file-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-file-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<rtk-file-message></rtk-file-message>
```

### With Properties

```html
<rtk-file-message>
</rtk-file-message>
```

```html
<script>
  const el = document.querySelector("rtk-file-message");

  el.isContinued= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message/#page","headline":"rtk-file-message · Cloudflare Realtime docs","description":"API reference for rtk-file-message component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-file-message-view component (Web Components (HTML) Library)
title: rtk-file-message-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-file-message-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-file-message-view></rtk-file-message-view>
```

### With Properties

```html
<rtk-file-message-view
 name="example"
 url="example">
</rtk-file-message-view>
```

```html
<script>
  const el = document.querySelector("rtk-file-message-view");

  el.size= 42;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message-view/#page","headline":"rtk-file-message-view · Cloudflare Realtime docs","description":"API reference for rtk-file-message-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-message-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-file-picker-button component (Web Components (HTML) Library)
title: rtk-file-picker-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-file-picker-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-picker-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-file-picker-button></rtk-file-picker-button>
```

### With Properties

```html
<rtk-file-picker-button
 filter="example"
 label="example">
</rtk-file-picker-button>
```

```html
<script>
  const el = document.querySelector("rtk-file-picker-button");

  el.icon= defaultIconPack
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-picker-button/#page","headline":"rtk-file-picker-button · Cloudflare Realtime docs","description":"API reference for rtk-file-picker-button component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-file-picker-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-fullscreen-toggle component (Web Components (HTML) Library)
title: rtk-fullscreen-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-fullscreen-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-fullscreen-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-fullscreen-toggle></rtk-fullscreen-toggle>
```

### With Properties

```html
<rtk-fullscreen-toggle
 size="md"
 variant"button">
</rtk-fullscreen-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-fullscreen-toggle");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-fullscreen-toggle/#page","headline":"rtk-fullscreen-toggle · Cloudflare Realtime docs","description":"API reference for rtk-fullscreen-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-fullscreen-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-grid component (Web Components (HTML) Library)
title: rtk-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-grid></rtk-grid>
```

### With Properties

```html
<rtk-grid
 aspectRatio="example"
 gridSize="md">
</rtk-grid>
```

```html
<script>
  const el = document.querySelector("rtk-grid");

  el.gap= 42;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid/#page","headline":"rtk-grid · Cloudflare Realtime docs","description":"API reference for rtk-grid component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-grid-pagination component (Web Components (HTML) Library)
title: rtk-grid-pagination
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-grid-pagination

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid-pagination/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-grid-pagination></rtk-grid-pagination>
```

### With Properties

```html
<rtk-grid-pagination
 size="md">
</rtk-grid-pagination>
```

```html
<script>
  const el = document.querySelector("rtk-grid-pagination");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid-pagination/#page","headline":"rtk-grid-pagination · Cloudflare Realtime docs","description":"API reference for rtk-grid-pagination component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-grid-pagination/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-header component (Web Components (HTML) Library)
title: rtk-header
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-header

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-header/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-header></rtk-header>
```

### With Properties

```html
<rtk-header
 size="md">
</rtk-header>
```

```html
<script>
  const el = document.querySelector("rtk-header");

  el.disableRender= true;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-header/#page","headline":"rtk-header · Cloudflare Realtime docs","description":"API reference for rtk-header component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-header/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-icon component (Web Components (HTML) Library)
title: rtk-icon
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-icon

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-icon/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-icon></rtk-icon>
```

### With Properties

```html
<rtk-icon
 icon="example"
 size="md"
 variant="primary">
</rtk-icon>
```

```html
<script>
  const el = document.querySelector("rtk-icon");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-icon/#page","headline":"rtk-icon · Cloudflare Realtime docs","description":"API reference for rtk-icon component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-icon/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-idle-screen component (Web Components (HTML) Library)
title: rtk-idle-screen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-idle-screen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-idle-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-idle-screen></rtk-idle-screen>
```

### With Properties

```html
<rtk-idle-screen>
</rtk-idle-screen>
```

```html
<script>
  const el = document.querySelector("rtk-idle-screen");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-idle-screen/#page","headline":"rtk-idle-screen · Cloudflare Realtime docs","description":"API reference for rtk-idle-screen component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-idle-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-image-message component (Web Components (HTML) Library)
title: rtk-image-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-image-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<rtk-image-message></rtk-image-message>
```

### With Properties

```html
<rtk-image-message>
</rtk-image-message>
```

```html
<script>
  const el = document.querySelector("rtk-image-message");

  el.isContinued= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message/#page","headline":"rtk-image-message · Cloudflare Realtime docs","description":"API reference for rtk-image-message component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-image-message-view component (Web Components (HTML) Library)
title: rtk-image-message-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-image-message-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-image-message-view></rtk-image-message-view>
```

### With Properties

```html
<rtk-image-message-view
 url="example">
</rtk-image-message-view>
```

```html
<script>
  const el = document.querySelector("rtk-image-message-view");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message-view/#page","headline":"rtk-image-message-view · Cloudflare Realtime docs","description":"API reference for rtk-image-message-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-message-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-image-viewer component (Web Components (HTML) Library)
title: rtk-image-viewer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-image-viewer

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-viewer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-image-viewer></rtk-image-viewer>
```

### With Properties

```html
<rtk-image-viewer
 size="md">
</rtk-image-viewer>
```

```html
<script>
  const el = document.querySelector("rtk-image-viewer");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-viewer/#page","headline":"rtk-image-viewer · Cloudflare Realtime docs","description":"API reference for rtk-image-viewer component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-image-viewer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-information-tooltip component (Web Components (HTML) Library)
title: rtk-information-tooltip
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-information-tooltip

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-information-tooltip/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property | Type      | Required | Default         | Description |
| -------- | --------- | -------- | --------------- | ----------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack   |

## Usage Examples

### Basic Usage

```html
<rtk-information-tooltip></rtk-information-tooltip>
```

### With Properties

```html
<rtk-information-tooltip>
</rtk-information-tooltip>
```

```html
<script>
  const el = document.querySelector("rtk-information-tooltip");

  el.iconPack= defaultIconPack
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-information-tooltip/#page","headline":"rtk-information-tooltip · Cloudflare Realtime docs","description":"API reference for rtk-information-tooltip component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-information-tooltip/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-join-stage component (Web Components (HTML) Library)
title: rtk-join-stage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-join-stage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-join-stage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-join-stage></rtk-join-stage>
```

### With Properties

```html
<rtk-join-stage
 size="md">
</rtk-join-stage>
```

```html
<script>
  const el = document.querySelector("rtk-join-stage");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-join-stage/#page","headline":"rtk-join-stage · Cloudflare Realtime docs","description":"API reference for rtk-join-stage component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-join-stage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-leave-button component (Web Components (HTML) Library)
title: rtk-leave-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-leave-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-leave-button></rtk-leave-button>
```

### With Properties

```html
<rtk-leave-button
 size="md"
 variant"button">
</rtk-leave-button>
```

```html
<script>
  const el = document.querySelector("rtk-leave-button");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-button/#page","headline":"rtk-leave-button · Cloudflare Realtime docs","description":"API reference for rtk-leave-button component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-leave-meeting component (Web Components (HTML) Library)
title: rtk-leave-meeting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-leave-meeting

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-meeting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-leave-meeting></rtk-leave-meeting>
```

### With Properties

```html
<rtk-leave-meeting>
</rtk-leave-meeting>
```

```html
<script>
  const el = document.querySelector("rtk-leave-meeting");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-meeting/#page","headline":"rtk-leave-meeting · Cloudflare Realtime docs","description":"API reference for rtk-leave-meeting component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-leave-meeting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-livestream-indicator component (Web Components (HTML) Library)
title: rtk-livestream-indicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-livestream-indicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-livestream-indicator></rtk-livestream-indicator>
```

### With Properties

```html
<rtk-livestream-indicator
 size="md">
</rtk-livestream-indicator>
```

```html
<script>
  const el = document.querySelector("rtk-livestream-indicator");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-indicator/#page","headline":"rtk-livestream-indicator · Cloudflare Realtime docs","description":"API reference for rtk-livestream-indicator component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-livestream-player component (Web Components (HTML) Library)
title: rtk-livestream-player
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-livestream-player

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-player/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-livestream-player></rtk-livestream-player>
```

### With Properties

```html
<rtk-livestream-player
 size="md">
</rtk-livestream-player>
```

```html
<script>
  const el = document.querySelector("rtk-livestream-player");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-player/#page","headline":"rtk-livestream-player · Cloudflare Realtime docs","description":"API reference for rtk-livestream-player component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-player/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-livestream-toggle component (Web Components (HTML) Library)
title: rtk-livestream-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-livestream-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-livestream-toggle></rtk-livestream-toggle>
```

### With Properties

```html
<rtk-livestream-toggle
 size="md"
 variant"button">
</rtk-livestream-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-livestream-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-toggle/#page","headline":"rtk-livestream-toggle · Cloudflare Realtime docs","description":"API reference for rtk-livestream-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-livestream-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-logo component (Web Components (HTML) Library)
title: rtk-logo
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-logo

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-logo/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-logo></rtk-logo>
```

### With Properties

```html
<rtk-logo
 logoUrl="example">
</rtk-logo>
```

```html
<script>
  const el = document.querySelector("rtk-logo");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-logo/#page","headline":"rtk-logo · Cloudflare Realtime docs","description":"API reference for rtk-logo component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-logo/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-markdown-view component (Web Components (HTML) Library)
title: rtk-markdown-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-markdown-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-markdown-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-markdown-view></rtk-markdown-view>
```

### With Properties

```html
<rtk-markdown-view
 text="example">
</rtk-markdown-view>
```

```html
<script>
  const el = document.querySelector("rtk-markdown-view");

  el.maxLength= 42;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-markdown-view/#page","headline":"rtk-markdown-view · Cloudflare Realtime docs","description":"API reference for rtk-markdown-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-markdown-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-meeting component (Web Components (HTML) Library)
title: rtk-meeting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-meeting

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-meeting></rtk-meeting>
```

### With Properties

```html
<rtk-meeting>
</rtk-meeting>
```

```html
<script>
  const el = document.querySelector("rtk-meeting");

  el.applyDesignSystem= true;
  el.config= defaultUiConfig
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting/#page","headline":"rtk-meeting · Cloudflare Realtime docs","description":"API reference for rtk-meeting component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-meeting-title component (Web Components (HTML) Library)
title: rtk-meeting-title
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-meeting-title

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting-title/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-meeting-title></rtk-meeting-title>
```

### With Properties

```html
<rtk-meeting-title>
</rtk-meeting-title>
```

```html
<script>
  const el = document.querySelector("rtk-meeting-title");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting-title/#page","headline":"rtk-meeting-title · Cloudflare Realtime docs","description":"API reference for rtk-meeting-title component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-meeting-title/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-menu component (Web Components (HTML) Library)
title: rtk-menu
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-menu

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-menu></rtk-menu>
```

### With Properties

```html
<rtk-menu
 size="md">
</rtk-menu>
```

```html
<script>
  const el = document.querySelector("rtk-menu");

  el.offset= 42;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu/#page","headline":"rtk-menu · Cloudflare Realtime docs","description":"API reference for rtk-menu component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-menu-item component (Web Components (HTML) Library)
title: rtk-menu-item
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-menu-item

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-item/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-menu-item></rtk-menu-item>
```

### With Properties

```html
<rtk-menu-item
 size="md">
</rtk-menu-item>
```

```html
<script>
  const el = document.querySelector("rtk-menu-item");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-item/#page","headline":"rtk-menu-item · Cloudflare Realtime docs","description":"API reference for rtk-menu-item component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-item/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-menu-list component (Web Components (HTML) Library)
title: rtk-menu-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-menu-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-menu-list></rtk-menu-list>
```

### With Properties

```html
<rtk-menu-list>
</rtk-menu-list>
```

```html
<script>
  const el = document.querySelector("rtk-menu-list");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-list/#page","headline":"rtk-menu-list · Cloudflare Realtime docs","description":"API reference for rtk-menu-list component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-menu-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-message-list-view component (Web Components (HTML) Library)
title: rtk-message-list-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-message-list-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-list-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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 prepended |
| messages          | Message\[\]                       | ✅        | \-              | Messages to render                                                            |
| renderer          | (message: Message, index: number) | ✅        | \-              | Render function of the message                                                |
| visibleItemsCount | number                            | ✅        | \-              | Maximum visible messages                                                      |

## Usage Examples

### Basic Usage

```html
<rtk-message-list-view></rtk-message-list-view>
```

### With Properties

```html
<rtk-message-list-view>
</rtk-message-list-view>
```

```html
<script>
  const el = document.querySelector("rtk-message-list-view");

  el.estimateItemSize= 42;
  el.messages= [];
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-list-view/#page","headline":"rtk-message-list-view · Cloudflare Realtime docs","description":"API reference for rtk-message-list-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-list-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-message-view component (Web Components (HTML) Library)
title: rtk-message-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-message-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-message-view></rtk-message-view>
```

### With Properties

```html
<rtk-message-view
 authorName="example"
 avatarUrl="example">
</rtk-message-view>
```

```html
<script>
  const el = document.querySelector("rtk-message-view");

  el.actions= [];
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-view/#page","headline":"rtk-message-view · Cloudflare Realtime docs","description":"API reference for rtk-message-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-message-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-mic-toggle component (Web Components (HTML) Library)
title: rtk-mic-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-mic-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mic-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-mic-toggle></rtk-mic-toggle>
```

### With Properties

```html
<rtk-mic-toggle
 size="md"
 variant"button">
</rtk-mic-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-mic-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mic-toggle/#page","headline":"rtk-mic-toggle · Cloudflare Realtime docs","description":"API reference for rtk-mic-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mic-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-microphone-selector component (Web Components (HTML) Library)
title: rtk-microphone-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-microphone-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-microphone-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```html
<rtk-microphone-selector></rtk-microphone-selector>
```

### With Properties

```html
<rtk-microphone-selector
 size="md">
</rtk-microphone-selector>
```

```html
<script>
  const el = document.querySelector("rtk-microphone-selector");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-microphone-selector/#page","headline":"rtk-microphone-selector · Cloudflare Realtime docs","description":"API reference for rtk-microphone-selector component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-microphone-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-mixed-grid component (Web Components (HTML) Library)
title: rtk-mixed-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-mixed-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mixed-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-mixed-grid></rtk-mixed-grid>
```

### With Properties

```html
<rtk-mixed-grid
 aspectRatio="example"
 gridSize="md">
</rtk-mixed-grid>
```

```html
<script>
  const el = document.querySelector("rtk-mixed-grid");

  el.gap= 42;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mixed-grid/#page","headline":"rtk-mixed-grid · Cloudflare Realtime docs","description":"API reference for rtk-mixed-grid component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mixed-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-more-toggle component (Web Components (HTML) Library)
title: rtk-more-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-more-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-more-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of a more menu. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```html
<rtk-more-toggle></rtk-more-toggle>
```

### With Properties

```html
<rtk-more-toggle
 size="md">
</rtk-more-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-more-toggle");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-more-toggle/#page","headline":"rtk-more-toggle · Cloudflare Realtime docs","description":"API reference for rtk-more-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-more-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-mute-all-button component (Web Components (HTML) Library)
title: rtk-mute-all-button
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-mute-all-button

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-mute-all-button></rtk-mute-all-button>
```

### With Properties

```html
<rtk-mute-all-button
 size="md"
 variant"button">
</rtk-mute-all-button>
```

```html
<script>
  const el = document.querySelector("rtk-mute-all-button");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-button/#page","headline":"rtk-mute-all-button · Cloudflare Realtime docs","description":"API reference for rtk-mute-all-button component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-mute-all-confirmation component (Web Components (HTML) Library)
title: rtk-mute-all-confirmation
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-mute-all-confirmation

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-confirmation/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-mute-all-confirmation></rtk-mute-all-confirmation>
```

### With Properties

```html
<rtk-mute-all-confirmation>
</rtk-mute-all-confirmation>
```

```html
<script>
  const el = document.querySelector("rtk-mute-all-confirmation");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-confirmation/#page","headline":"rtk-mute-all-confirmation · Cloudflare Realtime docs","description":"API reference for rtk-mute-all-confirmation component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-mute-all-confirmation/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-name-tag component (Web Components (HTML) Library)
title: rtk-name-tag
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-name-tag

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-name-tag/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-name-tag></rtk-name-tag>
```

### With Properties

```html
<rtk-name-tag>
</rtk-name-tag>
```

```html
<script>
  const el = document.querySelector("rtk-name-tag");

  el.isScreenShare= true;
  el.meeting= meeting
  el.participant= participant
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-name-tag/#page","headline":"rtk-name-tag · Cloudflare Realtime docs","description":"API reference for rtk-name-tag component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-name-tag/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-network-indicator component (Web Components (HTML) Library)
title: rtk-network-indicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-network-indicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-network-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-network-indicator></rtk-network-indicator>
```

### With Properties

```html
<rtk-network-indicator>
</rtk-network-indicator>
```

```html
<script>
  const el = document.querySelector("rtk-network-indicator");

  el.isScreenShare= true;
  el.meeting= meeting
  el.participant= participant
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-network-indicator/#page","headline":"rtk-network-indicator · Cloudflare Realtime docs","description":"API reference for rtk-network-indicator component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-network-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-notification component (Web Components (HTML) Library)
title: rtk-notification
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-notification

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-notification/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-notification></rtk-notification>
```

### With Properties

```html
<rtk-notification
 size="md">
</rtk-notification>
```

```html
<script>
  const el = document.querySelector("rtk-notification");

  el.paused= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-notification/#page","headline":"rtk-notification · Cloudflare Realtime docs","description":"API reference for rtk-notification component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-notification/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-notifications component (Web Components (HTML) Library)
title: rtk-notifications
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-notifications

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-notifications/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-notifications></rtk-notifications>
```

### With Properties

```html
<rtk-notifications
 size="md">
</rtk-notifications>
```

```html
<script>
  const el = document.querySelector("rtk-notifications");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-notifications/#page","headline":"rtk-notifications · Cloudflare Realtime docs","description":"API reference for rtk-notifications component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-notifications/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-overlay-modal component (Web Components (HTML) Library)
title: rtk-overlay-modal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-overlay-modal

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-overlay-modal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-overlay-modal></rtk-overlay-modal>
```

### With Properties

```html
<rtk-overlay-modal>
</rtk-overlay-modal>
```

```html
<script>
  const el = document.querySelector("rtk-overlay-modal");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-overlay-modal/#page","headline":"rtk-overlay-modal · Cloudflare Realtime docs","description":"API reference for rtk-overlay-modal component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-overlay-modal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-paginated-list component (Web Components (HTML) Library)
title: rtk-paginated-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-paginated-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-paginated-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-paginated-list></rtk-paginated-list>
```

### With Properties

```html
<rtk-paginated-list
 emptyListLabel="example">
</rtk-paginated-list>
```

```html
<script>
  const el = document.querySelector("rtk-paginated-list");

  el.autoScroll= true;
  el.createNodes= [];
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-paginated-list/#page","headline":"rtk-paginated-list · Cloudflare Realtime docs","description":"API reference for rtk-paginated-list component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-paginated-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participant component (Web Components (HTML) Library)
title: rtk-participant
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participant

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-participant></rtk-participant>
```

### With Properties

```html
<rtk-participant>
</rtk-participant>
```

```html
<script>
  const el = document.querySelector("rtk-participant");

  el.meeting= meeting
  el.participant= participant
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant/#page","headline":"rtk-participant · Cloudflare Realtime docs","description":"API reference for rtk-participant component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participant-count component (Web Components (HTML) Library)
title: rtk-participant-count
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participant-count

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-count/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-participant-count></rtk-participant-count>
```

### With Properties

```html
<rtk-participant-count
 size="md">
</rtk-participant-count>
```

```html
<script>
  const el = document.querySelector("rtk-participant-count");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-count/#page","headline":"rtk-participant-count · Cloudflare Realtime docs","description":"API reference for rtk-participant-count component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-count/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participant-setup component (Web Components (HTML) Library)
title: rtk-participant-setup
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participant-setup

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-setup/index.md)|[Agent setup](https://developers.cloudflare.com/agent-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

```html
<rtk-participant-setup></rtk-participant-setup>
```

### With Properties

```html
<rtk-participant-setup>
</rtk-participant-setup>
```

```html
<script>
  const el = document.querySelector("rtk-participant-setup");

  el.isPreview= true;
  el.participant= participant
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-setup/#page","headline":"rtk-participant-setup · Cloudflare Realtime docs","description":"API reference for rtk-participant-setup component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-setup/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participant-tile component (Web Components (HTML) Library)
title: rtk-participant-tile
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participant-tile

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-tile/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-participant-tile></rtk-participant-tile>
```

### With Properties

```html
<rtk-participant-tile>
</rtk-participant-tile>
```

```html
<script>
  const el = document.querySelector("rtk-participant-tile");

  el.isPreview= true;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-tile/#page","headline":"rtk-participant-tile · Cloudflare Realtime docs","description":"API reference for rtk-participant-tile component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participant-tile/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants component (Web Components (HTML) Library)
title: rtk-participants
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-participants></rtk-participants>
```

### With Properties

```html
<rtk-participants
 size="md">
</rtk-participants>
```

```html
<script>
  const el = document.querySelector("rtk-participants");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants/#page","headline":"rtk-participants · Cloudflare Realtime docs","description":"API reference for rtk-participants component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-audio component (Web Components (HTML) Library)
title: rtk-participants-audio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-audio

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-audio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-participants-audio></rtk-participants-audio>
```

### With Properties

```html
<rtk-participants-audio>
</rtk-participants-audio>
```

```html
<script>
  const el = document.querySelector("rtk-participants-audio");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-audio/#page","headline":"rtk-participants-audio · Cloudflare Realtime docs","description":"API reference for rtk-participants-audio component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-audio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-stage-list component (Web Components (HTML) Library)
title: rtk-participants-stage-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-stage-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-participants-stage-list></rtk-participants-stage-list>
```

### With Properties

```html
<rtk-participants-stage-list
 search="example">
</rtk-participants-stage-list>
```

```html
<script>
  const el = document.querySelector("rtk-participants-stage-list");

  el.hideHeader= true;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-list/#page","headline":"rtk-participants-stage-list · Cloudflare Realtime docs","description":"API reference for rtk-participants-stage-list component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-stage-queue component (Web Components (HTML) Library)
title: rtk-participants-stage-queue
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-stage-queue

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-queue/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-participants-stage-queue></rtk-participants-stage-queue>
```

### With Properties

```html
<rtk-participants-stage-queue
 size="md">
</rtk-participants-stage-queue>
```

```html
<script>
  const el = document.querySelector("rtk-participants-stage-queue");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-queue/#page","headline":"rtk-participants-stage-queue · Cloudflare Realtime docs","description":"API reference for rtk-participants-stage-queue component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-stage-queue/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-toggle component (Web Components (HTML) Library)
title: rtk-participants-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of participants. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```html
<rtk-participants-toggle></rtk-participants-toggle>
```

### With Properties

```html
<rtk-participants-toggle
 size="md"
 variant"button">
</rtk-participants-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-participants-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-toggle/#page","headline":"rtk-participants-toggle · Cloudflare Realtime docs","description":"API reference for rtk-participants-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-viewer-list component (Web Components (HTML) Library)
title: rtk-participants-viewer-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-viewer-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-viewer-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-participants-viewer-list></rtk-participants-viewer-list>
```

### With Properties

```html
<rtk-participants-viewer-list
 search="example">
</rtk-participants-viewer-list>
```

```html
<script>
  const el = document.querySelector("rtk-participants-viewer-list");

  el.hideHeader= true;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-viewer-list/#page","headline":"rtk-participants-viewer-list · Cloudflare Realtime docs","description":"API reference for rtk-participants-viewer-list component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-viewer-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-participants-waiting-list component (Web Components (HTML) Library)
title: rtk-participants-waiting-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-participants-waiting-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-waiting-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-participants-waiting-list></rtk-participants-waiting-list>
```

### With Properties

```html
<rtk-participants-waiting-list
 size="md">
</rtk-participants-waiting-list>
```

```html
<script>
  const el = document.querySelector("rtk-participants-waiting-list");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-waiting-list/#page","headline":"rtk-participants-waiting-list · Cloudflare Realtime docs","description":"API reference for rtk-participants-waiting-list component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-participants-waiting-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-permissions-message component (Web Components (HTML) Library)
title: rtk-permissions-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-permissions-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-permissions-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-permissions-message></rtk-permissions-message>
```

### With Properties

```html
<rtk-permissions-message>
</rtk-permissions-message>
```

```html
<script>
  const el = document.querySelector("rtk-permissions-message");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-permissions-message/#page","headline":"rtk-permissions-message · Cloudflare Realtime docs","description":"API reference for rtk-permissions-message component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-permissions-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-pinned-message-selector component (Web Components (HTML) Library)
title: rtk-pinned-message-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-pinned-message-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-pinned-message-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```html
<rtk-pinned-message-selector></rtk-pinned-message-selector>
```

### With Properties

```html
<rtk-pinned-message-selector>
</rtk-pinned-message-selector>
```

```html
<script>
  const el = document.querySelector("rtk-pinned-message-selector");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-pinned-message-selector/#page","headline":"rtk-pinned-message-selector · Cloudflare Realtime docs","description":"API reference for rtk-pinned-message-selector component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-pinned-message-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-pip-toggle component (Web Components (HTML) Library)
title: rtk-pip-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-pip-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-pip-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-pip-toggle></rtk-pip-toggle>
```

### With Properties

```html
<rtk-pip-toggle
 size="md"
 variant"button">
</rtk-pip-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-pip-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-pip-toggle/#page","headline":"rtk-pip-toggle · Cloudflare Realtime docs","description":"API reference for rtk-pip-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-pip-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-plugin-main component (Web Components (HTML) Library)
title: rtk-plugin-main
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-plugin-main

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugin-main/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which renders a plugin's UI.

The plugin's `component` (an HTMLElement) is placed into this element's light DOM and projected into the shadow DOM layout via a `<slot>`. This ensures external CSS from the consuming application continues to apply to the plugin content.

## 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

```html
<rtk-plugin-main></rtk-plugin-main>
```

### With Properties

```html
<rtk-plugin-main>
</rtk-plugin-main>
```

```html
<script>
  const el = document.querySelector("rtk-plugin-main");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugin-main/#page","headline":"rtk-plugin-main · Cloudflare Realtime docs","description":"API reference for rtk-plugin-main component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugin-main/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-plugins component (Web Components (HTML) Library)
title: rtk-plugins
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-plugins

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-plugins></rtk-plugins>
```

### With Properties

```html
<rtk-plugins
 size="md">
</rtk-plugins>
```

```html
<script>
  const el = document.querySelector("rtk-plugins");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins/#page","headline":"rtk-plugins · Cloudflare Realtime docs","description":"API reference for rtk-plugins component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-plugins-toggle component (Web Components (HTML) Library)
title: rtk-plugins-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-plugins-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of plugins. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```html
<rtk-plugins-toggle></rtk-plugins-toggle>
```

### With Properties

```html
<rtk-plugins-toggle
 size="md"
 variant"button">
</rtk-plugins-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-plugins-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins-toggle/#page","headline":"rtk-plugins-toggle · Cloudflare Realtime docs","description":"API reference for rtk-plugins-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-plugins-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-poll component (Web Components (HTML) Library)
title: rtk-poll
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-poll

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-poll></rtk-poll>
```

### With Properties

```html
<rtk-poll
 self="example">
</rtk-poll>
```

```html
<script>
  const el = document.querySelector("rtk-poll");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll/#page","headline":"rtk-poll · Cloudflare Realtime docs","description":"API reference for rtk-poll component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-poll-form component (Web Components (HTML) Library)
title: rtk-poll-form
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-poll-form

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll-form/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-poll-form></rtk-poll-form>
```

### With Properties

```html
<rtk-poll-form>
</rtk-poll-form>
```

```html
<script>
  const el = document.querySelector("rtk-poll-form");

  el.iconPack= defaultIconPack
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll-form/#page","headline":"rtk-poll-form · Cloudflare Realtime docs","description":"API reference for rtk-poll-form component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-poll-form/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-polls component (Web Components (HTML) Library)
title: rtk-polls
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-polls

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-polls></rtk-polls>
```

### With Properties

```html
<rtk-polls
 size="md">
</rtk-polls>
```

```html
<script>
  const el = document.querySelector("rtk-polls");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls/#page","headline":"rtk-polls · Cloudflare Realtime docs","description":"API reference for rtk-polls component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-polls-toggle component (Web Components (HTML) Library)
title: rtk-polls-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-polls-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```ts
{ 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

```html
<rtk-polls-toggle></rtk-polls-toggle>
```

### With Properties

```html
<rtk-polls-toggle
 size="md"
 variant"button">
</rtk-polls-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-polls-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls-toggle/#page","headline":"rtk-polls-toggle · Cloudflare Realtime docs","description":"API reference for rtk-polls-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-polls-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-recording-indicator component (Web Components (HTML) Library)
title: rtk-recording-indicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-recording-indicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-recording-indicator></rtk-recording-indicator>
```

### With Properties

```html
<rtk-recording-indicator
 size="md">
</rtk-recording-indicator>
```

```html
<script>
  const el = document.querySelector("rtk-recording-indicator");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-indicator/#page","headline":"rtk-recording-indicator · Cloudflare Realtime docs","description":"API reference for rtk-recording-indicator component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-recording-toggle component (Web Components (HTML) Library)
title: rtk-recording-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-recording-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-recording-toggle></rtk-recording-toggle>
```

### With Properties

```html
<rtk-recording-toggle
 size="md">
</rtk-recording-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-recording-toggle");

  el.disabled= true;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-toggle/#page","headline":"rtk-recording-toggle · Cloudflare Realtime docs","description":"API reference for rtk-recording-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-recording-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-screen-share-toggle component (Web Components (HTML) Library)
title: rtk-screen-share-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-screen-share-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-screen-share-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-screen-share-toggle></rtk-screen-share-toggle>
```

### With Properties

```html
<rtk-screen-share-toggle
 size="md"
 variant"button">
</rtk-screen-share-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-screen-share-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-screen-share-toggle/#page","headline":"rtk-screen-share-toggle · Cloudflare Realtime docs","description":"API reference for rtk-screen-share-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-screen-share-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-screenshare-view component (Web Components (HTML) Library)
title: rtk-screenshare-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-screenshare-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-screenshare-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-screenshare-view></rtk-screenshare-view>
```

### With Properties

```html
<rtk-screenshare-view>
</rtk-screenshare-view>
```

```html
<script>
  const el = document.querySelector("rtk-screenshare-view");

  el.hideFullScreenButton= true;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-screenshare-view/#page","headline":"rtk-screenshare-view · Cloudflare Realtime docs","description":"API reference for rtk-screenshare-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-screenshare-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-settings component (Web Components (HTML) Library)
title: rtk-settings
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-settings

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-settings></rtk-settings>
```

### With Properties

```html
<rtk-settings
 size="md">
</rtk-settings>
```

```html
<script>
  const el = document.querySelector("rtk-settings");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings/#page","headline":"rtk-settings · Cloudflare Realtime docs","description":"API reference for rtk-settings component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-settings-audio component (Web Components (HTML) Library)
title: rtk-settings-audio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-settings-audio

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-audio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```html
<rtk-settings-audio></rtk-settings-audio>
```

### With Properties

```html
<rtk-settings-audio
 size="md">
</rtk-settings-audio>
```

```html
<script>
  const el = document.querySelector("rtk-settings-audio");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-audio/#page","headline":"rtk-settings-audio · Cloudflare Realtime docs","description":"API reference for rtk-settings-audio component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-audio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-settings-toggle component (Web Components (HTML) Library)
title: rtk-settings-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-settings-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of settings module. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```html
<rtk-settings-toggle></rtk-settings-toggle>
```

### With Properties

```html
<rtk-settings-toggle
 size="md"
 variant"button">
</rtk-settings-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-settings-toggle");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-toggle/#page","headline":"rtk-settings-toggle · Cloudflare Realtime docs","description":"API reference for rtk-settings-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-settings-video component (Web Components (HTML) Library)
title: rtk-settings-video
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-settings-video

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-video/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your camera devices and your video preferences. Emits `rtkStateUpdate` event with data for toggling mirroring of self video:

```ts
{
 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

```html
<rtk-settings-video></rtk-settings-video>
```

### With Properties

```html
<rtk-settings-video
 size="md">
</rtk-settings-video>
```

```html
<script>
  const el = document.querySelector("rtk-settings-video");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-video/#page","headline":"rtk-settings-video · Cloudflare Realtime docs","description":"API reference for rtk-settings-video component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-settings-video/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-setup-screen component (Web Components (HTML) Library)
title: rtk-setup-screen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-setup-screen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-setup-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-setup-screen></rtk-setup-screen>
```

### With Properties

```html
<rtk-setup-screen
 size="md">
</rtk-setup-screen>
```

```html
<script>
  const el = document.querySelector("rtk-setup-screen");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-setup-screen/#page","headline":"rtk-setup-screen · Cloudflare Realtime docs","description":"API reference for rtk-setup-screen component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-setup-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-sidebar component (Web Components (HTML) Library)
title: rtk-sidebar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-sidebar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-sidebar></rtk-sidebar>
```

### With Properties

```html
<rtk-sidebar>
</rtk-sidebar>
```

```html
<script>
  const el = document.querySelector("rtk-sidebar");

  el.enabledSections= [];
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar/#page","headline":"rtk-sidebar · Cloudflare Realtime docs","description":"API reference for rtk-sidebar component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-sidebar-ui component (Web Components (HTML) Library)
title: rtk-sidebar-ui
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-sidebar-ui

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar-ui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-sidebar-ui></rtk-sidebar-ui>
```

### With Properties

```html
<rtk-sidebar-ui
 currentTab="example">
</rtk-sidebar-ui>
```

```html
<script>
  const el = document.querySelector("rtk-sidebar-ui");

  el.focusCloseButton= true;
  el.hideCloseAction= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar-ui/#page","headline":"rtk-sidebar-ui · Cloudflare Realtime docs","description":"API reference for rtk-sidebar-ui component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-sidebar-ui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-simple-grid component (Web Components (HTML) Library)
title: rtk-simple-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-simple-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-simple-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-simple-grid></rtk-simple-grid>
```

### With Properties

```html
<rtk-simple-grid
 aspectRatio="example">
</rtk-simple-grid>
```

```html
<script>
  const el = document.querySelector("rtk-simple-grid");

  el.gap= 42;
  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-simple-grid/#page","headline":"rtk-simple-grid · Cloudflare Realtime docs","description":"API reference for rtk-simple-grid component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-simple-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-speaker-selector component (Web Components (HTML) Library)
title: rtk-speaker-selector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-speaker-selector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-speaker-selector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```html
<rtk-speaker-selector></rtk-speaker-selector>
```

### With Properties

```html
<rtk-speaker-selector
 size="md">
</rtk-speaker-selector>
```

```html
<script>
  const el = document.querySelector("rtk-speaker-selector");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-speaker-selector/#page","headline":"rtk-speaker-selector · Cloudflare Realtime docs","description":"API reference for rtk-speaker-selector component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-speaker-selector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-spinner component (Web Components (HTML) Library)
title: rtk-spinner
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-spinner

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-spinner/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-spinner></rtk-spinner>
```

### With Properties

```html
<rtk-spinner
 size="md">
</rtk-spinner>
```

```html
<script>
  const el = document.querySelector("rtk-spinner");

</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-spinner/#page","headline":"rtk-spinner · Cloudflare Realtime docs","description":"API reference for rtk-spinner component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-spinner/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-spotlight-grid component (Web Components (HTML) Library)
title: rtk-spotlight-grid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-spotlight-grid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-grid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-spotlight-grid></rtk-spotlight-grid>
```

### With Properties

```html
<rtk-spotlight-grid
 aspectRatio="example"
 gridSize="md">
</rtk-spotlight-grid>
```

```html
<script>
  const el = document.querySelector("rtk-spotlight-grid");

  el.gap= 42;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-grid/#page","headline":"rtk-spotlight-grid · Cloudflare Realtime docs","description":"API reference for rtk-spotlight-grid component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-spotlight-indicator component (Web Components (HTML) Library)
title: rtk-spotlight-indicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-spotlight-indicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-indicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-spotlight-indicator></rtk-spotlight-indicator>
```

### With Properties

```html
<rtk-spotlight-indicator
 size="md">
</rtk-spotlight-indicator>
```

```html
<script>
  const el = document.querySelector("rtk-spotlight-indicator");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-indicator/#page","headline":"rtk-spotlight-indicator · Cloudflare Realtime docs","description":"API reference for rtk-spotlight-indicator component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-spotlight-indicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-stage component (Web Components (HTML) Library)
title: rtk-stage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-stage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-stage></rtk-stage>
```

### With Properties

```html
<rtk-stage>
</rtk-stage>
```

```html
<script>
  const el = document.querySelector("rtk-stage");

  el.iconPack= defaultIconPack
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage/#page","headline":"rtk-stage · Cloudflare Realtime docs","description":"API reference for rtk-stage component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-stage-toggle component (Web Components (HTML) Library)
title: rtk-stage-toggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-stage-toggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-stage-toggle></rtk-stage-toggle>
```

### With Properties

```html
<rtk-stage-toggle
 size="md"
 variant"button">
</rtk-stage-toggle>
```

```html
<script>
  const el = document.querySelector("rtk-stage-toggle");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage-toggle/#page","headline":"rtk-stage-toggle · Cloudflare Realtime docs","description":"API reference for rtk-stage-toggle component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-stage-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-switch component (Web Components (HTML) Library)
title: rtk-switch
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-switch

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-switch/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-switch></rtk-switch>
```

### With Properties

```html
<rtk-switch>
</rtk-switch>
```

```html
<script>
  const el = document.querySelector("rtk-switch");

  el.checked= true;
  el.disabled= true;
  el.readonly= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-switch/#page","headline":"rtk-switch · Cloudflare Realtime docs","description":"API reference for rtk-switch component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-switch/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-tab-bar component (Web Components (HTML) Library)
title: rtk-tab-bar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-tab-bar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-tab-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-tab-bar></rtk-tab-bar>
```

### With Properties

```html
<rtk-tab-bar>
</rtk-tab-bar>
```

```html
<script>
  const el = document.querySelector("rtk-tab-bar");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-tab-bar/#page","headline":"rtk-tab-bar · Cloudflare Realtime docs","description":"API reference for rtk-tab-bar component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-tab-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-text-composer-view component (Web Components (HTML) Library)
title: rtk-text-composer-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-text-composer-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-composer-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-text-composer-view></rtk-text-composer-view>
```

### With Properties

```html
<rtk-text-composer-view>
</rtk-text-composer-view>
```

```html
<script>
  const el = document.querySelector("rtk-text-composer-view");

  el.disabled= true;
  el.maxLength= 42;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-composer-view/#page","headline":"rtk-text-composer-view · Cloudflare Realtime docs","description":"API reference for rtk-text-composer-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-composer-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-text-message component (Web Components (HTML) Library)
title: rtk-text-message
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-text-message

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```html
<rtk-text-message></rtk-text-message>
```

### With Properties

```html
<rtk-text-message>
</rtk-text-message>
```

```html
<script>
  const el = document.querySelector("rtk-text-message");

  el.isContinued= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message/#page","headline":"rtk-text-message · Cloudflare Realtime docs","description":"API reference for rtk-text-message component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-text-message-view component (Web Components (HTML) Library)
title: rtk-text-message-view
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-text-message-view

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-text-message-view></rtk-text-message-view>
```

### With Properties

```html
<rtk-text-message-view
 text="example">
</rtk-text-message-view>
```

```html
<script>
  const el = document.querySelector("rtk-text-message-view");

  el.isMarkdown= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message-view/#page","headline":"rtk-text-message-view · Cloudflare Realtime docs","description":"API reference for rtk-text-message-view component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-text-message-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-tooltip component (Web Components (HTML) Library)
title: rtk-tooltip
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-tooltip

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-tooltip/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-tooltip></rtk-tooltip>
```

### With Properties

```html
<rtk-tooltip>
</rtk-tooltip>
```

```html
<script>
  const el = document.querySelector("rtk-tooltip");

  el.delay= 42;
  el.disabled= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-tooltip/#page","headline":"rtk-tooltip · Cloudflare Realtime docs","description":"API reference for rtk-tooltip component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-tooltip/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-transcript component (Web Components (HTML) Library)
title: rtk-transcript
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-transcript

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcript/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-transcript></rtk-transcript>
```

### With Properties

```html
<rtk-transcript
 transcript="example">
</rtk-transcript>
```

```html
<script>
  const el = document.querySelector("rtk-transcript");

  el.transcript= {};
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcript/#page","headline":"rtk-transcript · Cloudflare Realtime docs","description":"API reference for rtk-transcript component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcript/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-transcripts component (Web Components (HTML) Library)
title: rtk-transcripts
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-transcripts

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcripts/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-transcripts></rtk-transcripts>
```

### With Properties

```html
<rtk-transcripts>
</rtk-transcripts>
```

```html
<script>
  const el = document.querySelector("rtk-transcripts");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcripts/#page","headline":"rtk-transcripts · Cloudflare Realtime docs","description":"API reference for rtk-transcripts component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-transcripts/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-ui-provider component (Web Components (HTML) Library)
title: rtk-ui-provider
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-ui-provider

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ui-provider/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-ui-provider></rtk-ui-provider>
```

### With Properties

```html
<rtk-ui-provider>
</rtk-ui-provider>
```

```html
<script>
  const el = document.querySelector("rtk-ui-provider");

  el.config= defaultUiConfig
  el.mode= meeting
  el.showSetupScreen= true;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ui-provider/#page","headline":"rtk-ui-provider · Cloudflare Realtime docs","description":"API reference for rtk-ui-provider component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-ui-provider/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-viewer-count component (Web Components (HTML) Library)
title: rtk-viewer-count
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-viewer-count

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-viewer-count/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```html
<rtk-viewer-count></rtk-viewer-count>
```

### With Properties

```html
<rtk-viewer-count
 variant="primary">
</rtk-viewer-count>
```

```html
<script>
  const el = document.querySelector("rtk-viewer-count");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-viewer-count/#page","headline":"rtk-viewer-count · Cloudflare Realtime docs","description":"API reference for rtk-viewer-count component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-viewer-count/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-virtualized-participant-list component (Web Components (HTML) Library)
title: rtk-virtualized-participant-list
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-virtualized-participant-list

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-virtualized-participant-list/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-virtualized-participant-list></rtk-virtualized-participant-list>
```

### With Properties

```html
<rtk-virtualized-participant-list>
</rtk-virtualized-participant-list>
```

```html
<script>
  const el = document.querySelector("rtk-virtualized-participant-list");

  el.bufferedItemsCount= 42;
  el.itemHeight= 42;
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-virtualized-participant-list/#page","headline":"rtk-virtualized-participant-list · Cloudflare Realtime docs","description":"API reference for rtk-virtualized-participant-list component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-virtualized-participant-list/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for rtk-waiting-screen component (Web Components (HTML) Library)
title: rtk-waiting-screen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# rtk-waiting-screen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-waiting-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```html
<rtk-waiting-screen></rtk-waiting-screen>
```

### With Properties

```html
<rtk-waiting-screen>
</rtk-waiting-screen>
```

```html
<script>
  const el = document.querySelector("rtk-waiting-screen");

  el.meeting= meeting
</script>
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-waiting-screen/#page","headline":"rtk-waiting-screen · Cloudflare Realtime docs","description":"API reference for rtk-waiting-screen component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/core/rtk-waiting-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Complete API reference for Flutter library components
title: Flutter
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Flutter

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/#page","headline":"Flutter · Cloudflare Realtime docs","description":"Complete API reference for Flutter library components","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAudioIndicatorIconWidget component (Flutter Library)
title: RtkAudioIndicatorIconWidget
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAudioIndicatorIconWidget

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-audio-indicator-icon-widget/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A widget that displays the audio status of a participant in a RealtimeKit meeting.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

| Property    | Type                  | Required | Default | Description                                   |
| ----------- | --------------------- | -------- | ------- | --------------------------------------------- |
| participant | RtkMeetingParticipant | ✅        | \-      | The participant whose audio status to display |
| iconSize    | double?               | ❌        | 24      | Size of the audio indicator icon              |

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkAudioIndicatorIconWidget(
  participant: participant,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkAudioIndicatorIconWidget(
  participant: participant,
  iconSize: 32.0,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-audio-indicator-icon-widget/#page","headline":"RtkAudioIndicatorIconWidget · Cloudflare Realtime docs","description":"API reference for RtkAudioIndicatorIconWidget component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-audio-indicator-icon-widget/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatIconWidget component (Flutter Library)
title: RtkChatIconWidget
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatIconWidget

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-chat-icon-widget/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A widget that displays a chat icon, navigates to the chat page when pressed, and marks all messages as read.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor.

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkChatIconWidget()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-chat-icon-widget/#page","headline":"RtkChatIconWidget · Cloudflare Realtime docs","description":"API reference for RtkChatIconWidget component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-chat-icon-widget/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkJoinButton component (Flutter Library)
title: RtkJoinButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkJoinButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-join-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button widget for joining a RealtimeKit meeting room. Provides visual feedback during the joining process.

## Properties

| Property        | Type              | Required | Default              | Description                                 |
| --------------- | ----------------- | -------- | -------------------- | ------------------------------------------- |
| meeting         | RealtimekitClient | ✅        | \-                   | Meeting client instance                     |
| onMeetingJoined | VoidCallback?     | ❌        | \-                   | Callback invoked when the meeting is joined |
| rtkDesignToken  | RtkDesignTokens?  | ❌        | Global design tokens | Design tokens for customization             |
| height          | double?           | ❌        | \-                   | Height of the button                        |
| width           | double?           | ❌        | \-                   | Width of the button                         |
| isDisabled      | bool              | ❌        | false                | Whether the button is disabled              |

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkJoinButton(
  meeting: yourMeetingInstance,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkJoinButton(
  meeting: yourMeetingInstance,
  onMeetingJoined: () {
    // Handle successful join
  },
  height: 50.0,
  width: 200.0,
  isDisabled: false,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-join-button/#page","headline":"RtkJoinButton · Cloudflare Realtime docs","description":"API reference for RtkJoinButton component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-join-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLeaveButton component (Flutter Library)
title: RtkLeaveButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLeaveButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button widget for leaving a RealtimeKit meeting. Displays a confirmation dialog to prevent accidental meeting exits.

## Properties

| Property              | Type              | Required | Default              | Description                     |
| --------------------- | ----------------- | -------- | -------------------- | ------------------------------- |
| meeting               | RealtimekitClient | ✅        | \-                   | Meeting client instance         |
| individualDesignToken | RtkDesignTokens?  | ❌        | Global design tokens | Design tokens for customization |
| height                | double?           | ❌        | \-                   | Height of the button            |
| width                 | double?           | ❌        | \-                   | Width of the button             |

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkLeaveButton(
  meeting: yourMeetingInstance,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkLeaveButton(
  meeting: yourMeetingInstance,
  individualDesignToken: yourDesignToken,
  height: 50.0,
  width: 50.0,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-button/#page","headline":"RtkLeaveButton · Cloudflare Realtime docs","description":"API reference for RtkLeaveButton component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLeaveMeetingDialog component (Flutter Library)
title: RtkLeaveMeetingDialog
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLeaveMeetingDialog

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-meeting-dialog/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A dialog widget for confirming the action of leaving a RealtimeKit meeting. Provides a prompt with cancel and leave options, and displays an additional end-meeting option for hosts.

## Properties

| Property    | Type              | Required | Default              | Description                     |
| ----------- | ----------------- | -------- | -------------------- | ------------------------------- |
| meeting     | RealtimekitClient | ✅        | \-                   | Meeting client instance         |
| designToken | RtkDesignTokens?  | ❌        | Global design tokens | Design tokens for customization |

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkLeaveMeetingDialog(
  meeting: yourMeetingInstance,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkLeaveMeetingDialog(
  meeting: yourMeetingInstance,
  designToken: yourDesignToken,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-meeting-dialog/#page","headline":"RtkLeaveMeetingDialog · Cloudflare Realtime docs","description":"API reference for RtkLeaveMeetingDialog component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-leave-meeting-dialog/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingTitle component (Flutter Library)
title: RtkMeetingTitle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingTitle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-meeting-title/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A widget that displays the title of a RealtimeKit meeting. Integrates with the RealtimeKit design system for consistent styling.

## Properties

| Property              | Type              | Required | Default              | Description                     |
| --------------------- | ----------------- | -------- | -------------------- | ------------------------------- |
| meeting               | RealtimekitClient | ✅        | \-                   | Meeting client instance         |
| individualDesignToken | RtkDesignTokens?  | ❌        | Global design tokens | Design tokens for customization |

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkMeetingTitle(
  meeting: yourMeetingInstance,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkMeetingTitle(
  meeting: yourMeetingInstance,
  individualDesignToken: yourDesignToken,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-meeting-title/#page","headline":"RtkMeetingTitle · Cloudflare Realtime docs","description":"API reference for RtkMeetingTitle component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-meeting-title/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNameTag component (Flutter Library)
title: RtkNameTag
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNameTag

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-name-tag-widget/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A widget that displays the name tag of a participant within a participant tile.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

| Property    | Type                  | Required | Default | Description                                 |
| ----------- | --------------------- | -------- | ------- | ------------------------------------------- |
| participant | RtkMeetingParticipant | ✅        | \-      | The participant whose name to display       |
| size        | double                | ✅        | \-      | Size constraint for the name tag            |
| color       | Color                 | ✅        | \-      | Color of the name tag text                  |
| factor      | double                | ❌        | 7       | Font size factor (fontSize = size / factor) |

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkNameTag(
  participant: participant,
  size: 14.0,
  color: Colors.white,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkNameTag(
  participant: participant,
  size: 20.0,
  color: Colors.white,
  factor: 5,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-name-tag-widget/#page","headline":"RtkNameTag · Cloudflare Realtime docs","description":"API reference for RtkNameTag component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-name-tag-widget/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantTile component (Flutter Library)
title: RtkParticipantTile
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantTile

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participant-tile/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A widget that displays a participant's video or avatar within a meeting environment. Automatically shows the video feed when available and falls back to the participant's avatar.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

| Property    | Type                  | Required | Default              | Description                                       |
| ----------- | --------------------- | -------- | -------------------- | ------------------------------------------------- |
| participant | RtkMeetingParticipant | ✅        | \-                   | The participant to display (positional parameter) |
| designToken | RtkDesignTokens?      | ❌        | Global design tokens | Design tokens for customization                   |
| height      | double                | ❌        | 240                  | Height of the tile                                |
| width       | double                | ❌        | 180                  | Width of the tile                                 |

Note

The `participant` parameter is positional. Pass it without a named argument: `RtkParticipantTile(participant)`.

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkParticipantTile(
  participant,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkParticipantTile(
  participant,
  designToken: yourDesignToken,
  height: 300,
  width: 200,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participant-tile/#page","headline":"RtkParticipantTile · Cloudflare Realtime docs","description":"API reference for RtkParticipantTile component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participant-tile/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantsIconWidget component (Flutter Library)
title: RtkParticipantsIconWidget
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantsIconWidget

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participants-icon-widget/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A widget that displays a participants icon and navigates to the participants list when pressed.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor.

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkParticipantsIconWidget()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participants-icon-widget/#page","headline":"RtkParticipantsIconWidget · Cloudflare Realtime docs","description":"API reference for RtkParticipantsIconWidget component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-participants-icon-widget/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPluginIconWidget component (Flutter Library)
title: RtkPluginIconWidget
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPluginIconWidget

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugin-icon-widget/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A widget that displays a plugins icon and navigates to the plugins list when pressed.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor.

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkPluginIconWidget()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugin-icon-widget/#page","headline":"RtkPluginIconWidget · Cloudflare Realtime docs","description":"API reference for RtkPluginIconWidget component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugin-icon-widget/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPluginsScreen component (Flutter Library)
title: RtkPluginsScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPluginsScreen

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugins-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pre-built plugins screen that lists available plugins with the ability to turn them on or off.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

Caution

`RtkPluginsScreen` is not exported from the barrel file. Use a direct import path instead of the standard `realtimekit_ui.dart` import.

## Properties

This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor.

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/src/pages/plugins/plugin_page.dart';

RtkPluginsScreen()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugins-screen/#page","headline":"RtkPluginsScreen · Cloudflare Realtime docs","description":"API reference for RtkPluginsScreen component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-plugins-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPollsIconWidget component (Flutter Library)
title: RtkPollsIconWidget
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPollsIconWidget

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-icon-widget/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A widget that displays a polls icon and navigates to the polls list when pressed.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor.

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkPollsIconWidget()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-icon-widget/#page","headline":"RtkPollsIconWidget · Cloudflare Realtime docs","description":"API reference for RtkPollsIconWidget component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-icon-widget/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPollsScreen component (Flutter Library)
title: RtkPollsScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPollsScreen

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-screen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pre-built polls screen for displaying and interacting with meeting polls.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

This component does not accept any properties. It uses the `RealtimekitClient` from the nearest [RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) ancestor.

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkPollsScreen()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-screen/#page","headline":"RtkPollsScreen · Cloudflare Realtime docs","description":"API reference for RtkPollsScreen component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-polls-screen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkProvider component (Flutter Library)
title: RtkProvider
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkProvider

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A foundational widget that initializes and provides the RealtimeKit environment for a Flutter application. `RtkProvider` acts as a context wrapper that sets up design tokens, client configurations, and UI Kit information required by RealtimeKit components.

## Properties

| Property  | Type                    | Required | Default | Description                                                       |
| --------- | ----------------------- | -------- | ------- | ----------------------------------------------------------------- |
| child     | Widget                  | ✅        | \-      | The widget below this widget in the tree                          |
| meeting   | RealtimekitClient       | ✅        | \-      | Meeting client instance                                           |
| uiKitInfo | RealtimeKitUIInfo       | ✅        | \-      | UI Kit configuration info including design tokens and UI settings |
| observers | List<ProviderObserver>? | ❌        | null    | Riverpod provider observers for debugging                         |

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkProvider(
  meeting: yourMeetingInstance,
  uiKitInfo: yourUiKitInfo,
  child: MaterialApp(
    home: YourAppHome(),
  ),
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RtkProvider(
      meeting: RealtimekitClient(
        // Client configuration
      ),
      uiKitInfo: RealtimeKitUIInfo(
        // UI Kit information and design tokens
      ),
      observers: [MyProviderObserver()],
      child: MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}
```

Note

You do not need to wrap the root of your application inside `RtkProvider`. You can wrap a specific subtree where you use RealtimeKit components. A `MaterialApp` widget must exist below `RtkProvider` in the widget tree.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/#page","headline":"RtkProvider · Cloudflare Realtime docs","description":"API reference for RtkProvider component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSelfAudioToggleButton component (Flutter Library)
title: RtkSelfAudioToggleButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSelfAudioToggleButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-audio-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A toggle button widget for controlling microphone audio state during a meeting. Allows users to mute or unmute their microphone.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

| Property              | Type              | Required | Default              | Description                            |
| --------------------- | ----------------- | -------- | -------------------- | -------------------------------------- |
| meeting               | RealtimekitClient | ✅        | \-                   | Meeting client instance                |
| individualDesignToken | RtkDesignTokens?  | ❌        | Global design tokens | Design tokens for customization        |
| onAudioToggle         | VoidCallback?     | ❌        | \-                   | Callback invoked when audio is toggled |
| iconSize              | double?           | ❌        | \-                   | Size of the icon                       |
| iconColor             | Color?            | ❌        | \-                   | Color of the icon                      |
| showLabel             | bool              | ❌        | false                | Whether to show label text             |

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkSelfAudioToggleButton(
  meeting: yourMeetingInstance,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkSelfAudioToggleButton(
  meeting: yourMeetingInstance,
  onAudioToggle: () {
    // Handle audio toggle
  },
  iconSize: 24.0,
  iconColor: Colors.blue,
  showLabel: true,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-audio-toggle/#page","headline":"RtkSelfAudioToggleButton · Cloudflare Realtime docs","description":"API reference for RtkSelfAudioToggleButton component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-audio-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSelfVideoToggleButton component (Flutter Library)
title: RtkSelfVideoToggleButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSelfVideoToggleButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-video-toggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A toggle button widget for controlling video state during a meeting. Allows users to turn their video on or off.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

| Property              | Type              | Required | Default              | Description                            |
| --------------------- | ----------------- | -------- | -------------------- | -------------------------------------- |
| meeting               | RealtimekitClient | ✅        | \-                   | Meeting client instance                |
| individualDesignToken | RtkDesignTokens?  | ❌        | Global design tokens | Design tokens for customization        |
| onVideoToggle         | VoidCallback?     | ❌        | \-                   | Callback invoked when video is toggled |
| iconSize              | double?           | ❌        | \-                   | Size of the icon                       |
| iconColor             | Color?            | ❌        | \-                   | Color of the icon                      |
| showLabel             | bool              | ❌        | false                | Whether to show label text             |

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkSelfVideoToggleButton(
  meeting: yourMeetingInstance,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkSelfVideoToggleButton(
  meeting: yourMeetingInstance,
  onVideoToggle: () {
    // Handle video toggle
  },
  iconSize: 24.0,
  iconColor: Colors.red,
  showLabel: true,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-video-toggle/#page","headline":"RtkSelfVideoToggleButton · Cloudflare Realtime docs","description":"API reference for RtkSelfVideoToggleButton component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-self-video-toggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSetupScreen component (Flutter Library)
title: RtkSetupScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSetupScreen

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-setup-screen-component/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pre-built setup screen shown before joining a meeting. Allows users to edit their display name and configure media settings.

Note

[RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) must be an ancestor of this widget in the widget tree.

## Properties

| Property            | Type         | Required | Default | Description                                            |
| ------------------- | ------------ | -------- | ------- | ------------------------------------------------------ |
| selectedAudioDevice | AudioDevice? | ✅        | \-      | Currently selected audio device (positional parameter) |
| selectedVideoDevice | VideoDevice? | ✅        | \-      | Currently selected video device (positional parameter) |

Note

Both parameters are positional. Pass them without named arguments.

## Usage Examples

### Basic Usage

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

RtkSetupScreen(
  selectedAudioDevice,
  selectedVideoDevice,
)
```

### With Properties

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';

final selectedAudioDevice = meeting.getSelectedAudioDevice();
final selectedVideoDevice = meeting.getSelectedVideoDevice();

RtkSetupScreen(
  selectedAudioDevice,
  selectedVideoDevice,
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-setup-screen-component/#page","headline":"RtkSetupScreen · Cloudflare Realtime docs","description":"API reference for RtkSetupScreen component (Flutter Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-setup-screen-component/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Complete API reference for iOS library components
title: iOS
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# iOS

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/#page","headline":"iOS · Cloudflare Realtime docs","description":"Complete API reference for iOS library components","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for AppTheme component (iOS Library)
title: AppTheme
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# AppTheme

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/app-theme/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The application theme singleton that provides pre-configured appearance objects for UI components. Use `AppTheme.shared` to access default appearances or call `setUp(theme:)` to apply a custom theme.

## Access

```swift
let theme = AppTheme.shared
```

## Methods

| Method                         | Return Type | Description                                           |
| ------------------------------ | ----------- | ----------------------------------------------------- |
| setUp(theme: AppThemeProtocol) | Void        | Applies a custom theme conforming to AppThemeProtocol |

## Usage Examples

### Access default theme

```swift
import RealtimeKitUI

let theme = AppTheme.shared
let titleAppearance = theme.meetingTitleAppearance
let clockAppearance = theme.clockViewAppearance
```

### Apply a custom theme

```swift
import RealtimeKitUI

class CustomTheme: AppThemeProtocol {
    // Implement required appearance properties
}

let customTheme = CustomTheme()
AppTheme.shared.setUp(theme: customTheme)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/app-theme/#page","headline":"AppTheme · Cloudflare Realtime docs","description":"API reference for AppTheme component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/app-theme/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for DesignLibrary component (iOS Library)
title: DesignLibrary
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# DesignLibrary

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/design-library/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The central design token library providing color, spacing, border width, and border radius tokens. Access through the `DesignLibrary.shared` singleton.

## Access

```swift
let designLibrary = DesignLibrary.shared
```

## Properties

| Property     | Type              | Required | Default | Description                                          |
| ------------ | ----------------- | -------- | ------- | ---------------------------------------------------- |
| color        | ColorTokens       | \-       | \-      | Color tokens for backgrounds, text, and brand colors |
| space        | SpaceToken        | \-       | \-      | Spacing tokens for margins and padding               |
| borderSize   | BorderWidthToken  | \-       | \-      | Border width tokens                                  |
| borderRadius | BorderRadiusToken | \-       | \-      | Border radius tokens for corner rounding             |

## Usage Examples

### Access design tokens

```swift
import RealtimeKitUI

let designLibrary = DesignLibrary.shared

// Access color tokens
let backgroundColor = designLibrary.color.background
let textColor = designLibrary.color.text

// Access spacing tokens
let padding = designLibrary.space.space4

// Access border tokens
let borderWidth = designLibrary.borderSize.thin
let cornerRadius = designLibrary.borderRadius.rounded
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/design-library/#page","headline":"DesignLibrary · Cloudflare Realtime docs","description":"API reference for DesignLibrary component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/design-library/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for GridView component (iOS Library)
title: GridView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# GridView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/grid-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A generic grid layout view that arranges child views in a responsive grid. Supports both portrait and landscape orientations with configurable maximum item count.

## Initializer parameters

| Parameter        | Type                              | Required | Default | Description                                                      |
| ---------------- | --------------------------------- | -------- | ------- | ---------------------------------------------------------------- |
| maxItems         | UInt                              | ❌        | 9       | Maximum number of items the grid can display                     |
| showingCurrently | UInt                              | ✅        | \-      | Number of items currently visible in the grid                    |
| getChildView     | @escaping () -> CellContainerView | ✅        | \-      | Factory closure that creates a new child view for each grid cell |

## Methods

| Method                                                            | Return Type        | Description                                                           |
| ----------------------------------------------------------------- | ------------------ | --------------------------------------------------------------------- |
| settingFrames(visibleItemCount:animation:completion:)             | Void               | Lays out child views in portrait orientation with optional animation  |
| settingFramesForLandScape(visibleItemCount:animation:completion:) | Void               | Lays out child views in landscape orientation with optional animation |
| childView(index:)                                                 | CellContainerView? | Returns the child view at the specified index                         |
| prepareForReuse(childView:)                                       | Void               | Prepares a child view for reuse                                       |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let gridView = GridView(
    maxItems: 6,
    showingCurrently: 4,
    getChildView: {
        return CellContainerView()
    }
)
view.addSubview(gridView)
```

### Update layout

```swift
import RealtimeKitUI

let gridView = GridView(
    maxItems: 9,
    showingCurrently: 3,
    getChildView: {
        return CellContainerView()
    }
)
view.addSubview(gridView)

// Update layout with animation
gridView.settingFrames(
    visibleItemCount: 4,
    animation: true,
    completion: {
        print("Layout updated")
    }
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/grid-view/#page","headline":"GridView · Cloudflare Realtime docs","description":"API reference for GridView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/grid-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for MeetingViewController component (iOS Library)
title: MeetingViewController
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# MeetingViewController

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/meeting-view-controller/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The main meeting screen view controller. Displays the participant grid, plugins, screen share, header, and control bar.

## Initializer parameters

| Parameter  | Type                 | Required | Default | Description                                            |
| ---------- | -------------------- | -------- | ------- | ------------------------------------------------------ |
| meeting    | RealtimeKitClient    | ✅        | \-      | The RealtimeKit client instance for the active meeting |
| completion | @escaping () -> Void | ✅        | \-      | Closure called when the meeting ends                   |

## Properties

| Property   | Type                             | Required | Default | Description                                                          |
| ---------- | -------------------------------- | -------- | ------- | -------------------------------------------------------------------- |
| dataSource | MeetingViewControllerDataSource? | ❌        | nil     | Data source for providing custom topbar, middle view, and bottom bar |

## MeetingViewControllerDataSource protocol

Implement this protocol to provide custom UI sections within the meeting screen.

| Method                           | Return Type           | Description                                                     |
| -------------------------------- | --------------------- | --------------------------------------------------------------- |
| getTopbar(viewController:)       | RtkMeetingHeaderView? | Returns a custom header view for the meeting screen             |
| getMiddleView(viewController:)   | UIView?               | Returns a custom middle view between the header and control bar |
| getBottomTabbar(viewController:) | RtkMeetingControlBar? | Returns a custom control bar for the meeting screen             |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let meetingVC = MeetingViewController(
    meeting: rtkClient,
    completion: {
        self.dismiss(animated: true)
    }
)
meetingVC.modalPresentationStyle = .fullScreen
self.present(meetingVC, animated: true)
```

### With custom data source

```swift
import RealtimeKitUI

class CustomDataSource: MeetingViewControllerDataSource {
    func getTopbar(viewController: MeetingViewController) -> RtkMeetingHeaderView? {
        return RtkMeetingHeaderView(meeting: rtkClient)
    }

    func getMiddleView(viewController: MeetingViewController) -> UIView? {
        return nil
    }

    func getBottomTabbar(viewController: MeetingViewController) -> RtkMeetingControlBar? {
        return nil
    }
}

let meetingVC = MeetingViewController(
    meeting: rtkClient,
    completion: {
        self.dismiss(animated: true)
    }
)
meetingVC.dataSource = CustomDataSource()
self.present(meetingVC, animated: true)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/meeting-view-controller/#page","headline":"MeetingViewController · Cloudflare Realtime docs","description":"API reference for MeetingViewController component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/meeting-view-controller/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkActiveTabSelectorView component (iOS Library)
title: RtkActiveTabSelectorView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkActiveTabSelectorView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-active-tab-selector-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A horizontally scrollable tab selector for switching between plugins and screen shares.

## Properties

| Property | Type                              | Required | Default | Description                              |
| -------- | --------------------------------- | -------- | ------- | ---------------------------------------- |
| buttons  | \[RtkPluginScreenShareTabButton\] | \-       | \-      | The array of tab buttons in the selector |

## Methods

| Method                    | Return Type | Description                                                   |
| ------------------------- | ----------- | ------------------------------------------------------------- |
| scrollToVisible(button:)  | Void        | Scrolls the tab selector to make the specified button visible |
| setAndDisplayButtons(\_:) | Void        | Sets and displays the provided array of tab buttons           |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let tabSelector = RtkActiveTabSelectorView()
let buttons = [
    RtkPluginScreenShareTabButton(image: nil, title: "Screen Share"),
    RtkPluginScreenShareTabButton(image: nil, title: "Whiteboard")
]
tabSelector.setAndDisplayButtons(buttons)
view.addSubview(tabSelector)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-active-tab-selector-view/#page","headline":"RtkActiveTabSelectorView · Cloudflare Realtime docs","description":"API reference for RtkActiveTabSelectorView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-active-tab-selector-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAudioButtonControlBar component (iOS Library)
title: RtkAudioButtonControlBar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAudioButtonControlBar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-audio-button-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A control bar button that toggles the local microphone on and off. Checks microphone permissions before toggling.

## Initializer parameters

| Parameter  | Type                                  | Required | Default | Description                              |
| ---------- | ------------------------------------- | -------- | ------- | ---------------------------------------- |
| meeting    | RealtimeKitClient                     | ✅        | \-      | The RealtimeKit client instance          |
| onClick    | ((RtkAudioButtonControlBar) -> Void)? | ❌        | nil     | Closure called when the button is tapped |
| appearance | RtkControlBarButtonAppearance         | ❌        | \-      | Appearance configuration for the button  |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let audioButton = RtkAudioButtonControlBar(meeting: rtkClient)
view.addSubview(audioButton)
```

### With tap handler

```swift
import RealtimeKitUI

let audioButton = RtkAudioButtonControlBar(
    meeting: rtkClient,
    onClick: { button in
        print("Audio toggled")
    }
)
view.addSubview(audioButton)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-audio-button-control-bar/#page","headline":"RtkAudioButtonControlBar · Cloudflare Realtime docs","description":"API reference for RtkAudioButtonControlBar component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-audio-button-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAvatarView component (iOS Library)
title: RtkAvatarView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAvatarView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-avatar-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A circular avatar view that displays a participant's profile image or name initials as a fallback.

## Initializer parameters

| Parameter   | Type                  | Required | Default | Description                             |
| ----------- | --------------------- | -------- | ------- | --------------------------------------- |
| participant | RtkMeetingParticipant | ✅        | \-      | The participant whose avatar to display |

## Methods

| Method                | Return Type | Description                                           |
| --------------------- | ----------- | ----------------------------------------------------- |
| set(participant:)     | Void        | Updates the avatar to display a different participant |
| refresh()             | Void        | Refreshes the avatar image or initials                |
| setInitialName(font:) | Void        | Sets the font used for rendering name initials        |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let avatarView = RtkAvatarView(participant: participant)
view.addSubview(avatarView)
```

### Update participant

```swift
import RealtimeKitUI

let avatarView = RtkAvatarView(participant: participant)
view.addSubview(avatarView)

// Update to a different participant
avatarView.set(participant: newParticipant)
avatarView.refresh()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-avatar-view/#page","headline":"RtkAvatarView · Cloudflare Realtime docs","description":"API reference for RtkAvatarView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-avatar-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkButton component (iOS Library)
title: RtkButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A versatile button that follows the RTK Design System. Supports multiple styles, states, and sizes.

## Initializer parameters

| Parameter      | Type                | Required | Default | Description                                           |
| -------------- | ------------------- | -------- | ------- | ----------------------------------------------------- |
| style          | Style               | ❌        | .solid  | The button style (solid, line, icon-left, and others) |
| rtkButtonState | States              | ❌        | .active | The initial state of the button                       |
| size           | Size                | ❌        | .large  | The size of the button                                |
| appearance     | RtkButtonAppearance | ❌        | \-      | Appearance configuration for colors and fonts         |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let button = RtkButton()
button.setTitle("Join", for: .normal)
view.addSubview(button)
```

### With custom style

```swift
import RealtimeKitUI

let button = RtkButton(
    style: .line,
    rtkButtonState: .active,
    size: .large
)
button.setTitle("Cancel", for: .normal)
view.addSubview(button)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-button/#page","headline":"RtkButton · Cloudflare Realtime docs","description":"API reference for RtkButton component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkClockView component (iOS Library)
title: RtkClockView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkClockView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-clock-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A label that displays the elapsed meeting time in `HH:MM:SS` format. Updates every second while the meeting is active.

## Initializer parameters

| Parameter  | Type              | Required | Default                             | Description                                            |
| ---------- | ----------------- | -------- | ----------------------------------- | ------------------------------------------------------ |
| meeting    | RealtimeKitClient | ✅        | \-                                  | The RealtimeKit client instance for the active meeting |
| appearance | RtkTextAppearance | ❌        | AppTheme.shared.clockViewAppearance | Text appearance configuration for font and color       |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let clockView = RtkClockView(meeting: rtkClient)
view.addSubview(clockView)
```

### With custom appearance

```swift
import RealtimeKitUI

let appearance = RtkTextAppearance(
    font: UIFont.monospacedDigitSystemFont(ofSize: 14, weight: .regular),
    textColor: .white
)
let clockView = RtkClockView(
    meeting: rtkClient,
    appearance: appearance
)
view.addSubview(clockView)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-clock-view/#page","headline":"RtkClockView · Cloudflare Realtime docs","description":"API reference for RtkClockView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-clock-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkControlBar component (iOS Library)
title: RtkControlBar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkControlBar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Base control bar view with a More menu button and an End Call button. Serves as the foundation for `RtkMeetingControlBar` and `RtkWebinarControlBar`.

## Initializer parameters

| Parameter                       | Type                    | Required | Default                        | Description                                                |
| ------------------------------- | ----------------------- | -------- | ------------------------------ | ---------------------------------------------------------- |
| meeting                         | RealtimeKitClient       | ✅        | \-                             | The RealtimeKit client instance                            |
| delegate                        | RtkTabBarDelegate?      | ✅        | \-                             | Delegate for handling tab bar interactions                 |
| presentingViewController        | UIViewController        | ✅        | \-                             | View controller used for presenting modal screens          |
| appearance                      | RtkControlBarAppearance | ❌        | RtkControlBarAppearanceModel() | Appearance configuration for the control bar               |
| settingViewControllerCompletion | (() -> Void)?           | ❌        | nil                            | Closure called when the settings view controller dismisses |
| onLeaveMeetingCompletion        | (() -> Void)?           | ❌        | nil                            | Closure called when the participant leaves the meeting     |

## Properties

| Property      | Type                          | Required | Default | Description                      |
| ------------- | ----------------------------- | -------- | ------- | -------------------------------- |
| moreButton    | RtkMoreButtonControlBar       | \-       | \-      | The More menu button (read-only) |
| endCallButton | RtkEndMeetingControlBarButton | \-       | \-      | The End Call button              |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let controlBar = RtkControlBar(
    meeting: rtkClient,
    delegate: self,
    presentingViewController: self
)
view.addSubview(controlBar)
```

### With completion handlers

```swift
import RealtimeKitUI

let controlBar = RtkControlBar(
    meeting: rtkClient,
    delegate: self,
    presentingViewController: self,
    onLeaveMeetingCompletion: {
        self.dismiss(animated: true)
    }
)
view.addSubview(controlBar)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-control-bar/#page","headline":"RtkControlBar · Cloudflare Realtime docs","description":"API reference for RtkControlBar component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkControlBarButton component (iOS Library)
title: RtkControlBarButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkControlBarButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-control-bar-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Base button class for control bar items. Supports normal and selected states, notification badges, and theming through appearance configuration.

## Initializer parameters

| Parameter  | Type                          | Required | Default | Description                                     |
| ---------- | ----------------------------- | -------- | ------- | ----------------------------------------------- |
| image      | RtkImage                      | ✅        | \-      | The icon image for the button                   |
| title      | String                        | ❌        | ""      | The title text displayed below the icon         |
| appearance | RtkControlBarButtonAppearance | ❌        | \-      | Appearance configuration for colors and styling |

## Properties

| Property               | Type                     | Required | Default | Description                                                 |
| ---------------------- | ------------------------ | -------- | ------- | ----------------------------------------------------------- |
| selectedStateTintColor | UIColor                  | ❌        | \-      | Tint color applied when the button is in the selected state |
| normalStateTintColor   | UIColor                  | ❌        | \-      | Tint color applied when the button is in the normal state   |
| notificationBadge      | RtkNotificationBadgeView | \-       | \-      | Badge view for displaying notification counts               |

## Methods

| Method                    | Return Type | Description                                                         |
| ------------------------- | ----------- | ------------------------------------------------------------------- |
| setSelected(image:title:) | Void        | Sets the button to the selected state with a custom image and title |
| setDefault(image:title:)  | Void        | Sets the button to the default state with a custom image and title  |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let button = RtkControlBarButton(
    image: RtkImage(image: UIImage(systemName: "mic")),
    title: "Mute"
)
view.addSubview(button)
```

### With state changes

```swift
import RealtimeKitUI

let button = RtkControlBarButton(
    image: RtkImage(image: UIImage(systemName: "mic")),
    title: "Mute"
)

// Switch to selected state
button.setSelected(
    image: RtkImage(image: UIImage(systemName: "mic.slash")),
    title: "Unmute"
)

// Switch back to default state
button.setDefault(
    image: RtkImage(image: UIImage(systemName: "mic")),
    title: "Mute"
)
view.addSubview(button)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-control-bar-button/#page","headline":"RtkControlBarButton · Cloudflare Realtime docs","description":"API reference for RtkControlBarButton component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-control-bar-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkEndMeetingControlBarButton component (iOS Library)
title: RtkEndMeetingControlBarButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkEndMeetingControlBarButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-end-meeting-control-bar-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A control bar button that ends or leaves the meeting. Optionally displays a confirmation dialog before ending the meeting.

## Initializer parameters

| Parameter           | Type                                                                                     | Required | Default | Description                                                                                                             |
| ------------------- | ---------------------------------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
| meeting             | RealtimeKitClient                                                                        | ✅        | \-      | The RealtimeKit client instance                                                                                         |
| alertViewController | UIViewController                                                                         | ✅        | \-      | View controller used to present the confirmation alert                                                                  |
| onClick             | ((RtkEndMeetingControlBarButton, RtkLeaveDialog.RtkLeaveDialogAlertButtonType) -> Void)? | ❌        | nil     | Closure called after the user confirms leaving or ending the meeting, receiving the button and the selected action type |
| appearance          | RtkControlBarButtonAppearance                                                            | ❌        | \-      | Appearance configuration for the button                                                                                 |

## Properties

| Property               | Type | Required | Default | Description                                                    |
| ---------------------- | ---- | -------- | ------- | -------------------------------------------------------------- |
| shouldShowAlertOnClick | Bool | ❌        | true    | Whether to show a confirmation alert before ending the meeting |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let endButton = RtkEndMeetingControlBarButton(
    meeting: rtkClient,
    alertViewController: self
)
view.addSubview(endButton)
```

### Without confirmation dialog

```swift
import RealtimeKitUI

let endButton = RtkEndMeetingControlBarButton(
    meeting: rtkClient,
    alertViewController: self,
    onClick: { button, actionType in
        print("Action: \(actionType)")
    }
)
endButton.shouldShowAlertOnClick = false
view.addSubview(endButton)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-end-meeting-control-bar-button/#page","headline":"RtkEndMeetingControlBarButton · Cloudflare Realtime docs","description":"API reference for RtkEndMeetingControlBarButton component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-end-meeting-control-bar-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkEventSelfListener component (iOS Library)
title: RtkEventSelfListener
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkEventSelfListener

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-event-self-listener/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A helper class that wraps self-participant and meeting event listeners with closure-based callbacks. Provides methods for toggling audio and video, observing state changes, and checking device permissions.

## Initializer parameters

| Parameter  | Type              | Required | Default   | Description                                    |
| ---------- | ----------------- | -------- | --------- | ---------------------------------------------- |
| rtkClient  | RealtimeKitClient | ✅        | \-        | The RealtimeKit client instance                |
| identifier | String            | ❌        | "Default" | A unique identifier for this listener instance |

## Methods

| Method                                   | Return Type | Description                                                          |
| ---------------------------------------- | ----------- | -------------------------------------------------------------------- |
| toggleLocalAudio(completion:)            | Void        | Toggles the local microphone on or off                               |
| toggleLocalVideo(completion:)            | Void        | Toggles the local camera on or off                                   |
| observeSelfVideo(update:)                | Void        | Registers a callback for local video state changes                   |
| observeSelfAudio(update:)                | Void        | Registers a callback for local audio state changes                   |
| observeSelfRemoved(update:)              | Void        | Registers a callback for when the local participant is removed       |
| observeSelfMeetingEndForAll(update:)     | Void        | Registers a callback for when the meeting ends for all participants  |
| observeWebinarStageStatus(update:)       | Void        | Registers a callback for webinar stage status changes                |
| observeRequestToJoinStage(update:)       | Void        | Registers a callback for stage join request events                   |
| observeSelfPermissionChanged(update:)    | Void        | Registers a callback for permission changes on the local participant |
| observeMeetingReconnectionState(update:) | Void        | Registers a callback for meeting reconnection state changes          |
| isCameraPermissionGranted()              | Bool        | Returns whether camera permission is granted                         |
| isMicrophonePermissionGranted()          | Bool        | Returns whether microphone permission is granted                     |
| clean()                                  | Void        | Removes all registered listeners and cleans up resources             |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let listener = RtkEventSelfListener(rtkClient: rtkClient)

listener.observeSelfAudio { isEnabled in
    print("Audio enabled: \(isEnabled)")
}

listener.observeSelfVideo { isEnabled in
    print("Video enabled: \(isEnabled)")
}
```

### Toggle audio and video

```swift
import RealtimeKitUI

let listener = RtkEventSelfListener(rtkClient: rtkClient)

listener.toggleLocalAudio { success in
    print("Audio toggled: \(success)")
}

listener.toggleLocalVideo { success in
    print("Video toggled: \(success)")
}
```

### Observe meeting end

```swift
import RealtimeKitUI

let listener = RtkEventSelfListener(
    rtkClient: rtkClient,
    identifier: "MeetingObserver"
)

listener.observeSelfRemoved {
    print("Removed from meeting")
}

listener.observeSelfMeetingEndForAll {
    print("Meeting ended for all")
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-event-self-listener/#page","headline":"RtkEventSelfListener · Cloudflare Realtime docs","description":"API reference for RtkEventSelfListener component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-event-self-listener/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkImage component (iOS Library)
title: RtkImage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkImage

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-image/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A struct that wraps a `UIImage` or a `URL` for image content. Used throughout the UI Kit for icons, avatars, and custom images.

## Initializer parameters

| Parameter | Type     | Required | Default | Description                         |
| --------- | -------- | -------- | ------- | ----------------------------------- |
| image     | UIImage? | ❌        | nil     | A local UIImage to display          |
| url       | URL?     | ❌        | nil     | A remote URL to load the image from |

## Usage Examples

### With a local image

```swift
import RealtimeKitUI

let rtkImage = RtkImage(image: UIImage(systemName: "mic"))
```

### With a remote URL

```swift
import RealtimeKitUI

let rtkImage = RtkImage(url: URL(string: "https://example.com/avatar.png"))
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-image/#page","headline":"RtkImage · Cloudflare Realtime docs","description":"API reference for RtkImage component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-image/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkJoinButton component (iOS Library)
title: RtkJoinButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkJoinButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-join-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pre-configured button that joins the meeting. Validates the participant name before joining.

## Initializer parameters

| Parameter  | Type                             | Required | Default | Description                                                                                             |
| ---------- | -------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------- |
| meeting    | RealtimeKitClient                | ✅        | \-      | The RealtimeKit client instance                                                                         |
| onClick    | ((RtkJoinButton, Bool) -> Void)? | ❌        | nil     | Closure called when the button is tapped. The Bool parameter indicates whether the join was successful. |
| appearance | RtkButtonAppearance              | ❌        | \-      | Appearance configuration for the button                                                                 |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let joinButton = RtkJoinButton(meeting: rtkClient)
view.addSubview(joinButton)
```

### With tap handler

```swift
import RealtimeKitUI

let joinButton = RtkJoinButton(
    meeting: rtkClient,
    onClick: { button, success in
        if success {
            print("Joined meeting")
        } else {
            print("Join failed")
        }
    }
)
view.addSubview(joinButton)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-join-button/#page","headline":"RtkJoinButton · Cloudflare Realtime docs","description":"API reference for RtkJoinButton component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-join-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLabel component (iOS Library)
title: RtkLabel
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLabel

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-label/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A themed label that uses design token colors and fonts from the RTK Design System.

## Initializer parameters

| Parameter  | Type              | Required | Default | Description                                      |
| ---------- | ----------------- | -------- | ------- | ------------------------------------------------ |
| appearance | RtkTextAppearance | ❌        | \-      | Text appearance configuration for font and color |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let label = RtkLabel()
label.text = "Meeting Room"
view.addSubview(label)
```

### With custom appearance

```swift
import RealtimeKitUI

let appearance = RtkTextAppearance(
    font: UIFont.systemFont(ofSize: 16, weight: .semibold),
    textColor: .white
)
let label = RtkLabel(appearance: appearance)
label.text = "Meeting Room"
view.addSubview(label)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-label/#page","headline":"RtkLabel · Cloudflare Realtime docs","description":"API reference for RtkLabel component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-label/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLeaveDialog component (iOS Library)
title: RtkLeaveDialog
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLeaveDialog

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-leave-dialog/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A dialog that presents leave and end meeting options. Displays different options based on host permissions.

## Initializer parameters

| Parameter | Type                                       | Required | Default | Description                                          |
| --------- | ------------------------------------------ | -------- | ------- | ---------------------------------------------------- |
| meeting   | RealtimeKitClient                          | ✅        | \-      | The RealtimeKit client instance                      |
| onClick   | ((RtkLeaveDialogAlertButtonType) -> Void)? | ❌        | nil     | Closure called when the user selects a dialog option |

## Methods

| Method    | Return Type | Description                                                |
| --------- | ----------- | ---------------------------------------------------------- |
| show(on:) | Void        | Presents the leave dialog on the specified view controller |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let leaveDialog = RtkLeaveDialog(meeting: rtkClient)
leaveDialog.show(on: self)
```

### With selection handler

```swift
import RealtimeKitUI

let leaveDialog = RtkLeaveDialog(
    meeting: rtkClient,
    onClick: { buttonType in
        switch buttonType {
        case .leaveMeeting:
            print("Leaving meeting")
        case .endMeeting:
            print("Ending meeting for all")
        default:
            break
        }
    }
)
leaveDialog.show(on: self)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-leave-dialog/#page","headline":"RtkLeaveDialog · Cloudflare Realtime docs","description":"API reference for RtkLeaveDialog component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-leave-dialog/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingControlBar component (iOS Library)
title: RtkMeetingControlBar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingControlBar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Control bar for group calls that extends `RtkControlBar` with microphone and video toggle buttons.

## Initializer parameters

| Parameter                       | Type                    | Required | Default                        | Description                                                |
| ------------------------------- | ----------------------- | -------- | ------------------------------ | ---------------------------------------------------------- |
| meeting                         | RealtimeKitClient       | ✅        | \-                             | The RealtimeKit client instance                            |
| delegate                        | RtkTabBarDelegate?      | ✅        | \-                             | Delegate for handling tab bar interactions                 |
| presentingViewController        | UIViewController        | ✅        | \-                             | View controller used for presenting modal screens          |
| appearance                      | RtkControlBarAppearance | ❌        | RtkControlBarAppearanceModel() | Appearance configuration for the control bar               |
| settingViewControllerCompletion | (() -> Void)?           | ❌        | nil                            | Closure called when the settings view controller dismisses |
| onLeaveMeetingCompletion        | (() -> Void)?           | ❌        | nil                            | Closure called when the participant leaves the meeting     |

## Properties

| Property   | Type                            | Required | Default | Description                                     |
| ---------- | ------------------------------- | -------- | ------- | ----------------------------------------------- |
| dataSource | RtkMeetingControlBarDataSource? | ❌        | nil     | Data source for customizing control bar buttons |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let controlBar = RtkMeetingControlBar(
    meeting: rtkClient,
    delegate: self,
    presentingViewController: self
)
view.addSubview(controlBar)
```

### With leave meeting handler

```swift
import RealtimeKitUI

let controlBar = RtkMeetingControlBar(
    meeting: rtkClient,
    delegate: self,
    presentingViewController: self,
    onLeaveMeetingCompletion: {
        self.navigationController?.popViewController(animated: true)
    }
)
view.addSubview(controlBar)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-control-bar/#page","headline":"RtkMeetingControlBar · Cloudflare Realtime docs","description":"API reference for RtkMeetingControlBar component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingHeaderView component (iOS Library)
title: RtkMeetingHeaderView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingHeaderView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-header-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Meeting header view that displays the meeting title, participant count, elapsed time clock, recording indicator, and camera switch button.

## Initializer parameters

| Parameter | Type              | Required | Default | Description                                            |
| --------- | ----------------- | -------- | ------- | ------------------------------------------------------ |
| meeting   | RealtimeKitClient | ✅        | \-      | The RealtimeKit client instance for the active meeting |

## Methods

| Method                                | Return Type | Description                                                   |
| ------------------------------------- | ----------- | ------------------------------------------------------------- |
| setContentTop(offset: CGFloat)        | Void        | Sets the top content offset for the header layout             |
| refreshNextPreviousButtonState()      | Void        | Refreshes the enabled state of next and previous page buttons |
| setClicks(nextButton:previousButton:) | Void        | Assigns tap handlers for the next and previous page buttons   |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let headerView = RtkMeetingHeaderView(meeting: rtkClient)
view.addSubview(headerView)
```

### With page navigation

```swift
import RealtimeKitUI

let headerView = RtkMeetingHeaderView(meeting: rtkClient)
headerView.setClicks(
    nextButton: { print("Next page") },
    previousButton: { print("Previous page") }
)
headerView.refreshNextPreviousButtonState()
view.addSubview(headerView)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-header-view/#page","headline":"RtkMeetingHeaderView · Cloudflare Realtime docs","description":"API reference for RtkMeetingHeaderView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-header-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingNameTag component (iOS Library)
title: RtkMeetingNameTag
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingNameTag

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-name-tag/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A name tag view that displays the participant name and a microphone status icon. Automatically updates when the participant's audio state changes.

## Initializer parameters

| Parameter   | Type                  | Required | Default | Description                                          |
| ----------- | --------------------- | -------- | ------- | ---------------------------------------------------- |
| meeting     | RealtimeKitClient     | ✅        | \-      | The RealtimeKit client instance                      |
| participant | RtkMeetingParticipant | ✅        | \-      | The participant whose name and mic status to display |
| appearance  | RtkNameTagAppearance  | ❌        | \-      | Appearance configuration for the name tag            |

## Methods

| Method            | Return Type | Description                                             |
| ----------------- | ----------- | ------------------------------------------------------- |
| set(participant:) | Void        | Updates the name tag to display a different participant |
| refresh()         | Void        | Refreshes the name and microphone status display        |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let nameTag = RtkMeetingNameTag(
    meeting: rtkClient,
    participant: participant
)
view.addSubview(nameTag)
```

### Update participant

```swift
import RealtimeKitUI

let nameTag = RtkMeetingNameTag(
    meeting: rtkClient,
    participant: participant
)
view.addSubview(nameTag)

// Switch to a different participant
nameTag.set(participant: newParticipant)
nameTag.refresh()
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-name-tag/#page","headline":"RtkMeetingNameTag · Cloudflare Realtime docs","description":"API reference for RtkMeetingNameTag component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-name-tag/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingTitleLabel component (iOS Library)
title: RtkMeetingTitleLabel
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingTitleLabel

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-title-label/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A label that displays the meeting title from the meeting metadata.

## Initializer parameters

| Parameter  | Type              | Required | Default                                | Description                                            |
| ---------- | ----------------- | -------- | -------------------------------------- | ------------------------------------------------------ |
| meeting    | RealtimeKitClient | ✅        | \-                                     | The RealtimeKit client instance for the active meeting |
| appearance | RtkTextAppearance | ❌        | AppTheme.shared.meetingTitleAppearance | Text appearance configuration for font and color       |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let titleLabel = RtkMeetingTitleLabel(meeting: rtkClient)
view.addSubview(titleLabel)
```

### With custom appearance

```swift
import RealtimeKitUI

let appearance = RtkTextAppearance(
    font: UIFont.systemFont(ofSize: 18, weight: .bold),
    textColor: .white
)
let titleLabel = RtkMeetingTitleLabel(
    meeting: rtkClient,
    appearance: appearance
)
view.addSubview(titleLabel)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-title-label/#page","headline":"RtkMeetingTitleLabel · Cloudflare Realtime docs","description":"API reference for RtkMeetingTitleLabel component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-meeting-title-label/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMoreButtonControlBar component (iOS Library)
title: RtkMoreButtonControlBar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMoreButtonControlBar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-more-button-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A control bar button that opens a bottom sheet menu with meeting actions such as chat, polls, and participant list.

## Initializer parameters

| Parameter                       | Type              | Required | Default | Description                                                |
| ------------------------------- | ----------------- | -------- | ------- | ---------------------------------------------------------- |
| meeting                         | RealtimeKitClient | ✅        | \-      | The RealtimeKit client instance                            |
| presentingViewController        | UIViewController  | ✅        | \-      | View controller used to present the bottom sheet           |
| settingViewControllerCompletion | (() -> Void)?     | ❌        | nil     | Closure called when the settings view controller dismisses |

## Methods

| Method            | Return Type | Description                                      |
| ----------------- | ----------- | ------------------------------------------------ |
| hideBottomSheet() | Void        | Programmatically dismisses the bottom sheet menu |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let moreButton = RtkMoreButtonControlBar(
    meeting: rtkClient,
    presentingViewController: self
)
view.addSubview(moreButton)
```

### With settings completion

```swift
import RealtimeKitUI

let moreButton = RtkMoreButtonControlBar(
    meeting: rtkClient,
    presentingViewController: self,
    settingViewControllerCompletion: {
        print("Settings dismissed")
    }
)
view.addSubview(moreButton)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-more-button-control-bar/#page","headline":"RtkMoreButtonControlBar · Cloudflare Realtime docs","description":"API reference for RtkMoreButtonControlBar component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-more-button-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMoreMenu component (iOS Library)
title: RtkMoreMenu
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMoreMenu

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-more-menu/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A bottom sheet menu that displays meeting action options such as chat, polls, and participant list.

## Initializer parameters

| Parameter | Type                         | Required | Default | Description                                      |
| --------- | ---------------------------- | -------- | ------- | ------------------------------------------------ |
| title     | String?                      | ❌        | nil     | Optional title displayed at the top of the menu  |
| features  | \[MenuType\]                 | ✅        | \-      | Array of menu items to display                   |
| onSelect  | @escaping (MenuType) -> Void | ✅        | \-      | Closure called when the user selects a menu item |

## Methods

| Method                  | Return Type | Description                                                 |
| ----------------------- | ----------- | ----------------------------------------------------------- |
| show(on:)               | Void        | Presents the menu as a bottom sheet on the specified UIView |
| reload(title:features:) | Void        | Reloads the menu with a new title and set of features       |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let menu = RtkMoreMenu(
    features: [.chat, .polls, .participants],
    onSelect: { menuType in
        print("Selected: \(menuType)")
    }
)
menu.show(on: self.view)
```

### With title

```swift
import RealtimeKitUI

let menu = RtkMoreMenu(
    title: "More Options",
    features: [.chat, .polls, .participants],
    onSelect: { menuType in
        switch menuType {
        case .chat:
            print("Open chat")
        case .polls:
            print("Open polls")
        case .participants:
            print("Open participants")
        default:
            break
        }
    }
)
menu.show(on: self.view)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-more-menu/#page","headline":"RtkMoreMenu · Cloudflare Realtime docs","description":"API reference for RtkMoreMenu component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-more-menu/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNameTag component (iOS Library)
title: RtkNameTag
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNameTag

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-name-tag/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Base name tag view with an icon, title, and optional subtitle. Serves as the foundation for `RtkMeetingNameTag`.

## Initializer parameters

| Parameter  | Type                 | Required | Default | Description                                       |
| ---------- | -------------------- | -------- | ------- | ------------------------------------------------- |
| image      | RtkImage             | ✅        | \-      | The icon image displayed in the name tag          |
| appearance | RtkNameTagAppearance | ❌        | \-      | Appearance configuration for the name tag         |
| title      | String               | ✅        | \-      | The primary text displayed in the name tag        |
| subtitle   | String               | ❌        | ""      | Optional secondary text displayed below the title |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let nameTag = RtkNameTag(
    image: RtkImage(image: UIImage(systemName: "mic")),
    title: "John Doe"
)
view.addSubview(nameTag)
```

### With subtitle

```swift
import RealtimeKitUI

let nameTag = RtkNameTag(
    image: RtkImage(image: UIImage(systemName: "mic")),
    title: "John Doe",
    subtitle: "Host"
)
view.addSubview(nameTag)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-name-tag/#page","headline":"RtkNameTag · Cloudflare Realtime docs","description":"API reference for RtkNameTag component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-name-tag/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNavigationBar component (iOS Library)
title: RtkNavigationBar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNavigationBar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-navigation-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A navigation bar with a title label and a close or back button. Used for modal screens such as chat, polls, and participant lists.

## Initializer parameters

| Parameter | Type   | Required | Default | Description                                    |
| --------- | ------ | -------- | ------- | ---------------------------------------------- |
| title     | String | ✅        | \-      | The title text displayed in the navigation bar |

## Properties

| Property   | Type                | Required | Default | Description                                               |
| ---------- | ------------------- | -------- | ------- | --------------------------------------------------------- |
| titleLabel | RtkLabel            | \-       | \-      | The label displaying the navigation bar title (read-only) |
| leftButton | RtkControlBarButton | \-       | \-      | The close or back button on the left side (read-only)     |

## Methods

| Method                        | Return Type | Description                                       |
| ----------------------------- | ----------- | ------------------------------------------------- |
| setBackButtonClick(callBack:) | Void        | Sets the tap handler for the back or close button |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let navBar = RtkNavigationBar(title: "Participants")
view.addSubview(navBar)
```

### With back button handler

```swift
import RealtimeKitUI

let navBar = RtkNavigationBar(title: "Chat")
navBar.setBackButtonClick {
    self.dismiss(animated: true)
}
view.addSubview(navBar)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-navigation-bar/#page","headline":"RtkNavigationBar · Cloudflare Realtime docs","description":"API reference for RtkNavigationBar component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-navigation-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNotificationBadgeView component (iOS Library)
title: RtkNotificationBadgeView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNotificationBadgeView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-notification-badge-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A small circular badge view that displays a notification count. Hides automatically when the count is zero and shows "99+" for counts over 99.

## Methods

| Method             | Return Type | Description                                                                          |
| ------------------ | ----------- | ------------------------------------------------------------------------------------ |
| setBadgeCount(\_:) | Void        | Sets the badge count. Hides the badge at zero and displays "99+" for values over 99. |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let badge = RtkNotificationBadgeView()
badge.setBadgeCount(5)
view.addSubview(badge)
```

### Reset badge

```swift
import RealtimeKitUI

let badge = RtkNotificationBadgeView()
badge.setBadgeCount(3)
view.addSubview(badge)

// Hide the badge by setting count to zero
badge.setBadgeCount(0)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-notification-badge-view/#page","headline":"RtkNotificationBadgeView · Cloudflare Realtime docs","description":"API reference for RtkNotificationBadgeView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-notification-badge-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNotificationConfig component (iOS Library)
title: RtkNotificationConfig
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNotificationConfig

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-notification-config/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Configuration class for controlling notification behavior in meetings. Manages sound and toast notifications for participant join/leave events, chat messages, and polls.

## Properties

| Property          | Type            | Required | Default           | Description                                        |
| ----------------- | --------------- | -------- | ----------------- | -------------------------------------------------- |
| participantJoined | RtkNotification | ❌        | RtkNotification() | Notification settings for participant join events  |
| participantLeft   | RtkNotification | ❌        | RtkNotification() | Notification settings for participant leave events |
| newChatArrived    | RtkNotification | ❌        | RtkNotification() | Notification settings for new chat messages        |
| newPollArrived    | RtkNotification | ❌        | RtkNotification() | Notification settings for new poll events          |

## RtkNotification properties

Each `RtkNotification` instance contains the following properties:

| Property  | Type | Required | Default | Description                          |
| --------- | ---- | -------- | ------- | ------------------------------------ |
| playSound | Bool | ❌        | true    | Whether to play a notification sound |
| showToast | Bool | ❌        | true    | Whether to show a toast notification |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let rtkUI = RealtimeKitUI(meetingInfo: meetingInfo)
// Access the default notification config
let notificationConfig = rtkUI.notification
```

### Customize notifications

```swift
import RealtimeKitUI

let rtkUI = RealtimeKitUI(meetingInfo: meetingInfo)

// Disable sound for participant join events
rtkUI.notification.participantJoined.playSound = false

// Disable toast for chat messages
rtkUI.notification.newChatArrived.showToast = false
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-notification-config/#page","headline":"RtkNotificationConfig · Cloudflare Realtime docs","description":"API reference for RtkNotificationConfig component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-notification-config/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantCountView component (iOS Library)
title: RtkParticipantCountView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantCountView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-participant-count-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A label that displays the current participant count. Automatically updates when participants join or leave the meeting.

## Initializer parameters

| Parameter  | Type              | Required | Default                                    | Description                                            |
| ---------- | ----------------- | -------- | ------------------------------------------ | ------------------------------------------------------ |
| meeting    | RealtimeKitClient | ✅        | \-                                         | The RealtimeKit client instance for the active meeting |
| appearance | RtkTextAppearance | ❌        | AppTheme.shared.participantCountAppearance | Text appearance configuration for font and color       |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let countView = RtkParticipantCountView(meeting: rtkClient)
view.addSubview(countView)
```

### With custom appearance

```swift
import RealtimeKitUI

let appearance = RtkTextAppearance(
    font: UIFont.systemFont(ofSize: 14, weight: .medium),
    textColor: .lightGray
)
let countView = RtkParticipantCountView(
    meeting: rtkClient,
    appearance: appearance
)
view.addSubview(countView)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-participant-count-view/#page","headline":"RtkParticipantCountView · Cloudflare Realtime docs","description":"API reference for RtkParticipantCountView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-participant-count-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantTileView component (iOS Library)
title: RtkParticipantTileView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantTileView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-participant-tile-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A complete participant tile view that displays video, avatar, name tag, and pin indicator. Combines `RtkVideoView`, `RtkAvatarView`, and `RtkMeetingNameTag` into a single composable view.

## Initializer parameters

| Parameter                | Type                  | Required | Default | Description                                                    |
| ------------------------ | --------------------- | -------- | ------- | -------------------------------------------------------------- |
| rtkClient                | RealtimeKitClient     | ✅        | \-      | The RealtimeKit client instance                                |
| participant              | RtkMeetingParticipant | ✅        | \-      | The participant to display                                     |
| isForLocalUser           | Bool                  | ✅        | \-      | Whether this tile represents the local user                    |
| showScreenShareVideoView | Bool                  | ❌        | false   | Whether to show the screen share video instead of camera video |

## Properties

| Property  | Type               | Required | Default | Description                                          |
| --------- | ------------------ | -------- | ------- | ---------------------------------------------------- |
| nameTag   | RtkMeetingNameTag! | \-       | \-      | The name tag view displayed on the tile              |
| viewModel | VideoPeerViewModel | \-       | \-      | The view model managing participant data (read-only) |

## Methods

| Method              | Return Type | Description                                      |
| ------------------- | ----------- | ------------------------------------------------ |
| pinView(show: Bool) | Void        | Shows or hides the pin indicator on the tile     |
| refreshVideo()      | Void        | Refreshes the video renderer for the participant |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let tileView = RtkParticipantTileView(
    rtkClient: rtkClient,
    participant: participant,
    isForLocalUser: false
)
view.addSubview(tileView)
```

### Local user tile with screen share

```swift
import RealtimeKitUI

let localTile = RtkParticipantTileView(
    rtkClient: rtkClient,
    participant: localParticipant,
    isForLocalUser: true,
    showScreenShareVideoView: true
)
view.addSubview(localTile)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-participant-tile-view/#page","headline":"RtkParticipantTileView · Cloudflare Realtime docs","description":"API reference for RtkParticipantTileView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-participant-tile-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPluginScreenShareTabButton component (iOS Library)
title: RtkPluginScreenShareTabButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPluginScreenShareTabButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-plugin-screen-share-tab-button/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A tab button used in the plugin and screen share tab selector. Represents a single tab in the `RtkActiveTabSelectorView`.

## Initializer parameters

| Parameter  | Type                                    | Required | Default | Description                                 |
| ---------- | --------------------------------------- | -------- | ------- | ------------------------------------------- |
| image      | RtkImage?                               | ✅        | \-      | The icon image for the tab button           |
| title      | String                                  | ❌        | ""      | The title text for the tab button           |
| id         | String                                  | ❌        | ""      | A unique identifier for the tab button      |
| appearance | RtkPluginScreenShareTabButtonAppearance | ❌        | \-      | Appearance configuration for the tab button |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let tabButton = RtkPluginScreenShareTabButton(
    image: RtkImage(image: UIImage(systemName: "square.and.arrow.up")),
    title: "Screen Share"
)
```

### With identifier

```swift
import RealtimeKitUI

let tabButton = RtkPluginScreenShareTabButton(
    image: RtkImage(image: UIImage(systemName: "pencil.tip")),
    title: "Whiteboard",
    id: "whiteboard-plugin"
)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-plugin-screen-share-tab-button/#page","headline":"RtkPluginScreenShareTabButton · Cloudflare Realtime docs","description":"API reference for RtkPluginScreenShareTabButton component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-plugin-screen-share-tab-button/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPluginsView component (iOS Library)
title: RtkPluginsView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPluginsView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-plugins-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A composite view for displaying plugins and screen share content. Includes a tab selector, plugin content area, and a floating active speaker view.

## Initializer parameters

| Parameter          | Type               | Required | Default | Description                                 |
| ------------------ | ------------------ | -------- | ------- | ------------------------------------------- |
| videoPeerViewModel | VideoPeerViewModel | ✅        | \-      | The view model for the active speaker video |

## Properties

| Property        | Type                     | Required | Default | Description                                                      |
| --------------- | ------------------------ | -------- | ------- | ---------------------------------------------------------------- |
| activeListView  | RtkActiveTabSelectorView | \-       | \-      | The tab selector for switching between plugins and screen shares |
| pluginVideoView | UIView                   | \-       | \-      | The container view for plugin content                            |
| syncButton      | UIButton                 | \-       | \-      | Button to sync the plugin view with the presenter                |

## Methods

| Method                                         | Return Type | Description                                                  |
| ---------------------------------------------- | ----------- | ------------------------------------------------------------ |
| setButtons(buttons:selectedIndex:clickAction:) | Void        | Configures the tab selector buttons with a selection handler |
| show(pluginView:)                              | Void        | Displays a plugin view in the content area                   |
| showVideoView(participant:)                    | Void        | Displays a participant's video in the content area           |
| showPinnedView(participant:)                   | Void        | Displays a pinned participant's video                        |
| showActiveSpeakerView(participant:)            | Void        | Shows the floating active speaker overlay                    |
| hideActiveSpeaker()                            | Void        | Hides the floating active speaker overlay                    |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let viewModel = VideoPeerViewModel(
    meeting: rtkClient,
    participant: participant,
    showSelfPreviewVideo: false
)
let pluginsView = RtkPluginsView(videoPeerViewModel: viewModel)
view.addSubview(pluginsView)
```

### With tab buttons

```swift
import RealtimeKitUI

let viewModel = VideoPeerViewModel(
    meeting: rtkClient,
    participant: participant,
    showSelfPreviewVideo: false
)
let pluginsView = RtkPluginsView(videoPeerViewModel: viewModel)

let buttons = [
    RtkPluginScreenShareTabButton(image: nil, title: "Screen Share"),
    RtkPluginScreenShareTabButton(image: nil, title: "Whiteboard")
]
pluginsView.setButtons(
    buttons: buttons,
    selectedIndex: 0,
    clickAction: { index in
        print("Selected tab: \(index)")
    }
)
view.addSubview(pluginsView)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-plugins-view/#page","headline":"RtkPluginsView · Cloudflare Realtime docs","description":"API reference for RtkPluginsView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-plugins-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkRecordingView component (iOS Library)
title: RtkRecordingView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkRecordingView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-recording-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A blinking recording indicator displayed when the meeting is being recorded. Shows a red dot with configurable text and image.

## Initializer parameters

| Parameter  | Type                       | Required | Default | Description                                            |
| ---------- | -------------------------- | -------- | ------- | ------------------------------------------------------ |
| meeting    | RealtimeKitClient          | ✅        | \-      | The RealtimeKit client instance for the active meeting |
| title      | String                     | ❌        | "Rec"   | Text label displayed next to the recording indicator   |
| image      | RtkImage?                  | ❌        | nil     | Custom image for the recording indicator               |
| appearance | RtkRecordingViewAppearance | ❌        | \-      | Appearance configuration for the recording indicator   |

## Methods

| Method                | Return Type | Description                                                       |
| --------------------- | ----------- | ----------------------------------------------------------------- |
| blinking(start: Bool) | Void        | Starts or stops the blinking animation on the recording indicator |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let recordingView = RtkRecordingView(meeting: rtkClient)
view.addSubview(recordingView)
```

### With custom title

```swift
import RealtimeKitUI

let recordingView = RtkRecordingView(
    meeting: rtkClient,
    title: "Recording"
)
view.addSubview(recordingView)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-recording-view/#page","headline":"RtkRecordingView · Cloudflare Realtime docs","description":"API reference for RtkRecordingView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-recording-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSetupViewController component (iOS Library)
title: RtkSetupViewController
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSetupViewController

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-setup-view-controller/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Pre-meeting setup screen view controller. Provides video preview, audio and video toggles, and name entry before joining a meeting.

## Initializer parameters

| Parameter   | Type                 | Required | Default | Description                                              |
| ----------- | -------------------- | -------- | ------- | -------------------------------------------------------- |
| meetingInfo | RtkMeetingInfo       | ✅        | \-      | Meeting configuration with auth token and media settings |
| meeting     | RealtimeKitClient    | ✅        | \-      | The RealtimeKit client instance                          |
| completion  | @escaping () -> Void | ✅        | \-      | Closure called when setup completes                      |

## Properties

| Property | Type                         | Required | Default | Description                                              |
| -------- | ---------------------------- | -------- | ------- | -------------------------------------------------------- |
| delegate | SetupViewControllerDelegate? | ❌        | nil     | Delegate notified when the participant joins the meeting |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let setupVC = RtkSetupViewController(
    meetingInfo: meetingInfo,
    meeting: rtkClient,
    completion: {
        print("Setup complete")
    }
)
self.present(setupVC, animated: true)
```

### With delegate

```swift
import RealtimeKitUI

class ViewController: UIViewController, SetupViewControllerDelegate {
    func showSetupScreen() {
        let setupVC = RtkSetupViewController(
            meetingInfo: meetingInfo,
            meeting: rtkClient,
            completion: {
                self.dismiss(animated: true)
            }
        )
        setupVC.delegate = self
        self.present(setupVC, animated: true)
    }
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-setup-view-controller/#page","headline":"RtkSetupViewController · Cloudflare Realtime docs","description":"API reference for RtkSetupViewController component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-setup-view-controller/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkStageActionButtonControlBar component (iOS Library)
title: RtkStageActionButtonControlBar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkStageActionButtonControlBar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-stage-action-button-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A control bar button for webinar stage actions. Supports requesting to join, joining, leaving, and canceling stage requests based on the current stage status.

## Initializer parameters

| Parameter                | Type               | Required | Default | Description                                                |
| ------------------------ | ------------------ | -------- | ------- | ---------------------------------------------------------- |
| rtkClient                | RealtimeKitClient  | ✅        | \-      | The RealtimeKit client instance                            |
| buttonState              | WebinarStageStatus | ✅        | \-      | The current stage status that determines the button action |
| presentingViewController | UIViewController   | ✅        | \-      | View controller used for presenting confirmation dialogs   |

## Properties

| Property   | Type                                      | Required | Default | Description                                              |
| ---------- | ----------------------------------------- | -------- | ------- | -------------------------------------------------------- |
| dataSource | RtkStageActionButtonControlBarDataSource? | ❌        | nil     | Data source for customizing stage action button behavior |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let stageButton = RtkStageActionButtonControlBar(
    rtkClient: rtkClient,
    buttonState: .requestToJoinStage,
    presentingViewController: self
)
view.addSubview(stageButton)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-stage-action-button-control-bar/#page","headline":"RtkStageActionButtonControlBar · Cloudflare Realtime docs","description":"API reference for RtkStageActionButtonControlBar component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-stage-action-button-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSwitchCameraButtonControlBar component (iOS Library)
title: RtkSwitchCameraButtonControlBar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSwitchCameraButtonControlBar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-switch-camera-button-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A control bar button that switches between the front and rear cameras.

## Initializer parameters

| Parameter | Type              | Required | Default | Description                     |
| --------- | ----------------- | -------- | ------- | ------------------------------- |
| meeting   | RealtimeKitClient | ✅        | \-      | The RealtimeKit client instance |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let switchCameraButton = RtkSwitchCameraButtonControlBar(meeting: rtkClient)
view.addSubview(switchCameraButton)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-switch-camera-button-control-bar/#page","headline":"RtkSwitchCameraButtonControlBar · Cloudflare Realtime docs","description":"API reference for RtkSwitchCameraButtonControlBar component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-switch-camera-button-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkVideoButtonControlBar component (iOS Library)
title: RtkVideoButtonControlBar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkVideoButtonControlBar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-video-button-control-bar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A control bar button that toggles the local camera on and off. Checks camera permissions before toggling.

## Initializer parameters

| Parameter | Type              | Required | Default | Description                     |
| --------- | ----------------- | -------- | ------- | ------------------------------- |
| rtkClient | RealtimeKitClient | ✅        | \-      | The RealtimeKit client instance |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let videoButton = RtkVideoButtonControlBar(rtkClient: rtkClient)
view.addSubview(videoButton)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-video-button-control-bar/#page","headline":"RtkVideoButtonControlBar · Cloudflare Realtime docs","description":"API reference for RtkVideoButtonControlBar component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-video-button-control-bar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkVideoView component (iOS Library)
title: RtkVideoView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkVideoView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-video-view/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Renders a participant's video stream. Supports self-preview, remote participant video, and screen share rendering.

## Initializer parameters

| Parameter       | Type                  | Required | Default | Description                                               |
| --------------- | --------------------- | -------- | ------- | --------------------------------------------------------- |
| participant     | RtkMeetingParticipant | ✅        | \-      | The participant whose video to render                     |
| showSelfPreview | Bool                  | ❌        | false   | Whether to show the local camera preview                  |
| showScreenShare | Bool                  | ❌        | false   | Whether to show the screen share stream instead of camera |

## Methods

| Method             | Return Type | Description                                               |
| ------------------ | ----------- | --------------------------------------------------------- |
| reattachRenderer() | Void        | Reattaches the video renderer to the participant stream   |
| prepareForReuse()  | Void        | Prepares the view for reuse in a collection or table view |
| clean()            | Void        | Releases the video renderer and cleans up resources       |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let videoView = RtkVideoView(participant: participant)
view.addSubview(videoView)
```

### Self-preview

```swift
import RealtimeKitUI

let previewView = RtkVideoView(
    participant: localParticipant,
    showSelfPreview: true
)
view.addSubview(previewView)
```

### Screen share

```swift
import RealtimeKitUI

let screenShareView = RtkVideoView(
    participant: participant,
    showScreenShare: true
)
view.addSubview(screenShareView)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-video-view/#page","headline":"RtkVideoView · Cloudflare Realtime docs","description":"API reference for RtkVideoView component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-video-view/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkWaitListParticipantUpdateEventListener component (iOS Library)
title: RtkWaitListParticipantUpdateEventListener
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkWaitListParticipantUpdateEventListener

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-wait-list-participant-update-event-listener/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A helper class for listening to waitlist participant events. Provides callbacks for join, remove, accept, and reject events, and methods for managing waitlist requests.

## Initializer parameters

| Parameter | Type              | Required | Default | Description                     |
| --------- | ----------------- | -------- | ------- | ------------------------------- |
| rtkClient | RealtimeKitClient | ✅        | \-      | The RealtimeKit client instance |

## Callback properties

| Property                             | Type          | Required | Default | Description                                            |
| ------------------------------------ | ------------- | -------- | ------- | ------------------------------------------------------ |
| participantJoinedCompletion          | (() -> Void)? | ❌        | nil     | Called when a participant joins the waitlist           |
| participantRemovedCompletion         | (() -> Void)? | ❌        | nil     | Called when a participant is removed from the waitlist |
| participantRequestAcceptedCompletion | (() -> Void)? | ❌        | nil     | Called when a waitlist request is accepted             |
| participantRequestRejectCompletion   | (() -> Void)? | ❌        | nil     | Called when a waitlist request is rejected             |

## Methods

| Method                             | Return Type | Description                                              |
| ---------------------------------- | ----------- | -------------------------------------------------------- |
| acceptWaitingRequest(participant:) | Void        | Accepts a participant's waitlist request                 |
| rejectWaitingRequest(participant:) | Void        | Rejects a participant's waitlist request                 |
| clean()                            | Void        | Removes all registered listeners and cleans up resources |

## Usage Examples

### Basic Usage

```swift
import RealtimeKitUI

let waitlistListener = RtkWaitListParticipantUpdateEventListener(
    rtkClient: rtkClient
)

waitlistListener.participantJoinedCompletion = {
    print("New participant in waitlist")
}

waitlistListener.participantRemovedCompletion = {
    print("Participant removed from waitlist")
}
```

### Accept or reject requests

```swift
import RealtimeKitUI

let waitlistListener = RtkWaitListParticipantUpdateEventListener(
    rtkClient: rtkClient
)

// Accept a waiting participant
waitlistListener.acceptWaitingRequest(participant: waitingParticipant)

// Reject a waiting participant
waitlistListener.rejectWaitingRequest(participant: waitingParticipant)
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-wait-list-participant-update-event-listener/#page","headline":"RtkWaitListParticipantUpdateEventListener · Cloudflare Realtime docs","description":"API reference for RtkWaitListParticipantUpdateEventListener component (iOS Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/ios/rtk-wait-list-participant-update-event-listener/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Complete API reference for React library components
title: React
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# React

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/#page","headline":"React · Cloudflare Realtime docs","description":"Complete API reference for React library components","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Complete API reference for React Native library components
title: React Native
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# React Native

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/#page","headline":"React Native · Cloudflare Realtime docs","description":"Complete API reference for React Native library components","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAudioVisualizer component (React Native Library)
title: RtkAudioVisualizer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAudioVisualizer

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkaudiovisualizer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays an audio visualizer with animated bars representing a participant's audio levels.

## Properties

| Property      | Type                   | Required | Default         | Description                                    |      |                        |
| ------------- | ---------------------- | -------- | --------------- | ---------------------------------------------- | ---- | ---------------------- |
| participant   | Peer \| RTKParticipant | ✅        | \-              | The participant whose audio to visualize       |      |                        |
| iconPack      | IconPack               | ❌        | defaultIconPack | Custom icon pack for icons                     |      |                        |
| isScreenshare | boolean                | ❌        | false           | Whether this is a screenshare audio visualizer |      |                        |
| size          | 'lg' \| 'md'           | 'sm'     | 'xl'            | ❌                                              | 'sm' | Size of the visualizer |
| variant       | 'bar'                  | ❌        | 'bar'           | Visual variant of the visualizer               |      |                        |

## Usage Examples

### Basic Usage

```tsx
import { RtkAudioVisualizer } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkAudioVisualizer participant={participant} />;
}
```

### With Properties

```tsx
import { RtkAudioVisualizer } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkAudioVisualizer participant={participant} size="md" variant="bar" />
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkaudiovisualizer/#page","headline":"RtkAudioVisualizer · Cloudflare Realtime docs","description":"API reference for RtkAudioVisualizer component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkaudiovisualizer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAvatar component (React Native Library)
title: RtkAvatar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAvatar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkavatar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays a participant's avatar image or initials-based fallback avatar.

## Properties

| Property    | Type                      | Required | Default         | Description                             |                             |                    |
| ----------- | ------------------------- | -------- | --------------- | --------------------------------------- | --------------------------- | ------------------ |
| participant | RTKParticipant \| RTKSelf | ✅        | \-              | The participant whose avatar to display |                             |                    |
| iconPack    | IconPack                  | ❌        | defaultIconPack | Custom icon pack                        |                             |                    |
| size        | 'lg' \| 'md'              | 'sm'     | 'xl'            | ❌                                       | 'sm'                        | Size of the avatar |
| variant     | 'circular' \| 'hexagon'   | 'square' | ❌               | 'circular'                              | Shape variant of the avatar |                    |

## Usage Examples

### Basic Usage

```tsx
import { RtkAvatar } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkAvatar participant={participant} />;
}
```

### With Properties

```tsx
import { RtkAvatar } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkAvatar participant={participant} size="lg" variant="circular" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkavatar/#page","headline":"RtkAvatar · Cloudflare Realtime docs","description":"API reference for RtkAvatar component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkavatar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkBreakoutRoomsManager component (React Native Library)
title: RtkBreakoutRoomsManager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkBreakoutRoomsManager

Last updated Jul 9, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkbreakoutroomsmanager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Full-screen modal for managing breakout rooms. Hosts can create rooms, assign participants, rename rooms, shuffle participants randomly, and start, update, or close a breakout session. Participants without alter permissions see a simplified room-switcher view instead.

The component is visibility-controlled by the `activeBreakoutRoomsManager` field in the UI state. Use `RtkBreakoutRoomsToggle` to open it, or set the state directly.

## Properties

| Property | Type              | Required | Default         | Description                      |
| -------- | ----------------- | -------- | --------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |
| states   | States            | ❌        | \-              | UI state object                  |

## Usage Examples

### Basic Usage

```tsx
import { RtkBreakoutRoomsManager } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkBreakoutRoomsManager meeting={meeting} />;
}
```

### With Custom Icon Pack

```tsx
import { RtkBreakoutRoomsManager } from "@cloudflare/realtimekit-react-native-ui";
import { myIconPack } from "./icons";

function MyComponent() {
	return <RtkBreakoutRoomsManager meeting={meeting} iconPack={myIconPack} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkbreakoutroomsmanager/#page","headline":"RtkBreakoutRoomsManager · Cloudflare Realtime docs","description":"API reference for RtkBreakoutRoomsManager component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkbreakoutroomsmanager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-09","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkBreakoutRoomsToggle component (React Native Library)
title: RtkBreakoutRoomsToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkBreakoutRoomsToggle

Last updated Jul 9, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkbreakoutroomstoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Control bar button that opens and closes the `RtkBreakoutRoomsManager`. Automatically hides if the local participant has neither `canAlterConnectedMeetings` nor `canSwitchConnectedMeetings` permission.

## Properties

| Property | Type              | Required | Default         | Description                      |    |           |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkBreakoutRoomsToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkBreakoutRoomsToggle meeting={meeting} />;
}
```

### With Size

```tsx
import { RtkBreakoutRoomsToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkBreakoutRoomsToggle meeting={meeting} size="md" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkbreakoutroomstoggle/#page","headline":"RtkBreakoutRoomsToggle · Cloudflare Realtime docs","description":"API reference for RtkBreakoutRoomsToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkbreakoutroomstoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-09","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkButton component (React Native Library)
title: RtkButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkbutton/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A general-purpose button component with multiple variants and sizes.

## Properties

| Property | Type                | Required  | Default     | Description                      |             |                      |
| -------- | ------------------- | --------- | ----------- | -------------------------------- | ----------- | -------------------- |
| children | ReactNode           | ❌         | \-          | Button content/label             |             |                      |
| onClick  | any                 | ✅         | \-          | Press handler callback           |             |                      |
| kind     | 'button' \| 'icon'  | 'wide'    | ❌           | 'button'                         | Button kind |                      |
| variant  | 'danger' \| 'ghost' | 'primary' | 'secondary' | ❌                                | \-          | Visual style variant |
| size     | 'lg' \| 'md'        | 'sm'      | 'xl'        | ❌                                | \-          | Button size          |
| reverse  | boolean             | ❌         | false       | Reverse the button content order |             |                      |
| disabled | boolean             | ❌         | \-          | Whether the button is disabled   |             |                      |
| style    | StyleProp<any>      | ❌         | \-          | Custom React Native styles       |             |                      |

## Usage Examples

### Basic Usage

```tsx
import { RtkButton } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkButton onClick={() => console.log("pressed")}>Press Me</RtkButton>;
}
```

### With Properties

```tsx
import { RtkButton } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkButton
			onClick={() => console.log("pressed")}
			variant="primary"
			size="md"
			kind="wide"
		>
			Join Meeting
		</RtkButton>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkbutton/#page","headline":"RtkButton · Cloudflare Realtime docs","description":"API reference for RtkButton component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkbutton/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkCameraToggle component (React Native Library)
title: RtkCameraToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkCameraToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkcameratoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to enable or disable the local participant's camera. Automatically hides if the participant lacks video production permissions.

## Properties

| Property | Type                     | Required | Default         | Description                      |    |           |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant                   |    |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkCameraToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkCameraToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkCameraToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkCameraToggle meeting={meeting} size="md" variant="button" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkcameratoggle/#page","headline":"RtkCameraToggle · Cloudflare Realtime docs","description":"API reference for RtkCameraToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkcameratoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChat component (React Native Library)
title: RtkChat
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChat

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkchat/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Full chat interface with message list, text input, image/file upload support, and pinned messages.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| config   | UIConfig          | ❌        | defaultConfig   | UI configuration object          |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkChat } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkChat meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkChat } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkChat meeting={meeting} size="md" config={customConfig} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkchat/#page","headline":"RtkChat · Cloudflare Realtime docs","description":"API reference for RtkChat component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkchat/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatToggle component (React Native Library)
title: RtkChatToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkchattoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to open the chat sidebar panel. Hides if chat permissions are not available.

## Properties

| Property | Type                     | Required | Default | Description                      |    |           |
| -------- | ------------------------ | -------- | ------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-      | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'    | ❌                                | \- | Icon size |
| states   | States                   | ❌        | \-      | UI state object                  |    |           |
| variant  | 'button' \| 'horizontal' | ❌        | \-      | Layout variant                   |    |           |
| iconPack | IconPack                 | ❌        | \-      | Custom icon pack                 |    |           |
| t        | RtkI18n                  | ❌        | \-      | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkChatToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkChatToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkChatToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkChatToggle meeting={meeting} size="md" variant="button" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkchattoggle/#page","headline":"RtkChatToggle · Cloudflare Realtime docs","description":"API reference for RtkChatToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkchattoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkClock component (React Native Library)
title: RtkClock
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkClock

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkclock/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays elapsed meeting time as a running clock (HH:MM:SS or MM:SS).

## Properties

| Property | Type              | Required | Default         | Description                      |
| -------- | ----------------- | -------- | --------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import { RtkClock } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkClock meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkClock } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkClock meeting={meeting} iconPack={customIconPack} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkclock/#page","headline":"RtkClock · Cloudflare Realtime docs","description":"API reference for RtkClock component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkclock/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkControlbar component (React Native Library)
title: RtkControlbar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkControlbar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkcontrolbar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The main control bar container that renders meeting controls (mic, camera, leave, and more) using the declarative UI config system.

## Properties

| Property | Type               | Required | Default       | Description                      |      |              |
| -------- | ------------------ | -------- | ------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient  | ✅        | \-            | The RealtimeKit meeting instance |      |              |
| config   | UIConfig           | ❌        | defaultConfig | UI configuration object          |      |              |
| size     | 'lg' \| 'md'       | 'sm'     | 'xl'          | ❌                                | 'sm' | Size variant |
| variant  | 'boxed' \| 'solid' | ❌        | 'solid'       | Visual style variant             |      |              |
| iconPack | IconPack           | ❌        | \-            | Custom icon pack                 |      |              |
| states   | States             | ❌        | \-            | UI state object                  |      |              |
| t        | RtkI18n            | ❌        | \-            | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkControlbar meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkControlbar
			meeting={meeting}
			variant="solid"
			size="md"
			config={customConfig}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkcontrolbar/#page","headline":"RtkControlbar · Cloudflare Realtime docs","description":"API reference for RtkControlbar component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkcontrolbar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkControlbarButton component (React Native Library)
title: RtkControlbarButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkControlbarButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkcontrolbarbutton/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A reusable button for the control bar with icon, label, loading state, and warning indicator support.

## Properties

| Property    | Type                     | Required | Default         | Description                          |      |           |
| ----------- | ------------------------ | -------- | --------------- | ------------------------------------ | ---- | --------- |
| label       | string                   | ✅        | ' '             | Button label text                    |      |           |
| icon        | string                   | ✅        | \-              | SVG icon string                      |      |           |
| iconPack    | IconPack                 | ❌        | defaultIconPack | Custom icon pack                     |      |           |
| isLoading   | boolean                  | ❌        | false           | Show loading spinner instead of icon |      |           |
| disabled    | boolean                  | ❌        | false           | Whether the button is disabled       |      |           |
| onClick     | () => void               | ❌        | \-              | Press handler callback               |      |           |
| showWarning | boolean                  | ❌        | false           | Show warning indicator               |      |           |
| variant     | 'button' \| 'horizontal' | ❌        | 'button'        | Layout variant                       |      |           |
| size        | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                    | 'sm' | Icon size |

## Usage Examples

### Basic Usage

```tsx
import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkControlbarButton label="Mute" icon={muteIcon} />;
}
```

### With Properties

```tsx
import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkControlbarButton
			label="Mute"
			icon={muteIcon}
			variant="horizontal"
			size="md"
			onClick={() => console.log("pressed")}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkcontrolbarbutton/#page","headline":"RtkControlbarButton · Cloudflare Realtime docs","description":"API reference for RtkControlbarButton component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkcontrolbarbutton/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDialog component (React Native Library)
title: RtkDialog
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDialog

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkdialog/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A modal dialog overlay component with optional close button.

## Properties

| Property         | Type              | Required | Default         | Description                      |    |              |
| ---------------- | ----------------- | -------- | --------------- | -------------------------------- | -- | ------------ |
| children         | ReactNode         | ✅        | \-              | Dialog content                   |    |              |
| meeting          | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |    |              |
| onRtkDialogClose | any               | ✅        | \-              | Callback when dialog is closed   |    |              |
| config           | UIConfig          | ❌        | defaultConfig   | UI configuration object          |    |              |
| hideCloseButton  | boolean           | ❌        | false           | Hide the close button            |    |              |
| open             | boolean           | ❌        | \-              | Whether the dialog is visible    |    |              |
| size             | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | \- | Size variant |
| states           | States            | ❌        | \-              | UI state object                  |    |              |
| iconPack         | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |    |              |
| t                | RtkI18n           | ❌        | \-              | i18n translation function        |    |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkDialog } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkDialog meeting={meeting} onRtkDialogClose={() => setOpen(false)}>
			<Text>Dialog content</Text>
		</RtkDialog>
	);
}
```

### With Properties

```tsx
import { RtkDialog } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkDialog
			meeting={meeting}
			open={isOpen}
			onRtkDialogClose={() => setOpen(false)}
			hideCloseButton={false}
			size="md"
		>
			<Text>Dialog content</Text>
		</RtkDialog>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkdialog/#page","headline":"RtkDialog · Cloudflare Realtime docs","description":"API reference for RtkDialog component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkdialog/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDialogManager component (React Native Library)
title: RtkDialogManager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDialogManager

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkdialogmanager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Manages and renders modal dialogs for leave confirmation, settings, join stage confirmation, and permissions messages.

## Properties

| Property         | Type              | Required | Default         | Description                      |    |              |
| ---------------- | ----------------- | -------- | --------------- | -------------------------------- | -- | ------------ |
| meeting          | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |    |              |
| config           | UIConfig          | ❌        | defaultConfig   | UI configuration object          |    |              |
| iconPack         | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |    |              |
| size             | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | \- | Size variant |
| states           | States            | ❌        | \-              | UI state object                  |    |              |
| t                | RtkI18n           | ❌        | \-              | i18n translation function        |    |              |
| onRtkStateUpdate | (e) => void       | ❌        | () => \\{\\}    | Callback when UI state changes   |    |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkDialogManager } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkDialogManager meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkDialogManager } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkDialogManager
			meeting={meeting}
			config={customConfig}
			size="md"
			onRtkStateUpdate={(e) => handleStateUpdate(e)}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkdialogmanager/#page","headline":"RtkDialogManager · Cloudflare Realtime docs","description":"API reference for RtkDialogManager component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkdialogmanager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkEndedScreen component (React Native Library)
title: RtkEndedScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkEndedScreen

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkendedscreen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Screen displayed when the meeting has ended.

## Properties

| Property | Type              | Required | Default       | Description                      |    |              |
| -------- | ----------------- | -------- | ------------- | -------------------------------- | -- | ------------ |
| meeting  | RealtimeKitClient | ❌        | \-            | The RealtimeKit meeting instance |    |              |
| config   | UIConfig          | ❌        | defaultConfig | UI configuration object          |    |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'          | ❌                                | \- | Size variant |
| states   | States            | ❌        | \-            | UI state object                  |    |              |
| t        | RtkI18n           | ❌        | \-            | i18n translation function        |    |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkEndedScreen } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkEndedScreen />;
}
```

### With Properties

```tsx
import { RtkEndedScreen } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkEndedScreen meeting={meeting} config={customConfig} size="md" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkendedscreen/#page","headline":"RtkEndedScreen · Cloudflare Realtime docs","description":"API reference for RtkEndedScreen component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkendedscreen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkFileMessage component (React Native Library)
title: RtkFileMessage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkFileMessage

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkfilemessage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Renders a file message in chat with file name, size, extension, and download button.

## Properties

| Property    | Type     | Required | Default         | Description                                         |
| ----------- | -------- | -------- | --------------- | --------------------------------------------------- |
| message     | Message  | ✅        | \-              | The chat message object                             |
| isContinued | boolean  | ❌        | false           | Whether this message continues from the same sender |
| now         | Date     | ❌        | new Date()      | Current time for relative timestamps                |
| iconPack    | IconPack | ❌        | defaultIconPack | Custom icon pack                                    |

## Usage Examples

### Basic Usage

```tsx
import { RtkFileMessage } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkFileMessage message={message} />;
}
```

### With Properties

```tsx
import { RtkFileMessage } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkFileMessage message={message} isContinued={true} now={new Date()} />
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkfilemessage/#page","headline":"RtkFileMessage · Cloudflare Realtime docs","description":"API reference for RtkFileMessage component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkfilemessage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkGrid component (React Native Library)
title: RtkGrid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkGrid

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkgrid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The main participant grid that automatically switches between simple, mixed, spotlight, and livestream layouts based on meeting state.

## Properties

| Property    | Type              | Required | Default         | Description                      |      |              |
| ----------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting     | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| config      | UIConfig          | ❌        | defaultConfig   | UI configuration object          |      |              |
| states      | States            | ❌        | \-              | UI state object                  |      |              |
| t           | RtkI18n           | ❌        | \-              | i18n translation function        |      |              |
| aspectRatio | string            | ❌        | '3:4'           | Aspect ratio for grid tiles      |      |              |
| gap         | number            | ❌        | 8               | Gap between grid tiles in pixels |      |              |
| iconPack    | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size        | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |

## Usage Examples

### Basic Usage

```tsx
import { RtkGrid } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkGrid meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkGrid } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkGrid meeting={meeting} aspectRatio="16:9" gap={12} size="md" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkgrid/#page","headline":"RtkGrid · Cloudflare Realtime docs","description":"API reference for RtkGrid component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkgrid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkGridPagination component (React Native Library)
title: RtkGridPagination
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkGridPagination

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkgridpagination/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Pagination controls for navigating between pages of participants in the grid. Shows page numbers and navigation arrows.

## Properties

| Property | Type              | Required | Default         | Description                      |
| -------- | ----------------- | -------- | --------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| states   | States            | ❌        | \-              | UI state object                  |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import { RtkGridPagination } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkGridPagination meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkGridPagination } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkGridPagination
			meeting={meeting}
			iconPack={customIconPack}
			states={states}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkgridpagination/#page","headline":"RtkGridPagination · Cloudflare Realtime docs","description":"API reference for RtkGridPagination component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkgridpagination/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkHeader component (React Native Library)
title: RtkHeader
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkHeader

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkheader/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The meeting header bar that renders logo, title, participant count, clock, and other header elements using the declarative UI config system.

## Properties

| Property | Type              | Required | Default       | Description                      |
| -------- | ----------------- | -------- | ------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-            | The RealtimeKit meeting instance |
| config   | UIConfig          | ❌        | defaultConfig | UI configuration object          |
| iconPack | IconPack          | ❌        | \-            | Custom icon pack                 |
| states   | States            | ❌        | \-            | UI state object                  |
| t        | RtkI18n           | ❌        | \-            | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import { RtkHeader } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkHeader meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkHeader } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkHeader meeting={meeting} config={customConfig} states={states} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkheader/#page","headline":"RtkHeader · Cloudflare Realtime docs","description":"API reference for RtkHeader component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkheader/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkIcon component (React Native Library)
title: RtkIcon
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkIcon

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkicon/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Renders an SVG icon from an icon string, applying the current theme text color.

## Properties

| Property | Type   | Required | Default | Description               |
| -------- | ------ | -------- | ------- | ------------------------- |
| icon     | string | ✅        | \-      | SVG icon string to render |

## Usage Examples

### Basic Usage

```tsx
import { RtkIcon } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkIcon icon={svgIconString} />;
}
```

### With Properties

```tsx
import {
	RtkIcon,
	defaultIconPack,
} from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkIcon icon={defaultIconPack.mic_on} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkicon/#page","headline":"RtkIcon · Cloudflare Realtime docs","description":"API reference for RtkIcon component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkicon/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkIdleScreen component (React Native Library)
title: RtkIdleScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkIdleScreen

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkidlescreen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Loading/idle screen displayed while the meeting is initializing, showing a logo and spinner.

## Properties

| Property | Type     | Required | Default | Description                                 |
| -------- | -------- | -------- | ------- | ------------------------------------------- |
| config   | UIConfig | ✅        | \-      | UI configuration object (used for logo URL) |

## Usage Examples

### Basic Usage

```tsx
import { RtkIdleScreen } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkIdleScreen config={config} />;
}
```

### With Properties

```tsx
import {
	RtkIdleScreen,
	defaultConfig,
} from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkIdleScreen config={defaultConfig} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkidlescreen/#page","headline":"RtkIdleScreen · Cloudflare Realtime docs","description":"API reference for RtkIdleScreen component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkidlescreen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkImageMessage component (React Native Library)
title: RtkImageMessage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkImageMessage

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkimagemessage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Renders an image message in chat with loading indicator and fullscreen support.

## Properties

| Property    | Type     | Required | Default         | Description                                         |
| ----------- | -------- | -------- | --------------- | --------------------------------------------------- |
| message     | any      | ✅        | \-              | The image message object with link property         |
| iconPack    | IconPack | ❌        | defaultIconPack | Custom icon pack                                    |
| isContinued | boolean  | ❌        | false           | Whether this message continues from the same sender |
| now         | Date     | ❌        | new Date()      | Current time for relative timestamps                |
| t           | RtkI18n  | ❌        | \-              | i18n translation function                           |

## Usage Examples

### Basic Usage

```tsx
import { RtkImageMessage } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkImageMessage message={imageMessage} />;
}
```

### With Properties

```tsx
import { RtkImageMessage } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkImageMessage
			message={imageMessage}
			isContinued={false}
			now={new Date()}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkimagemessage/#page","headline":"RtkImageMessage · Cloudflare Realtime docs","description":"API reference for RtkImageMessage component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkimagemessage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkImageViewer component (React Native Library)
title: RtkImageViewer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkImageViewer

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkimageviewer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Image viewer with fullscreen toggle and download functionality for chat images.

## Properties

| Property    | Type             | Required | Default         | Description                                         |    |              |
| ----------- | ---------------- | -------- | --------------- | --------------------------------------------------- | -- | ------------ |
| image       | any              | ✅        | \-              | The image message object                            |    |              |
| size        | 'lg' \| 'md'     | 'sm'     | 'xl'            | ❌                                                   | \- | Size variant |
| iconPack    | IconPack         | ❌        | defaultIconPack | Custom icon pack                                    |    |              |
| t           | RtkI18n          | ❌        | \-              | i18n translation function                           |    |              |
| isContinued | boolean          | ❌        | false           | Whether this message continues from the same sender |    |              |
| \_id        | string \| number | ❌        | \-              | Unique identifier for fullscreen tracking           |    |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkImageViewer } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkImageViewer image={imageMessage} />;
}
```

### With Properties

```tsx
import { RtkImageViewer } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkImageViewer image={imageMessage} size="md" _id="viewer-1" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkimageviewer/#page","headline":"RtkImageViewer · Cloudflare Realtime docs","description":"API reference for RtkImageViewer component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkimageviewer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkJoinStage component (React Native Library)
title: RtkJoinStage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkJoinStage

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkjoinstage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Join stage confirmation dialog with video preview and mic/camera toggles for webinar/livestream participants.

## Properties

| Property | Type              | Required | Default         | Description                      |
| -------- | ----------------- | -------- | --------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| states   | States            | ❌        | \-              | UI state object                  |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import { RtkJoinStage } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkJoinStage meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkJoinStage } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkJoinStage meeting={meeting} iconPack={customIconPack} states={states} />
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkjoinstage/#page","headline":"RtkJoinStage · Cloudflare Realtime docs","description":"API reference for RtkJoinStage component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkjoinstage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLeaveButton component (React Native Library)
title: RtkLeaveButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLeaveButton

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkleavebutton/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Button to trigger the leave meeting confirmation dialog.

## Properties

| Property | Type                     | Required | Default         | Description               |    |             |
| -------- | ------------------------ | -------- | --------------- | ------------------------- | -- | ----------- |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant            |    |             |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                         | \- | Button size |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack          |    |             |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function |    |             |

## Usage Examples

### Basic Usage

```tsx
import { RtkLeaveButton } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLeaveButton />;
}
```

### With Properties

```tsx
import { RtkLeaveButton } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLeaveButton variant="button" size="md" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkleavebutton/#page","headline":"RtkLeaveButton · Cloudflare Realtime docs","description":"API reference for RtkLeaveButton component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkleavebutton/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLeaveMeeting component (React Native Library)
title: RtkLeaveMeeting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLeaveMeeting

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkleavemeeting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Leave meeting confirmation dialog with options to leave or end the meeting for all (if host).

## Properties

| Property | Type              | Required | Default         | Description                      |
| -------- | ----------------- | -------- | --------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |
| onClose  | any               | ✅        | \-              | Callback to close the dialog     |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| states   | States            | ❌        | \-              | UI state object                  |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import { RtkLeaveMeeting } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLeaveMeeting meeting={meeting} onClose={() => setOpen(false)} />;
}
```

### With Properties

```tsx
import { RtkLeaveMeeting } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkLeaveMeeting
			meeting={meeting}
			onClose={() => setOpen(false)}
			states={states}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkleavemeeting/#page","headline":"RtkLeaveMeeting · Cloudflare Realtime docs","description":"API reference for RtkLeaveMeeting component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkleavemeeting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLiveStreamIndicator component (React Native Library)
title: RtkLiveStreamIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLiveStreamIndicator

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamindicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays a "Live" indicator when a livestream is active. Only visible in livestream mode for off-stage viewers.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| t        | RtkI18n           | ❌        | useLanguage()   | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkLiveStreamIndicator } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLiveStreamIndicator meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkLiveStreamIndicator } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLiveStreamIndicator meeting={meeting} size="md" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamindicator/#page","headline":"RtkLiveStreamIndicator · Cloudflare Realtime docs","description":"API reference for RtkLiveStreamIndicator component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamindicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLiveStreamPlayer component (React Native Library)
title: RtkLiveStreamPlayer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLiveStreamPlayer

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamplayer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

IVS (Amazon Interactive Video Service) player for viewing livestream playback. Requires `amazon-ivs-react-native-player` peer dependency.

## Properties

This component does not accept any props. It reads the livestream URL from the meeting context.

## Usage Examples

### Basic Usage

```tsx
import { RtkLiveStreamPlayer } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLiveStreamPlayer />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamplayer/#page","headline":"RtkLiveStreamPlayer · Cloudflare Realtime docs","description":"API reference for RtkLiveStreamPlayer component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamplayer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLiveStreamStageToggle component (React Native Library)
title: RtkLiveStreamStageToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLiveStreamStageToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamstagetoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button for joining or leaving the livestream stage. Only visible in livestream mode.

## Properties

| Property | Type                     | Required | Default         | Description                      |      |              |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| variant  | 'button' \| 'horizontal' | ❌        | 'button'        | Layout variant                   |      |              |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkLiveStreamStageToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLiveStreamStageToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkLiveStreamStageToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkLiveStreamStageToggle meeting={meeting} size="md" variant="button" />
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamstagetoggle/#page","headline":"RtkLiveStreamStageToggle · Cloudflare Realtime docs","description":"API reference for RtkLiveStreamStageToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamstagetoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLiveStreamToggle component (React Native Library)
title: RtkLiveStreamToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLiveStreamToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamtoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to start or stop a livestream. Only visible for hosts with livestream permissions.

## Properties

| Property | Type                     | Required | Default         | Description                      |    |           |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant                   |    |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkLiveStreamToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLiveStreamToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkLiveStreamToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLiveStreamToggle meeting={meeting} size="md" variant="button" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamtoggle/#page","headline":"RtkLiveStreamToggle · Cloudflare Realtime docs","description":"API reference for RtkLiveStreamToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamtoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLiveStreamViewerCount component (React Native Library)
title: RtkLiveStreamViewerCount
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLiveStreamViewerCount

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamviewercount/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays the current livestream viewer count. Only visible in livestream mode.

## Properties

| Property | Type              | Required | Default         | Description                      |
| -------- | ----------------- | -------- | --------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| t        | RtkI18n           | ✅        | \-              | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import {
	RtkLiveStreamViewerCount,
	useLanguage,
} from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	const t = useLanguage();
	return <RtkLiveStreamViewerCount meeting={meeting} t={t} />;
}
```

### With Properties

```tsx
import {
	RtkLiveStreamViewerCount,
	useLanguage,
} from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	const t = useLanguage();
	return (
		<RtkLiveStreamViewerCount
			meeting={meeting}
			t={t}
			iconPack={customIconPack}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamviewercount/#page","headline":"RtkLiveStreamViewerCount · Cloudflare Realtime docs","description":"API reference for RtkLiveStreamViewerCount component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklivestreamviewercount/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLogo component (React Native Library)
title: RtkLogo
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLogo

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklogo/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays a logo from a URL (SVG format) in the meeting header.

## Properties

| Property | Type       | Required | Default | Description                                 |
| -------- | ---------- | -------- | ------- | ------------------------------------------- |
| meeting  | any        | ❌        | \-      | The RealtimeKit meeting instance            |
| config   | UIConfig   | ❌        | \-      | UI configuration object                     |
| logoUrl  | string     | ❌        | \-      | URL of the logo SVG to display              |
| style    | StyleProps | ❌        | \-      | Style object with width/height for the logo |
| t        | RtkI18n    | ❌        | \-      | i18n translation function                   |

## Usage Examples

### Basic Usage

```tsx
import { RtkLogo } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkLogo logoUrl="https://example.com/logo.svg" />;
}
```

### With Properties

```tsx
import { RtkLogo } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkLogo
			logoUrl="https://example.com/logo.svg"
			style={{ width: 120, height: 40 }}
			config={customConfig}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklogo/#page","headline":"RtkLogo · Cloudflare Realtime docs","description":"API reference for RtkLogo component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtklogo/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeeting component (React Native Library)
title: RtkMeeting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeeting

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmeeting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

The top-level meeting component that orchestrates the entire meeting UI. Manages meeting lifecycle (idle, setup, joined, ended, waiting states), applies design system, handles room join/leave events, and renders the appropriate screen. With this component, you do not have to handle all the states, dialogs, and other smaller bits of managing the application.

## Properties

| Property              | Type              | Required | Default       | Description                                                              |
| --------------------- | ----------------- | -------- | ------------- | ------------------------------------------------------------------------ |
| meeting               | RealtimeKitClient | ✅        | \-            | The RealtimeKit meeting instance                                         |
| applyDesignSystem     | boolean           | ❌        | true          | Whether to apply the preset design system colors from the meeting config |
| config                | UIConfig          | ❌        | defaultConfig | UI configuration object                                                  |
| iconPackUrl           | string            | ❌        | ''            | URL to fetch a custom icon pack from                                     |
| showSetupScreen       | boolean           | ❌        | true          | Whether to show the setup/preview screen before joining                  |
| iOSScreenshareEnabled | boolean           | ❌        | false         | Turn on screenshare on iOS (requires additional native setup)            |
| t                     | RtkI18n           | ❌        | \-            | i18n translation function                                                |

## Usage Examples

### Basic Usage

```tsx
import { RtkMeeting } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkMeeting meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkMeeting } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkMeeting
			meeting={meeting}
			applyDesignSystem={true}
			showSetupScreen={true}
			iOSScreenshareEnabled={false}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmeeting/#page","headline":"RtkMeeting · Cloudflare Realtime docs","description":"API reference for RtkMeeting component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmeeting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingTitle component (React Native Library)
title: RtkMeetingTitle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingTitle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmeetingtitle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays the meeting title from meeting metadata.

## Properties

| Property | Type              | Required | Default | Description                      |
| -------- | ----------------- | -------- | ------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-      | The RealtimeKit meeting instance |

## Usage Examples

### Basic Usage

```tsx
import { RtkMeetingTitle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkMeetingTitle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkMeetingTitle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkMeetingTitle meeting={meeting} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmeetingtitle/#page","headline":"RtkMeetingTitle · Cloudflare Realtime docs","description":"API reference for RtkMeetingTitle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmeetingtitle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMenu component (React Native Library)
title: RtkMenu
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMenu

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmenu/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A menu container component with placement options.

## Properties

| Property  | Type                     | Required       | Default | Description  |              |              |             |               |       |           |             |   |    |                                    |
| --------- | ------------------------ | -------------- | ------- | ------------ | ------------ | ------------ | ----------- | ------------- | ----- | --------- | ----------- | - | -- | ---------------------------------- |
| children  | ReactNode                | ✅              | \-      | Menu content |              |              |             |               |       |           |             |   |    |                                    |
| size      | 'lg' \| 'md'             | 'sm'           | 'xl'    | ✅            | \-           | Size variant |             |               |       |           |             |   |    |                                    |
| placement | 'bottom' \| 'bottom-end' | 'bottom-start' | 'left'  | 'left-end'   | 'left-start' | 'right'      | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start' | ✅ | \- | Menu placement relative to trigger |

## Usage Examples

### Basic Usage

```tsx
import { RtkMenu } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkMenu size="md" placement="bottom">
			<Text>Menu content</Text>
		</RtkMenu>
	);
}
```

### With Properties

```tsx
import { RtkMenu } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkMenu size="lg" placement="bottom-start">
			<Text>Menu content</Text>
		</RtkMenu>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmenu/#page","headline":"RtkMenu · Cloudflare Realtime docs","description":"API reference for RtkMenu component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmenu/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMenuItem component (React Native Library)
title: RtkMenuItem
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMenuItem

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmenuitem/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A pressable menu item within a menu.

## Properties

| Property | Type         | Required | Default | Description            |    |              |
| -------- | ------------ | -------- | ------- | ---------------------- | -- | ------------ |
| children | ReactNode    | ✅        | \-      | Menu item content      |    |              |
| onClick  | (ev) => {}   | ❌        | \-      | Press handler callback |    |              |
| size     | 'lg' \| 'md' | 'sm'     | 'xl'    | ❌                      | \- | Size variant |

## Usage Examples

### Basic Usage

```tsx
import { RtkMenuItem } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkMenuItem onClick={() => ({})}>
			<Text>Option 1</Text>
		</RtkMenuItem>
	);
}
```

### With Properties

```tsx
import { RtkMenuItem } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkMenuItem onClick={(ev) => ({})} size="md">
			<Text>Option 1</Text>
		</RtkMenuItem>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmenuitem/#page","headline":"RtkMenuItem · Cloudflare Realtime docs","description":"API reference for RtkMenuItem component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmenuitem/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMenuList component (React Native Library)
title: RtkMenuList
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMenuList

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmenulist/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A horizontal list container for menu items.

## Properties

| Property | Type      | Required | Default | Description       |
| -------- | --------- | -------- | ------- | ----------------- |
| children | ReactNode | ✅        | \-      | Menu list content |

## Usage Examples

### Basic Usage

```tsx
import {
	RtkMenuList,
	RtkMenuItem,
} from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkMenuList>
			<RtkMenuItem onClick={() => {}}>
				<Text>Item 1</Text>
			</RtkMenuItem>
			<RtkMenuItem onClick={() => {}}>
				<Text>Item 2</Text>
			</RtkMenuItem>
		</RtkMenuList>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmenulist/#page","headline":"RtkMenuList · Cloudflare Realtime docs","description":"API reference for RtkMenuList component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmenulist/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMicToggle component (React Native Library)
title: RtkMicToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMicToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmictoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to enable or disable the local participant's microphone. Automatically hides if the participant lacks audio production permissions.

## Properties

| Property | Type                     | Required | Default         | Description                      |    |           |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant                   |    |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkMicToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkMicToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkMicToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkMicToggle meeting={meeting} size="md" variant="button" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmictoggle/#page","headline":"RtkMicToggle · Cloudflare Realtime docs","description":"API reference for RtkMicToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmictoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMixedGrid component (React Native Library)
title: RtkMixedGrid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMixedGrid

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmixedgrid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A grid layout that handles mixed content: participants, screenshares, plugins, and pinned participants. Automatically switches between simple, spotlight, and highlighted grid layouts.

## Properties

| Property                | Type               | Required | Default         | Description                                |      |              |
| ----------------------- | ------------------ | -------- | --------------- | ------------------------------------------ | ---- | ------------ |
| meeting                 | RealtimeKitClient  | ✅        | \-              | The RealtimeKit meeting instance           |      |              |
| participants            | Peer\[\]           | ✅        | \[\]            | Array of active participants               |      |              |
| pinnedParticipants      | Peer\[\]           | ✅        | \[\]            | Array of pinned participants               |      |              |
| screenShareParticipants | Peer\[\]           | ✅        | \[\]            | Array of participants sharing their screen |      |              |
| plugins                 | RTKPlugin\[\]      | ✅        | \[\]            | Array of active plugins                    |      |              |
| aspectRatio             | string             | ❌        | '16:9'          | Aspect ratio for grid tiles                |      |              |
| config                  | UIConfig           | ❌        | defaultConfig   | UI configuration object                    |      |              |
| gap                     | number             | ❌        | 8               | Gap between grid tiles in pixels           |      |              |
| size                    | 'lg' \| 'md'       | 'sm'     | 'xl'            | ❌                                          | 'sm' | Size variant |
| variant                 | 'boxed' \| 'solid' | ❌        | 'solid'         | Visual style variant                       |      |              |
| iconPack                | IconPack           | ❌        | defaultIconPack | Custom icon pack                           |      |              |
| states                  | States             | ❌        | \-              | UI state object                            |      |              |
| t                       | RtkI18n            | ❌        | \-              | i18n translation function                  |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkMixedGrid } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkMixedGrid
			meeting={meeting}
			participants={participants}
			pinnedParticipants={[]}
			screenShareParticipants={[]}
			plugins={[]}
		/>
	);
}
```

### With Properties

```tsx
import { RtkMixedGrid } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkMixedGrid
			meeting={meeting}
			participants={participants}
			pinnedParticipants={pinned}
			screenShareParticipants={screenshares}
			plugins={activePlugins}
			aspectRatio="16:9"
			gap={12}
			size="md"
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmixedgrid/#page","headline":"RtkMixedGrid · Cloudflare Realtime docs","description":"API reference for RtkMixedGrid component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmixedgrid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMoreToggle component (React Native Library)
title: RtkMoreToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMoreToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmoretoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button for the "more options" overflow menu in the control bar. Shows a notification badge for pending requests.

## Properties

| Property | Type                     | Required | Default         | Description                      |    |           |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant                   |    |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| states   | States                   | ❌        | \-              | UI state object                  |    |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |    |           |
| children | ReactNode                | ❌        | \-              | Additional content to render     |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkMoreToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkMoreToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkMoreToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkMoreToggle
			meeting={meeting}
			size="md"
			variant="button"
			states={states}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmoretoggle/#page","headline":"RtkMoreToggle · Cloudflare Realtime docs","description":"API reference for RtkMoreToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmoretoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMuteToggle component (React Native Library)
title: RtkMuteToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMuteToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmutetoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Button to mute all participants' audio. Only visible for hosts with mute-all permissions.

## Properties

| Property | Type              | Required | Default         | Description                      |    |           |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkMuteToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkMuteToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkMuteToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkMuteToggle meeting={meeting} size="md" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmutetoggle/#page","headline":"RtkMuteToggle · Cloudflare Realtime docs","description":"API reference for RtkMuteToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkmutetoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNameTag component (React Native Library)
title: RtkNameTag
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNameTag

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtknametag/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays a participant's name with optional child content (such as an audio visualizer icon). Used as an overlay on participant tiles.

## Properties

| Property      | Type              | Required | Default | Description                                              |      |           |
| ------------- | ----------------- | -------- | ------- | -------------------------------------------------------- | ---- | --------- |
| participant   | Peer              | ✅        | \-      | The participant to display the name for                  |      |           |
| meeting       | RealtimeKitClient | ❌        | \-      | The RealtimeKit meeting instance (used to identify self) |      |           |
| isScreenshare | boolean           | ❌        | false   | Whether this is a screenshare name tag                   |      |           |
| maxLength     | number            | ❌        | 20      | Maximum width offset for the name tag                    |      |           |
| size          | 'lg' \| 'md'      | 'sm'     | 'xl'    | ❌                                                        | 'sm' | Text size |
| t             | RtkI18n           | ❌        | \-      | i18n translation function                                |      |           |
| children      | ReactNode         | ❌        | \-      | Content to render before the name                        |      |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkNameTag } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkNameTag participant={participant} />;
}
```

### With Properties

```tsx
import { RtkNameTag } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkNameTag
			participant={participant}
			meeting={meeting}
			size="md"
			maxLength={25}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtknametag/#page","headline":"RtkNameTag · Cloudflare Realtime docs","description":"API reference for RtkNameTag component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtknametag/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNotification component (React Native Library)
title: RtkNotification
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNotification

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtknotification/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A single notification toast with slide-in/slide-out animation, avatar, message text, and dismiss button.

## Properties

| Property                 | Type         | Required | Default         | Description                                                       |      |              |
| ------------------------ | ------------ | -------- | --------------- | ----------------------------------------------------------------- | ---- | ------------ |
| notification             | Notification | ✅        | \-              | Notification object with id, message, image, duration, and button |      |              |
| onRtkNotificationDismiss | any          | ❌        | \-              | Callback when notification is dismissed                           |      |              |
| iconPack                 | IconPack     | ❌        | defaultIconPack | Custom icon pack                                                  |      |              |
| size                     | 'lg' \| 'md' | 'sm'     | 'xl'            | ❌                                                                 | 'sm' | Size variant |
| t                        | RtkI18n      | ❌        | \-              | i18n translation function                                         |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkNotification } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkNotification notification={notification} />;
}
```

### With Properties

```tsx
import { RtkNotification } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkNotification
			notification={notification}
			onRtkNotificationDismiss={(id) => handleDismiss(id)}
			size="md"
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtknotification/#page","headline":"RtkNotification · Cloudflare Realtime docs","description":"API reference for RtkNotification component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtknotification/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNotifications component (React Native Library)
title: RtkNotifications
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNotifications

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtknotifications/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Container that manages and displays meeting notifications (participant join/leave, chat messages, polls, network status) with sound effects.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| config   | UIConfig          | ✅        | defaultConfig   | UI configuration object          |      |              |
| iconPack | IconPack          | ✅        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ✅                                | 'sm' | Size variant |
| states   | States            | ✅        | \-              | UI state object                  |      |              |
| t        | RtkI18n           | ✅        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import {
	RtkNotifications,
	useLanguage,
} from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	const t = useLanguage();
	return (
		<RtkNotifications
			meeting={meeting}
			config={config}
			iconPack={iconPack}
			size="sm"
			states={states}
			t={t}
		/>
	);
}
```

### With Properties

```tsx
import {
	RtkNotifications,
	defaultConfig,
	defaultIconPack,
	useLanguage,
} from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	const t = useLanguage();
	return (
		<RtkNotifications
			meeting={meeting}
			config={defaultConfig}
			iconPack={defaultIconPack}
			size="md"
			states={states}
			t={t}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtknotifications/#page","headline":"RtkNotifications · Cloudflare Realtime docs","description":"API reference for RtkNotifications component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtknotifications/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipant component (React Native Library)
title: RtkParticipant
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipant

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipant/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A participant list item card showing avatar, name, audio/video status icons, and host control options (pin, kick, mute, stage management).

## Properties

| Property    | Type              | Required | Default         | Description                      |
| ----------- | ----------------- | -------- | --------------- | -------------------------------- |
| participant | Peer              | ✅        | \-              | The participant to display       |
| meeting     | RealtimeKitClient | ❌        | \-              | The RealtimeKit meeting instance |
| iconPack    | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| t           | RtkI18n           | ❌        | \-              | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import { RtkParticipant } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkParticipant participant={participant} />;
}
```

### With Properties

```tsx
import { RtkParticipant } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkParticipant
			participant={participant}
			meeting={meeting}
			iconPack={customIconPack}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipant/#page","headline":"RtkParticipant · Cloudflare Realtime docs","description":"API reference for RtkParticipant component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipant/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantCount component (React Native Library)
title: RtkParticipantCount
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantCount

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipantcount/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays the total participant count and opens the participants sidebar when tapped.

## Properties

| Property | Type              | Required | Default         | Description                      |
| -------- | ----------------- | -------- | --------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import { RtkParticipantCount } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkParticipantCount meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkParticipantCount } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkParticipantCount meeting={meeting} iconPack={customIconPack} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipantcount/#page","headline":"RtkParticipantCount · Cloudflare Realtime docs","description":"API reference for RtkParticipantCount component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipantcount/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipants component (React Native Library)
title: RtkParticipants
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipants

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Full participants list panel showing on-stage participants, viewers, waitlisted users, and stage request management with accept/reject all functionality.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| config   | UIConfig          | ❌        | defaultConfig   | UI configuration object          |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| states   | States            | ❌        | \-              | UI state object                  |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkParticipants } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkParticipants meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkParticipants } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkParticipants meeting={meeting} size="md" config={customConfig} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipants/#page","headline":"RtkParticipants · Cloudflare Realtime docs","description":"API reference for RtkParticipants component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantTile component (React Native Library)
title: RtkParticipantTile
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantTile

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipanttile/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A video tile for a single participant showing their video feed, name tag with audio indicator, avatar (when video is off), and pin indicator.

## Properties

| Property        | Type                             | Required       | Default         | Description                                            |             |              |   |               |                                  |
| --------------- | -------------------------------- | -------------- | --------------- | ------------------------------------------------------ | ----------- | ------------ | - | ------------- | -------------------------------- |
| meeting         | RealtimeKitClient                | ✅              | \-              | The RealtimeKit meeting instance                       |             |              |   |               |                                  |
| participant     | RTKParticipant \| RTKSelf        | ✅              | \-              | The participant to render                              |             |              |   |               |                                  |
| config          | UIConfig                         | ❌              | defaultConfig   | UI configuration object                                |             |              |   |               |                                  |
| style           | StyleProp<any>                   | ❌              | \-              | Custom styles (typically width/height for grid sizing) |             |              |   |               |                                  |
| nameTagPosition | 'bottom-center' \| 'bottom-left' | 'bottom-right' | 'top-center'    | 'top-left'                                             | 'top-right' | 'none'       | ❌ | 'bottom-left' | Position of the name tag overlay |
| isPreview       | boolean                          | ❌              | false           | Whether this is a preview tile (setup screen)          |             |              |   |               |                                  |
| iconPack        | IconPack                         | ❌              | defaultIconPack | Custom icon pack                                       |             |              |   |               |                                  |
| size            | 'lg' \| 'md'                     | 'sm'           | 'xl'            | ❌                                                      | 'sm'        | Size variant |   |               |                                  |
| states          | States                           | ❌              | \-              | UI state object                                        |             |              |   |               |                                  |
| t               | RtkI18n                          | ❌              | \-              | i18n translation function                              |             |              |   |               |                                  |
| children        | ReactNode                        | ❌              | \-              | Additional content to overlay on the tile              |             |              |   |               |                                  |

## Usage Examples

### Basic Usage

```tsx
import { RtkParticipantTile } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkParticipantTile meeting={meeting} participant={participant} />;
}
```

### With Properties

```tsx
import { RtkParticipantTile } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkParticipantTile
			meeting={meeting}
			participant={participant}
			nameTagPosition="bottom-left"
			isPreview={false}
			size="md"
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipanttile/#page","headline":"RtkParticipantTile · Cloudflare Realtime docs","description":"API reference for RtkParticipantTile component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipanttile/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantToggle component (React Native Library)
title: RtkParticipantToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipanttoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to open the participants sidebar panel. Shows a badge with pending request count.

## Properties

| Property | Type                     | Required | Default         | Description                      |    |           |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant                   |    |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| states   | States                   | ❌        | \-              | UI state object                  |    |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkParticipantToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkParticipantToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkParticipantToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkParticipantToggle meeting={meeting} size="md" variant="button" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipanttoggle/#page","headline":"RtkParticipantToggle · Cloudflare Realtime docs","description":"API reference for RtkParticipantToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipanttoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantWaiting component (React Native Library)
title: RtkParticipantWaiting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantWaiting

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipantwaiting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A waiting participant card with accept/reject buttons for waitlist and stage request management.

## Properties

| Property    | Type              | Required | Default         | Description                      |
| ----------- | ----------------- | -------- | --------------- | -------------------------------- |
| participant | Peer              | ✅        | \-              | The waiting participant          |
| meeting     | RealtimeKitClient | ❌        | \-              | The RealtimeKit meeting instance |
| iconPack    | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| t           | RtkI18n           | ❌        | \-              | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import { RtkParticipantWaiting } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkParticipantWaiting participant={waitingParticipant} />;
}
```

### With Properties

```tsx
import { RtkParticipantWaiting } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkParticipantWaiting
			participant={waitingParticipant}
			meeting={meeting}
			iconPack={customIconPack}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipantwaiting/#page","headline":"RtkParticipantWaiting · Cloudflare Realtime docs","description":"API reference for RtkParticipantWaiting component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkparticipantwaiting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPermissionsMessage component (React Native Library)
title: RtkPermissionsMessage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPermissionsMessage

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpermissionsmessage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays a message when device permissions (camera/microphone) are denied, with options to continue or open system settings.

## Properties

| Property | Type              | Required | Default         | Description                      |
| -------- | ----------------- | -------- | --------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |

## Usage Examples

### Basic Usage

```tsx
import { RtkPermissionsMessage } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPermissionsMessage meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkPermissionsMessage } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPermissionsMessage meeting={meeting} iconPack={customIconPack} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpermissionsmessage/#page","headline":"RtkPermissionsMessage · Cloudflare Realtime docs","description":"API reference for RtkPermissionsMessage component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpermissionsmessage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPluginMain component (React Native Library)
title: RtkPluginMain
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPluginMain

Last updated Jul 9, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpluginmain/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Renders an active plugin by loading `plugin.component.src` in a `WebView`. Includes a header bar with the plugin name, a fullscreen toggle, and an optional close button (shown when `plugin.permissions.canDeactivate` is `true`). Pressing close calls `plugin.deactivate()`.

## Properties

| Property | Type              | Required | Default         | Description                      |
| -------- | ----------------- | -------- | --------------- | -------------------------------- |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |
| plugin   | RTKPlugin         | ✅        | \-              | The plugin to render             |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |

## Usage Examples

### Basic Usage

```tsx
import { RtkPluginMain } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPluginMain meeting={meeting} plugin={activePlugin} />;
}
```

### With Properties

```tsx
import { RtkPluginMain } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkPluginMain
			meeting={meeting}
			plugin={activePlugin}
			iconPack={customIconPack}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpluginmain/#page","headline":"RtkPluginMain · Cloudflare Realtime docs","description":"API reference for RtkPluginMain component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpluginmain/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-09","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPlugins component (React Native Library)
title: RtkPlugins
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPlugins

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkplugins/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Plugin management panel showing active plugins and the plugin store with activate/deactivate controls.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| config   | UIConfig          | ❌        | defaultConfig   | UI configuration object          |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkPlugins } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPlugins meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkPlugins } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPlugins meeting={meeting} size="md" config={customConfig} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkplugins/#page","headline":"RtkPlugins · Cloudflare Realtime docs","description":"API reference for RtkPlugins component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkplugins/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPluginsToggle component (React Native Library)
title: RtkPluginsToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPluginsToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpluginstoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to open the plugins sidebar panel. Hides if plugin permissions are not available.

## Properties

| Property | Type                     | Required | Default         | Description                      |    |           |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| states   | States                   | ❌        | \-              | UI state object                  |    |           |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant                   |    |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkPluginsToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPluginsToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkPluginsToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPluginsToggle meeting={meeting} size="md" variant="button" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpluginstoggle/#page","headline":"RtkPluginsToggle · Cloudflare Realtime docs","description":"API reference for RtkPluginsToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpluginstoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPoll component (React Native Library)
title: RtkPoll
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPoll

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpoll/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Renders a single poll with question, votable options, vote counts, and voter avatars.

## Properties

| Property      | Type              | Required | Default         | Description                                          |
| ------------- | ----------------- | -------- | --------------- | ---------------------------------------------------- |
| poll          | Poll              | ✅        | \-              | The poll object to display                           |
| meeting       | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance                     |
| onRtkVotePoll | any               | ❌        | \-              | Callback when a vote is cast (receives option index) |
| self          | string            | ❌        | \-              | Self user ID                                         |
| iconPack      | IconPack          | ❌        | defaultIconPack | Custom icon pack                                     |
| t             | RtkI18n           | ❌        | \-              | i18n translation function                            |

## Usage Examples

### Basic Usage

```tsx
import { RtkPoll } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPoll poll={poll} meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkPoll } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkPoll
			poll={poll}
			meeting={meeting}
			onRtkVotePoll={(index) => handleVote(index)}
			self={selfUserId}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpoll/#page","headline":"RtkPoll · Cloudflare Realtime docs","description":"API reference for RtkPoll component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpoll/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPollForm component (React Native Library)
title: RtkPollForm
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPollForm

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpollform/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Form for creating a new poll with question, dynamic options, anonymous voting, and hide results toggles.

## Properties

| Property        | Type     | Required | Default         | Description                                                                      |
| --------------- | -------- | -------- | --------------- | -------------------------------------------------------------------------------- |
| iconPack        | IconPack | ❌        | defaultIconPack | Custom icon pack                                                                 |
| t               | RtkI18n  | ❌        | \-              | i18n translation function                                                        |
| onRtkCreatePoll | any      | ❌        | \-              | Callback when poll is created (receives question, options, anonymous, hideVotes) |

## Usage Examples

### Basic Usage

```tsx
import { RtkPollForm } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPollForm onRtkCreatePoll={(data) => handleCreatePoll(data)} />;
}
```

### With Properties

```tsx
import { RtkPollForm } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkPollForm
			onRtkCreatePoll={(data) => handleCreatePoll(data)}
			iconPack={customIconPack}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpollform/#page","headline":"RtkPollForm · Cloudflare Realtime docs","description":"API reference for RtkPollForm component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpollform/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPolls component (React Native Library)
title: RtkPolls
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPolls

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpolls/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Full polls panel showing all polls with voting and a create poll form for hosts.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| config   | UIConfig          | ❌        | defaultConfig   | UI configuration object          |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkPolls } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPolls meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkPolls } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPolls meeting={meeting} size="md" config={customConfig} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpolls/#page","headline":"RtkPolls · Cloudflare Realtime docs","description":"API reference for RtkPolls component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpolls/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPollsToggle component (React Native Library)
title: RtkPollsToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPollsToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpollstoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to open the polls sidebar panel. Hides if poll permissions are not available.

## Properties

| Property | Type                     | Required | Default         | Description                      |    |           |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| states   | States                   | ✅        | \-              | UI state object                  |    |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant                   |    |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkPollsToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkPollsToggle meeting={meeting} states={states} />;
}
```

### With Properties

```tsx
import { RtkPollsToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkPollsToggle
			meeting={meeting}
			states={states}
			size="md"
			variant="button"
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpollstoggle/#page","headline":"RtkPollsToggle · Cloudflare Realtime docs","description":"API reference for RtkPollsToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkpollstoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkRecordingIndicator component (React Native Library)
title: RtkRecordingIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkRecordingIndicator

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkrecordingindicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Displays a blinking recording indicator when the meeting is being recorded.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkRecordingIndicator } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkRecordingIndicator meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkRecordingIndicator } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkRecordingIndicator meeting={meeting} size="md" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkrecordingindicator/#page","headline":"RtkRecordingIndicator · Cloudflare Realtime docs","description":"API reference for RtkRecordingIndicator component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkrecordingindicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkRecordingToggle component (React Native Library)
title: RtkRecordingToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkRecordingToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkrecordingtoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to start or stop meeting recording. Only visible for participants with recording permissions who are on stage.

## Properties

| Property | Type                     | Required | Default         | Description                      |    |           |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | -- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |    |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | \- | Icon size |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant                   |    |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |    |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkRecordingToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkRecordingToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkRecordingToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkRecordingToggle meeting={meeting} size="md" variant="button" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkrecordingtoggle/#page","headline":"RtkRecordingToggle · Cloudflare Realtime docs","description":"API reference for RtkRecordingToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkrecordingtoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkScreenShareToggle component (React Native Library)
title: RtkScreenShareToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkScreenShareToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkscreensharetoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to start or stop screen sharing. Automatically hides based on permissions and screenshare limits.

## Properties

| Property | Type                     | Required | Default         | Description                      |      |           |
| -------- | ------------------------ | -------- | --------------- | -------------------------------- | ---- | --------- |
| meeting  | RealtimeKitClient        | ✅        | \-              | The RealtimeKit meeting instance |      |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack                 |      |           |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                                | 'sm' | Icon size |
| variant  | 'button' \| 'horizontal' | ❌        | 'button'        | Layout variant                   |      |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function        |      |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkScreenShareToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkScreenShareToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkScreenShareToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkScreenShareToggle meeting={meeting} size="md" variant="button" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkscreensharetoggle/#page","headline":"RtkScreenShareToggle · Cloudflare Realtime docs","description":"API reference for RtkScreenShareToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkscreensharetoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkScreenshareView component (React Native Library)
title: RtkScreenshareView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkScreenshareView

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkscreenshareview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Renders a participant's screen share with fullscreen toggle, name tag, and audio indicator.

## Properties

| Property             | Type                             | Required       | Default         | Description                          |             |              |               |                                  |
| -------------------- | -------------------------------- | -------------- | --------------- | ------------------------------------ | ----------- | ------------ | ------------- | -------------------------------- |
| participant          | RTKParticipant                   | ✅              | \-              | The participant sharing their screen |             |              |               |                                  |
| meeting              | RealtimeKitClient                | ✅              | \-              | The RealtimeKit meeting instance     |             |              |               |                                  |
| hideFullScreenButton | boolean                          | ❌              | false           | Hide the fullscreen toggle button    |             |              |               |                                  |
| iconPack             | IconPack                         | ❌              | defaultIconPack | Custom icon pack                     |             |              |               |                                  |
| nameTagPosition      | 'bottom-center' \| 'bottom-left' | 'bottom-right' | 'top-center'    | 'top-left'                           | 'top-right' | ❌            | 'bottom-left' | Position of the name tag overlay |
| size                 | 'lg' \| 'md'                     | 'sm'           | 'xl'            | ❌                                    | 'sm'        | Size variant |               |                                  |
| variant              | 'gradient' \| 'solid'            | ❌              | 'solid'         | Visual style variant                 |             |              |               |                                  |
| t                    | RtkI18n                          | ❌              | \-              | i18n translation function            |             |              |               |                                  |

## Usage Examples

### Basic Usage

```tsx
import { RtkScreenshareView } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkScreenshareView participant={participant} meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkScreenshareView } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkScreenshareView
			participant={participant}
			meeting={meeting}
			nameTagPosition="bottom-left"
			variant="solid"
			size="md"
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkscreenshareview/#page","headline":"RtkScreenshareView · Cloudflare Realtime docs","description":"API reference for RtkScreenshareView component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkscreenshareview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettings component (React Native Library)
title: RtkSettings
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettings

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettings/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Settings dialog with audio device selection, video device selection, and network connection status.

## Properties

| Property | Type              | Required | Default         | Description                           |      |              |
| -------- | ----------------- | -------- | --------------- | ------------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance      |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                     | 'sm' | Size variant |
| states   | States            | ❌        | \-              | UI state object                       |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                      |      |              |
| t        | RtkI18n           | ❌        | \-              | i18n translation function             |      |              |
| onClose  | any               | ❌        | \-              | Callback to close the settings dialog |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkSettings } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSettings meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkSettings } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkSettings
			meeting={meeting}
			size="md"
			onClose={() => setSettingsOpen(false)}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettings/#page","headline":"RtkSettings · Cloudflare Realtime docs","description":"API reference for RtkSettings component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettings/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettingsAudio component (React Native Library)
title: RtkSettingsAudio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettingsAudio

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettingsaudio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Audio settings panel with device selection dropdown, audio visualizer preview, and notification sound toggle.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| states   | States            | ❌        | \-              | UI state object                  |      |              |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkSettingsAudio } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSettingsAudio meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkSettingsAudio } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSettingsAudio meeting={meeting} size="md" states={states} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettingsaudio/#page","headline":"RtkSettingsAudio · Cloudflare Realtime docs","description":"API reference for RtkSettingsAudio component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettingsaudio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettingsToggle component (React Native Library)
title: RtkSettingsToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettingsToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettingstoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button to open the settings dialog. Hides if no audio or video permissions are available.

## Properties

| Property | Type                     | Required | Default         | Description               |    |           |
| -------- | ------------------------ | -------- | --------------- | ------------------------- | -- | --------- |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'            | ❌                         | \- | Icon size |
| states   | States                   | ❌        | \-              | UI state object           |    |           |
| variant  | 'button' \| 'horizontal' | ❌        | \-              | Layout variant            |    |           |
| iconPack | IconPack                 | ❌        | defaultIconPack | Custom icon pack          |    |           |
| t        | RtkI18n                  | ❌        | \-              | i18n translation function |    |           |

## Usage Examples

### Basic Usage

```tsx
import { RtkSettingsToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSettingsToggle />;
}
```

### With Properties

```tsx
import { RtkSettingsToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSettingsToggle size="md" variant="button" states={states} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettingstoggle/#page","headline":"RtkSettingsToggle · Cloudflare Realtime docs","description":"API reference for RtkSettingsToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettingstoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettingsVideo component (React Native Library)
title: RtkSettingsVideo
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettingsVideo

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettingsvideo/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Video settings panel with camera selection dropdown and live video preview.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| states   | States            | ❌        | \-              | UI state object                  |      |              |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkSettingsVideo } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSettingsVideo meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkSettingsVideo } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSettingsVideo meeting={meeting} size="md" states={states} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettingsvideo/#page","headline":"RtkSettingsVideo · Cloudflare Realtime docs","description":"API reference for RtkSettingsVideo component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksettingsvideo/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSetupScreen component (React Native Library)
title: RtkSetupScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSetupScreen

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksetupscreen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Pre-join setup screen with video preview, mic/camera toggles, display name input, camera switch, and join button.

## Properties

| Property | Type              | Required | Default         | Description                      |      |              |
| -------- | ----------------- | -------- | --------------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance |      |              |
| config   | UIConfig          | ❌        | defaultConfig   | UI configuration object          |      |              |
| iconPack | IconPack          | ❌        | defaultIconPack | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                | 'sm' | Size variant |
| states   | States            | ❌        | \-              | UI state object                  |      |              |
| t        | RtkI18n           | ❌        | \-              | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkSetupScreen } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSetupScreen meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkSetupScreen } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkSetupScreen
			meeting={meeting}
			config={customConfig}
			size="md"
			iconPack={customIconPack}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksetupscreen/#page","headline":"RtkSetupScreen · Cloudflare Realtime docs","description":"API reference for RtkSetupScreen component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksetupscreen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSidebar component (React Native Library)
title: RtkSidebar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSidebar

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksidebar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Full-screen sidebar modal with tabbed navigation for chat, participants, polls, and plugins panels.

## Properties

| Property        | Type               | Required       | Default                                        | Description                       |      |              |                    |
| --------------- | ------------------ | -------------- | ---------------------------------------------- | --------------------------------- | ---- | ------------ | ------------------ |
| meeting         | RealtimeKitClient  | ✅              | \-                                             | The RealtimeKit meeting instance  |      |              |                    |
| config          | UIConfig           | ❌              | defaultConfig                                  | UI configuration object           |      |              |                    |
| iconPack        | IconPack           | ❌              | defaultIconPack                                | Custom icon pack                  |      |              |                    |
| size            | 'lg' \| 'md'       | 'sm'           | 'xl'                                           | ❌                                 | 'sm' | Size variant |                    |
| states          | States             | ❌              | \-                                             | UI state object                   |      |              |                    |
| defaultSection  | 'chat' \| 'none'   | 'participants' | 'plugins'                                      | 'polls'                           | ❌    | 'chat'       | Default active tab |
| enabledSections | SidebarSection\[\] | ❌              | \['chat', 'polls', 'participants', 'plugins'\] | Which sidebar sections to display |      |              |                    |
| t               | RtkI18n            | ❌              | \-                                             | i18n translation function         |      |              |                    |

## Usage Examples

### Basic Usage

```tsx
import { RtkSidebar } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSidebar meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkSidebar } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkSidebar
			meeting={meeting}
			defaultSection="chat"
			enabledSections={["chat", "participants", "polls"]}
			size="md"
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksidebar/#page","headline":"RtkSidebar · Cloudflare Realtime docs","description":"API reference for RtkSidebar component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksidebar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSimpleGrid component (React Native Library)
title: RtkSimpleGrid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSimpleGrid

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksimplegrid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A simple grid layout that arranges participant tiles in rows and columns with automatic sizing based on participant count.

## Properties

| Property     | Type              | Required | Default         | Description                          |      |              |
| ------------ | ----------------- | -------- | --------------- | ------------------------------------ | ---- | ------------ |
| meeting      | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance     |      |              |
| participants | Peer\[\]          | ✅        | \-              | Array of participants to display     |      |              |
| aspectRatio  | string            | ❌        | '3:4'           | Aspect ratio for grid tiles          |      |              |
| config       | UIConfig          | ❌        | defaultConfig   | UI configuration object              |      |              |
| gap          | number            | ❌        | 8               | Gap between grid tiles in pixels     |      |              |
| iconPack     | IconPack          | ❌        | defaultIconPack | Custom icon pack                     |      |              |
| size         | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                    | 'sm' | Size variant |
| states       | States            | ❌        | \-              | UI state object                      |      |              |
| t            | RtkI18n           | ❌        | \-              | i18n translation function            |      |              |
| style        | StyleProp<any>    | ❌        | \-              | Custom styles for the grid container |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkSimpleGrid } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSimpleGrid meeting={meeting} participants={participants} />;
}
```

### With Properties

```tsx
import { RtkSimpleGrid } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkSimpleGrid
			meeting={meeting}
			participants={participants}
			aspectRatio="16:9"
			gap={12}
			size="md"
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksimplegrid/#page","headline":"RtkSimpleGrid · Cloudflare Realtime docs","description":"API reference for RtkSimpleGrid component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtksimplegrid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSpinner component (React Native Library)
title: RtkSpinner
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSpinner

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkspinner/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

An animated loading spinner component.

## Properties

| Property | Type   | Required | Default | Description                                  |
| -------- | ------ | -------- | ------- | -------------------------------------------- |
| style    | object | ❌        | \-      | Custom styles to override spinner appearance |

## Usage Examples

### Basic Usage

```tsx
import { RtkSpinner } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSpinner />;
}
```

### With Properties

```tsx
import { RtkSpinner } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkSpinner style={{ width: 48, height: 48 }} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkspinner/#page","headline":"RtkSpinner · Cloudflare Realtime docs","description":"API reference for RtkSpinner component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkspinner/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSpotlightGrid component (React Native Library)
title: RtkSpotlightGrid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSpotlightGrid

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkspotlightgrid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A grid layout that highlights pinned participants in a larger view with other participants in a smaller strip. Handles livestream player display for off-stage viewers.

## Properties

| Property           | Type              | Required | Default         | Description                               |      |              |
| ------------------ | ----------------- | -------- | --------------- | ----------------------------------------- | ---- | ------------ |
| meeting            | RealtimeKitClient | ✅        | \-              | The RealtimeKit meeting instance          |      |              |
| participants       | Peer\[\]          | ✅        | \-              | Array of active participants              |      |              |
| pinnedParticipants | Peer\[\]          | ✅        | \-              | Array of pinned participants to spotlight |      |              |
| aspectRatio        | string            | ❌        | '3:4'           | Aspect ratio for grid tiles               |      |              |
| config             | UIConfig          | ❌        | defaultConfig   | UI configuration object                   |      |              |
| gap                | number            | ❌        | 4               | Gap between grid tiles in pixels          |      |              |
| iconPack           | IconPack          | ❌        | defaultIconPack | Custom icon pack                          |      |              |
| size               | 'lg' \| 'md'      | 'sm'     | 'xl'            | ❌                                         | 'sm' | Size variant |
| states             | States            | ❌        | \-              | UI state object                           |      |              |
| t                  | RtkI18n           | ❌        | \-              | i18n translation function                 |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkSpotlightGrid } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkSpotlightGrid
			meeting={meeting}
			participants={participants}
			pinnedParticipants={pinned}
		/>
	);
}
```

### With Properties

```tsx
import { RtkSpotlightGrid } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkSpotlightGrid
			meeting={meeting}
			participants={participants}
			pinnedParticipants={pinned}
			aspectRatio="16:9"
			gap={8}
			size="md"
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkspotlightgrid/#page","headline":"RtkSpotlightGrid · Cloudflare Realtime docs","description":"API reference for RtkSpotlightGrid component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkspotlightgrid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkText component (React Native Library)
title: RtkText
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkText

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtktext/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Themed text component that applies the design system's colors, font family, and font size.

## Properties

| Property   | Type                 | Required | Default | Description                                        |       |                                        |       |       |       |       |   |          |             |
| ---------- | -------------------- | -------- | ------- | -------------------------------------------------- | ----- | -------------------------------------- | ----- | ----- | ----- | ----- | - | -------- | ----------- |
| children   | ReactNode            | ✅        | \-      | Text content                                       |       |                                        |       |       |       |       |   |          |             |
| size       | 'sm' \| 'md'         | 'lg'     | 'xl'    | ❌                                                  | 'md'  | Font size (sm=14, md=16, lg=18, xl=20) |       |       |       |       |   |          |             |
| fontWeight | 'normal' \| 'bold'   | '100'    | '200'   | '300'                                              | '400' | '500'                                  | '600' | '700' | '800' | '900' | ❌ | 'normal' | Font weight |
| style      | StyleProp<TextStyle> | ❌        | \\{\\}  | Custom text styles                                 |       |                                        |       |       |       |       |   |          |             |
| onBrand    | boolean              | ❌        | false   | Use brand text color instead of default text color |       |                                        |       |       |       |       |   |          |             |

## Usage Examples

### Basic Usage

```tsx
import { RtkText } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkText>Hello World</RtkText>;
}
```

### With Properties

```tsx
import { RtkText } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkText size="lg" fontWeight="bold" onBrand={true}>
			Meeting Title
		</RtkText>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtktext/#page","headline":"RtkText · Cloudflare Realtime docs","description":"API reference for RtkText component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtktext/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkTextField component (React Native Library)
title: RtkTextField
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkTextField

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtktextfield/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A themed text input field component.

## Properties

| Property     | Type                | Required | Default | Description                   |
| ------------ | ------------------- | -------- | ------- | ----------------------------- |
| disabled     | boolean             | ❌        | false   | Whether the input is disabled |
| placeholder  | string              | ❌        | ''      | Placeholder text              |
| type         | string              | ❌        | 'text'  | Input type                    |
| style        | StyleProp<any>      | ❌        | \-      | Custom styles                 |
| onChangeText | (s: string) => void | ❌        | \-      | Callback when text changes    |

## Usage Examples

### Basic Usage

```tsx
import { RtkTextField } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkTextField placeholder="Enter your name" />;
}
```

### With Properties

```tsx
import { RtkTextField } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkTextField
			placeholder="Enter display name"
			onChangeText={(text) => setName(text)}
			disabled={false}
		/>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtktextfield/#page","headline":"RtkTextField · Cloudflare Realtime docs","description":"API reference for RtkTextField component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtktextfield/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkUIProvider component (React Native Library)
title: RtkUIProvider
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkUIProvider

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkuiprovider/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Context provider component that wraps the meeting UI. Provides SafeAreaView, state management, and back button handling. Must wrap all Rtk UI components.

## Properties

| Property | Type      | Required | Default | Description              |
| -------- | --------- | -------- | ------- | ------------------------ |
| children | ReactNode | ✅        | \-      | Child components to wrap |

## Usage Examples

### Basic Usage

```tsx
import {
	RtkUIProvider,
	RtkMeeting,
} from "@cloudflare/realtimekit-react-native-ui";

function App() {
	return (
		<RtkUIProvider>
			<RtkMeeting meeting={meeting} />
		</RtkUIProvider>
	);
}
```

### With Properties

```tsx
import {
	RtkUIProvider,
	RtkGrid,
	RtkControlbar,
	RtkHeader,
} from "@cloudflare/realtimekit-react-native-ui";

function App() {
	return (
		<RtkUIProvider>
			<RtkHeader meeting={meeting} />
			<RtkGrid meeting={meeting} />
			<RtkControlbar meeting={meeting} />
		</RtkUIProvider>
	);
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkuiprovider/#page","headline":"RtkUIProvider · Cloudflare Realtime docs","description":"API reference for RtkUIProvider component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkuiprovider/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkWaitingScreen component (React Native Library)
title: RtkWaitingScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkWaitingScreen

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkwaitingscreen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Screen displayed while waiting to join (waitlist, kicked, disconnected states).

## Properties

| Property | Type     | Required | Default | Description               |
| -------- | -------- | -------- | ------- | ------------------------- |
| config   | UIConfig | ❌        | \-      | UI configuration object   |
| t        | RtkI18n  | ❌        | \-      | i18n translation function |

## Usage Examples

### Basic Usage

```tsx
import { RtkWaitingScreen } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkWaitingScreen />;
}
```

### With Properties

```tsx
import { RtkWaitingScreen } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkWaitingScreen config={customConfig} />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkwaitingscreen/#page","headline":"RtkWaitingScreen · Cloudflare Realtime docs","description":"API reference for RtkWaitingScreen component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkwaitingscreen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkWebinarStageToggle component (React Native Library)
title: RtkWebinarStageToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkWebinarStageToggle

Last updated Apr 23, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkwebinarstagetoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Toggle button for requesting to join or leave the webinar stage. Only visible in webinar mode for participants with stage access permissions.

## Properties

| Property | Type                     | Required | Default  | Description                      |      |              |
| -------- | ------------------------ | -------- | -------- | -------------------------------- | ---- | ------------ |
| meeting  | RealtimeKitClient        | ✅        | \-       | The RealtimeKit meeting instance |      |              |
| iconPack | IconPack                 | ❌        | \-       | Custom icon pack                 |      |              |
| size     | 'lg' \| 'md'             | 'sm'     | 'xl'     | ❌                                | 'sm' | Size variant |
| variant  | 'button' \| 'horizontal' | ❌        | 'button' | Layout variant                   |      |              |
| t        | RtkI18n                  | ❌        | \-       | i18n translation function        |      |              |

## Usage Examples

### Basic Usage

```tsx
import { RtkWebinarStageToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkWebinarStageToggle meeting={meeting} />;
}
```

### With Properties

```tsx
import { RtkWebinarStageToggle } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkWebinarStageToggle meeting={meeting} size="md" variant="button" />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkwebinarstagetoggle/#page","headline":"RtkWebinarStageToggle · Cloudflare Realtime docs","description":"API reference for RtkWebinarStageToggle component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react-native/rtkwebinarstagetoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-23","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAi component (React Library)
title: RtkAi
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAi

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkai/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkAi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkAi />;
}
```

### With Properties

```tsx
import { RtkAi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkAi
      meeting={meeting}
      size="md"
      view={aiview}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkai/#page","headline":"RtkAi · Cloudflare Realtime docs","description":"API reference for RtkAi component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkai/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAiToggle component (React Library)
title: RtkAiToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAiToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaitoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkAiToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkAiToggle />;
}
```

### With Properties

```tsx
import { RtkAiToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkAiToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaitoggle/#page","headline":"RtkAiToggle · Cloudflare Realtime docs","description":"API reference for RtkAiToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaitoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAiTranscriptions component (React Library)
title: RtkAiTranscriptions
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAiTranscriptions

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaitranscriptions/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property              | Type           | Required | Default       | Description            |
| --------------------- | -------------- | -------- | ------------- | ---------------------- |
| initialTranscriptions | Transcript\[\] | ✅        | \-            | Initial transcriptions |
| meeting               | Meeting        | ✅        | \-            | Meeting object         |
| t                     | RtkI18n        | ❌        | useLanguage() | Language               |

## Usage Examples

### Basic Usage

```tsx
import { RtkAiTranscriptions } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkAiTranscriptions />;
}
```

### With Properties

```tsx
import { RtkAiTranscriptions } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkAiTranscriptions
      initialTranscriptions={[]}
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaitranscriptions/#page","headline":"RtkAiTranscriptions · Cloudflare Realtime docs","description":"API reference for RtkAiTranscriptions component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaitranscriptions/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAudioGrid component (React Library)
title: RtkAudioGrid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAudioGrid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiogrid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkAudioGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkAudioGrid />;
}
```

### With Properties

```tsx
import { RtkAudioGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkAudioGrid
      config={defaultUiConfig}
      hideSelf={true}
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiogrid/#page","headline":"RtkAudioGrid · Cloudflare Realtime docs","description":"API reference for RtkAudioGrid component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiogrid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAudioTile component (React Library)
title: RtkAudioTile
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAudioTile

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiotile/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkAudioTile } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkAudioTile />;
}
```

### With Properties

```tsx
import { RtkAudioTile } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkAudioTile
      config={defaultUiConfig}
      meeting={meeting}
      participant={participant}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiotile/#page","headline":"RtkAudioTile · Cloudflare Realtime docs","description":"API reference for RtkAudioTile component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiotile/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAudioVisualizer component (React Library)
title: RtkAudioVisualizer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAudioVisualizer

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiovisualizer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkAudioVisualizer } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkAudioVisualizer />;
}
```

### With Properties

```tsx
import { RtkAudioVisualizer } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkAudioVisualizer
      hideMuted={true}
      isScreenShare={true}
      participant={participant}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiovisualizer/#page","headline":"RtkAudioVisualizer · Cloudflare Realtime docs","description":"API reference for RtkAudioVisualizer component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkaudiovisualizer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkAvatar component (React Library)
title: RtkAvatar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkAvatar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkavatar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkAvatar } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkAvatar />;
}
```

### With Properties

```tsx
import { RtkAvatar } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkAvatar
      participant="example"
      size="md"
      variant="circular"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkavatar/#page","headline":"RtkAvatar · Cloudflare Realtime docs","description":"API reference for RtkAvatar component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkavatar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkBreakoutRoomManager component (React Library)
title: RtkBreakoutRoomManager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkBreakoutRoomManager

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroommanager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkBreakoutRoomManager } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkBreakoutRoomManager />;
}
```

### With Properties

```tsx
import { RtkBreakoutRoomManager } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkBreakoutRoomManager
      allowDelete={true}
      assigningParticipants={true}
      defaultExpanded={true}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroommanager/#page","headline":"RtkBreakoutRoomManager · Cloudflare Realtime docs","description":"API reference for RtkBreakoutRoomManager component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroommanager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkBreakoutRoomParticipants component (React Library)
title: RtkBreakoutRoomParticipants
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkBreakoutRoomParticipants

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomparticipants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkBreakoutRoomParticipants } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkBreakoutRoomParticipants />;
}
```

### With Properties

```tsx
import { RtkBreakoutRoomParticipants } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkBreakoutRoomParticipants
      meeting={meeting}
      participantIds="example"
      selectedParticipantIds="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomparticipants/#page","headline":"RtkBreakoutRoomParticipants · Cloudflare Realtime docs","description":"API reference for RtkBreakoutRoomParticipants component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomparticipants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkBreakoutRoomsManager component (React Library)
title: RtkBreakoutRoomsManager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkBreakoutRoomsManager

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomsmanager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkBreakoutRoomsManager } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkBreakoutRoomsManager />;
}
```

### With Properties

```tsx
import { RtkBreakoutRoomsManager } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkBreakoutRoomsManager
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomsmanager/#page","headline":"RtkBreakoutRoomsManager · Cloudflare Realtime docs","description":"API reference for RtkBreakoutRoomsManager component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomsmanager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkBreakoutRoomsToggle component (React Library)
title: RtkBreakoutRoomsToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkBreakoutRoomsToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomstoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkBreakoutRoomsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkBreakoutRoomsToggle />;
}
```

### With Properties

```tsx
import { RtkBreakoutRoomsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkBreakoutRoomsToggle
      iconPack={defaultIconPack}
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomstoggle/#page","headline":"RtkBreakoutRoomsToggle · Cloudflare Realtime docs","description":"API reference for RtkBreakoutRoomsToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbreakoutroomstoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkBroadcastMessageModal component (React Library)
title: RtkBroadcastMessageModal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkBroadcastMessageModal

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbroadcastmessagemodal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkBroadcastMessageModal } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkBroadcastMessageModal />;
}
```

### With Properties

```tsx
import { RtkBroadcastMessageModal } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkBroadcastMessageModal
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbroadcastmessagemodal/#page","headline":"RtkBroadcastMessageModal · Cloudflare Realtime docs","description":"API reference for RtkBroadcastMessageModal component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbroadcastmessagemodal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkButton component (React Library)
title: RtkButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbutton/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkButton />;
}
```

### With Properties

```tsx
import { RtkButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkButton
      disabled={true}
      kind={buttonkind}
      reverse={true}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbutton/#page","headline":"RtkButton · Cloudflare Realtime docs","description":"API reference for RtkButton component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkbutton/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkCameraSelector component (React Library)
title: RtkCameraSelector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkCameraSelector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcameraselector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```tsx
import { RtkCameraSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkCameraSelector />;
}
```

### With Properties

```tsx
import { RtkCameraSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkCameraSelector
      meeting={meeting}
      size="md"
      variant={'full' | 'inline'}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcameraselector/#page","headline":"RtkCameraSelector · Cloudflare Realtime docs","description":"API reference for RtkCameraSelector component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcameraselector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkCameraToggle component (React Library)
title: RtkCameraToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkCameraToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcameratoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkCameraToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkCameraToggle />;
}
```

### With Properties

```tsx
import { RtkCameraToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkCameraToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcameratoggle/#page","headline":"RtkCameraToggle · Cloudflare Realtime docs","description":"API reference for RtkCameraToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcameratoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkCaptionToggle component (React Library)
title: RtkCaptionToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkCaptionToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcaptiontoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkCaptionToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkCaptionToggle />;
}
```

### With Properties

```tsx
import { RtkCaptionToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkCaptionToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcaptiontoggle/#page","headline":"RtkCaptionToggle · Cloudflare Realtime docs","description":"API reference for RtkCaptionToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcaptiontoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChat component (React Library)
title: RtkChat
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChat

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchat/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkChat } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChat />;
}
```

### With Properties

```tsx
import { RtkChat } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChat
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchat/#page","headline":"RtkChat · Cloudflare Realtime docs","description":"API reference for RtkChat component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchat/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatComposerUi component (React Library)
title: RtkChatComposerUi
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatComposerUi

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatcomposerui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```tsx
import { RtkChatComposerUi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatComposerUi />;
}
```

### With Properties

```tsx
import { RtkChatComposerUi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChatComposerUi
      canSendFiles={true}
      canSendTextMessage={true}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatcomposerui/#page","headline":"RtkChatComposerUi · Cloudflare Realtime docs","description":"API reference for RtkChatComposerUi component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatcomposerui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatComposerView component (React Library)
title: RtkChatComposerView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatComposerView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatcomposerview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkChatComposerView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatComposerView />;
}
```

### With Properties

```tsx
import { RtkChatComposerView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChatComposerView
      canSendFiles={true}
      canSendTextMessage={true}
      inputTextPlaceholder="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatcomposerview/#page","headline":"RtkChatComposerView · Cloudflare Realtime docs","description":"API reference for RtkChatComposerView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatcomposerview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatHeader component (React Library)
title: RtkChatHeader
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatHeader

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatheader/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

_No properties available._

## Usage Examples

### Basic Usage

```tsx
import { RtkChatHeader } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatHeader />;
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatheader/#page","headline":"RtkChatHeader · Cloudflare Realtime docs","description":"API reference for RtkChatHeader component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatheader/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatMessage component (React Library)
title: RtkChatMessage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatMessage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```tsx
import { RtkChatMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatMessage />;
}
```

### With Properties

```tsx
import { RtkChatMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChatMessage
      alignRight={true}
      canDelete={true}
      canEdit={true}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessage/#page","headline":"RtkChatMessage · Cloudflare Realtime docs","description":"API reference for RtkChatMessage component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatMessagesUi component (React Library)
title: RtkChatMessagesUi
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatMessagesUi

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessagesui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```tsx
import { RtkChatMessagesUi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatMessagesUi />;
}
```

### With Properties

```tsx
import { RtkChatMessagesUi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChatMessagesUi
      canPinMessages={true}
      messages={[]}
      selectedGroup="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessagesui/#page","headline":"RtkChatMessagesUi · Cloudflare Realtime docs","description":"API reference for RtkChatMessagesUi component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessagesui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatMessagesUiPaginated component (React Library)
title: RtkChatMessagesUiPaginated
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatMessagesUiPaginated

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessagesuipaginated/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkChatMessagesUiPaginated } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatMessagesUiPaginated />;
}
```

### With Properties

```tsx
import { RtkChatMessagesUiPaginated } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChatMessagesUiPaginated
      meeting={meeting}
      privateChatRecipient={participant | null}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessagesuipaginated/#page","headline":"RtkChatMessagesUiPaginated · Cloudflare Realtime docs","description":"API reference for RtkChatMessagesUiPaginated component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatmessagesuipaginated/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatSearchResults component (React Library)
title: RtkChatSearchResults
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatSearchResults

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatsearchresults/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```tsx
import { RtkChatSearchResults } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatSearchResults />;
}
```

### With Properties

```tsx
import { RtkChatSearchResults } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChatSearchResults
      channelId="example"
      meeting={meeting}
      query="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatsearchresults/#page","headline":"RtkChatSearchResults · Cloudflare Realtime docs","description":"API reference for RtkChatSearchResults component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatsearchresults/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatSelector component (React Library)
title: RtkChatSelector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatSelector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatselector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkChatSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatSelector />;
}
```

### With Properties

```tsx
import { RtkChatSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChatSelector
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatselector/#page","headline":"RtkChatSelector · Cloudflare Realtime docs","description":"API reference for RtkChatSelector component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatselector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatSelectorUi component (React Library)
title: RtkChatSelectorUi
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatSelectorUi

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatselectorui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkChatSelectorUi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatSelectorUi />;
}
```

### With Properties

```tsx
import { RtkChatSelectorUi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChatSelectorUi
      groups={[]}
      selectedGroupId="example"
      selfUserId="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatselectorui/#page","headline":"RtkChatSelectorUi · Cloudflare Realtime docs","description":"API reference for RtkChatSelectorUi component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchatselectorui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkChatToggle component (React Library)
title: RtkChatToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkChatToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchattoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```ts
{ 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

```tsx
import { RtkChatToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkChatToggle />;
}
```

### With Properties

```tsx
import { RtkChatToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkChatToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchattoggle/#page","headline":"RtkChatToggle · Cloudflare Realtime docs","description":"API reference for RtkChatToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkchattoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkClock component (React Library)
title: RtkClock
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkClock

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkclock/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkClock } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkClock />;
}
```

### With Properties

```tsx
import { RtkClock } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkClock
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkclock/#page","headline":"RtkClock · Cloudflare Realtime docs","description":"API reference for RtkClock component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkclock/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkConfirmationModal component (React Library)
title: RtkConfirmationModal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkConfirmationModal

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkconfirmationmodal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkConfirmationModal } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkConfirmationModal />;
}
```

### With Properties

```tsx
import { RtkConfirmationModal } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkConfirmationModal
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkconfirmationmodal/#page","headline":"RtkConfirmationModal · Cloudflare Realtime docs","description":"API reference for RtkConfirmationModal component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkconfirmationmodal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkControlbar component (React Library)
title: RtkControlbar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkControlbar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcontrolbar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkControlbar } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkControlbar />;
}
```

### With Properties

```tsx
import { RtkControlbar } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkControlbar
      disableRender={true}
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcontrolbar/#page","headline":"RtkControlbar · Cloudflare Realtime docs","description":"API reference for RtkControlbar component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcontrolbar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkControlbarButton component (React Library)
title: RtkControlbarButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkControlbarButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcontrolbarbutton/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkControlbarButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkControlbarButton />;
}
```

### With Properties

```tsx
import { RtkControlbarButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkControlbarButton
      brandIcon={true}
      disabled={true}
      icon="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcontrolbarbutton/#page","headline":"RtkControlbarButton · Cloudflare Realtime docs","description":"API reference for RtkControlbarButton component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcontrolbarbutton/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkCounter component (React Library)
title: RtkCounter
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkCounter

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcounter/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkCounter } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkCounter />;
}
```

### With Properties

```tsx
import { RtkCounter } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkCounter
      minValue={42}
      size="md"
      value={42}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcounter/#page","headline":"RtkCounter · Cloudflare Realtime docs","description":"API reference for RtkCounter component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkcounter/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDebugger component (React Library)
title: RtkDebugger
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDebugger

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebugger/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkDebugger } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkDebugger />;
}
```

### With Properties

```tsx
import { RtkDebugger } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkDebugger
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebugger/#page","headline":"RtkDebugger · Cloudflare Realtime docs","description":"API reference for RtkDebugger component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebugger/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDebuggerAudio component (React Library)
title: RtkDebuggerAudio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDebuggerAudio

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggeraudio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkDebuggerAudio } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkDebuggerAudio />;
}
```

### With Properties

```tsx
import { RtkDebuggerAudio } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkDebuggerAudio
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggeraudio/#page","headline":"RtkDebuggerAudio · Cloudflare Realtime docs","description":"API reference for RtkDebuggerAudio component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggeraudio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDebuggerScreenshare component (React Library)
title: RtkDebuggerScreenshare
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDebuggerScreenshare

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggerscreenshare/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkDebuggerScreenshare } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkDebuggerScreenshare />;
}
```

### With Properties

```tsx
import { RtkDebuggerScreenshare } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkDebuggerScreenshare
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggerscreenshare/#page","headline":"RtkDebuggerScreenshare · Cloudflare Realtime docs","description":"API reference for RtkDebuggerScreenshare component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggerscreenshare/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDebuggerSystem component (React Library)
title: RtkDebuggerSystem
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDebuggerSystem

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggersystem/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkDebuggerSystem } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkDebuggerSystem />;
}
```

### With Properties

```tsx
import { RtkDebuggerSystem } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkDebuggerSystem
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggersystem/#page","headline":"RtkDebuggerSystem · Cloudflare Realtime docs","description":"API reference for RtkDebuggerSystem component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggersystem/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDebuggerToggle component (React Library)
title: RtkDebuggerToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDebuggerToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggertoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkDebuggerToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkDebuggerToggle />;
}
```

### With Properties

```tsx
import { RtkDebuggerToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkDebuggerToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggertoggle/#page","headline":"RtkDebuggerToggle · Cloudflare Realtime docs","description":"API reference for RtkDebuggerToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggertoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDebuggerVideo component (React Library)
title: RtkDebuggerVideo
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDebuggerVideo

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggervideo/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkDebuggerVideo } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkDebuggerVideo />;
}
```

### With Properties

```tsx
import { RtkDebuggerVideo } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkDebuggerVideo
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggervideo/#page","headline":"RtkDebuggerVideo · Cloudflare Realtime docs","description":"API reference for RtkDebuggerVideo component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdebuggervideo/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDialog component (React Library)
title: RtkDialog
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDialog

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdialog/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkDialog } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkDialog />;
}
```

### With Properties

```tsx
import { RtkDialog } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkDialog
      disableEscapeKey={true}
      hideCloseButton={true}
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdialog/#page","headline":"RtkDialog · Cloudflare Realtime docs","description":"API reference for RtkDialog component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdialog/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDialogManager component (React Library)
title: RtkDialogManager
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDialogManager

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdialogmanager/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkDialogManager } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkDialogManager />;
}
```

### With Properties

```tsx
import { RtkDialogManager } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkDialogManager
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdialogmanager/#page","headline":"RtkDialogManager · Cloudflare Realtime docs","description":"API reference for RtkDialogManager component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdialogmanager/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkDraftAttachmentView component (React Library)
title: RtkDraftAttachmentView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkDraftAttachmentView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdraftattachmentview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkDraftAttachmentView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkDraftAttachmentView />;
}
```

### With Properties

```tsx
import { RtkDraftAttachmentView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkDraftAttachmentView
      attachment={{}}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdraftattachmentview/#page","headline":"RtkDraftAttachmentView · Cloudflare Realtime docs","description":"API reference for RtkDraftAttachmentView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkdraftattachmentview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkEmojiPicker component (React Library)
title: RtkEmojiPicker
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkEmojiPicker

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkemojipicker/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkEmojiPicker } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkEmojiPicker />;
}
```

### With Properties

```tsx
import { RtkEmojiPicker } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkEmojiPicker
      focusWhenOpened={true}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkemojipicker/#page","headline":"RtkEmojiPicker · Cloudflare Realtime docs","description":"API reference for RtkEmojiPicker component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkemojipicker/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkEmojiPickerButton component (React Library)
title: RtkEmojiPickerButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkEmojiPickerButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkemojipickerbutton/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property | Type      | Required | Default         | Description            |
| -------- | --------- | -------- | --------------- | ---------------------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack              |
| isActive | boolean   | ✅        | \-              | Active state indicator |
| t        | RtkI18n1  | ❌        | useLanguage()   | Language               |

## Usage Examples

### Basic Usage

```tsx
import { RtkEmojiPickerButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkEmojiPickerButton />;
}
```

### With Properties

```tsx
import { RtkEmojiPickerButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkEmojiPickerButton
      isActive={true}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkemojipickerbutton/#page","headline":"RtkEmojiPickerButton · Cloudflare Realtime docs","description":"API reference for RtkEmojiPickerButton component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkemojipickerbutton/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkEndedScreen component (React Library)
title: RtkEndedScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkEndedScreen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkendedscreen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkEndedScreen } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkEndedScreen />;
}
```

### With Properties

```tsx
import { RtkEndedScreen } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkEndedScreen
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkendedscreen/#page","headline":"RtkEndedScreen · Cloudflare Realtime docs","description":"API reference for RtkEndedScreen component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkendedscreen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkFileDropzone component (React Library)
title: RtkFileDropzone
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkFileDropzone

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfiledropzone/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkFileDropzone } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkFileDropzone />;
}
```

### With Properties

```tsx
import { RtkFileDropzone } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkFileDropzone
      hostEl={htmlelement}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfiledropzone/#page","headline":"RtkFileDropzone · Cloudflare Realtime docs","description":"API reference for RtkFileDropzone component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfiledropzone/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkFileMessage component (React Library)
title: RtkFileMessage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkFileMessage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfilemessage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```tsx
import { RtkFileMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkFileMessage />;
}
```

### With Properties

```tsx
import { RtkFileMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkFileMessage
      isContinued={true}
      message={filemessage}
      now={date}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfilemessage/#page","headline":"RtkFileMessage · Cloudflare Realtime docs","description":"API reference for RtkFileMessage component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfilemessage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkFileMessageView component (React Library)
title: RtkFileMessageView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkFileMessageView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfilemessageview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkFileMessageView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkFileMessageView />;
}
```

### With Properties

```tsx
import { RtkFileMessageView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkFileMessageView
      name="example"
      size={42}
      url="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfilemessageview/#page","headline":"RtkFileMessageView · Cloudflare Realtime docs","description":"API reference for RtkFileMessageView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfilemessageview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkFilePickerButton component (React Library)
title: RtkFilePickerButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkFilePickerButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfilepickerbutton/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkFilePickerButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkFilePickerButton />;
}
```

### With Properties

```tsx
import { RtkFilePickerButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkFilePickerButton
      filter="example"
      icon={defaultIconPack}
      label="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfilepickerbutton/#page","headline":"RtkFilePickerButton · Cloudflare Realtime docs","description":"API reference for RtkFilePickerButton component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfilepickerbutton/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkFullscreenToggle component (React Library)
title: RtkFullscreenToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkFullscreenToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfullscreentoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkFullscreenToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkFullscreenToggle />;
}
```

### With Properties

```tsx
import { RtkFullscreenToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkFullscreenToggle
      size="md"
      targetElement={htmlelement}
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfullscreentoggle/#page","headline":"RtkFullscreenToggle · Cloudflare Realtime docs","description":"API reference for RtkFullscreenToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkfullscreentoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkGrid component (React Library)
title: RtkGrid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkGrid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkgrid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkGrid />;
}
```

### With Properties

```tsx
import { RtkGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkGrid
      aspectRatio="example"
      gap={42}
      gridSize="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkgrid/#page","headline":"RtkGrid · Cloudflare Realtime docs","description":"API reference for RtkGrid component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkgrid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkGridPagination component (React Library)
title: RtkGridPagination
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkGridPagination

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkgridpagination/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkGridPagination } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkGridPagination />;
}
```

### With Properties

```tsx
import { RtkGridPagination } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkGridPagination
      meeting={meeting}
      size="md"
      variant={gridpaginationvariants}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkgridpagination/#page","headline":"RtkGridPagination · Cloudflare Realtime docs","description":"API reference for RtkGridPagination component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkgridpagination/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkHeader component (React Library)
title: RtkHeader
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkHeader

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkheader/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkHeader } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkHeader />;
}
```

### With Properties

```tsx
import { RtkHeader } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkHeader
      disableRender={true}
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkheader/#page","headline":"RtkHeader · Cloudflare Realtime docs","description":"API reference for RtkHeader component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkheader/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkIcon component (React Library)
title: RtkIcon
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkIcon

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkicon/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkIcon } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkIcon />;
}
```

### With Properties

```tsx
import { RtkIcon } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkIcon
      icon="example"
      size="md"
      variant="primary"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkicon/#page","headline":"RtkIcon · Cloudflare Realtime docs","description":"API reference for RtkIcon component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkicon/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkIdleScreen component (React Library)
title: RtkIdleScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkIdleScreen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkidlescreen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkIdleScreen } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkIdleScreen />;
}
```

### With Properties

```tsx
import { RtkIdleScreen } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkIdleScreen
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkidlescreen/#page","headline":"RtkIdleScreen · Cloudflare Realtime docs","description":"API reference for RtkIdleScreen component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkidlescreen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkImageMessage component (React Library)
title: RtkImageMessage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkImageMessage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkimagemessage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```tsx
import { RtkImageMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkImageMessage />;
}
```

### With Properties

```tsx
import { RtkImageMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkImageMessage
      isContinued={true}
      message={imagemessage}
      now={date}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkimagemessage/#page","headline":"RtkImageMessage · Cloudflare Realtime docs","description":"API reference for RtkImageMessage component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkimagemessage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkImageMessageView component (React Library)
title: RtkImageMessageView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkImageMessageView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkimagemessageview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkImageMessageView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkImageMessageView />;
}
```

### With Properties

```tsx
import { RtkImageMessageView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkImageMessageView
      url="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkimagemessageview/#page","headline":"RtkImageMessageView · Cloudflare Realtime docs","description":"API reference for RtkImageMessageView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkimagemessageview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkImageViewer component (React Library)
title: RtkImageViewer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkImageViewer

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkimageviewer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkImageViewer } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkImageViewer />;
}
```

### With Properties

```tsx
import { RtkImageViewer } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkImageViewer
      image={imagemessage}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkimageviewer/#page","headline":"RtkImageViewer · Cloudflare Realtime docs","description":"API reference for RtkImageViewer component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkimageviewer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkInformationTooltip component (React Library)
title: RtkInformationTooltip
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkInformationTooltip

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkinformationtooltip/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property | Type      | Required | Default         | Description |
| -------- | --------- | -------- | --------------- | ----------- |
| iconPack | IconPack1 | ❌        | defaultIconPack | Icon pack   |

## Usage Examples

### Basic Usage

```tsx
import { RtkInformationTooltip } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkInformationTooltip />;
}
```

### With Properties

```tsx
import { RtkInformationTooltip } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkInformationTooltip
      iconPack={defaultIconPack}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkinformationtooltip/#page","headline":"RtkInformationTooltip · Cloudflare Realtime docs","description":"API reference for RtkInformationTooltip component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkinformationtooltip/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkJoinStage component (React Library)
title: RtkJoinStage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkJoinStage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkjoinstage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkJoinStage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkJoinStage />;
}
```

### With Properties

```tsx
import { RtkJoinStage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkJoinStage
      dataConfig={modaldataconfig}
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkjoinstage/#page","headline":"RtkJoinStage · Cloudflare Realtime docs","description":"API reference for RtkJoinStage component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkjoinstage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLeaveButton component (React Library)
title: RtkLeaveButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLeaveButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkleavebutton/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkLeaveButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkLeaveButton />;
}
```

### With Properties

```tsx
import { RtkLeaveButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkLeaveButton
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkleavebutton/#page","headline":"RtkLeaveButton · Cloudflare Realtime docs","description":"API reference for RtkLeaveButton component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkleavebutton/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLeaveMeeting component (React Library)
title: RtkLeaveMeeting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLeaveMeeting

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkleavemeeting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkLeaveMeeting } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkLeaveMeeting />;
}
```

### With Properties

```tsx
import { RtkLeaveMeeting } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkLeaveMeeting
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkleavemeeting/#page","headline":"RtkLeaveMeeting · Cloudflare Realtime docs","description":"API reference for RtkLeaveMeeting component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkleavemeeting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLivestreamIndicator component (React Library)
title: RtkLivestreamIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLivestreamIndicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamindicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkLivestreamIndicator } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkLivestreamIndicator />;
}
```

### With Properties

```tsx
import { RtkLivestreamIndicator } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkLivestreamIndicator
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamindicator/#page","headline":"RtkLivestreamIndicator · Cloudflare Realtime docs","description":"API reference for RtkLivestreamIndicator component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamindicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLivestreamPlayer component (React Library)
title: RtkLivestreamPlayer
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLivestreamPlayer

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamplayer/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkLivestreamPlayer } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkLivestreamPlayer />;
}
```

### With Properties

```tsx
import { RtkLivestreamPlayer } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkLivestreamPlayer
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamplayer/#page","headline":"RtkLivestreamPlayer · Cloudflare Realtime docs","description":"API reference for RtkLivestreamPlayer component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamplayer/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLivestreamToggle component (React Library)
title: RtkLivestreamToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLivestreamToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamtoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkLivestreamToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkLivestreamToggle />;
}
```

### With Properties

```tsx
import { RtkLivestreamToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkLivestreamToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamtoggle/#page","headline":"RtkLivestreamToggle · Cloudflare Realtime docs","description":"API reference for RtkLivestreamToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklivestreamtoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkLogo component (React Library)
title: RtkLogo
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkLogo

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklogo/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkLogo } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkLogo />;
}
```

### With Properties

```tsx
import { RtkLogo } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkLogo
      logoUrl="example"
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklogo/#page","headline":"RtkLogo · Cloudflare Realtime docs","description":"API reference for RtkLogo component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtklogo/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMarkdownView component (React Library)
title: RtkMarkdownView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMarkdownView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmarkdownview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkMarkdownView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMarkdownView />;
}
```

### With Properties

```tsx
import { RtkMarkdownView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMarkdownView
      maxLength={42}
      text="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmarkdownview/#page","headline":"RtkMarkdownView · Cloudflare Realtime docs","description":"API reference for RtkMarkdownView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmarkdownview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeeting component (React Library)
title: RtkMeeting
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeeting

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmeeting/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkMeeting } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMeeting />;
}
```

### With Properties

```tsx
import { RtkMeeting } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMeeting
      applyDesignSystem={true}
      config={defaultUiConfig}
      gridLayout={gridlayout1}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmeeting/#page","headline":"RtkMeeting · Cloudflare Realtime docs","description":"API reference for RtkMeeting component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmeeting/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMeetingTitle component (React Library)
title: RtkMeetingTitle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMeetingTitle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmeetingtitle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkMeetingTitle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMeetingTitle />;
}
```

### With Properties

```tsx
import { RtkMeetingTitle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMeetingTitle
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmeetingtitle/#page","headline":"RtkMeetingTitle · Cloudflare Realtime docs","description":"API reference for RtkMeetingTitle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmeetingtitle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMenu component (React Library)
title: RtkMenu
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMenu

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmenu/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkMenu } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMenu />;
}
```

### With Properties

```tsx
import { RtkMenu } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMenu
      offset={42}
      placement={placement}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmenu/#page","headline":"RtkMenu · Cloudflare Realtime docs","description":"API reference for RtkMenu component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmenu/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMenuItem component (React Library)
title: RtkMenuItem
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMenuItem

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmenuitem/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkMenuItem } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMenuItem />;
}
```

### With Properties

```tsx
import { RtkMenuItem } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMenuItem
      menuVariant={'primary' | 'secondary'}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmenuitem/#page","headline":"RtkMenuItem · Cloudflare Realtime docs","description":"API reference for RtkMenuItem component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmenuitem/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMenuList component (React Library)
title: RtkMenuList
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMenuList

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmenulist/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkMenuList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMenuList />;
}
```

### With Properties

```tsx
import { RtkMenuList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMenuList
      menuVariant={'primary' | 'secondary'}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmenulist/#page","headline":"RtkMenuList · Cloudflare Realtime docs","description":"API reference for RtkMenuList component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmenulist/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMessageListView component (React Library)
title: RtkMessageListView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMessageListView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmessagelistview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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 prepended |
| messages          | Message\[\]                       | ✅        | \-              | Messages to render                                                            |
| renderer          | (message: Message, index: number) | ✅        | \-              | Render function of the message                                                |
| visibleItemsCount | number                            | ✅        | \-              | Maximum visible messages                                                      |

## Usage Examples

### Basic Usage

```tsx
import { RtkMessageListView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMessageListView />;
}
```

### With Properties

```tsx
import { RtkMessageListView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMessageListView
      estimateItemSize={42}
      loadMore={(lastmessage: message)}
      messages={[]}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmessagelistview/#page","headline":"RtkMessageListView · Cloudflare Realtime docs","description":"API reference for RtkMessageListView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmessagelistview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMessageView component (React Library)
title: RtkMessageView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMessageView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmessageview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkMessageView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMessageView />;
}
```

### With Properties

```tsx
import { RtkMessageView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMessageView
      actions={[]}
      authorName="example"
      avatarUrl="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmessageview/#page","headline":"RtkMessageView · Cloudflare Realtime docs","description":"API reference for RtkMessageView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmessageview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMicrophoneSelector component (React Library)
title: RtkMicrophoneSelector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMicrophoneSelector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmicrophoneselector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```tsx
import { RtkMicrophoneSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMicrophoneSelector />;
}
```

### With Properties

```tsx
import { RtkMicrophoneSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMicrophoneSelector
      meeting={meeting}
      size="md"
      variant={'full' | 'inline'}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmicrophoneselector/#page","headline":"RtkMicrophoneSelector · Cloudflare Realtime docs","description":"API reference for RtkMicrophoneSelector component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmicrophoneselector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMicToggle component (React Library)
title: RtkMicToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMicToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmictoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkMicToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMicToggle />;
}
```

### With Properties

```tsx
import { RtkMicToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMicToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmictoggle/#page","headline":"RtkMicToggle · Cloudflare Realtime docs","description":"API reference for RtkMicToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmictoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMixedGrid component (React Library)
title: RtkMixedGrid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMixedGrid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmixedgrid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkMixedGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMixedGrid />;
}
```

### With Properties

```tsx
import { RtkMixedGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMixedGrid
      aspectRatio="example"
      gap={42}
      gridSize="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmixedgrid/#page","headline":"RtkMixedGrid · Cloudflare Realtime docs","description":"API reference for RtkMixedGrid component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmixedgrid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMoreToggle component (React Library)
title: RtkMoreToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMoreToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmoretoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of a more menu. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```tsx
import { RtkMoreToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMoreToggle />;
}
```

### With Properties

```tsx
import { RtkMoreToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMoreToggle
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmoretoggle/#page","headline":"RtkMoreToggle · Cloudflare Realtime docs","description":"API reference for RtkMoreToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmoretoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMuteAllButton component (React Library)
title: RtkMuteAllButton
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMuteAllButton

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmuteallbutton/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkMuteAllButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMuteAllButton />;
}
```

### With Properties

```tsx
import { RtkMuteAllButton } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMuteAllButton
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmuteallbutton/#page","headline":"RtkMuteAllButton · Cloudflare Realtime docs","description":"API reference for RtkMuteAllButton component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmuteallbutton/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkMuteAllConfirmation component (React Library)
title: RtkMuteAllConfirmation
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkMuteAllConfirmation

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmuteallconfirmation/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkMuteAllConfirmation } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkMuteAllConfirmation />;
}
```

### With Properties

```tsx
import { RtkMuteAllConfirmation } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkMuteAllConfirmation
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmuteallconfirmation/#page","headline":"RtkMuteAllConfirmation · Cloudflare Realtime docs","description":"API reference for RtkMuteAllConfirmation component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkmuteallconfirmation/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNameTag component (React Library)
title: RtkNameTag
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNameTag

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknametag/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkNameTag } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkNameTag />;
}
```

### With Properties

```tsx
import { RtkNameTag } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkNameTag
      isScreenShare={true}
      meeting={meeting}
      participant={participant}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknametag/#page","headline":"RtkNameTag · Cloudflare Realtime docs","description":"API reference for RtkNameTag component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknametag/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNetworkIndicator component (React Library)
title: RtkNetworkIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNetworkIndicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknetworkindicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkNetworkIndicator } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkNetworkIndicator />;
}
```

### With Properties

```tsx
import { RtkNetworkIndicator } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkNetworkIndicator
      isScreenShare={true}
      meeting={meeting}
      participant={participant}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknetworkindicator/#page","headline":"RtkNetworkIndicator · Cloudflare Realtime docs","description":"API reference for RtkNetworkIndicator component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknetworkindicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNotification component (React Library)
title: RtkNotification
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNotification

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknotification/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkNotification } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkNotification />;
}
```

### With Properties

```tsx
import { RtkNotification } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkNotification
      notification={notification}
      paused={true}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknotification/#page","headline":"RtkNotification · Cloudflare Realtime docs","description":"API reference for RtkNotification component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknotification/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkNotifications component (React Library)
title: RtkNotifications
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkNotifications

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknotifications/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkNotifications } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkNotifications />;
}
```

### With Properties

```tsx
import { RtkNotifications } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkNotifications
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknotifications/#page","headline":"RtkNotifications · Cloudflare Realtime docs","description":"API reference for RtkNotifications component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtknotifications/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkOverlayModal component (React Library)
title: RtkOverlayModal
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkOverlayModal

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkoverlaymodal/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkOverlayModal } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkOverlayModal />;
}
```

### With Properties

```tsx
import { RtkOverlayModal } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkOverlayModal
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkoverlaymodal/#page","headline":"RtkOverlayModal · Cloudflare Realtime docs","description":"API reference for RtkOverlayModal component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkoverlaymodal/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPaginatedList component (React Library)
title: RtkPaginatedList
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPaginatedList

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpaginatedlist/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkPaginatedList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPaginatedList />;
}
```

### With Properties

```tsx
import { RtkPaginatedList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPaginatedList
      autoScroll={true}
      createNodes={[]}
      emptyListLabel="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpaginatedlist/#page","headline":"RtkPaginatedList · Cloudflare Realtime docs","description":"API reference for RtkPaginatedList component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpaginatedlist/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipant component (React Library)
title: RtkParticipant
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipant

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipant/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkParticipant } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipant />;
}
```

### With Properties

```tsx
import { RtkParticipant } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipant
      meeting={meeting}
      participant={participant}
      view={participantviewmode}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipant/#page","headline":"RtkParticipant · Cloudflare Realtime docs","description":"API reference for RtkParticipant component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipant/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantCount component (React Library)
title: RtkParticipantCount
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantCount

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantcount/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkParticipantCount } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantCount />;
}
```

### With Properties

```tsx
import { RtkParticipantCount } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipantCount
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantcount/#page","headline":"RtkParticipantCount · Cloudflare Realtime docs","description":"API reference for RtkParticipantCount component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantcount/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipants component (React Library)
title: RtkParticipants
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipants

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipants/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkParticipants } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipants />;
}
```

### With Properties

```tsx
import { RtkParticipants } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipants
      defaultParticipantsTabId={participantstabid}
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipants/#page","headline":"RtkParticipants · Cloudflare Realtime docs","description":"API reference for RtkParticipants component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipants/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantsAudio component (React Library)
title: RtkParticipantsAudio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantsAudio

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsaudio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkParticipantsAudio } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantsAudio />;
}
```

### With Properties

```tsx
import { RtkParticipantsAudio } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipantsAudio
      meeting={meeting}
      preloadedAudioElem={htmlaudioelement}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsaudio/#page","headline":"RtkParticipantsAudio · Cloudflare Realtime docs","description":"API reference for RtkParticipantsAudio component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsaudio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantSetup component (React Library)
title: RtkParticipantSetup
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantSetup

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsetup/index.md)|[Agent setup](https://developers.cloudflare.com/agent-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

```tsx
import { RtkParticipantSetup } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantSetup />;
}
```

### With Properties

```tsx
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}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsetup/#page","headline":"RtkParticipantSetup · Cloudflare Realtime docs","description":"API reference for RtkParticipantSetup component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsetup/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantsStageList component (React Library)
title: RtkParticipantsStageList
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantsStageList

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsstagelist/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkParticipantsStageList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantsStageList />;
}
```

### With Properties

```tsx
import { RtkParticipantsStageList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipantsStageList
      hideHeader={true}
      meeting={meeting}
      search="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsstagelist/#page","headline":"RtkParticipantsStageList · Cloudflare Realtime docs","description":"API reference for RtkParticipantsStageList component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsstagelist/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantsStageQueue component (React Library)
title: RtkParticipantsStageQueue
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantsStageQueue

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsstagequeue/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkParticipantsStageQueue } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantsStageQueue />;
}
```

### With Properties

```tsx
import { RtkParticipantsStageQueue } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipantsStageQueue
      meeting={meeting}
      size="md"
      view={participantsviewmode}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsstagequeue/#page","headline":"RtkParticipantsStageQueue · Cloudflare Realtime docs","description":"API reference for RtkParticipantsStageQueue component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsstagequeue/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantsToggle component (React Library)
title: RtkParticipantsToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantsToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantstoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of participants. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```tsx
import { RtkParticipantsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantsToggle />;
}
```

### With Properties

```tsx
import { RtkParticipantsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipantsToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantstoggle/#page","headline":"RtkParticipantsToggle · Cloudflare Realtime docs","description":"API reference for RtkParticipantsToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantstoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantsViewerList component (React Library)
title: RtkParticipantsViewerList
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantsViewerList

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsviewerlist/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkParticipantsViewerList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantsViewerList />;
}
```

### With Properties

```tsx
import { RtkParticipantsViewerList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipantsViewerList
      hideHeader={true}
      meeting={meeting}
      search="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsviewerlist/#page","headline":"RtkParticipantsViewerList · Cloudflare Realtime docs","description":"API reference for RtkParticipantsViewerList component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantsviewerlist/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantsWaitingList component (React Library)
title: RtkParticipantsWaitingList
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantsWaitingList

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantswaitinglist/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkParticipantsWaitingList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantsWaitingList />;
}
```

### With Properties

```tsx
import { RtkParticipantsWaitingList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipantsWaitingList
      meeting={meeting}
      size="md"
      view={participantsviewmode}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantswaitinglist/#page","headline":"RtkParticipantsWaitingList · Cloudflare Realtime docs","description":"API reference for RtkParticipantsWaitingList component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipantswaitinglist/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkParticipantTile component (React Library)
title: RtkParticipantTile
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkParticipantTile

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipanttile/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkParticipantTile } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantTile />;
}
```

### With Properties

```tsx
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'}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipanttile/#page","headline":"RtkParticipantTile · Cloudflare Realtime docs","description":"API reference for RtkParticipantTile component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkparticipanttile/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPermissionsMessage component (React Library)
title: RtkPermissionsMessage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPermissionsMessage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpermissionsmessage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkPermissionsMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPermissionsMessage />;
}
```

### With Properties

```tsx
import { RtkPermissionsMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPermissionsMessage
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpermissionsmessage/#page","headline":"RtkPermissionsMessage · Cloudflare Realtime docs","description":"API reference for RtkPermissionsMessage component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpermissionsmessage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPinnedMessageSelector component (React Library)
title: RtkPinnedMessageSelector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPinnedMessageSelector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpinnedmessageselector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## Properties

| Property | Type     | Required | Default         | Description    |
| -------- | -------- | -------- | --------------- | -------------- |
| iconPack | IconPack | ❌        | defaultIconPack | Icon pack      |
| meeting  | Meeting  | ✅        | \-              | Meeting object |
| t        | RtkI18n  | ❌        | useLanguage()   | Language       |

## Usage Examples

### Basic Usage

```tsx
import { RtkPinnedMessageSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPinnedMessageSelector />;
}
```

### With Properties

```tsx
import { RtkPinnedMessageSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPinnedMessageSelector
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpinnedmessageselector/#page","headline":"RtkPinnedMessageSelector · Cloudflare Realtime docs","description":"API reference for RtkPinnedMessageSelector component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpinnedmessageselector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPipToggle component (React Library)
title: RtkPipToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPipToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpiptoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkPipToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPipToggle />;
}
```

### With Properties

```tsx
import { RtkPipToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPipToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpiptoggle/#page","headline":"RtkPipToggle · Cloudflare Realtime docs","description":"API reference for RtkPipToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpiptoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPluginMain component (React Library)
title: RtkPluginMain
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPluginMain

Last updated Jun 18, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpluginmain/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which renders a plugin's UI.

The plugin's `component` (an HTMLElement) is placed into this element's light DOM and projected into the shadow DOM layout via a `<slot>`. This ensures external CSS from the consuming application continues to apply to the plugin content.

## 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

```tsx
import { RtkPluginMain } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPluginMain />;
}
```

### With Properties

```tsx
import { RtkPluginMain } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPluginMain
      meeting={meeting}
      plugin={rtkplugin}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpluginmain/#page","headline":"RtkPluginMain · Cloudflare Realtime docs","description":"API reference for RtkPluginMain component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpluginmain/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-18","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPlugins component (React Library)
title: RtkPlugins
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPlugins

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkplugins/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkPlugins } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPlugins />;
}
```

### With Properties

```tsx
import { RtkPlugins } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPlugins
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkplugins/#page","headline":"RtkPlugins · Cloudflare Realtime docs","description":"API reference for RtkPlugins component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkplugins/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPluginsToggle component (React Library)
title: RtkPluginsToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPluginsToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpluginstoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of plugins. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```tsx
import { RtkPluginsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPluginsToggle />;
}
```

### With Properties

```tsx
import { RtkPluginsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPluginsToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpluginstoggle/#page","headline":"RtkPluginsToggle · Cloudflare Realtime docs","description":"API reference for RtkPluginsToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpluginstoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPoll component (React Library)
title: RtkPoll
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPoll

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpoll/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkPoll } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPoll />;
}
```

### With Properties

```tsx
import { RtkPoll } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPoll
      permissions={rtkpermissionspreset}
      poll={poll}
      self="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpoll/#page","headline":"RtkPoll · Cloudflare Realtime docs","description":"API reference for RtkPoll component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpoll/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPollForm component (React Library)
title: RtkPollForm
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPollForm

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpollform/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkPollForm } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPollForm />;
}
```

### With Properties

```tsx
import { RtkPollForm } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPollForm
      iconPack={defaultIconPack}
      t={rtki18n}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpollform/#page","headline":"RtkPollForm · Cloudflare Realtime docs","description":"API reference for RtkPollForm component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpollform/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPolls component (React Library)
title: RtkPolls
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPolls

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpolls/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkPolls } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPolls />;
}
```

### With Properties

```tsx
import { RtkPolls } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPolls
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpolls/#page","headline":"RtkPolls · Cloudflare Realtime docs","description":"API reference for RtkPolls component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpolls/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkPollsToggle component (React Library)
title: RtkPollsToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkPollsToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpollstoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```ts
{ 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

```tsx
import { RtkPollsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPollsToggle />;
}
```

### With Properties

```tsx
import { RtkPollsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPollsToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpollstoggle/#page","headline":"RtkPollsToggle · Cloudflare Realtime docs","description":"API reference for RtkPollsToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkpollstoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkRecordingIndicator component (React Library)
title: RtkRecordingIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkRecordingIndicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkrecordingindicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkRecordingIndicator } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkRecordingIndicator />;
}
```

### With Properties

```tsx
import { RtkRecordingIndicator } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkRecordingIndicator
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkrecordingindicator/#page","headline":"RtkRecordingIndicator · Cloudflare Realtime docs","description":"API reference for RtkRecordingIndicator component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkrecordingindicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkRecordingToggle component (React Library)
title: RtkRecordingToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkRecordingToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkrecordingtoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkRecordingToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkRecordingToggle />;
}
```

### With Properties

```tsx
import { RtkRecordingToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkRecordingToggle
      disabled={true}
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkrecordingtoggle/#page","headline":"RtkRecordingToggle · Cloudflare Realtime docs","description":"API reference for RtkRecordingToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkrecordingtoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkScreenShareToggle component (React Library)
title: RtkScreenShareToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkScreenShareToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkscreensharetoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkScreenShareToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkScreenShareToggle />;
}
```

### With Properties

```tsx
import { RtkScreenShareToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkScreenShareToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkscreensharetoggle/#page","headline":"RtkScreenShareToggle · Cloudflare Realtime docs","description":"API reference for RtkScreenShareToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkscreensharetoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkScreenshareView component (React Library)
title: RtkScreenshareView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkScreenshareView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkscreenshareview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkScreenshareView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkScreenshareView />;
}
```

### With Properties

```tsx
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'}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkscreenshareview/#page","headline":"RtkScreenshareView · Cloudflare Realtime docs","description":"API reference for RtkScreenshareView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkscreenshareview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettings component (React Library)
title: RtkSettings
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettings

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettings/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkSettings } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSettings />;
}
```

### With Properties

```tsx
import { RtkSettings } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSettings
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettings/#page","headline":"RtkSettings · Cloudflare Realtime docs","description":"API reference for RtkSettings component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettings/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettingsAudio component (React Library)
title: RtkSettingsAudio
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettingsAudio

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettingsaudio/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```tsx
import { RtkSettingsAudio } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSettingsAudio />;
}
```

### With Properties

```tsx
import { RtkSettingsAudio } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSettingsAudio
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettingsaudio/#page","headline":"RtkSettingsAudio · Cloudflare Realtime docs","description":"API reference for RtkSettingsAudio component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettingsaudio/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettingsToggle component (React Library)
title: RtkSettingsToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettingsToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettingstoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A button which toggles visibility of settings module. When clicked it emits a `rtkStateUpdate` event with the data:

```ts
{ 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

```tsx
import { RtkSettingsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSettingsToggle />;
}
```

### With Properties

```tsx
import { RtkSettingsToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSettingsToggle
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettingstoggle/#page","headline":"RtkSettingsToggle · Cloudflare Realtime docs","description":"API reference for RtkSettingsToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettingstoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSettingsVideo component (React Library)
title: RtkSettingsVideo
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSettingsVideo

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettingsvideo/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your camera devices and your video preferences. Emits `rtkStateUpdate` event with data for toggling mirroring of self video:

```ts
{
 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

```tsx
import { RtkSettingsVideo } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSettingsVideo />;
}
```

### With Properties

```tsx
import { RtkSettingsVideo } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSettingsVideo
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettingsvideo/#page","headline":"RtkSettingsVideo · Cloudflare Realtime docs","description":"API reference for RtkSettingsVideo component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksettingsvideo/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSetupScreen component (React Library)
title: RtkSetupScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSetupScreen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksetupscreen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkSetupScreen } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSetupScreen />;
}
```

### With Properties

```tsx
import { RtkSetupScreen } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSetupScreen
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksetupscreen/#page","headline":"RtkSetupScreen · Cloudflare Realtime docs","description":"API reference for RtkSetupScreen component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksetupscreen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSidebar component (React Library)
title: RtkSidebar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSidebar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksidebar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkSidebar } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSidebar />;
}
```

### With Properties

```tsx
import { RtkSidebar } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSidebar
      defaultSection={rtksidebarsection}
      enabledSections={[]}
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksidebar/#page","headline":"RtkSidebar · Cloudflare Realtime docs","description":"API reference for RtkSidebar component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksidebar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSidebarUi component (React Library)
title: RtkSidebarUi
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSidebarUi

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksidebarui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkSidebarUi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSidebarUi />;
}
```

### With Properties

```tsx
import { RtkSidebarUi } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSidebarUi
      currentTab="example"
      focusCloseButton={true}
      hideCloseAction={true}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksidebarui/#page","headline":"RtkSidebarUi · Cloudflare Realtime docs","description":"API reference for RtkSidebarUi component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksidebarui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSimpleGrid component (React Library)
title: RtkSimpleGrid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSimpleGrid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksimplegrid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkSimpleGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSimpleGrid />;
}
```

### With Properties

```tsx
import { RtkSimpleGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSimpleGrid
      aspectRatio="example"
      gap={42}
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksimplegrid/#page","headline":"RtkSimpleGrid · Cloudflare Realtime docs","description":"API reference for RtkSimpleGrid component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtksimplegrid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSpeakerSelector component (React Library)
title: RtkSpeakerSelector
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSpeakerSelector

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspeakerselector/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

A component which lets to manage your audio devices and audio preferences. Emits `rtkStateUpdate` event with data for muting notification sounds:

```ts
{
 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

```tsx
import { RtkSpeakerSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSpeakerSelector />;
}
```

### With Properties

```tsx
import { RtkSpeakerSelector } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSpeakerSelector
      meeting={meeting}
      size="md"
      variant={'full' | 'inline'}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspeakerselector/#page","headline":"RtkSpeakerSelector · Cloudflare Realtime docs","description":"API reference for RtkSpeakerSelector component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspeakerselector/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSpinner component (React Library)
title: RtkSpinner
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSpinner

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspinner/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkSpinner } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSpinner />;
}
```

### With Properties

```tsx
import { RtkSpinner } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSpinner
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspinner/#page","headline":"RtkSpinner · Cloudflare Realtime docs","description":"API reference for RtkSpinner component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspinner/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSpotlightGrid component (React Library)
title: RtkSpotlightGrid
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSpotlightGrid

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspotlightgrid/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkSpotlightGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSpotlightGrid />;
}
```

### With Properties

```tsx
import { RtkSpotlightGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSpotlightGrid
      aspectRatio="example"
      gap={42}
      gridSize="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspotlightgrid/#page","headline":"RtkSpotlightGrid · Cloudflare Realtime docs","description":"API reference for RtkSpotlightGrid component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspotlightgrid/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSpotlightIndicator component (React Library)
title: RtkSpotlightIndicator
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSpotlightIndicator

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspotlightindicator/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkSpotlightIndicator } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSpotlightIndicator />;
}
```

### With Properties

```tsx
import { RtkSpotlightIndicator } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSpotlightIndicator
      meeting={meeting}
      size="md"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspotlightindicator/#page","headline":"RtkSpotlightIndicator · Cloudflare Realtime docs","description":"API reference for RtkSpotlightIndicator component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspotlightindicator/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkStage component (React Library)
title: RtkStage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkStage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkstage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkStage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkStage />;
}
```

### With Properties

```tsx
import { RtkStage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkStage
      iconPack={defaultIconPack}
      t={rtki18n}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkstage/#page","headline":"RtkStage · Cloudflare Realtime docs","description":"API reference for RtkStage component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkstage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkStageToggle component (React Library)
title: RtkStageToggle
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkStageToggle

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkstagetoggle/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkStageToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkStageToggle />;
}
```

### With Properties

```tsx
import { RtkStageToggle } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkStageToggle
      meeting={meeting}
      size="md"
      variant="button"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkstagetoggle/#page","headline":"RtkStageToggle · Cloudflare Realtime docs","description":"API reference for RtkStageToggle component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkstagetoggle/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkSwitch component (React Library)
title: RtkSwitch
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkSwitch

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkswitch/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkSwitch } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSwitch />;
}
```

### With Properties

```tsx
import { RtkSwitch } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSwitch
      checked={true}
      disabled={true}
      readonly={true}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkswitch/#page","headline":"RtkSwitch · Cloudflare Realtime docs","description":"API reference for RtkSwitch component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkswitch/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkTabBar component (React Library)
title: RtkTabBar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkTabBar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktabbar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkTabBar } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkTabBar />;
}
```

### With Properties

```tsx
import { RtkTabBar } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkTabBar
      activeTab={tab}
      layout={gridlayout1}
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktabbar/#page","headline":"RtkTabBar · Cloudflare Realtime docs","description":"API reference for RtkTabBar component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktabbar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkTextComposerView component (React Library)
title: RtkTextComposerView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkTextComposerView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktextcomposerview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkTextComposerView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkTextComposerView />;
}
```

### With Properties

```tsx
import { RtkTextComposerView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkTextComposerView
      disabled={true}
      keyDownHandler={(e: keyboardevent)}
      maxLength={42}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktextcomposerview/#page","headline":"RtkTextComposerView · Cloudflare Realtime docs","description":"API reference for RtkTextComposerView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktextcomposerview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkTextMessage component (React Library)
title: RtkTextMessage
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkTextMessage

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktextmessage/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

@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

```tsx
import { RtkTextMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkTextMessage />;
}
```

### With Properties

```tsx
import { RtkTextMessage } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkTextMessage
      isContinued={true}
      message={textmessage}
      now={date}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktextmessage/#page","headline":"RtkTextMessage · Cloudflare Realtime docs","description":"API reference for RtkTextMessage component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktextmessage/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkTextMessageView component (React Library)
title: RtkTextMessageView
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkTextMessageView

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktextmessageview/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkTextMessageView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkTextMessageView />;
}
```

### With Properties

```tsx
import { RtkTextMessageView } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkTextMessageView
      isMarkdown={true}
      text="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktextmessageview/#page","headline":"RtkTextMessageView · Cloudflare Realtime docs","description":"API reference for RtkTextMessageView component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktextmessageview/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkTooltip component (React Library)
title: RtkTooltip
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkTooltip

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktooltip/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkTooltip } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkTooltip />;
}
```

### With Properties

```tsx
import { RtkTooltip } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkTooltip
      delay={42}
      disabled={true}
      kind={tooltipkind}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktooltip/#page","headline":"RtkTooltip · Cloudflare Realtime docs","description":"API reference for RtkTooltip component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktooltip/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkTranscript component (React Library)
title: RtkTranscript
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkTranscript

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktranscript/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkTranscript } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkTranscript />;
}
```

### With Properties

```tsx
import { RtkTranscript } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkTranscript
      t={rtki18n}
      transcript="example"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktranscript/#page","headline":"RtkTranscript · Cloudflare Realtime docs","description":"API reference for RtkTranscript component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktranscript/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkTranscripts component (React Library)
title: RtkTranscripts
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkTranscripts

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktranscripts/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkTranscripts } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkTranscripts />;
}
```

### With Properties

```tsx
import { RtkTranscripts } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkTranscripts
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktranscripts/#page","headline":"RtkTranscripts · Cloudflare Realtime docs","description":"API reference for RtkTranscripts component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtktranscripts/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkUiProvider component (React Library)
title: RtkUiProvider
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkUiProvider

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkuiprovider/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkUiProvider } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkUiProvider />;
}
```

### With Properties

```tsx
import { RtkUiProvider } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkUiProvider
      config={defaultUiConfig}
      mode={meeting}
      showSetupScreen={true}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkuiprovider/#page","headline":"RtkUiProvider · Cloudflare Realtime docs","description":"API reference for RtkUiProvider component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkuiprovider/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkViewerCount component (React Library)
title: RtkViewerCount
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkViewerCount

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkviewercount/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

```tsx
import { RtkViewerCount } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkViewerCount />;
}
```

### With Properties

```tsx
import { RtkViewerCount } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkViewerCount
      meeting={meeting}
      variant="primary"
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkviewercount/#page","headline":"RtkViewerCount · Cloudflare Realtime docs","description":"API reference for RtkViewerCount component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkviewercount/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkVirtualizedParticipantList component (React Library)
title: RtkVirtualizedParticipantList
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkVirtualizedParticipantList

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkvirtualizedparticipantlist/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkVirtualizedParticipantList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkVirtualizedParticipantList />;
}
```

### With Properties

```tsx
import { RtkVirtualizedParticipantList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkVirtualizedParticipantList
      bufferedItemsCount={42}
      emptyListElement={htmlelement}
      itemHeight={42}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkvirtualizedparticipantlist/#page","headline":"RtkVirtualizedParticipantList · Cloudflare Realtime docs","description":"API reference for RtkVirtualizedParticipantList component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkvirtualizedparticipantlist/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: API reference for RtkWaitingScreen component (React Library)
title: RtkWaitingScreen
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# RtkWaitingScreen

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkwaitingscreen/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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

```tsx
import { RtkWaitingScreen } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkWaitingScreen />;
}
```

### With Properties

```tsx
import { RtkWaitingScreen } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkWaitingScreen
      meeting={meeting}
    />
  );
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkwaitingscreen/#page","headline":"RtkWaitingScreen · Cloudflare Realtime docs","description":"API reference for RtkWaitingScreen component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkwaitingscreen/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Customize meeting icons and branding in the RealtimeKit UI Kit.
title: Customise Branding
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Customise Branding

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/branding/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```html
<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>
```

```jsx
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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/branding/#page","headline":"Customise Branding · Cloudflare Realtime docs","description":"Customize meeting icons and branding in the RealtimeKit UI Kit.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/branding/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Override RealtimeKit UI Kit design tokens for colors, fonts, borders, and spacing.
title: Design System
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Design System

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/branding/design-system/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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 design system for your meetings, you need to first [integrate RealtimeKit's SDK](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/) into your application.

WebMobile

ReactWeb ComponentsAngular

## Override Design System

The `provideRtkDesignSystem()` utility allows you to override the existing design system with your own custom design system.

Each mobile platform exposes a design token system that controls colors, borders, typography, and spacing. You configure tokens before launching a meeting and the UI Kit applies them across all components.

### Import

```html
<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";
```

```swift
import RealtimeKitUI
```

```kotlin
import com.cloudflare.realtimekit.ui.RealtimeKitUIBuilder
import com.cloudflare.realtimekit.ui.RealtimeKitUIInfo
import com.cloudflare.realtimekit.ui.token.*
import com.cloudflare.realtimekit.models.RtkMeetingInfo
```

```dart
import 'package:realtimekit_ui/realtimekit_ui.dart';
import 'package:flutter/material.dart';
```

```typescript
import {
	RtkUIProvider,
	provideRtkDesignSystem,
	generateBrandColors,
	generateBackgroundColors,
} from "@cloudflare/realtimekit-react-native-ui";
```

### Usage

```html
<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>
```

```html
<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>
	);
}
```

Construct an `RtkDesignTokens` object and pass it to `RealtimeKitUIInfo`. Then call `RealtimeKitUIBuilder.build()` to launch the meeting.

```kotlin
import android.graphics.Color

val customColors = RtkColorTokens(
    brand = BrandColor(
        shade300 = Color.parseColor("#FF9A6C"),
        shade400 = Color.parseColor("#FF8552"),
        shade500 = Color.parseColor("#FF6B35"),
        shade600 = Color.parseColor("#E55A24"),
        shade700 = Color.parseColor("#CC4A14"),
    ),
    background = BackgroundColor(
        shade600 = Color.parseColor("#666666"),
        shade700 = Color.parseColor("#4C4C4C"),
        shade800 = Color.parseColor("#333333"),
        shade900 = Color.parseColor("#1A1A1A"),
        shade1000 = Color.parseColor("#080808"),
    ),
    text = TextColor(
        onBrand = TextColor.TextColorOnBrand(
            shade1000 = Color.parseColor("#FF111111"),
            shade900 = Color.parseColor("#E0111111"),
            shade800 = Color.parseColor("#C2111111"),
            shade700 = Color.parseColor("#A3111111"),
            shade600 = Color.parseColor("#85111111"),
        ),
        onBackground = TextColor.TextColorOnBackground(
            shade1000 = Color.parseColor("#FFFFFFFF"),
            shade900 = Color.parseColor("#E0FFFFFF"),
            shade800 = Color.parseColor("#C2FFFFFF"),
            shade700 = Color.parseColor("#A3FFFFFF"),
            shade600 = Color.parseColor("#85FFFFFF"),
        ),
    ),
)

val designTokens = RtkDesignTokens(
    colors = customColors,
    borderRadius = RtkBorderRadiusToken.Rounded,
    borderWidth = RtkBorderWidthToken.Thin,
)

val uiKitInfo = RealtimeKitUIInfo(
    activity = this,
    rtkMeetingInfo = RtkMeetingInfo(authToken = "<auth_token>"),
    designTokens = designTokens,
)
RealtimeKitUIBuilder.build(uiKitInfo).startMeeting()
```

Construct an `RtkDesignTokens` object and pass it to `RealtimeKitUIInfo` via the `designToken` parameter.

Flutter supports two approaches for color configuration:

* **Simple** — provide a single base color and the SDK auto-generates all shades
* **Advanced** — provide an explicit `RtkColorSwatch` with all shade values

**Simple color configuration:**

```dart
final designTokens = RtkDesignTokens(
  colorToken: RtkColorToken(
    backgroundColor: const Color(0xFF0B0B0B),
    brandColor: const Color(0xFFF17F1F),
    textOnBrand: Colors.white,
    textOnBackground: Colors.white,
  ),
  borderRadius: RtkBorderRadius.rounded,
  borderWidth: RtkBorderWidth.none,
);

final uiKitInfo = RealtimeKitUIInfo(meetingInfo, designToken: designTokens);
final rtkUI = RealtimeKitUIBuilder.build(uiKitInfo: uiKitInfo);
Navigator.push(context, MaterialPageRoute(builder: (_) => rtkUI));
```

**Advanced color configuration** — use `RtkColorSwatch` for precise control over each shade:

```dart
final designTokens = RtkDesignTokens(
  colorToken: RtkColorToken(
    brandColorSwatch: RtkColorSwatch(500, {
      300: const Color(0xFFFF9A6C),
      400: const Color(0xFFFF8552),
      500: const Color(0xFFFF6B35),
      600: const Color(0xFFE55A24),
      700: const Color(0xFFCC4A14),
    }),
    backgroundColorSwatch: RtkColorSwatch(1000, {
      600: const Color(0xFF666666),
      700: const Color(0xFF4C4C4C),
      800: const Color(0xFF333333),
      900: const Color(0xFF1A1A1A),
      1000: const Color(0xFF080808),
    }),
    textOnBrand: Colors.white,
    textOnBackground: Colors.white,
  ),
  borderRadius: RtkBorderRadius.extrarounded,
  borderWidth: RtkBorderWidth.thin,
);
```

Note

You cannot mix `brandColor` and `brandColorSwatch` for the same color type. Use one approach or the other.

Call `provideRtkDesignSystem()` with a `DesignTokens` object before or during rendering. Wrap your meeting components in `RtkUIProvider`.

```typescript
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    provideRtkDesignSystem({
      theme: 'darkest',
      colors: {
        brand: generateBrandColors('#FF6B35'),
        text: '#FFFFFF',
      },
      borderRadius: 'rounded',
      borderWidth: 'thin',
      fontFamily: 'Helvetica',
    });
  }, []);

  return (
    <RtkUIProvider>
      {/* Your meeting components */}
    </RtkUIProvider>
  );
}
```

The `generateBrandColors()` helper derives five brand shades from a single hex value. Use `generateBackgroundColors()` for the same behavior with background colors.

The iOS UI Kit uses `DesignLibrary.shared` as its central design token registry. Create a custom configurator that conforms to `DesignLibraryConfiguratorProtocol` and pass it to the design library before starting a meeting.

```swift
import RealtimeKitUI

class CustomConfigurator: DesignLibraryConfiguratorProtocol {
    let colorBrandBase: BrandColorToken.Shade = .init(hex: "#FF6B35")!
    let colorBackgroundBase: BackgroundColorToken.Shade = .init(hex: "#080808")!

    let textColorBackgroundBase: TextColorToken.Background.Shade = .init(hex: "#FFFFFF")!
    let textColorBrandBase: TextColorToken.Brand.Shade = .init(hex: "#111111")!

    let statusDangerColor: StatusColor.Shade = .init(hex: "#FF2D2D")!
    let statusSuccessColor: StatusColor.Shade = .init(hex: "#83D017")!
    let statusWarningColor: StatusColor.Shade = .init(hex: "#FFCD07")!

    let cornerRadiusRoundFactor: CGFloat = 4.0
    let cornerRadiusExtraRoundFactor: CGFloat = 8.0
    let cornerRadiusCircularFactor: CGFloat = 8.0

    let borderSizeThinFactor: CGFloat = 1.0
    let borderSizeFatFactor: CGFloat = 2.0
}

// Apply the custom configurator
DesignLibrary.shared.setConfigurator(configurator: CustomConfigurator())
```

The SDK auto-generates shade variations from each base color. Brand shades run 300–700 and background shades run 600–1000, derived by lightening the base color.

## Design Tokens

UI Kit uses [design tokens ↗](https://css-tricks.com/what-are-design-tokens/) for its 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).

The token system covers colors, borders, typography, and spacing. The table below shows the default values across all mobile platforms.

| Token              | Android | Flutter | iOS     | React Native |
| ------------------ | ------- | ------- | ------- | ------------ |
| Brand color        | #2160FD | #2160FD | #0246FD | #2160FD      |
| Background         | #080808 | #080808 | #050505 | #080808      |
| Text on background | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF      |
| Text on brand      | #111111 | —       | #111111 | #FFFFFF      |
| Danger             | #FF2D2D | #FF2D2D | #FF2D2D | #FF2D2D      |
| Success            | #83D017 | #83D017 | #83D017 | #83D017      |
| Warning            | #FFCD07 | #FFCD07 | #FFCD07 | #FFCD07      |

### 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.

```css
--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",
};
```

Font customization is not available through the `RtkDesignTokens` API. The UI Kit uses the system font by default.

The Flutter UI Kit bundles the Inter font and uses it by default. Custom font configuration is not available through the `RtkDesignTokens` API.

Pass a `fontFamily` string to `provideRtkDesignSystem()` to use a custom font. You must load the font in your app before calling this function.

```typescript
provideRtkDesignSystem({
	fontFamily: "Helvetica",
});
```

The iOS UI Kit uses the system font (`UIFont.systemFont`) by default. Font customization is not exposed through the `DesignLibraryConfiguratorProtocol`. To change fonts, create a custom `AppThemeProtocol` implementation and override the appearance properties for individual components.

```swift
class CustomTheme: AppThemeProtocol {
    // ...
    var clockViewAppearance: RtkTextAppearance {
        let model = RtkTextAppearanceModel()
        model.font = UIFont(name: "Helvetica", size: 12) ?? .systemFont(ofSize: 12)
        return model
    }
    // ...
}
```

### Colours

CSS Variables are set in the format: `R G B`.

Here are all the color tokens, along with their default values.

```css
--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-brand": "#ffffff",
		"video-bg": "#181818",
	},
};
```

Brand color shades run from 300 (lightest) to 700 (darkest), with 500 as the primary shade. Background shades run from 600 (lightest) to 1000 (deepest).

Set `colorBrandBase` and `colorBackgroundBase` in your `DesignLibraryConfiguratorProtocol` implementation. The SDK auto-generates shades 300–700 for brand and 600–1000 for background by lightening the base color in 12% increments.

iOS also exposes a `video` property on `BackgroundColorToken` that controls the color behind video tiles when no stream is active. It defaults to `shade800`.

```swift
class CustomConfigurator: DesignLibraryConfiguratorProtocol {
    let colorBrandBase: BrandColorToken.Shade = .init(hex: "#FF6B35")!
    let colorBackgroundBase: BackgroundColorToken.Shade = .init(hex: "#1A1A1A")!

    let textColorBackgroundBase: TextColorToken.Background.Shade = .init(hex: "#FFFFFF")!
    let textColorBrandBase: TextColorToken.Brand.Shade = .init(hex: "#111111")!

    let statusDangerColor: StatusColor.Shade = .init(hex: "#FF2D2D")!
    let statusSuccessColor: StatusColor.Shade = .init(hex: "#83D017")!
    let statusWarningColor: StatusColor.Shade = .init(hex: "#FFCD07")!

    // Border properties (required by protocol)
    let cornerRadiusRoundFactor: CGFloat = 4.0
    let cornerRadiusExtraRoundFactor: CGFloat = 8.0
    let cornerRadiusCircularFactor: CGFloat = 8.0
    let borderSizeThinFactor: CGFloat = 1.0
    let borderSizeFatFactor: CGFloat = 2.0
}
```

Android provides a `videoBackground` field on `RtkColorTokens` to set the color shown behind video tiles when no video stream is active. The default value is `#333333`.

```kotlin
val customColors = RtkColorTokens(
    brand = BrandColor( /* ... */ ),
    background = BackgroundColor( /* ... */ ),
    text = TextColor( /* ... */ ),
    videoBackground = Color.parseColor("#1A1A1A"),
)
```

React Native provides three preset themes that set a coordinated background color palette.

| Theme   | Description                    |
| ------- | ------------------------------ |
| darkest | Very dark background (default) |
| dark    | Dark background                |
| light   | Light background               |

Pass the `theme` property to `provideRtkDesignSystem()`. You can combine a preset theme with custom color overrides.

```typescript
provideRtkDesignSystem({
	theme: "dark",
	colors: {
		brand: generateBrandColors("#0246FD"),
	},
});
```

### 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.

```css
--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
};
```

The `spacingBase` property sets the base unit for the spacing scale in pixels. All spacing values in the UI Kit derive from this base.

```typescript
provideRtkDesignSystem({
	spacingBase: 4, // default: 4px
});
```

Spacing configuration is not available through the design token API on this platform.

The iOS UI Kit uses a `SpaceToken` with a base unit of 4 points. The spacing scale runs from `space0` (0) to `space9` (36). Spacing configuration is not exposed through the public `DesignLibraryConfiguratorProtocol`. All spacing values are derived internally from the base unit.

### 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",
};
```

All mobile platforms support the same border radius and border width options.

| Token        | Values                                  |
| ------------ | --------------------------------------- |
| borderRadius | sharp, rounded, extra-rounded, circular |
| borderWidth  | none, thin, fat                         |

Note

Flutter and iOS use the enum value `extrarounded` (no hyphen). React Native uses the string `'extra-rounded'` (with hyphen).

Pass `borderRadius` and `borderWidth` directly to the `RtkDesignTokens` constructor.

```kotlin
val designTokens = RtkDesignTokens(
    colors = customColors,
    borderRadius = RtkBorderRadiusToken.Circular,
    borderWidth = RtkBorderWidthToken.Thin,
)
```

Pass `borderRadius` and `borderWidth` to the `RtkDesignTokens` constructor.

```dart
final designTokens = RtkDesignTokens(
  colorToken: colorToken,
  borderRadius: RtkBorderRadius.rounded,
  borderWidth: RtkBorderWidth.thin,
);
```

Pass `borderRadius` and `borderWidth` to `provideRtkDesignSystem()`.

```typescript
provideRtkDesignSystem({
	borderRadius: "extra-rounded",
	borderWidth: "fat",
});
```

Set `cornerRadiusRoundFactor`, `cornerRadiusExtraRoundFactor`, `cornerRadiusCircularFactor`, `borderSizeThinFactor`, and `borderSizeFatFactor` in your `DesignLibraryConfiguratorProtocol` implementation. These factors control the multiplier used for each border style.

```swift
class CustomConfigurator: DesignLibraryConfiguratorProtocol {
    // ... color properties ...

    let cornerRadiusRoundFactor: CGFloat = 4.0
    let cornerRadiusExtraRoundFactor: CGFloat = 8.0
    let cornerRadiusCircularFactor: CGFloat = 8.0

    let borderSizeThinFactor: CGFloat = 1.0
    let borderSizeFatFactor: CGFloat = 2.0
}

DesignLibrary.shared.setConfigurator(configurator: CustomConfigurator())
```

iOS uses `BorderRadiusToken.RadiusType` with values `.sharp`, `.rounded`, `.extrarounded`, and `.circular`. Border width uses `BorderWidthToken.Width` with values `.none`, `.thin`, and `.fat`.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/branding/design-system/#page","headline":"Design System · Cloudflare Realtime docs","description":"Override RealtimeKit UI Kit design tokens for colors, fonts, borders, and spacing.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/branding/design-system/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Create and manage breakout rooms in RealtimeKit meetings for smaller group discussions.
title: Breakout Rooms
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Breakout Rooms

Last updated Jul 9, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/breakout-rooms/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

### 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.

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

1. In your RealtimeKit meeting, tap **Breakout Rooms**
2. In the Create Breakout dialog, add the number of rooms you want and tap **Create**

Once you have created breakout rooms, assign participants to the rooms. You can assign participants automatically (RealtimeKit splits them evenly) or manually (you choose who goes where).

#### Assign participants automatically

To assign participants automatically:

1. In the Assign Participants dialog, tap the shuffle button
2. RealtimeKit assigns participants to the rooms
3. Edit room names by tapping the pencil icon beside the room name (optional)
4. Move participants to different rooms if needed
5. Tap **Start Breakout**
6. Tap **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, tap **Assign**
3. Repeat for all participants and rooms
4. Tap **Start Breakout**
5. Tap **Yes, start** in the confirmation dialog

1. In your RealtimeKit meeting, tap **Breakout Rooms**
2. In the Create Breakout dialog, add the number of rooms you want and tap **Create**

Once you have created breakout rooms, assign participants to the rooms. You can assign participants automatically (RealtimeKit splits them evenly) or manually (you choose who goes where).

#### Assign participants automatically

To assign participants automatically:

1. In the Assign Participants dialog, tap the shuffle button
2. RealtimeKit assigns participants to the rooms
3. Edit room names by tapping the pencil icon beside the room name (optional)
4. Move participants to different rooms if needed
5. Tap **Start Breakout**
6. Tap **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, tap **Assign**
3. Repeat for all participants and rooms
4. Tap **Start Breakout**
5. Tap **Yes, start** in the confirmation dialog

1. In your RealtimeKit meeting, tap **Breakout Rooms**
2. In the Create Breakout dialog, add the number of rooms you want and tap **Create**

Once you have created breakout rooms, assign participants to the rooms. You can assign participants automatically (RealtimeKit splits them evenly) or manually (you choose who goes where).

#### Assign participants automatically

To assign participants automatically:

1. In the Assign Participants dialog, tap the shuffle button
2. RealtimeKit assigns participants to the rooms
3. Edit room names by tapping the pencil icon beside the room name (optional)
4. Move participants to different rooms if needed
5. Tap **Start Breakout**
6. Tap **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, tap **Assign**
3. Repeat for all participants and rooms
4. Tap **Start Breakout**
5. Tap **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.

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

WebMobile

ReactWeb ComponentsAngular

### Initialize the SDK with breakout rooms support

Initialize the SDK and add an event handler for breakout rooms:

```jsx
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.

```html
<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.

```ts
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.

When using `RealtimeKitUI.startMeeting()`, the SDK automatically manages the `RtkConnectedMeetingsListener` — no extra setup is required for breakout room switching.

If you are building a **custom meeting UI** (bypassing `MeetingViewController`), register the listener yourself:

```swift
import RealtimeKit
import RealtimeKitUI

let listener = RtkConnectedMeetingsListener(rtkClient: rtkClient)

listener.onChangingMeeting = { meetingId in
    // Show a loading overlay; the SDK is switching rooms
    let isReturningToMain = meetingId == rtkClient.connectedMeetings.parentMeeting?.id
    showLoadingOverlay(message: isReturningToMain ? "Returning to Main Room\u{2026}" : "Joining breakout room\u{2026}")
}

listener.onMeetingChanged = { error in
    hideLoadingOverlay()
    if let error {
        showErrorAlert(message: error.message)
    } else {
        // Re-register all feature event listeners — the SDK clears them during the room switch
        // Re-register your listener instances, for example:
        // rtkClient.addSelfEventListener(selfEventListener: mySelfListener)
        // rtkClient.addParticipantsEventListener(participantsEventListener: myParticipantsListener)
    }
}

listener.onStateUpdate = { meetings, parentMeeting in
    // Refresh your breakout-rooms UI list
}
```

Note

Hold a strong reference to `RtkConnectedMeetingsListener`. It deregisters itself on `deinit`.

When using `RealtimeKitUIBuilder` \+ `startMeeting()`, the SDK automatically registers and manages `RtkConnectedMeetingsEventListener` — no extra setup is required for breakout room switching.

If you are building a **custom meeting UI**, register the listener yourself:

```kotlin
import com.cloudflare.realtimekit.ui.RtkConnectedMeetingsEventListener
import com.cloudflare.realtimekit.models.MeetingError

val connectedMeetingsListener = object : RtkConnectedMeetingsEventListener {
    override fun onChangingMeeting(meetingId: String) {
        // Show a transition screen; the SDK is switching rooms
        val isReturningToMain = meetingId == meeting.connectedMeetings.parentMeeting?.id
        showLoadingOverlay(isReturningToMain)
    }

    override fun onMeetingChanged(error: MeetingError?) {
        hideLoadingOverlay()
        if (error != null) {
            showErrorMessage(error.message)
        }
        // No need to re-register listeners — the SDK handles this automatically
    }
}

meeting.addConnectedMeetingsEventListener(connectedMeetingsListener)
```

The `onChangingMeeting` callback fires when the SDK starts leaving the current room. The `onMeetingChanged` callback fires when the switch completes (or fails).

The `useRealtimeKitClient` hook automatically handles the `meetingChanged` event and swaps the active client reference when a participant moves between breakout rooms. No manual event handling is required.

```tsx
import { useEffect } from "react";
import { useRealtimeKitClient } from "@cloudflare/realtimekit-react-native";
import { RtkMeeting } from "@cloudflare/realtimekit-react-native-ui";

function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {
    initMeeting({ authToken: "<participant_auth_token>" });
  }, []);

  if (!meeting) return null;

  return <RtkMeeting meeting={meeting} showSetupScreen={true} />;
}
```

`RtkMeeting` displays a "Joining…" transition screen automatically when switching between breakout rooms. No extra setup is needed.

### Render the meeting UI

Use the default meeting UI component which includes built-in breakout room support:

```jsx
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.

```html
<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.

```html
<rtk-meeting #myid [showSetupScreen]="true"></rtk-meeting>
```

```ts
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.

```swift
import RealtimeKit
import RealtimeKitUI

let meetingInfo = RtkMeetingInfo(authToken: "<participant_auth_token>")
let rtkUI = RealtimeKitUI(meetingInfo: meetingInfo)

let setupVC = rtkUI.startMeeting { [weak self] in
    // Called when the participant leaves or ends the meeting
    self?.dismiss(animated: true)
}
present(setupVC, animated: true)
```

Note

Like the web UI Kit, `MeetingViewController` **automatically joins the session** — you do not need to call `meeting.join()` manually.

The setup screen (audio/video preview) is shown by default. Built-in breakout room support — including the room-switching overlay and room title updates — is handled automatically by `MeetingViewController`.

```kotlin
import com.cloudflare.realtimekit.models.RtkMeetingInfo
import com.cloudflare.realtimekit.ui.RealtimeKitUIBuilder
import com.cloudflare.realtimekit.ui.RealtimeKitUIInfo

val meetingInfo = RtkMeetingInfo(authToken = "<participant_auth_token>")
val uiKitInfo = RealtimeKitUIInfo(
    activity = this,
    rtkMeetingInfo = meetingInfo,
)
val rtkUIKit = RealtimeKitUIBuilder.build(uiKitInfo)
rtkUIKit.startMeeting()
```

Note

`RtkMeetingActivity` **automatically joins the session** — you do not need to call `meeting.join()` manually.

Built-in breakout room support is handled automatically by `RtkMeetingActivity`. When the SDK moves participants between rooms, it displays a transition overlay with a localized message. The host can manage breakout rooms via the `RtkBreakoutRoomsBottomSheet`, which is shown automatically when the Breakout Rooms control bar button is tapped.

```tsx
import { useEffect } from "react";
import { useRealtimeKitClient } from "@cloudflare/realtimekit-react-native";
import { RtkMeeting } from "@cloudflare/realtimekit-react-native-ui";

function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {
    initMeeting({ authToken: "<participant_auth_token>" });
  }, []);

  if (!meeting) return null;

  return <RtkMeeting meeting={meeting} showSetupScreen={true} />;
}
```

Built-in breakout room support is handled automatically by `RtkMeeting`. When a participant is moved between rooms, a "Joining…" transition screen is displayed automatically. The host can manage breakout rooms using `RtkBreakoutRoomsManager`, which is accessible via `RtkBreakoutRoomsToggle` in the control bar.

## 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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/breakout-rooms/#page","headline":"Breakout Rooms · Cloudflare Realtime docs","description":"Create and manage breakout rooms in RealtimeKit meetings for smaller group discussions.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/breakout-rooms/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-09","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Build a custom meeting interface video UI using RealtimeKit SDK components and Core SDK.
title: Build Your Own UI
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Build Your Own UI

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

This guide explains how to use RealtimeKit UI Kit components to build a custom meeting interface instead of the default full-screen meeting view.

## Prerequisites

This page builds upon the [Initialize SDK](https://developers.cloudflare.com/realtime/realtimekit/core/), [Render Default Meeting UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/), and [UI Kit States](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/) guides. First refer to these pages to understand the core concepts.

The code examples on this page assume you have already imported the necessary packages and initialized the SDK.

## Build a custom UI with UI Kit

If the default meeting component does not provide enough 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 on top of the Core SDK. You can mix and match pieces while saving time compared to building from scratch.

A custom UI requires you to manage participant audio, notifications, dialogs, component layout, and screen transitions.

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 child component is a RealtimeKit component starting with `rtk-`, `rtk-ui-provider` will coordinate with it 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 child component is a RealtimeKit component starting with `Rtk`, `RtkUiProvider` will coordinate with it 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 child component is a RealtimeKit component starting with `rtk-`, `rtk-ui-provider` will coordinate with it to sync the states.

The iOS SDK uses a **delegation pattern** for custom UIs. Instead of wrapping child views in a provider, you conform to `RtkUIFlowCoordinatorDelegate` and return your own view controllers for each screen in the meeting flow.

There are two levels of customization:

* **Replace entire screens** — Conform to `RtkUIFlowCoordinatorDelegate` and return your own `UIViewController` for the setup screen, group call screen, or webinar screen. Return `nil` to use the default screen.
* **Replace sub-components** — Conform to `MeetingViewControllerDataSource` and swap the topbar, middle view (participant grid), or bottom control bar within the default `MeetingViewController`.

```swift
public protocol RtkUIFlowCoordinatorDelegate {
    func showSetUpScreen(completion: () -> Void) -> SetupViewControllerDataSource?
    func showGroupCallMeetingScreen(meeting: RealtimeKitClient, completion: @escaping () -> Void) -> UIViewController?
    func showWebinarMeetingScreen(meeting: RealtimeKitClient, completion: @escaping () -> Void) -> UIViewController?
}
```

When the user joins successfully, the SDK calls `showGroupCallMeetingScreen(meeting:completion:)` or `showWebinarMeetingScreen(meeting:completion:)`. Use the `RealtimeKitClient` parameter to bind individual UI Kit components (such as `RtkMeetingHeaderView`, `RtkMeetingControlBar`, or `RtkParticipantTileView`) to the meeting.

The Android SDK does not use a provider/wrapper pattern. Instead, each individual View component has an `activate(meeting)` method that binds it to the meeting.

The pattern is:

1. Build a `RealtimeKitUI` instance with `RealtimeKitUIBuilder.build()`.
2. Access the `RealtimeKitClient` via `rtkUI.meeting`.
3. Place individual UI Kit views in your own XML layout or create them in code.
4. Call `activate(meeting)` on each component to bind it to the meeting.

Meeting-level components (grid, header, control bar) take a `RealtimeKitClient`:

```kotlin
gridView.activate(meeting)
headerView.activate(meeting)
controlBarView.activate(meeting)
```

Participant-level components (tile, avatar, name tag) take an `RtkMeetingParticipant`:

```kotlin
tileView.activate(meeting.localUser)
tileView.activate(remoteParticipant)
```

The Flutter SDK provides `RtkProvider`, a wrapper widget that sets up dependency injection and theming for individual UI Kit widgets.

Wrap your custom widget tree in `RtkProvider` and use individual exported widgets such as `RtkSelfAudioToggleButton`, `RtkSelfVideoToggleButton`, `RtkParticipantTile`, `RtkJoinButton`, and `RtkLeaveButton`.

```dart
RtkProvider(
  meeting: meeting,
  uiKitInfo: RealtimeKitUIInfo(meetingInfo),
  child: YourCustomMeetingWidget(),
)
```

Each widget that needs the meeting client accepts it as a required `meeting` parameter. Participant-level widgets such as `RtkParticipantTile` accept an `RtkMeetingParticipant` directly.

Similar to `RtkMeeting`, `RtkUIProvider` is a wrapper component that provides the design system and UI state context to all child components.

Unlike `RtkMeeting`, `RtkUIProvider` allows you to pass any child components to it. All RealtimeKit UI Kit components read from the `RtkUIContext` for design tokens and state.

Use `useContext(RtkUIContext)` to read `storeStates.meeting` and determine which screen to render. When building without `RtkMeeting`, you must listen to SDK events and call `setStates` to drive state transitions yourself.

## Example code

```html
<!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

```html
<rtk-header />
<!-- Later do document.querySelector('rtk-header').meeting = meeting; -->
```

to just

```html
<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.

```tsx
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

```jsx
<RtkHeader meeting={meeting} />
```

to just

```jsx
<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).

```typescript
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

```typescript
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);
	}
}
```

```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:

```typescript
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

```html
<rtk-header />
<!-- Later do document.querySelector('rtk-header').meeting = meeting; -->
```

to just

```html
<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.

Caution

You must include `rtk-notifications`, `rtk-participants-audio`, and `rtk-dialog-manager`. If you leave them out, features like settings toggles and notifications will not work, and you will not hear other participants in the session.

The following example replaces the group call meeting screen with a custom view controller that uses individual UI Kit components:

```swift
import UIKit
import RealtimeKit
import RealtimeKitUI

class CustomFlowDelegate: RtkUIFlowCoordinatorDelegate {
    // Return nil to use the default setup screen
    func showSetUpScreen(completion: () -> Void) -> SetupViewControllerDataSource? {
        return nil
    }

    // Return a custom view controller for group calls
    func showGroupCallMeetingScreen(
        meeting: RealtimeKitClient,
        completion: @escaping () -> Void
    ) -> UIViewController? {
        return CustomMeetingViewController(meeting: meeting, completion: completion)
    }

    // Return nil to use the default webinar screen
    func showWebinarMeetingScreen(
        meeting: RealtimeKitClient,
        completion: @escaping () -> Void
    ) -> UIViewController? {
        return nil
    }
}

class CustomMeetingViewController: UIViewController {
    private let meeting: RealtimeKitClient
    private let completion: () -> Void
    private var selfListener: RtkEventSelfListener?

    init(meeting: RealtimeKitClient, completion: @escaping () -> Void) {
        self.meeting = meeting
        self.completion = completion
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder: NSCoder) { fatalError("init(coder:) not supported") }

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .black

        // Header
        let header = RtkMeetingHeaderView(meeting: meeting)
        header.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(header)

        // Control bar
        let controlBar = RtkMeetingControlBar(
            meeting: meeting,
            delegate: nil,
            presentingViewController: self
        )
        controlBar.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(controlBar)

        NSLayoutConstraint.activate([
            header.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            header.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            header.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            header.heightAnchor.constraint(equalToConstant: 50),
            controlBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            controlBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            controlBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            controlBar.heightAnchor.constraint(equalToConstant: 80),
        ])

        // Listen for meeting events
        selfListener = RtkEventSelfListener(rtkClient: meeting)
        selfListener?.observeSelfRemoved { [weak self] _ in
            self?.dismiss(animated: true, completion: self?.completion)
        }
        selfListener?.observeSelfMeetingEndForAll { [weak self] _ in
            self?.dismiss(animated: true, completion: self?.completion)
        }
    }
}
```

Present the meeting with your custom flow delegate:

```swift
let delegate = CustomFlowDelegate()
let rtkUI = RealtimeKitUI(
    meetingInfo: RtkMeetingInfo(
        authToken: "<auth-token>",
        enableAudio: true,
        enableVideo: true
    ),
    flowDelegate: delegate
)

let controller = rtkUI.startMeeting {
    self.dismiss(animated: true)
}
controller.modalPresentationStyle = .fullScreen
present(controller, animated: true)
```

Individual components available for custom meeting screens:

| Component                     | Description                                                                  |
| ----------------------------- | ---------------------------------------------------------------------------- |
| RtkMeetingHeaderView          | Header with meeting title, participant count, clock, and recording indicator |
| RtkMeetingControlBar          | Control bar with microphone, camera, and end meeting buttons                 |
| RtkParticipantTileView        | Single participant video tile with avatar fallback and name tag              |
| RtkVideoView                  | Raw video rendering view                                                     |
| RtkAvatarView                 | Participant avatar with initials                                             |
| RtkNameTag                    | Participant name with microphone status icon                                 |
| RtkAudioButtonControlBar      | Standalone microphone toggle button                                          |
| RtkVideoButtonControlBar      | Standalone camera toggle button                                              |
| RtkEndMeetingControlBarButton | End/leave meeting button                                                     |
| RtkEventSelfListener          | Observer for audio/video state, removal, reconnection, and permissions       |

The following example creates a custom meeting screen using individual UI Kit views in an XML layout with the `activate(meeting)` pattern:

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#000000">

    <com.cloudflare.realtimekit.ui.view.headers.RtkMeetingHeaderView
        android:id="@+id/headerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.cloudflare.realtimekit.ui.view.grid.RtkGridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.cloudflare.realtimekit.ui.view.controlbars.RtkMeetingControlBarView
        android:id="@+id/controlBarView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
```

```kotlin
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.cloudflare.realtimekit.RealtimeKitClient
import com.cloudflare.realtimekit.RtkMeetingRoomEventListener
import com.cloudflare.realtimekit.models.RtkMeetingInfo
import com.cloudflare.realtimekit.ui.RealtimeKitUIBuilder
import com.cloudflare.realtimekit.ui.RealtimeKitUIInfo
import com.cloudflare.realtimekit.ui.view.controlbars.RtkMeetingControlBarView
import com.cloudflare.realtimekit.ui.view.grid.RtkGridView
import com.cloudflare.realtimekit.ui.view.headers.RtkMeetingHeaderView

class CustomMeetingActivity : AppCompatActivity() {
    private lateinit var headerView: RtkMeetingHeaderView
    private lateinit var gridView: RtkGridView
    private lateinit var controlBarView: RtkMeetingControlBarView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_custom_meeting)

        headerView = findViewById(R.id.headerView)
        gridView = findViewById(R.id.gridView)
        controlBarView = findViewById(R.id.controlBarView)

        val meetingInfo = RtkMeetingInfo(authToken = "<auth-token>")
        val uiKitInfo = RealtimeKitUIInfo(
            activity = this,
            rtkMeetingInfo = meetingInfo,
        )
        val rtkUI = RealtimeKitUIBuilder.build(uiKitInfo)
        val meeting: RealtimeKitClient = rtkUI.meeting

        // Listen for meeting lifecycle events
        meeting.addMeetingRoomEventListener(object : RtkMeetingRoomEventListener {
            override fun onMeetingRoomJoinCompleted(meeting: RealtimeKitClient) {
                runOnUiThread {
                    // Activate all components once the meeting is joined
                    headerView.activate(meeting)
                    gridView.activate(meeting)
                    controlBarView.activate(meeting)
                }
            }

            override fun onMeetingEnded() {
                finish()
            }

            override fun onMeetingRoomLeaveCompleted() {
                finish()
            }
        })
    }
}
```

Individual components available for custom layouts:

| Component                | Activate with         | Description                                                          |
| ------------------------ | --------------------- | -------------------------------------------------------------------- |
| RtkGridView              | RealtimeKitClient     | Paginated participant video grid                                     |
| RtkMeetingHeaderView     | RealtimeKitClient     | Header with title, participant count, clock, and recording indicator |
| RtkMeetingControlBarView | RealtimeKitClient     | Control bar with mic, camera, more, and leave buttons                |
| RtkParticipantTileView   | RtkMeetingParticipant | Single participant video tile with avatar and name tag               |
| RtkMicToggleButton       | RealtimeKitClient     | Standalone microphone toggle                                         |
| RtkCameraToggleButton    | RealtimeKitClient     | Standalone camera toggle                                             |
| RtkLeaveButton           | RealtimeKitClient     | Leave/end meeting button                                             |
| RtkAvatarView            | RtkMeetingParticipant | Participant avatar                                                   |
| RtkNameTagView           | RtkMeetingParticipant | Name tag with audio indicator                                        |
| RtkJoinButton            | RealtimeKitClient     | Join meeting button for setup screens                                |

Note

You must manage layout and sizing for these components yourself. Use standard Android layout techniques (XML, ConstraintLayout, LinearLayout) to position components.

The following example wraps a custom widget tree in `RtkProvider` and uses individual UI Kit widgets:

```dart
import 'package:flutter/material.dart';
import 'package:realtimekit_ui/realtimekit_ui.dart';

class CustomMeetingPage extends StatefulWidget {
  final String authToken;
  const CustomMeetingPage({required this.authToken, super.key});

  @override
  State<CustomMeetingPage> createState() => _CustomMeetingPageState();
}

class _CustomMeetingPageState extends State<CustomMeetingPage>
    implements RtkMeetingRoomEventListener {
  late final RealtimekitClient meeting;
  late final RealtimeKitUIInfo uiKitInfo;
  String meetingState = 'idle';

  @override
  void initState() {
    super.initState();
    meeting = RealtimekitClient();
    uiKitInfo = RealtimeKitUIInfo(
      RtkMeetingInfo(authToken: widget.authToken),
    );
    meeting.addMeetingRoomEventListener(this);
    meeting.init(
      RtkMeetingInfo(authToken: widget.authToken),
      onSuccess: () => setState(() => meetingState = 'setup'),
      onError: (error) => setState(() => meetingState = 'error'),
    );
  }

  @override
  void onMeetingRoomJoinCompleted() {
    setState(() => meetingState = 'joined');
  }

  @override
  void onMeetingEnded() {
    setState(() => meetingState = 'ended');
  }

  @override
  void onMeetingRoomLeaveCompleted() {
    Navigator.of(context).pop();
  }

  // Required interface methods — no-op for this example
  @override
  void onMeetingInitCompleted() {}
  @override
  void onMeetingInitFailed(Exception exception) {}
  @override
  void onMeetingInitStarted() {}
  @override
  void onMeetingRoomJoinStarted() {}
  @override
  void onMeetingRoomJoinFailed(Exception exception) {}
  @override
  void onMeetingRoomLeaveStarted() {}
  @override
  void onActiveTabUpdate(ActiveTab? activeTab) {}
  @override
  void onSocketConnectionUpdate(SocketConnectionState state) {}

  @override
  Widget build(BuildContext context) {
    return RtkProvider(
      meeting: meeting,
      uiKitInfo: uiKitInfo,
      child: Scaffold(
        backgroundColor: Colors.black,
        body: _buildForState(),
      ),
    );
  }

  Widget _buildForState() {
    switch (meetingState) {
      case 'setup':
        return Column(
          children: [
            Expanded(
              child: RtkParticipantTile(meeting.localUser, height: 300, width: 200),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RtkSelfAudioToggleButton(meeting: meeting),
                const SizedBox(width: 16),
                RtkSelfVideoToggleButton(meeting: meeting),
                const SizedBox(width: 16),
                RtkJoinButton(meeting: meeting, onMeetingJoined: () {}),
              ],
            ),
          ],
        );
      case 'joined':
        return Column(
          children: [
            RtkMeetingTitle(meeting: meeting),
            Expanded(
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 3 / 4,
                ),
                itemCount: meeting.participants.active.length + 1,
                itemBuilder: (context, index) {
                  final participant = index == 0
                      ? meeting.localUser
                      : meeting.participants.active[index - 1];
                  return RtkParticipantTile(participant);
                },
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RtkSelfAudioToggleButton(meeting: meeting),
                RtkSelfVideoToggleButton(meeting: meeting),
                RtkLeaveButton(meeting: meeting),
              ],
            ),
          ],
        );
      case 'ended':
        return const Center(child: Text('Meeting ended', style: TextStyle(color: Colors.white)));
      default:
        return const Center(child: CircularProgressIndicator());
    }
  }

  @override
  void dispose() {
    meeting.removeMeetingRoomEventListener(this);
    super.dispose();
  }
}
```

Individual widgets available for custom UIs:

| Widget                      | Required parameter    | Description                                                    |
| --------------------------- | --------------------- | -------------------------------------------------------------- |
| RtkSelfAudioToggleButton    | RealtimekitClient     | Microphone toggle with permission handling                     |
| RtkSelfVideoToggleButton    | RealtimekitClient     | Camera toggle with permission handling                         |
| RtkJoinButton               | RealtimekitClient     | Join meeting button with loading state                         |
| RtkLeaveButton              | RealtimekitClient     | Leave meeting button with confirmation dialog                  |
| RtkParticipantTile          | RtkMeetingParticipant | Video tile with avatar fallback, name tag, and audio indicator |
| RtkMeetingTitle             | RealtimekitClient     | Meeting title text                                             |
| RtkNameTag                  | RtkMeetingParticipant | Participant name label                                         |
| RtkAudioIndicatorIconWidget | RtkMeetingParticipant | Microphone status icon                                         |

Note

The Flutter SDK exports a focused set of composable widgets. For a complete meeting experience, combine these widgets with the Core SDK event listeners (`RtkMeetingRoomEventListener`, `RtkParticipantsEventListener`, `RtkSelfEventListener`) to manage meeting lifecycle and participant state.

The following example uses `RtkUIProvider` and individual components with state-based screen rendering, similar to the web React pattern:

Caution

When building without `RtkMeeting`, you must manage state transitions yourself. Listen for `roomJoined`, `roomLeft`, and socket events on the meeting object, and call `setStates` to update `storeStates.meeting` between `idle`, `setup`, `waiting`, `joined`, and `ended`.

```tsx
import React, { useContext, useEffect } from "react";
import { View, Text } from "react-native";
import {
	useRealtimeKitClient,
	RealtimeKitProvider,
} from "@cloudflare/realtimekit-react-native";
import {
	RtkUIProvider,
	RtkUIContext,
	RtkHeader,
	RtkGrid,
	RtkControlbar,
	RtkSidebar,
	RtkDialogManager,
	RtkSetupScreen,
	RtkWaitingScreen,
	RtkEndedScreen,
} from "@cloudflare/realtimekit-react-native-ui";

function MeetingScreens({ meeting }) {
	const { storeStates, setStates } = useContext(RtkUIContext);
	const currentState = storeStates.meeting;

	useEffect(() => {
		// Listen for meeting events and drive state transitions
		const onRoomJoined = () => {
			setStates({ ...storeStates, meeting: "joined" });
		};
		const onRoomLeft = ({ state }) => {
			if (state === "ended" || state === "left") {
				setStates({ ...storeStates, meeting: "ended" });
			}
		};
		meeting.self.addListener("roomJoined", onRoomJoined);
		meeting.self.addListener("roomLeft", onRoomLeft);
		return () => {
			meeting.self.removeListener("roomJoined", onRoomJoined);
			meeting.self.removeListener("roomLeft", onRoomLeft);
		};
	}, [meeting]);

	if (currentState === "setup") {
		return <RtkSetupScreen meeting={meeting} />;
	}

	if (currentState === "waiting") {
		return <RtkWaitingScreen />;
	}

	if (currentState === "joined") {
		return (
			<View style={{ flex: 1 }}>
				<RtkHeader meeting={meeting} />
				<View style={{ flex: 1 }}>
					<RtkGrid meeting={meeting} />
					{storeStates.activeSidebar && <RtkSidebar meeting={meeting} />}
				</View>
				<RtkControlbar meeting={meeting} />
				<RtkDialogManager meeting={meeting} />
			</View>
		);
	}

	if (currentState === "ended") {
		return <RtkEndedScreen meeting={meeting} />;
	}

	return <Text>Loading...</Text>;
}

function CustomMeeting({ authToken }) {
	const [meet, initMeeting] = useRealtimeKitClient();
	const { setStates, storeStates } = useContext(RtkUIContext);

	useEffect(() => {
		initMeeting({
			authToken,
			defaults: { audio: true, video: true },
		});
	}, [authToken]);

	useEffect(() => {
		if (meet) {
			setStates({ ...storeStates, meeting: "setup" });
		}
	}, [meet]);

	if (!meet) return <Text>Initializing...</Text>;

	return (
		<RealtimeKitProvider value={meet}>
			<MeetingScreens meeting={meet} />
		</RealtimeKitProvider>
	);
}

export default function App() {
	return (
		<RtkUIProvider>
			<CustomMeeting authToken="<auth-token>" />
		</RtkUIProvider>
	);
}
```

First level split of `RtkMeeting` has the following components:

| Component          | Required prop        | Description                                                                  |
| ------------------ | -------------------- | ---------------------------------------------------------------------------- |
| RtkHeader          | meeting              | Header with meeting title, participant count, clock, and recording indicator |
| RtkGrid            | meeting              | Paginated participant video grid                                             |
| RtkControlbar      | meeting              | Control bar with mic, camera, screenshare, and more toggles                  |
| RtkSidebar         | meeting              | Sidebar with chat, polls, participants, and plugins panels                   |
| RtkDialogManager   | meeting              | Manages all dialogs (settings, leave confirmation, join stage)               |
| RtkSetupScreen     | meeting              | Pre-join screen with video preview and device selection                      |
| RtkWaitingScreen   | —                    | Waiting room screen                                                          |
| RtkEndedScreen     | meeting              | Meeting ended screen                                                         |
| RtkMicToggle       | meeting              | Standalone microphone toggle button                                          |
| RtkCameraToggle    | meeting              | Standalone camera toggle button                                              |
| RtkLeaveButton     | —                    | Leave/end meeting button                                                     |
| RtkParticipantTile | meeting, participant | Single participant video tile                                                |
| RtkNotifications   | meeting              | Toast notifications for join/leave/chat events                               |

Note

Wrap your component tree in `RtkUIProvider`. All UI Kit components read design tokens and state from `RtkUIContext`. Without `RtkUIProvider`, components will not render correctly.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/#page","headline":"Build Your Own UI · Cloudflare Realtime docs","description":"Build a custom meeting interface video UI using RealtimeKit SDK components and Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Browse prebuilt RealtimeKit UI Kit components for building custom meeting interfaces.
title: Component Library
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Component Library

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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`

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/#page","headline":"Component Library · Cloudflare Realtime docs","description":"Browse prebuilt RealtimeKit UI Kit components for building custom meeting interfaces.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/component-library/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Add a custom controlbar to your RealtimeKit meeting UI with individual components.
title: Add Custom Controlbar
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Add Custom Controlbar

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/custom-controlbar/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```jsx
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:

```jsx
<RtkControlbar />
```

with:

```jsx
<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:

```jsx
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:

```html
<rtk-controlbar
	style="display: flex; justify-content: space-between;"
></rtk-controlbar>
```

with:

```html
<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

```typescript
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:

```html
<rtk-controlbar
	style="display: flex; justify-content: space-between;"
></rtk-controlbar>
```

with:

```html
<app-custom-controlbar></app-custom-controlbar>
```

#### Complete Meeting Component Example

```typescript
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:

```typescript
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:

```typescript
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.

The iOS UI Kit provides `RtkMeetingControlBar` as the default controlbar for group call meetings. To build a custom controlbar, compose individual button components inside a `RtkTabBar`.

### Available controlbar button components

| Component                       | Description                                       |
| ------------------------------- | ------------------------------------------------- |
| RtkAudioButtonControlBar        | Microphone toggle with automatic state management |
| RtkVideoButtonControlBar        | Camera toggle with automatic state management     |
| RtkEndMeetingControlBarButton   | Leave/end meeting button with confirmation dialog |
| RtkMoreButtonControlBar         | "More" menu button with bottom sheet              |
| RtkSwitchCameraButtonControlBar | Front/back camera switch                          |
| RtkStageActionButtonControlBar  | Stage join/leave for webinar and livestream       |
| RtkControlBarButton             | Base button class for custom buttons              |
| RtkControlBarSpacerButton       | Invisible spacer for layout                       |

### Build a custom controlbar using RtkTabBar

Create a `RtkTabBar` and add individual button components:

```swift
import RealtimeKitUI
import RealtimeKit

func buildCustomControlBar(
    meeting: RealtimeKitClient,
    viewController: UIViewController
) -> RtkTabBar {
    let tabBar = RtkTabBar(delegate: nil)

    let micButton = RtkAudioButtonControlBar(meeting: meeting)
    let videoButton = RtkVideoButtonControlBar(rtkClient: meeting)
    let switchCameraButton = RtkSwitchCameraButtonControlBar(meeting: meeting)
    let endCallButton = RtkEndMeetingControlBarButton(
        meeting: meeting,
        alertViewController: viewController
    )

    tabBar.setButtons([micButton, videoButton, switchCameraButton, endCallButton])
    return tabBar
}
```

### Add the custom controlbar to your view controller

```swift
override func viewDidLoad() {
    super.viewDidLoad()

    let controlBar = buildCustomControlBar(
        meeting: meeting,
        viewController: self
    )
    controlBar.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(controlBar)

    NSLayoutConstraint.activate([
        controlBar.bottomAnchor.constraint(
            equalTo: view.safeAreaLayoutGuide.bottomAnchor
        ),
        controlBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        controlBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        controlBar.heightAnchor.constraint(equalToConstant: 80),
    ])
}
```

### Use the DataSource pattern for button replacement

Implement `RtkMeetingControlBarDataSource` to replace specific buttons while keeping the default controlbar layout:

```swift
class CustomControlBarDataSource: RtkMeetingControlBarDataSource {
    func getMicControlBarButton(
        for meeting: RealtimeKitClient
    ) -> RtkControlBarButton? {
        // Return a custom mic button, or nil to use the default
        let button = RtkAudioButtonControlBar(meeting: meeting)
        return button
    }

    func getVideoControlBarButton(
        for meeting: RealtimeKitClient
    ) -> RtkControlBarButton? {
        // Return a custom video button, or nil to use the default
        let button = RtkVideoButtonControlBar(rtkClient: meeting)
        return button
    }
}

// Assign the data source
let controlBar = RtkMeetingControlBar(
    meeting: meeting,
    delegate: nil,
    presentingViewController: self
)
controlBar.dataSource = CustomControlBarDataSource()
```

### Add custom buttons

Create a custom button using `RtkControlBarButton`:

```swift
let customButton = RtkControlBarButton(
    image: RtkImage(image: UIImage(systemName: "hand.raised.fill")),
    title: "Raise Hand"
)
customButton.addTarget(self, action: #selector(onRaiseHand), for: .touchUpInside)

// Add it alongside other buttons
tabBar.setButtons([micButton, videoButton, customButton, endCallButton])
```

The Android UI Kit provides `RtkMeetingControlBarView` as the default controlbar. To build a custom controlbar, use individual button components in an XML layout and activate them with the meeting object.

### Available controlbar button components

| Component             | Activate with     | Description                                       |
| --------------------- | ----------------- | ------------------------------------------------- |
| RtkMicToggleButton    | RealtimeKitClient | Microphone toggle with state management           |
| RtkCameraToggleButton | RealtimeKitClient | Camera toggle with state management               |
| RtkLeaveButton        | RealtimeKitClient | Leave/end meeting button with confirmation dialog |
| RtkMoreToggleButton   | RealtimeKitClient | "More" menu button                                |
| RtkControlBarButton   | —                 | Base button class for custom buttons              |

### Define a custom controlbar layout in XML

```xml
<?xml version="1.0" encoding="utf-8"?>
<com.cloudflare.realtimekit.ui.view.controlbars.RtkControlBarView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/customControlBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="8dp">

    <com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMicToggleButton
        android:id="@+id/micToggle"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_margin="4dp" />

    <com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkCameraToggleButton
        android:id="@+id/cameraToggle"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_margin="4dp" />

    <com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMoreToggleButton
        android:id="@+id/moreToggle"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_margin="4dp" />

    <com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkLeaveButton
        android:id="@+id/leaveButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_margin="4dp" />

</com.cloudflare.realtimekit.ui.view.controlbars.RtkControlBarView>
```

### Activate the controlbar buttons in your Activity

```kotlin
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.cloudflare.realtimekit.RealtimeKitClient
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMicToggleButton
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkCameraToggleButton
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMoreToggleButton
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkLeaveButton

class CustomMeetingActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_custom_meeting)

        // Your meeting initialization code...
    }

    fun activateControlBar(meeting: RealtimeKitClient) {
        findViewById<RtkMicToggleButton>(R.id.micToggle).activate(meeting)
        findViewById<RtkCameraToggleButton>(R.id.cameraToggle).activate(meeting)
        findViewById<RtkMoreToggleButton>(R.id.moreToggle).activate(meeting)
        findViewById<RtkLeaveButton>(R.id.leaveButton).activate(meeting)
    }
}
```

### Add custom buttons using RtkControlBarButton

Create a custom button in XML:

```xml
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkControlBarButton
    android:id="@+id/raiseHandButton"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_margin="4dp"
    android:text="Raise Hand"
    app:rtk_cbb_icon="@drawable/ic_raise_hand"
    app:rtk_cbb_variant="BUTTON"
    app:rtk_cbb_showText="true" />
```

Handle the click in Kotlin:

```kotlin
val raiseHandButton = findViewById<RtkControlBarButton>(R.id.raiseHandButton)
raiseHandButton.setOnClickListener {
    // Custom raise hand logic
}
```

Note

Call `activate(meeting)` on each button after the meeting room is joined. Buttons will not function until they are activated with a valid `RealtimeKitClient` instance.

The Flutter UI Kit provides individual toggle button widgets that you can compose into a custom controlbar using standard Flutter layout widgets.

### Available controlbar button widgets

| Widget                   | Required parameter | Description                                   |
| ------------------------ | ------------------ | --------------------------------------------- |
| RtkSelfAudioToggleButton | RealtimekitClient  | Microphone toggle with permission handling    |
| RtkSelfVideoToggleButton | RealtimekitClient  | Camera toggle with permission handling        |
| RtkLeaveButton           | RealtimekitClient  | Leave meeting button with confirmation dialog |

### Build a custom controlbar

Wrap the button widgets in a `Row` or any custom layout:

```dart
import 'package:flutter/material.dart';
import 'package:realtimekit_ui/realtimekit_ui.dart';

class CustomControlBar extends StatelessWidget {
  final RealtimekitClient meeting;

  const CustomControlBar({required this.meeting, super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          RtkSelfAudioToggleButton(meeting: meeting),
          RtkSelfVideoToggleButton(meeting: meeting),
          RtkLeaveButton(meeting: meeting),
        ],
      ),
    );
  }
}
```

### Use the custom controlbar in your meeting screen

Replace the default controlbar in your `Scaffold`:

```dart
import 'package:flutter/material.dart';
import 'package:realtimekit_ui/realtimekit_ui.dart';

class CustomMeetingScreen extends StatelessWidget {
  final RealtimekitClient meeting;

  const CustomMeetingScreen({required this.meeting, super.key});

  @override
  Widget build(BuildContext context) {
    return RtkProvider(
      meeting: meeting,
      uiKitInfo: uiKitInfo,
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Column(
          children: [
            RtkMeetingTitle(meeting: meeting),
            // Your participant grid here
            const Spacer(),
          ],
        ),
        bottomNavigationBar: CustomControlBar(meeting: meeting),
      ),
    );
  }
}
```

### Add custom buttons alongside RealtimeKit widgets

Add your own `IconButton` or any Flutter widget next to the RealtimeKit buttons:

```dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    RtkSelfAudioToggleButton(meeting: meeting),
    RtkSelfVideoToggleButton(meeting: meeting),
    // Custom raise hand button
    IconButton(
      onPressed: () {
        // Custom raise hand logic
      },
      icon: const Icon(Icons.back_hand, color: Colors.white),
    ),
    RtkLeaveButton(meeting: meeting),
  ],
)
```

### Customize button appearance with design tokens

Pass `individualDesignToken` to style buttons individually:

```dart
RtkSelfAudioToggleButton(
  meeting: meeting,
  iconSize: 28.0,
  iconColor: Colors.cyan,
  showLabel: true,
)
```

Note

All Flutter controlbar widgets require [RtkProvider](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/flutter/rtk-provider/) as an ancestor in the widget tree.

The React Native UI Kit provides individual toggle components that you can compose into a custom controlbar.

### Available controlbar components

| Component            | Required prop | Description                                       |
| -------------------- | ------------- | ------------------------------------------------- |
| RtkMicToggle         | meeting       | Microphone toggle with permission handling        |
| RtkCameraToggle      | meeting       | Camera toggle with permission handling            |
| RtkLeaveButton       | —             | Leave/end meeting button with confirmation dialog |
| RtkMoreToggle        | meeting       | "More" menu toggle with notification badge        |
| RtkScreenShareToggle | meeting       | Screen share toggle                               |
| RtkControlbarButton  | —             | Base button for custom actions                    |

### Build a custom controlbar

Replace `RtkControlbar` with individual components in a `View`:

```tsx
import React from "react";
import { View, StyleSheet } from "react-native";
import {
	RtkMicToggle,
	RtkCameraToggle,
	RtkLeaveButton,
	RtkMoreToggle,
	RtkScreenShareToggle,
} from "@cloudflare/realtimekit-react-native-ui";

function CustomControlbar({ meeting }) {
	return (
		<View style={styles.controlbar}>
			<RtkMicToggle meeting={meeting} variant="horizontal" />
			<RtkCameraToggle meeting={meeting} variant="horizontal" />
			<RtkScreenShareToggle meeting={meeting} variant="horizontal" />
			<RtkMoreToggle meeting={meeting} variant="horizontal" />
			<RtkLeaveButton />
		</View>
	);
}

const styles = StyleSheet.create({
	controlbar: {
		flexDirection: "row",
		justifyContent: "space-evenly",
		alignItems: "center",
		backgroundColor: "#1A1A1A",
		paddingVertical: 8,
		paddingHorizontal: 16,
	},
});
```

### Use the custom controlbar in your meeting screen

In your `MeetingScreens` component from [Build Your Own UI](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/build-your-own-ui/), replace:

```tsx
<RtkControlbar meeting={meeting} />
```

with:

```tsx
<CustomControlbar meeting={meeting} />
```

### Add custom buttons using RtkControlbarButton

Use `RtkControlbarButton` to create buttons that match the RealtimeKit design:

```tsx
import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";

function CustomControlbar({ meeting }) {
	return (
		<View style={styles.controlbar}>
			<RtkMicToggle meeting={meeting} variant="horizontal" />
			<RtkCameraToggle meeting={meeting} variant="horizontal" />
			<RtkControlbarButton
				label="Raise Hand"
				icon={raiseHandSvg}
				onClick={() => {
					// Custom raise hand logic
				}}
				variant="horizontal"
			/>
			<RtkLeaveButton />
		</View>
	);
}
```

Note

Wrap your component tree in `RtkUIProvider`. All UI Kit components read design tokens and state from `RtkUIContext`.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/custom-controlbar/#page","headline":"Add Custom Controlbar · Cloudflare Realtime docs","description":"Add a custom controlbar to your RealtimeKit meeting UI with individual components.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/custom-controlbar/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Add a custom header to your RealtimeKit meeting UI with individual components.
title: Add Custom Header
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Add Custom Header

Last updated Apr 22, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/custom-header/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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 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:

```jsx
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:

```jsx
<RtkHeader />
```

with:

```jsx
<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:

```jsx
const handleReportBugClick = () => {
	console.log("Report Bug Clicked");
};
```

For a complete example, refer to the [custom UI example ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/react-examples/examples/create-your-own-ui) and the [custom header component ↗](https://github.com/cloudflare/realtimekit-web-examples/blob/main/react-examples/examples/create-your-own-ui/src/components/meeting-header.tsx).

RealtimeKit UI 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:

```html
<rtk-header style="display: flex; justify-content: space-between;"></rtk-header>
```

with:

```html
<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");
});
```

For a complete example, refer to the [custom UI example ↗](https://github.com/cloudflare/realtimekit-web-examples/tree/main/html-examples/examples/create-your-own-ui) and the [custom header component ↗](https://github.com/cloudflare/realtimekit-web-examples/blob/main/html-examples/examples/create-your-own-ui/components/meeting-header.js).

RealtimeKit UI 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

```typescript
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:

```html
<rtk-header style="display: flex; justify-content: space-between;"></rtk-header>
```

with:

```html
<app-custom-header></app-custom-header>
```

#### Complete Meeting Component Example

```typescript
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:

```typescript
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.

RealtimeKit UI provides the `RtkMeetingHeaderView` component for a default header.

If you need additional controls, replace `RtkMeetingHeaderView` with individual UI Kit components and custom elements.

Import the required components:

```swift
import RealtimeKitUI
```

#### Create custom header view

Create a custom header view that uses the RealtimeKit iOS components directly:

```swift
import UIKit
import RealtimeKit
import RealtimeKitUI

class CustomHeaderView: UIView {
    private let meeting: RealtimeKitClient

    private lazy var titleLabel: RtkMeetingTitleLabel = {
        return RtkMeetingTitleLabel(meeting: meeting)
    }()

    private lazy var participantCountView: RtkParticipantCountView = {
        return RtkParticipantCountView(meeting: meeting)
    }()

    private lazy var clockView: RtkClockView = {
        return RtkClockView(meeting: meeting)
    }()

    private lazy var recordingView: RtkRecordingView = {
        return RtkRecordingView(meeting: meeting)
    }()

    private let reportBugButton = UIButton(type: .system)

    init(meeting: RealtimeKitClient) {
        self.meeting = meeting
        super.init(frame: .zero)
        setupUI()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupUI() {
        backgroundColor = .black

        // Configure report bug button
        reportBugButton.setTitle("Report Bug", for: .normal)
        reportBugButton.setTitleColor(.white, for: .normal)
        reportBugButton.layer.borderColor = UIColor.white.cgColor
        reportBugButton.layer.borderWidth = 1
        reportBugButton.layer.cornerRadius = 4
        reportBugButton.contentEdgeInsets = UIEdgeInsets(top: 4, left: 8, bottom: 4, right: 8)
        reportBugButton.addTarget(self, action: #selector(handleReportBugTap), for: .touchUpInside)

        // Create stack views for layout
        let leftStack = UIStackView(arrangedSubviews: [recordingView])
        leftStack.axis = .horizontal
        leftStack.spacing = 8
        leftStack.alignment = .center

        let centerStack = UIStackView(arrangedSubviews: [titleLabel])
        centerStack.axis = .horizontal
        centerStack.alignment = .center

        let rightStack = UIStackView(arrangedSubviews: [
            participantCountView,
            clockView,
            reportBugButton
        ])
        rightStack.axis = .horizontal
        rightStack.spacing = 8
        rightStack.alignment = .center

        let mainStack = UIStackView(arrangedSubviews: [leftStack, centerStack, rightStack])
        mainStack.axis = .horizontal
        mainStack.distribution = .equalSpacing
        mainStack.alignment = .center
        mainStack.translatesAutoresizingMaskIntoConstraints = false

        addSubview(mainStack)

        NSLayoutConstraint.activate([
            mainStack.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
            mainStack.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12),
            mainStack.topAnchor.constraint(equalTo: topAnchor),
            mainStack.bottomAnchor.constraint(equalTo: bottomAnchor),
            heightAnchor.constraint(equalToConstant: 48)
        ])
    }

    @objc private func handleReportBugTap() {
        print("Report Bug Tapped")
        // Add your custom logic here
    }
}
```

#### Use in your meeting view controller

In your `MeetingViewController`, replace the default header with your custom header:

```swift
import UIKit
import RealtimeKit
import RealtimeKitUI

class MeetingViewController: UIViewController {
    private var meeting: RealtimeKitClient?
    private var customHeader: CustomHeaderView?

    override func viewDidLoad() {
        super.viewDidLoad()
        setupMeeting()
    }

    private func setupMeeting() {
        Task {
            do {
                let client = try await RealtimeKitClient.init(authToken: "<PARTICIPANT_AUTH_TOKEN>")
                self.meeting = client
                await MainActor.run {
                    setupCustomHeader(meeting: client)
                }
            } catch {
                print("Failed to initialize meeting: \(error)")
            }
        }
    }

    private func setupCustomHeader(meeting: RealtimeKitClient) {
        let header = CustomHeaderView(meeting: meeting)
        self.customHeader = header

        view.addSubview(header)
        header.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            header.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            header.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            header.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
    }
}
```

RealtimeKit UI provides the `RtkMeetingHeaderView` component for a default header.

If you need additional controls, replace `RtkMeetingHeaderView` with individual UI Kit components and custom elements.

Import the required components:

```kotlin
import com.cloudflare.realtimekit.ui.view.headers.RtkMeetingHeaderView
import com.cloudflare.realtimekit.ui.view.RtkMeetingTitleView
import com.cloudflare.realtimekit.ui.view.RtkParticipantCountView
import com.cloudflare.realtimekit.ui.view.RtkClockView
import com.cloudflare.realtimekit.ui.view.RtkRecordingIndicator
import com.cloudflare.realtimekit.ui.view.RtkLivestreamIndicator
import com.cloudflare.realtimekit.ui.view.RtkGridPaginatorView
```

#### Create custom header layout

Create an XML layout file for your custom header:

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:paddingHorizontal="12dp"
    android:background="@android:color/black">

    <!-- Left section -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:gravity="start|center_vertical">

        <com.cloudflare.realtimekit.ui.view.RtkRecordingIndicator
            android:id="@+id/recordingIndicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <com.cloudflare.realtimekit.ui.view.RtkLivestreamIndicator
            android:id="@+id/livestreamIndicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp" />
    </LinearLayout>

    <!-- Center section -->
    <com.cloudflare.realtimekit.ui.view.RtkMeetingTitleView
        android:id="@+id/meetingTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white" />

    <!-- Right section -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:gravity="end|center_vertical">

        <com.cloudflare.realtimekit.ui.view.RtkGridPaginatorView
            android:id="@+id/gridPaginator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <com.cloudflare.realtimekit.ui.view.RtkParticipantCountView
            android:id="@+id/participantCount"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp" />

        <com.cloudflare.realtimekit.ui.view.RtkClockView
            android:id="@+id/clock"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp" />

        <Button
            android:id="@+id/reportBugButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:text="Report Bug"
            android:textColor="@android:color/white"
            android:background="@android:color/transparent"
            style="?android:attr/borderlessButtonStyle" />
    </LinearLayout>
</LinearLayout>
```

#### Create custom header view class

```kotlin
package com.example.meeting

import android.content.Context
import android.util.AttributeSet
import android.util.Log
import android.view.LayoutInflater
import android.widget.Button
import android.widget.LinearLayout
import com.cloudflare.realtimekit.ui.view.RtkClockView
import com.cloudflare.realtimekit.ui.view.RtkMeetingTitleView
import com.cloudflare.realtimekit.ui.view.RtkParticipantCountView
import com.cloudflare.realtimekit.ui.view.RtkRecordingIndicator

class CustomHeaderView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {

    init {
        LayoutInflater.from(context).inflate(R.layout.custom_header, this, true)
        setupReportBugButton()
    }

    private fun setupReportBugButton() {
        findViewById<Button>(R.id.reportBugButton).setOnClickListener {
            Log.d("CustomHeader", "Report Bug Clicked")
            // Add your custom logic here
        }
    }
}
```

#### Use in your meeting activity

In your `MeetingActivity`, replace the default header with your custom header:

```kotlin
package com.example.meeting

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.cloudflare.realtimekit.RealtimeKitClient

class MeetingActivity : AppCompatActivity() {
    private lateinit var meeting: RealtimeKitClient
    private lateinit var customHeader: CustomHeaderView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_meeting)

        customHeader = findViewById(R.id.customHeader)
        initializeMeeting()
    }

    private fun initializeMeeting() {
        RealtimeKitClient.init(
            authToken = "<PARTICIPANT_AUTH_TOKEN>",
            onSuccess = { client ->
                meeting = client
                // Configure meeting UI
            },
            onError = { error ->
                Log.e("Meeting", "Failed to initialize: $error")
            }
        )
    }
}
```

RealtimeKit UI provides the `RtkAppBar` widget for a default header.

If you need additional controls, replace `RtkAppBar` with individual UI Kit widgets and custom elements.

Import the required components:

```dart
import 'package:realtimekit/realtimekit.dart';
import 'package:realtimekit_ui/realtimekit_ui.dart';
```

#### Create custom header widget

Create a custom header widget that uses the RealtimeKit Flutter components directly. These widgets must be used within an `RtkMeetingUiProvider` context:

```dart
import 'package:flutter/material.dart';
import 'package:realtimekit_ui/realtimekit_ui.dart';

class CustomHeader extends StatelessWidget {
  final VoidCallback? onReportBugPressed;

  const CustomHeader({
    Key? key,
    this.onReportBugPressed,
  }) : super(key: key);

  void _handleReportBugPressed() {
    debugPrint('Report Bug Pressed');
    onReportBugPressed?.call();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 48,
      color: Colors.black,
      padding: const EdgeInsets.symmetric(horizontal: 12),
      child: Row(
        children: [
          // Left section
          Expanded(
            child: Row(
              children: const [
                RtkRecordingIndicator(),
                SizedBox(width: 8),
                RtkLivestreamIndicator(),
              ],
            ),
          ),

          // Center section
          const RtkMeetingTitle(),

          // Right section
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                const RtkParticipantCount(),
                const SizedBox(width: 8),
                const RtkClock(),
                const SizedBox(width: 8),
                OutlinedButton(
                  onPressed: _handleReportBugPressed,
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.white,
                    side: const BorderSide(color: Colors.white),
                    padding: const EdgeInsets.symmetric(
                      horizontal: 8,
                      vertical: 4,
                    ),
                  ),
                  child: const Text('Report Bug'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
```

#### Use in your meeting screen

In your meeting screen, replace the default `RtkAppBar` with your custom header:

```dart
import 'package:flutter/material.dart';
import 'package:realtimekit/realtimekit.dart';
import 'package:realtimekit_ui/realtimekit_ui.dart';
import 'custom_header.dart';

class MeetingScreen extends StatefulWidget {
  const MeetingScreen({Key? key}) : super(key: key);

  @override
  State<MeetingScreen> createState() => _MeetingScreenState();
}

class _MeetingScreenState extends State<MeetingScreen> {
  RealtimeKitClient? _meeting;

  @override
  void initState() {
    super.initState();
    _initializeMeeting();
  }

  Future<void> _initializeMeeting() async {
    try {
      final meeting = await RealtimeKitClient.init(
        authToken: '<PARTICIPANT_AUTH_TOKEN>',
      );
      setState(() {
        _meeting = meeting;
      });
    } catch (e) {
      debugPrint('Failed to initialize meeting: $e');
    }
  }

  void _handleReportBug() {
    // Add your custom logic here
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Report Bug'),
        content: const Text('Bug reporting form goes here.'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Close'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    if (_meeting == null) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return RtkMeetingUiProvider(
      meeting: _meeting!,
      child: Scaffold(
        body: Column(
          children: [
            // Custom header replaces RtkAppBar
            CustomHeader(onReportBugPressed: _handleReportBug),

            // Meeting grid
            const Expanded(child: RtkGrid()),

            // Control bar
            const RtkControlBar(),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _meeting?.leave();
    super.dispose();
  }
}
```

RealtimeKit UI provides the `RtkHeader` component for a default header.

If you need additional controls, replace `RtkHeader` with individual UI Kit components and custom elements.

Import the required components:

```tsx
import {
	RtkLogo,
	RtkRecordingIndicator,
	RtkLiveStreamIndicator,
	RtkMeetingTitle,
	RtkGridPagination,
	RtkParticipantCount,
	RtkClock,
} from "@cloudflare/realtimekit-react-native-ui";
import {
	useRealtimeKitMeeting,
	useRealtimeKitSelector,
} from "@cloudflare/realtimekit-react-native";
```

#### Create custom header component

Create a custom header component that uses the RealtimeKit React Native components directly. Each component requires the `meeting` instance as a prop, which you obtain via the `useRealtimeKitMeeting` hook. The component waits for `roomJoined` before rendering to ensure the meeting state is ready:

```tsx
import React from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
import {
	RtkLogo,
	RtkRecordingIndicator,
	RtkLiveStreamIndicator,
	RtkMeetingTitle,
	RtkGridPagination,
	RtkParticipantCount,
	RtkClock,
} from "@cloudflare/realtimekit-react-native-ui";
import {
	useRealtimeKitMeeting,
	useRealtimeKitSelector,
} from "@cloudflare/realtimekit-react-native";

interface CustomHeaderProps {
	onReportBugPress?: () => void;
}

export function CustomHeader({ onReportBugPress }: CustomHeaderProps) {
	const { meeting } = useRealtimeKitMeeting();
	const { roomJoined } = useRealtimeKitSelector((state) => state.self);

	const handleReportBugPress = () => {
		console.log("Report Bug Pressed");
		onReportBugPress?.();
	};

	if (!roomJoined) {
		return null;
	}

	return (
		<View style={styles.container}>
			{/* Left section */}
			<View style={styles.leftSection}>
				<RtkLogo />
				<RtkRecordingIndicator meeting={meeting} />
				<RtkLiveStreamIndicator meeting={meeting} />
			</View>

			{/* Center section */}
			<View style={styles.centerSection}>
				<RtkMeetingTitle meeting={meeting} />
			</View>

			{/* Right section */}
			<View style={styles.rightSection}>
				<RtkGridPagination meeting={meeting} />
				<RtkParticipantCount meeting={meeting} />
				<RtkClock meeting={meeting} />
				<TouchableOpacity
					style={styles.reportBugButton}
					onPress={handleReportBugPress}
				>
					<Text style={styles.reportBugText}>Report Bug</Text>
				</TouchableOpacity>
			</View>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flexDirection: "row",
		justifyContent: "space-between",
		alignItems: "center",
		height: 48,
		paddingHorizontal: 12,
		backgroundColor: "black",
	},
	leftSection: {
		flexDirection: "row",
		alignItems: "center",
		gap: 8,
	},
	centerSection: {
		flexDirection: "row",
		alignItems: "center",
	},
	rightSection: {
		flexDirection: "row",
		alignItems: "center",
		gap: 8,
	},
	reportBugButton: {
		borderWidth: 1,
		borderColor: "white",
		borderRadius: 4,
		paddingHorizontal: 8,
		paddingVertical: 4,
	},
	reportBugText: {
		color: "white",
		fontSize: 12,
	},
});
```

Note

`useRealtimeKitMeeting` and `useRealtimeKitSelector` must be called inside a component rendered within a `RealtimeKitProvider`. The `roomJoined` guard ensures the header only renders once the participant has successfully joined the meeting. `meeting.join()` is called from the parent `MeetingScreen` so that the join lifecycle is managed in one place.

#### Use in your meeting screen

In your meeting screen, replace the default `RtkHeader` with your custom header:

```tsx
import React, { useEffect } from "react";
import { View, StyleSheet } from "react-native";
import {
	RealtimeKitProvider,
	useRealtimeKitClient,
} from "@cloudflare/realtimekit-react-native";
import {
	RtkGrid,
	RtkControlbar,
	RtkDialogManager,
} from "@cloudflare/realtimekit-react-native-ui";
import { CustomHeader } from "./CustomHeader";

function MeetingContainer() {
	const [meeting, initMeeting] = useRealtimeKitClient();

	useEffect(() => {
		initMeeting({
			authToken: "<PARTICIPANT_AUTH_TOKEN>",
		});
	}, [initMeeting]);

	useEffect(() => {
		if (!meeting) return;
		meeting.join();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [meeting]);

	if (!meeting) {
		return null;
	}

	return (
		<RealtimeKitProvider value={meeting}>
			<View style={styles.container}>
				{/* Custom header replaces RtkHeader */}
				<CustomHeader
					onReportBugPress={() => console.log("Report bug pressed")}
				/>

				{/* Meeting grid */}
				<View style={styles.gridContainer}>
					<RtkGrid meeting={meeting} />
				</View>

				{/* Control bar */}
				<RtkControlbar meeting={meeting} />
			</View>

			{/* Required components */}
			<RtkDialogManager meeting={meeting} />
		</RealtimeKitProvider>
	);
}

export function MeetingScreen() {
	return <MeetingContainer />;
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: "black",
	},
	gridContainer: {
		flex: 1,
	},
});
```

Note

You must include `RtkDialogManager`. If you leave it out, features like settings toggles will not work.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/custom-header/#page","headline":"Add Custom Header · Cloudflare Realtime docs","description":"Add a custom header to your RealtimeKit meeting UI with individual components.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/custom-header/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-22","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Customize text and localize the RealtimeKit UI Kit meeting interface for different languages.
title: Meeting Locale
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Meeting Locale

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/meeting-locale/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```html
<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:

```jsx
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:

```html
<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.

```jsx
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`:

```json
{
	"@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`:

```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:

```html
<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>
```

```jsx
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:

```json
{
  "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",
  "plugins.empty": "No plugins available",
  "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.transcriptions.search_placeholder": "Search by participant name or transcript",
  "ai.transcriptions.no_transcripts_found": "No transcripts found. Try searching for a different participant or transcript.",
  "ai.transcriptions.no_transcripts_yet": "No transcripts yet.",
  "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.",
  "network.troubleshoot": "Troubleshoot your connection",
  "init.auth_error": "We couldn't verify your access to this meeting. The meeting may have ended, or you may not have permission to join.",
  "init.network_error": "We couldn't connect to the meeting. Please try again, and if the problem continues, check your internet connection.",
  "init.browser_error": "Your browser is not supported. Please try a different or updated browser.",
  "init.default_error": "Something went wrong while connecting to the meeting. Please try again.",
  "join.network_error": "We couldn't connect to the meeting. Please check your internet connection and try again.",
  "join.media_error": "We're having trouble connecting to the meeting. Please try again, and if the problem continues, try using a different network.",
  "join.media_firewall_error": "Your network may be blocking this connection. Try using a different network, or contact your network administrator for help.",
  "join.default_error": "Something went wrong while joining the meeting. Please try again.",
  "join.error_code": "Error code",
  "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 access",
  "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.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.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_chat": "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.yesterday": "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.       |

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/meeting-locale/#page","headline":"Meeting Locale · Cloudflare Realtime docs","description":"Customize text and localize the RealtimeKit UI Kit meeting interface for different languages.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/meeting-locale/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Manage and synchronize meeting state across RealtimeKit UI Kit components.
title: State Management
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# State Management

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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.

```jsx
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:

```jsx
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.

```html
<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.

```typescript
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.

```tsx
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:

```tsx
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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/#page","headline":"State Management · Cloudflare Realtime docs","description":"Manage and synchronize meeting state across RealtimeKit UI Kit components.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/state-management/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Receive RealtimeKit events in your application through signed HTTP callbacks.
title: Webhooks
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Webhooks

Last updated Jun 12, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/realtimekit/webhooks/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Webhooks let your backend receive RealtimeKit events as they happen. RealtimeKit sends an HTTP `POST` request to your configured endpoint with a JSON payload when a subscribed event occurs, such as when a meeting starts, a participant joins, or a recording is uploaded.

Use webhooks for backend workflows that depend on asynchronous events, such as starting post-meeting processing, downloading transcripts, tracking recording status, or updating your own session records.

## How webhooks work

1. Create an HTTP endpoint in your backend that can receive `POST` requests.
2. Register the endpoint URL with the RealtimeKit [Webhooks API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/webhooks/).
3. Choose the event types that should trigger the webhook.
4. Verify incoming requests with the `rtk-signature` header.
5. Return a `2xx` response after accepting the event.

Webhook events are subscription-only. Your endpoint receives only the events included in the webhook's `events` array.

## Create a webhook endpoint

Your webhook endpoint must accept JSON `POST` requests. The endpoint can handle multiple event types by switching on the `event` field in the request body.

```js
async function handleEvent(event) {
	switch (event.event) {
		case "meeting.participantJoined":
			// Update attendance records.
			break;
		case "recording.statusUpdate":
			// Track recording state changes.
			break;
		default:
			console.log(`Unhandled RealtimeKit event: ${event.event}`);
	}
}

export default {
	async fetch(request, _env, ctx) {
		const url = new URL(request.url);

		if (request.method !== "POST" || url.pathname !== "/webhook") {
			return new Response("Not found", { status: 404 });
		}

		const event = await request.json();
		ctx.waitUntil(handleEvent(event));

		return new Response(null, { status: 200 });
	},
};
```

```ts
type RealtimeKitWebhookEvent = {
	event: string;
};

async function handleEvent(event: RealtimeKitWebhookEvent): Promise<void> {
	switch (event.event) {
		case "meeting.participantJoined":
			// Update attendance records.
			break;
		case "recording.statusUpdate":
			// Track recording state changes.
			break;
		default:
			console.log(`Unhandled RealtimeKit event: ${event.event}`);
	}
}

export default {
	async fetch(request, _env, ctx): Promise<Response> {
		const url = new URL(request.url);

		if (request.method !== "POST" || url.pathname !== "/webhook") {
			return new Response("Not found", { status: 404 });
		}

		const event = await request.json<RealtimeKitWebhookEvent>();
		ctx.waitUntil(handleEvent(event));

		return new Response(null, { status: 200 });
	},
} satisfies ExportedHandler;
```

Your endpoint should return a `2xx` response as soon as it accepts the event. Move slow work, such as downloading files or calling third-party APIs, to a background job.

## Register a webhook

Register the publicly accessible endpoint URL using the RealtimeKit [Webhooks API](https://developers.cloudflare.com/api/resources/realtime%5Fkit/subresources/webhooks/):

```bash
curl --request POST "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks" \
  --header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{
    "name": "Production webhook",
    "url": "https://example.com/webhook",
    "events": [
      "meeting.started",
      "meeting.ended",
      "meeting.participantJoined",
      "meeting.participantLeft",
      "recording.statusUpdate"
    ],
    "enabled": true
  }'
```

You can also manage webhooks from the [RealtimeKit dashboard ↗](https://dash.cloudflare.com/?to=/:account/realtime/kit).

## Webhook headers

RealtimeKit includes headers that help you identify, deduplicate, and verify webhook deliveries:

| Header         | Description                                                                                                                 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------- |
| rtk-signature  | Base64-encoded RSA-SHA256 signature for the request body. Use this header to verify that the request came from RealtimeKit. |
| rtk-uuid       | Unique ID for the webhook delivery. Store this value if you need to avoid processing duplicate deliveries.                  |
| rtk-webhook-id | ID of the webhook configuration that triggered the delivery.                                                                |

## Verify webhook signatures

RealtimeKit signs each webhook request body with RSA-SHA256\. Verify the signature before processing the event.

### Fetch the public key

Fetch the RealtimeKit webhook public key from:

```bash
curl "https://api.realtime.cloudflare.com/.well-known/webhooks.json"
```

The response includes a PEM-encoded public key:

```json
{
	"success": true,
	"data": {
		"publicKey": "-----BEGIN PUBLIC KEY-----\n...\n-----END PUBLIC KEY-----"
	},
	"message": ""
}
```

### Verify the request body

Verify `rtk-signature` against the raw request body. Do not reserialize parsed JSON before verification because changes in whitespace or key order can change the signed bytes.

```js
async function verifySignature(publicKeyPem, signature, body) {
	const publicKey = await crypto.subtle.importKey(
		"spki",
		Uint8Array.from(atob(publicKeyPem), (c) => c.charCodeAt(0)),
		{ name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" },
		false,
		["verify"],
	);

	return crypto.subtle.verify(
		"RSASSA-PKCS1-v1_5",
		publicKey,
		Uint8Array.from(atob(signature), (c) => c.charCodeAt(0)),
		body,
	);
}

async function handleEvent(event) {
	// Process the event.
}

export default {
	async fetch(request, env, ctx) {
		const signature = request.headers.get("rtk-signature");

		if (!signature) {
			return new Response("Missing signature", {
				status: 400,
			});
		}

		const body = await request.arrayBuffer();

		const resp = await fetch(env.REALTIMEKIT_WEBHOOK_PUBLIC_KEY_URL);
		if (!resp.ok) {
			return new Response("Missing public key", {
				status: 400,
			});
		}

		const respBody = await resp.json();

		const cleanPem = respBody.data.publicKey
			.replace(/\\n/g, "")
			.replace(/-----BEGIN PUBLIC KEY-----/, "")
			.replace(/-----END PUBLIC KEY-----/, "")
			.replace(/\s+/g, "");

		const verified = await verifySignature(cleanPem, signature, body);

		if (!verified) {
			return new Response("Invalid signature", { status: 401 });
		}

		const event = JSON.parse(new TextDecoder().decode(body));

		ctx.waitUntil(handleEvent(event));

		return new Response(null, { status: 200 });
	},
};
```

```ts
type Env = {
	REALTIMEKIT_WEBHOOK_PUBLIC_KEY_URL: string;
};

type RealtimeKitWebhookEvent = {
	event: string;
};

async function verifySignature(
	publicKeyPem: string,
	signature: string,
	body: ArrayBuffer,
): Promise<boolean> {
	const publicKey = await crypto.subtle.importKey(
		"spki",
		Uint8Array.from(atob(publicKeyPem), (c) => c.charCodeAt(0)),
		{ name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" },
		false,
		["verify"],
	);

	return crypto.subtle.verify(
		"RSASSA-PKCS1-v1_5",
		publicKey,
		Uint8Array.from(atob(signature), (c) => c.charCodeAt(0)),
		body,
	);
}

async function handleEvent(event: RealtimeKitWebhookEvent): Promise<void> {
	// Process the event.
}

export default {
	async fetch(
		request: Request,
		env: Env,
		ctx: ExecutionContext,
	): Promise<Response> {
		const signature = request.headers.get("rtk-signature");

		if (!signature) {
			return new Response("Missing signature", {
				status: 400,
			});
		}

		const body = await request.arrayBuffer();

		const resp = await fetch(env.REALTIMEKIT_WEBHOOK_PUBLIC_KEY_URL);
		if (!resp.ok) {
			return new Response("Missing public key", {
				status: 400,
			});
		}

		const respBody = await resp.json<{
			success: true;
			data: { publicKey: string };
		}>();

		const cleanPem = respBody.data.publicKey
			.replace(/\\n/g, "")
			.replace(/-----BEGIN PUBLIC KEY-----/, "")
			.replace(/-----END PUBLIC KEY-----/, "")
			.replace(/\s+/g, "");

		const verified = await verifySignature(cleanPem, signature, body);

		if (!verified) {
			return new Response("Invalid signature", { status: 401 });
		}

		const event = JSON.parse(new TextDecoder().decode(body));

		ctx.waitUntil(handleEvent(event));

		return new Response(null, { status: 200 });
	},
} satisfies ExportedHandler<Env>;
```

## Retry behavior

RealtimeKit treats any `2xx` response as a successful delivery.

If your endpoint returns a `5xx` response or the request fails because of a network error, RealtimeKit retries the delivery. If your endpoint returns a non-`2xx` response below `500`, RealtimeKit records the delivery as failed and does not retry it.

After repeated delivery failures, RealtimeKit may temporarily reduce delivery attempts to that webhook URL. Return a `2xx` response only after your application has accepted the event.

## Supported events

RealtimeKit supports these webhook events:

| Event                      | Trigger                                                              |
| -------------------------- | -------------------------------------------------------------------- |
| meeting.started            | The first participant joins a meeting.                               |
| meeting.ended              | The meeting ends because the host ended it or all participants left. |
| meeting.participantJoined  | A participant joins a meeting.                                       |
| meeting.participantLeft    | A participant leaves a meeting.                                      |
| meeting.chatSynced         | The chat export for a completed meeting is available.                |
| recording.statusUpdate     | A recording changes status.                                          |
| livestreaming.statusUpdate | A livestream changes status.                                         |
| meeting.transcript         | The transcript for a completed meeting is available.                 |
| meeting.summary            | The AI-generated summary for a completed meeting is available.       |

Fetch the current event list with the Webhooks API:

```bash
curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/realtime/kit/$APP_ID/webhooks/all" \
  --header "Authorization: Bearer $CLOUDFLARE_API_TOKEN"
```

## Event payloads

All webhook payloads include an `event` field. The remaining fields depend on the event type.

### `meeting.started`

```json
{
	"event": "meeting.started",
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"title": "Weekly sync",
		"status": "LIVE",
		"createdAt": "2026-06-03T10:00:00.000Z",
		"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
		"startedAt": "2026-06-03T10:00:00.000Z",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	}
}
```

### `meeting.ended`

```json
{
	"event": "meeting.ended",
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
		"title": "Weekly sync",
		"status": "LIVE",
		"createdAt": "2026-06-03T10:00:00.000Z",
		"startedAt": "2026-06-03T10:00:00.000Z",
		"endedAt": "2026-06-03T10:30:00.000Z",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	},
	"reason": "ALL_PARTICIPANTS_LEFT"
}
```

The `reason` value can be `HOST_ENDED_MEETING` or `ALL_PARTICIPANTS_LEFT`.

### `meeting.participantJoined`

```json
{
	"event": "meeting.participantJoined",
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
		"title": "Weekly sync",
		"status": "LIVE",
		"createdAt": "2026-06-03T10:00:00.000Z",
		"startedAt": "2026-06-03T10:00:00.000Z",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	},
	"participant": {
		"peerId": "e32fb785-ddd0-4b96-b577-879327c0082f",
		"userDisplayName": "Mary Sue",
		"customParticipantId": "user-123",
		"joinedAt": "2026-06-03T10:05:00.000Z"
	}
}
```

Use `customParticipantId` for your own participant identifier. `clientSpecificId` is included for compatibility with older integrations.

### `meeting.participantLeft`

```json
{
	"event": "meeting.participantLeft",
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"title": "Weekly sync",
		"status": "LIVE",
		"createdAt": "2026-06-03T10:00:00.000Z",
		"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
		"startedAt": "2026-06-03T10:00:00.000Z",
		"endedAt": "2026-06-03T10:30:00.000Z",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	},
	"participant": {
		"peerId": "e32fb785-ddd0-4b96-b577-879327c0082f",
		"userDisplayName": "Mary Sue",
		"customParticipantId": "user-123",
		"joinedAt": "2026-06-03T10:05:00.000Z",
		"leftAt": "2026-06-03T10:25:00.000Z"
	}
}
```

### `meeting.chatSynced`

```json
{
	"event": "meeting.chatSynced",
	"title": "Weekly sync",
	"endedAt": "2026-06-03T10:30:00.000Z",
	"createdAt": "2026-06-03T10:00:00.000Z",
	"meetingId": "bbb8940e-1b97-402a-97d6-2708b7feca41",
	"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
	"startedAt": "2026-06-03T10:00:00.000Z",
	"chatDownloadUrl": "https://example.com/chat.json",
	"chatDownloadUrlExpiry": "2026-06-10T10:30:00.000Z",
	"organizedBy": {
		"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
		"name": "Example organization"
	}
}
```

### `recording.statusUpdate`

RealtimeKit sends `recording.statusUpdate` when a recording moves through its lifecycle. Recording statuses include `RECORDING`, `UPLOADING`, `UPLOADED`, and `ERRORED`. For more information, refer to [Monitor Recording Status](https://developers.cloudflare.com/realtime/realtimekit/recording-guide/monitor-status/).

```json
{
	"event": "recording.statusUpdate",
	"recording": {
		"id": "97cb480d-5840-4528-ace3-919b5e386c68",
		"recordingId": "97cb480d-5840-4528-ace3-919b5e386c68",
		"status": "UPLOADED",
		"downloadUrl": "https://example.com/recording.mp4",
		"audioDownloadUrl": "https://example.com/recording.mp3",
		"downloadUrlExpiry": "2026-06-10T10:30:00.000Z",
		"startedTime": "2026-06-03T10:00:00.000Z",
		"stoppedTime": "2026-06-03T10:30:00.000Z",
		"fileSize": "2044680",
		"outputFileName": "weekly-sync.mp4",
		"meetingId": "50c8940e-1b97-402a-97d6-2708b7feca41",
		"recordingDuration": 1800,
		"organizationId": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
		"roomUUID": "05e57591-d89e-45c9-ae44-08dc1eaad0e0"
	},
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
		"title": "Weekly sync",
		"status": "LIVE",
		"createdAt": "2026-06-03T10:00:00.000Z",
		"startedAt": "2026-06-03T10:00:00.000Z",
		"endedAt": "2026-06-03T10:30:00.000Z",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	}
}
```

### `livestreaming.statusUpdate`

Livestream statuses include `LIVE`, `OFFLINE`, and `IDLE`.

```json
{
	"event": "livestreaming.statusUpdate",
	"streamId": "d231d346-c422-43a6-a324-c0d65b79c8a7",
	"status": "LIVE",
	"manualIngest": false,
	"playbackUrl": "https://example.com/live.m3u8",
	"ingestServer": "rtmps://example.com/live",
	"streamKey": "stream-key",
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"title": "Weekly sync",
		"createdAt": "2026-06-03T10:00:00.000Z",
		"status": "LIVE",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	}
}
```

### `meeting.transcript`

```json
{
	"event": "meeting.transcript",
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"title": "Weekly sync",
		"endedAt": "2026-06-03T10:30:00.000Z",
		"createdAt": "2026-06-03T10:00:00.000Z",
		"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
		"startedAt": "2026-06-03T10:00:00.000Z",
		"status": "LIVE",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	},
	"transcriptDownloadUrl": "https://example.com/transcript.csv",
	"transcriptDownloadUrlExpiry": "2026-06-10T10:30:00.000Z"
}
```

### `meeting.summary`

```json
{
	"event": "meeting.summary",
	"meeting": {
		"id": "bbb8940e-1b97-402a-97d6-2708b7feca41",
		"sessionId": "05e57591-d89e-45c9-ae44-08dc1eaad0e0",
		"organizedBy": {
			"id": "c94c437b-592a-4a39-b9e2-47ef1451e43b",
			"name": "Example organization"
		}
	},
	"summaryDownloadUrl": "https://example.com/summary.txt",
	"summaryDownloadUrlExpiry": "2026-06-10T10:30:00.000Z"
}
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/webhooks/#page","headline":"Webhooks · Cloudflare Realtime docs","description":"Receive RealtimeKit events in your application through signed HTTP callbacks.","url":"https://developers.cloudflare.com/realtime/realtimekit/webhooks/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-12","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Build real-time serverless video, audio, and data applications with Cloudflare Realtime SFU.
title: Realtime SFU
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Realtime SFU

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/sfu/#page","headline":"Overview · Cloudflare Realtime docs","description":"Build real-time serverless video, audio, and data applications with Cloudflare Realtime SFU.","url":"https://developers.cloudflare.com/realtime/sfu/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Compare Cloudflare Realtime SFU with traditional centralized SFUs for WebRTC applications.
title: Realtime vs Regular SFUs
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Realtime vs Regular SFUs

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/calls-vs-sfus/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/calls-vs-sfus/#page","headline":"Realtime vs Regular SFUs · Cloudflare Realtime docs","description":"Compare Cloudflare Realtime SFU with traditional centralized SFUs for WebRTC applications.","url":"https://developers.cloudflare.com/realtime/sfu/calls-vs-sfus/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Changelog and release notes for the Cloudflare Realtime SFU platform.
title: Changelog
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Changelog

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/changelog/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

[Subscribe to RSS](https://developers.cloudflare.com/realtime/sfu/changelog/index.xml)

## 2026-08-13

**DataChannels reliability and ordering (ordered, maxRetransmits, maxPacketLifeTime)**

DataChannels now accept reliability settings on both publisher (`location: "local"`) and subscriber (`location: "remote"`) channels, so unreliable and unordered delivery is honored end to end.

* `ordered` (default `true`) controls in-order delivery. When `false`, a delayed message does not block later messages.
* Set `ordered: false` and omit both retry fields for reliable, unordered delivery.
* `maxRetransmits` or `maxPacketLifeTime` enable partial reliability; set `maxRetransmits: 0` for fully unreliable delivery.
* Set the same fields on local and remote `/datachannels/new` calls, and mirror them on `createDataChannel()` for negotiated channels.
* Docs: [DataChannels](https://developers.cloudflare.com/realtime/sfu/datachannels/), [Connection API](https://developers.cloudflare.com/realtime/sfu/https-api/)

## 2026-07-23

**DataChannels return-to-publisher (canReply)**

DataChannels now support opt-in reverse traffic from one subscriber back to the publisher on the same channel. When a subscriber pulls a remote DataChannel with `canReply: true` (or is granted it later via `datachannels/update`), the SFU admits that subscriber's messages to the publisher only.

* Opt-in per subscriber; defaults to `false`, so existing publisher-to-subscriber fan-out is unchanged.
* Reverse traffic is not fanned out to other subscribers.
* Exclusive: at most one subscriber holds `canReply` per publisher DataChannel; a new grant replaces the previous holder.
* Grant or revoke without re-pulling via `PUT .../datachannels/update`.
* Docs: [DataChannels](https://developers.cloudflare.com/realtime/sfu/datachannels/), [Limits, timeouts and quotas](https://developers.cloudflare.com/realtime/sfu/limits/)

## 2026-06-10

**DataChannels subscriber acknowledgment gate (waitForAck)**

DataChannels now support an opt-in subscriber acknowledgment gate. When a subscriber pulls a remote DataChannel with `waitForAck: true`, the SFU holds delivery to that subscriber until it sends its first message (the acknowledgment). This avoids losing the first messages before the subscriber is ready to handle them.

* Opt-in per subscriber; defaults to `false`, so existing behavior is unchanged.
* The acknowledgment is consumed by the SFU and is not forwarded, so the channel stays unidirectional.
* Send the acknowledgment within 30 seconds of creating the remote DataChannel.
* Docs: [DataChannels](https://developers.cloudflare.com/realtime/sfu/datachannels/), [Limits, timeouts and quotas](https://developers.cloudflare.com/realtime/sfu/limits/)

## 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://developers.cloudflare.com/realtime/sfu/changelog/#page","headline":"Changelog · Cloudflare Realtime docs","description":"Changelog and release notes for the Cloudflare Realtime SFU platform.","url":"https://developers.cloudflare.com/realtime/sfu/changelog/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Send low-latency application data between clients with Realtime SFU DataChannels.
title: DataChannels
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# DataChannels

Last updated Aug 13, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/datachannels/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Use Realtime SFU DataChannels to send low-latency application data over WebRTC. Common payloads include chat messages, game state, sensor updates, and control events.

Use Realtime SFU media tracks, rather than DataChannels, to send audio and video.

graph LR
    A[Publisher] -->|Application data| B[Cloudflare Realtime SFU]
    B -->|Application data| C@{ shape: procs, label: "Subscribers"}

Each publisher can send a named DataChannel to multiple subscribers. By default, messages flow from the publisher to subscribers.

## Set up a DataChannel

1. Create a Realtime session for the publisher and one for each subscriber.
2. On each session, establish a DataChannel transport with `POST /apps/{appId}/sessions/{sessionId}/datachannels/establish`. Complete any required Session Description Protocol (SDP) exchange before creating channels.
3. On the publisher session, create a named DataChannel with `POST /apps/{appId}/sessions/{sessionId}/datachannels/new` and set `location` to `"local"`.
4. On each subscriber session, call the same endpoint with `location` set to `"remote"`. Set `sessionId` to the publisher session ID and use the same `dataChannelName`.
5. In each client, call `createDataChannel()` with `negotiated: true` and the ID returned by the API.
6. After the DataChannels open, send messages from the publisher.

## Configure message delivery

DataChannels use reliable, ordered delivery by default. Choose partial reliability or unordered delivery when recent data matters more than delayed data, such as game state or live sensor updates.

Set these optional fields when you create a DataChannel with the [HTTPS API](https://developers.cloudflare.com/realtime/sfu/https-api/):

* `ordered` (`boolean`, default `true`): Set to `false` to allow messages to arrive out of order. A delayed message will not block later messages.
* `maxRetransmits` (`integer`): Limits retransmission attempts after the first send. Set to `0` for no retransmissions, or omit for no retransmission limit.
* `maxPacketLifeTime` (`integer`): Limits how long, in milliseconds, the transport attempts delivery. Omit for no lifetime limit.

`maxRetransmits` and `maxPacketLifeTime` are mutually exclusive. Do not set both on the same channel.

Ordering and retry behavior are independent. For reliable, unordered delivery, set `ordered: false` and omit both `maxRetransmits` and `maxPacketLifeTime`. Messages may arrive out of order, but the transport continues to retry failed deliveries.

Use the same values on the publisher (`location: "local"`), each subscriber (`location: "remote"`), and each client's `createDataChannel()` call. Realtime DataChannels use negotiated IDs, so the browser does not receive these settings from the remote peer.

Create an unreliable, unordered publisher channel:

```json
{
	"dataChannels": [
		{
			"location": "local",
			"dataChannelName": "player-state",
			"ordered": false,
			"maxRetransmits": 0
		}
	]
}
```

Then create the matching remote channel on the subscriber with the same reliability fields:

```json
{
	"dataChannels": [
		{
			"location": "remote",
			"sessionId": "<PUBLISHER_SESSION_ID>",
			"dataChannelName": "player-state",
			"ordered": false,
			"maxRetransmits": 0
		}
	]
}
```

Create the matching browser DataChannel with the same settings. In this example, `pc` is the active `RTCPeerConnection`, and `resp` is the API response for the channel.

```ts
const dc = pc.createDataChannel("player-state", {
	negotiated: true,
	id: resp.dataChannels[0].id,
	ordered: false,
	maxRetransmits: 0,
});
```

For partial reliability, choose a retransmission limit or packet lifetime based on how long the payload remains useful.

## Wait for subscriber readiness (`waitForAck`)

Set `waitForAck: true` on a remote DataChannel to delay delivery until the subscriber signals that it is ready.

* `waitForAck` applies only to `location: "remote"` DataChannels and defaults to `false`.
* While the gate is closed, the SFU holds delivery to that subscriber.
* After the DataChannel opens, the subscriber sends any message, such as `"ack"`. The SFU consumes this first message, opens the gate, and starts forwarding publisher messages.
* The acknowledgment must reach the SFU within 30 seconds after creating the remote DataChannel. Otherwise, the SFU tears down the gated channel. Create the remote DataChannel again to retry.

Without [canReply](#return-to-publisher-canreply), later subscriber messages are not forwarded to the publisher.

Create a remote DataChannel with the gate enabled by calling `POST /apps/{appId}/sessions/{sessionId}/datachannels/new` on the subscriber session:

```json
{
	"dataChannels": [
		{
			"location": "remote",
			"sessionId": "<PUBLISHER_SESSION_ID>",
			"dataChannelName": "my-channel",
			"waitForAck": true
		}
	]
}
```

Then, on the subscriber, send the acknowledgment once the DataChannel is open. This example assumes you have initialized `API_BASE`, `headers`, and `pc`, and defined a `waitForOpen()` helper.

```ts
const response = await fetch(
	`${API_BASE}/sessions/${subscriberId}/datachannels/new`,
	{
		method: "POST",
		headers,
		body: JSON.stringify({
			dataChannels: [
				{
					location: "remote",
					sessionId: publisherId,
					dataChannelName: "my-channel",
					waitForAck: true,
				},
			],
		}),
	},
);

if (!response.ok) {
	throw new Error(`Failed to create DataChannel: ${response.status}`);
}

const resp = await response.json();
const channelId = resp.dataChannels?.[0]?.id;
if (channelId === undefined) {
	throw new Error("DataChannel response did not include an id");
}

const dc = pc.createDataChannel("my-channel-subscribed", {
	negotiated: true,
	id: channelId,
});

await waitForOpen(dc);
dc.send("ack"); // The first message opens the gate.
```

## Return to publisher (canReply)

Messages travel from the publisher to subscribers by default. Set `canReply: true` when one subscriber needs to respond on the same channel, such as an operator responding to a device that publishes telemetry.

graph LR
    P[Publisher] -->|Publisher messages| SFU[Cloudflare Realtime SFU]
    SFU -->|Publisher messages| S1[Subscriber with canReply]
    SFU -->|Publisher messages| S2[Other subscribers]
    S1 -->|Reply| SFU
    SFU -->|Reply| P

`canReply` controls reply access as follows:

* `canReply` applies only to `location: "remote"` DataChannels and defaults to `false`.
* At most one subscriber can have reply access for each publisher DataChannel. Granting access to another subscriber replaces the previous subscriber.
* The SFU forwards replies only from the subscriber with access.
* The publisher receives the replies. Other subscribers do not.

### Allow replies when subscribing

Create the remote DataChannel on the subscriber session with `canReply: true`:

```json
{
	"dataChannels": [
		{
			"location": "remote",
			"sessionId": "<PUBLISHER_SESSION_ID>",
			"dataChannelName": "my-channel",
			"canReply": true
		}
	]
}
```

Example flow:

1. On the publisher, create a local DataChannel named `my-channel`.
2. On the subscriber, pull the DataChannel with `canReply: true` and open the negotiated channel in the browser.
3. From the publisher, send a message to the subscriber.
4. From the subscriber, reply on the same channel. The publisher receives the reply.

### Change reply access

To change reply access without recreating the remote DataChannel, call `PUT /apps/{appId}/sessions/{subscriberSessionId}/datachannels/update`:

```json
{
	"dataChannels": [
		{
			"location": "remote",
			"sessionId": "<PUBLISHER_SESSION_ID>",
			"dataChannelName": "my-channel",
			"canReply": true
		}
	]
}
```

Use the same body with `"canReply": false` to revoke. The following table lists common patterns:

| Goal                              | Action                                                                                                         |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| Allow replies after subscribing   | Create the remote DataChannel without canReply, then update it with canReply: true.                            |
| Move access to another subscriber | On the new subscriber, update the DataChannel with canReply: true. The previous subscriber loses reply access. |
| Stop replies                      | On the subscriber with reply access, update the DataChannel with canReply: false.                              |

```ts
// The subscriber already pulled "my-channel" without canReply.
// Allow replies later.
const response = await fetch(
	`${API_BASE}/sessions/${subscriberId}/datachannels/update`,
	{
		method: "PUT",
		headers,
		body: JSON.stringify({
			dataChannels: [
				{
					location: "remote",
					sessionId: publisherId,
					dataChannelName: "my-channel",
					canReply: true,
				},
			],
		}),
	},
);

if (!response.ok) {
	throw new Error(`Failed to update DataChannel: ${response.status}`);
}

// The same negotiated DataChannel can now send replies to the publisher.
dc.send(JSON.stringify({ type: "reply", body: "pong" }));
```

### Combine acknowledgment and replies

You can set both `canReply` and `waitForAck` on the same remote DataChannel. The subscriber's first message opens the acknowledgment gate and is not forwarded. Later subscriber messages are forwarded to the publisher while that subscriber has reply access.

## Example

Review the [DataChannel echo example ↗](https://github.com/cloudflare/realtime-examples/tree/main/echo-datachannels) for complete transport, publishing, and subscription setup.

The example places an app token in browser code for local testing. In production, keep the token on your backend.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/datachannels/#page","headline":"DataChannels · Cloudflare Realtime docs","description":"Send low-latency application data between clients with Realtime SFU DataChannels.","url":"https://developers.cloudflare.com/realtime/sfu/datachannels/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-08-13","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Explore demo applications and interactive visualizations for Cloudflare Realtime SFU.
title: Demos
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Demos

Last updated May 19, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/demos/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

Learn how you can use Realtime within your existing architecture.

## 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)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/sfu/demos/#page","headline":"Demos · Cloudflare Realtime docs","description":"Explore demo applications and interactive visualizations for Cloudflare Realtime SFU.","url":"https://developers.cloudflare.com/realtime/sfu/demos/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-05-19","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Reference architecture for building a video calling application with Realtime SFU.
title: Example architecture
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Example architecture

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/example-architecture/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

![Example Architecture](https://developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=745,height=475,format=webp/_astro/video-calling-application.CIYa-lzM.png)

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/example-architecture/#page","headline":"Example architecture · Cloudflare Realtime docs","description":"Reference architecture for building a video calling application with Realtime SFU.","url":"https://developers.cloudflare.com/realtime/sfu/example-architecture/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Create your first Realtime SFU app and get your App ID and secret.
title: Quickstart guide
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Quickstart guide

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/get-started/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/get-started/#page","headline":"Quickstart guide · Cloudflare Realtime docs","description":"Create your first Realtime SFU app and get your App ID and secret.","url":"https://developers.cloudflare.com/realtime/sfu/get-started/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Manage Realtime SFU sessions and media tracks using the HTTPS connection API.
title: Connection API
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Connection API

Last updated Jul 30, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/https-api/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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`
* **Update Tracks**: Changes tracks by reusing existing transceivers.  
  * `PUT /apps/{appId}/sessions/{sessionId}/tracks/update`
* **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`
* **Establish a DataChannel Transport**: Pulls the `server-events` channel to establish DataChannel transport. Call this before you add DataChannels.  
  * `POST /apps/{appId}/sessions/{sessionId}/datachannels/establish`
* **Add DataChannels**: Publishes a local DataChannel or pulls a remote one (optional `waitForAck`, `canReply`).  
  * `POST /apps/{appId}/sessions/{sessionId}/datachannels/new`
* **Update DataChannels**: Grants or revokes flags on an already pulled remote DataChannel (for example `canReply`).  
  * `PUT /apps/{appId}/sessions/{sessionId}/datachannels/update`
* **Close DataChannels**: Removes a specified DataChannel from the session.  
  * `PUT /apps/{appId}/sessions/{sessionId}/datachannels/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/realtime-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

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/https-api/#page","headline":"Connection API · Cloudflare Realtime docs","description":"Manage Realtime SFU sessions and media tracks using the HTTPS connection API.","url":"https://developers.cloudflare.com/realtime/sfu/https-api/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-30","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Cloudflare Realtime SFU adds low-latency WebRTC audio, video, and data to your applications.
title: Introduction
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Introduction

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/introduction/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/sfu/introduction/#page","headline":"Introduction · Cloudflare Realtime docs","description":"Cloudflare Realtime SFU adds low-latency WebRTC audio, video, and data to your applications.","url":"https://developers.cloudflare.com/realtime/sfu/introduction/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Realtime SFU rate limits, track timeouts, session constraints, and free tier quotas.
title: Limits, timeouts and quotas
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Limits, timeouts and quotas

Last updated Aug 13, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/limits/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.
* **DataChannel canReply exclusivity**: At most one subscriber may hold `canReply` for a given publisher DataChannel at a time. Granting `canReply` to another subscriber replaces the previous selection. The publisher receives reverse traffic only, and it is not fanned out to other subscribers. For more information, refer to [Return to publisher (canReply)](https://developers.cloudflare.com/realtime/sfu/datachannels/#return-to-publisher-canreply).

## 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.
* **DataChannel acknowledgment timeout**: When `waitForAck` is enabled on a remote DataChannel, the subscriber must send its first message (the acknowledgment) within 30 seconds of creating the channel. If it does not, the SFU tears down the gated channel and forwards no messages. Create the remote DataChannel again to retry.

## 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/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/limits/#page","headline":"Limits, timeouts and quotas · Cloudflare Realtime docs","description":"Realtime SFU rate limits, track timeouts, session constraints, and free tier quotas.","url":"https://developers.cloudflare.com/realtime/sfu/limits/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-08-13","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Bridge WebRTC and other transport protocols using Realtime SFU media adapters.
title: Media Transport Adapters
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Media Transport Adapters

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```plaintext
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)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/#page","headline":"Media Transport Adapters · Cloudflare Realtime docs","description":"Bridge WebRTC and other transport protocols using Realtime SFU media adapters.","url":"https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Stream audio and video between WebRTC tracks and WebSocket endpoints using Realtime SFU.
title: WebSocket adapter
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# WebSocket adapter

Last updated Jun 3, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/websocket-adapter/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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

### 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)
* Automatically retries the same WebSocket endpoint for up to 5 seconds after brief disconnects or endpoint restarts. Refer to [Automatic reconnection for streaming](#automatic-reconnection-for-streaming).

## API reference

### Create adapter

```plaintext
POST /v1/apps/{appId}/adapters/websocket/new
```

#### Request body

```json
{
  "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

```json
{
  "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

```json
{
  "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

```json
{
  "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.
* The SFU automatically retries the same WebSocket endpoint for up to 5 seconds after brief disconnects.

### Close adapter

```plaintext
POST /v1/apps/{appId}/adapters/websocket/close
```

#### Request body

```json
{
	"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)

```proto
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. For WebRTC to WebSocket streaming, briefly retries the same endpoint after disconnects
5. Connection closes when closed, on error, or after the automatic reconnect window is exhausted

## Automatic reconnection for streaming

When you use the WebSocket adapter in [Stream mode (egress)](#stream-mode-egress) to send live audio or video from the SFU to your own WebSocket endpoint (`WebRTC → WebSocket`), the SFU automatically reconnects after brief endpoint disconnects or restarts.

The SFU retries the same WebSocket endpoint for up to 5 seconds. No API changes are required. If the endpoint remains unavailable after the reconnect window, the adapter closes and your application must create a new adapter to resume streaming.

### Media buffering during reconnect

Automatic reconnection uses live-first buffering while the WebSocket endpoint is temporarily unavailable:

* **Audio buffering**: The SFU keeps a short, bounded backlog of audio frames. If the interruption lasts longer than the backlog can cover, older audio may be dropped so reconnect recovery stays bounded.
* **Video buffering**: The SFU keeps only the latest available JPEG frame. Newer frames replace older frames while reconnecting, so video resumes near-live instead of replaying stale frames.
* **Delivery behavior**: Buffering reduces media loss during brief interruptions, but it is not a replay mechanism and does not guarantee gapless or exactly-once delivery.

Automatic reconnection applies only when using [Stream mode (egress)](#stream-mode-egress). It retries the same endpoint only and does not provide multi-endpoint failover.

## 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
* When using [Stream mode (egress)](#stream-mode-egress), handle adapter closure after the 5-second [automatic reconnect window](#automatic-reconnection-for-streaming) is exhausted.
* When ingesting from WebSocket to WebRTC, implement reconnection logic in your WebSocket client if the connection drops.
* Make your WebSocket endpoint restart-safe so it can accept reconnects to the same URL during brief restarts.

### 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)
* **Streaming reconnects**: When using [Stream mode (egress)](#stream-mode-egress), the SFU automatically retries the same WebSocket endpoint for short disconnects only. It does not fail over to alternate endpoints.
* **Best-effort recovery**: Brief reconnects reduce media loss, but do not guarantee gapless or exactly-once delivery.
* **Video reconnect behavior**: Video resumes from the latest available JPEG frame rather than replaying older frames.
* **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: When using [Stream mode (egress)](#stream-mode-egress), the SFU automatically retries the same WebSocket endpoint for up to 5 seconds. If the endpoint comes back within that window, streaming resumes automatically.

Audio uses a short bounded backlog to reduce audible loss during brief interruptions. Video resumes from the latest available JPEG frame instead of replaying older frames.

If the endpoint remains unavailable after the 5-second [automatic reconnect window](#automatic-reconnection-for-streaming), the adapter closes and must be recreated.

When ingesting from WebSocket to WebRTC, your WebSocket client should reconnect and recreate the adapter as needed.

**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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/websocket-adapter/#page","headline":"WebSocket adapter · Cloudflare Realtime docs","description":"Stream audio and video between WebRTC tracks and WebSocket endpoints using Realtime SFU.","url":"https://developers.cloudflare.com/realtime/sfu/media-transport-adapters/websocket-adapter/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-03","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Cloudflare Realtime SFU and TURN pricing, free tier details, and billing information.
title: Pricing
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Pricing

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/pricing/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/pricing/#page","headline":"Pricing · Cloudflare Realtime docs","description":"Cloudflare Realtime SFU and TURN pricing, free tier details, and billing information.","url":"https://developers.cloudflare.com/realtime/sfu/pricing/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Understand Realtime SFU core concepts including applications, sessions, and tracks.
title: Sessions and Tracks
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Sessions and Tracks

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/sessions-tracks/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/sessions-tracks/#page","headline":"Sessions and Tracks · Cloudflare Realtime docs","description":"Understand Realtime SFU core concepts including applications, sessions, and tracks.","url":"https://developers.cloudflare.com/realtime/sfu/sessions-tracks/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Send multiple video quality levels with WebRTC simulcast on Realtime SFU.
title: Simulcast
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Simulcast

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/sfu/simulcast/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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 highest resolution 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:

```txt
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:

```js
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).

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/sfu/simulcast/#page","headline":"Simulcast · Cloudflare Realtime docs","description":"Send multiple video quality levels with WebRTC simulcast on Realtime SFU.","url":"https://developers.cloudflare.com/realtime/sfu/simulcast/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Cloudflare Realtime TURN relays WebRTC traffic through NATs and firewalls on a global network.
title: TURN Service
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# TURN Service

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/turn/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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 scenarios.

## 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/turn/#page","headline":"TURN Service · Cloudflare Realtime docs","description":"Cloudflare Realtime TURN relays WebRTC traffic through NATs and firewalls on a global network.","url":"https://developers.cloudflare.com/realtime/turn/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Query Cloudflare Realtime TURN usage metrics and traffic data via the GraphQL API.
title: Analytics
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Analytics

Last updated Jun 3, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/turn/analytics/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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.

```graphql
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:

```json
{
  "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

```plaintext
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:

```json
{
  "data": {
    "viewer": {
      "usage": [
        {
          "callsTurnUsageAdaptiveGroups": [
            {
              "dimensions": {
                "keyId": "82a58d0aeabfa8f4a4e0c4a9efc9cda5"
              },
              "sum": {
                "egressBytes": 160040068147
              }
            }
          ]
        }
      ]
    }
  },
  "errors": null
}
```

### Top TURN custom identifiers

```graphql
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:

```json
{
  "data": {
    "viewer": {
      "accounts": [
        {
          "callsTurnUsageAdaptiveGroups": [
            {
              "dimensions": {
                "customIdentifier": "some identifier"
              },
              "sum": {
                "egressBytes": 160040068147
              }
            }
          ]
        }
      ]
    }
  },
  "errors": null
}
```

### Usage for a specific custom identifier

```graphql
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:

```json
{
  "data": {
    "viewer": {
      "usage": [
        {
          "callsTurnUsageAdaptiveGroups": [
            {
              "dimensions": {
                "customIdentifier": "tango",
                "keyId": "74007022d80d7ebac4815fb776b9d3ed"
              },
              "sum": {
                "egressBytes": 162641324
              }
            }
          ]
        }
      ]
    }
  },
  "errors": null
}
```

### Usage as a timeseries (for graphs)

```graphql
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:

```plaintext
{
  "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.

```graphql
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:

```json
{
  "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.

```graphql
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:

```json
{
  "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:

```graphql
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:

```json
{
  "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:

```graphql
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:

```json
{
  "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:

```graphql
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:

```json
{
	"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/)

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/turn/analytics/#page","headline":"Analytics · Cloudflare Realtime docs","description":"Query Cloudflare Realtime TURN usage metrics and traffic data via the GraphQL API.","url":"https://developers.cloudflare.com/realtime/turn/analytics/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-03","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Use custom domains with Cloudflare Realtime TURN via CNAME DNS records.
title: Custom TURN domains
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Custom TURN domains

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/turn/custom-domains/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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`.

Caution

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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/turn/custom-domains/#page","headline":"Custom TURN domains · Cloudflare Realtime docs","description":"Use custom domains with Cloudflare Realtime TURN via CNAME DNS records.","url":"https://developers.cloudflare.com/realtime/turn/custom-domains/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Frequently asked questions about Cloudflare Realtime TURN pricing, credentials, and usage.
title: FAQ
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# FAQ

Last updated Jul 14, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/turn/faq/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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.

### Is Cloudflare Realtime TURN FIPS 140-3 compliant?

Cloudflare Realtime TURN supports FIPS 140-3 when encryption is used, such as TURN over TLS. TURN itself does not have any control over the encryption of the data flowing underneath the TURN data layer. For end-to-end encryption of the relayed media or data, the layer above TURN must provide that encryption (for example, DTLS when TURN is used with WebRTC).

### 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/).

### 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.

## Architecture and use cases

### 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.

### 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.

### When should I use TURN versus SFU?

TURN and SFU solve different problems and are often used together.

Use TURN when you have a point-to-point connection between two peers and you need to traverse NATs or firewalls. Both peers exchange media directly through the relay without any server-side media processing.

Use SFU when you need fan-out, meaning one publisher sending media to many subscribers, or many publishers exchanging media in a group. The SFU forwards selected media streams between participants and supports features like simulcast and subscriber-side track selection.

If your use case is one-to-one communication, such as a teleoperation link between an operator and a remote device, TURN by itself is usually sufficient. Adding an SFU is unnecessary complexity for that topology.

### Is there overhead to using SFU compared to forcing TURN relay on every connection?

No. Cloudflare Realtime TURN and SFU run on the same fleet of machines on Cloudflare's global network and share the same data path. There is no meaningful latency or throughput penalty for choosing one over the other.

The decision should be driven by topology, not performance:

* Use TURN for point-to-point relay.
* Use SFU when you need fan-out, group calls, or selective forwarding of tracks.

### If only one peer connects through TURN, will latency be the same as when both peers relay through TURN?

Not necessarily. When both peers relay through Cloudflare Realtime TURN, the traffic between the two Cloudflare edges can use the Cloudflare backbone, which means Cloudflare controls the path end to end. When only one peer uses TURN, the other leg traverses the public Internet, and latency and packet loss depend on the interconnect between that peer and the nearest Cloudflare data center.

The more consistent improvement from using TURN on both ends is reliability and packet loss behavior, not raw latency. Backbone latency is typically better than the public Internet, but the size of the latency improvement varies by geography. The reduction in packet loss is generally more predictable.

### Can I use Cloudflare Realtime TURN for robotics and teleoperation?

Yes. Cloudflare Realtime TURN is a good fit for robotics teleoperation, remote vehicle control, and fleet management workloads that require low-latency, two-way media or data channels between an operator and a remote device.

Teleoperation typically uses TURN in point-to-point mode, with one end on the operator's network and the other on the robot's cellular or wired uplink. WebRTC and DTLS provide end-to-end encryption of the media stream, and Cloudflare Realtime TURN handles NAT traversal and relay between the two endpoints. When both endpoints connect through TURN, traffic between Cloudflare edges can ride the Cloudflare backbone, which improves packet loss characteristics on long-distance links.

For workloads that need to fan out a robot's telemetry or camera feed to multiple subscribers (for example, an operator, a supervisor, and a fleet dashboard), Cloudflare Realtime SFU can be used in addition to TURN. Cloudflare's Media over QUIC (MoQ) implementation is also worth evaluating for telemetry and teleoperation when you control both ends of the connection, since it gives you more explicit control over reliability and retransmission behavior than WebRTC.

## 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/turn/faq/#page","headline":"FAQ · Cloudflare Realtime docs","description":"Frequently asked questions about Cloudflare Realtime TURN pricing, credentials, and usage.","url":"https://developers.cloudflare.com/realtime/turn/faq/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-07-14","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Create TURN keys and generate short-lived credentials for Cloudflare Realtime TURN clients.
title: Generate Credentials
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Generate Credentials

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/turn/generate-credentials/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

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:

```bash
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:

```json
{
  "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`:

```js
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:

```bash
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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/turn/generate-credentials/#page","headline":"Generate Credentials · Cloudflare Realtime docs","description":"Create TURN keys and generate short-lived credentials for Cloudflare Realtime TURN clients.","url":"https://developers.cloudflare.com/realtime/turn/generate-credentials/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Migrate from self-hosted or third-party TURN servers to Cloudflare Realtime TURN.
title: Replacing existing TURN servers
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# Replacing existing TURN servers

Last updated Jun 5, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/turn/replacing-existing/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

If you are an existing TURN provider but would like to switch to providing Cloudflare Realtime TURN for your customers, there are 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:

```bash
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.

```plaintext
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.

```plaintext
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
          }
        }
      }
    }
  }
```

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/turn/replacing-existing/#page","headline":"Replacing existing TURN servers · Cloudflare Realtime docs","description":"Migrate from self-hosted or third-party TURN servers to Cloudflare Realtime TURN.","url":"https://developers.cloudflare.com/realtime/turn/replacing-existing/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-05","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: Supported TURN protocols, RFCs, and STUN features on Cloudflare Realtime TURN.
title: TURN Feature Matrix
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# TURN Feature Matrix

Last updated Apr 21, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/turn/rfc-matrix/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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)                      |

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/turn/rfc-matrix/#page","headline":"TURN Feature Matrix · Cloudflare Realtime docs","description":"Supported TURN protocols, RFCs, and STUN features on Cloudflare Realtime TURN.","url":"https://developers.cloudflare.com/realtime/turn/rfc-matrix/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```

---

---
description: TURN relays traffic through NATs and firewalls to enable peer-to-peer WebRTC communication.
title: What is TURN?
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt  
> Use this file to discover all available pages before exploring further.

# What is TURN?

Last updated Jun 5, 2026|Copy as Markdown|[View as Markdown](https://developers.cloudflare.com/realtime/turn/what-is-turn/index.md)|[Agent setup](https://developers.cloudflare.com/agent-setup/)

## 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 an 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.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/turn/what-is-turn/#page","headline":"What is TURN? · Cloudflare Realtime docs","description":"TURN relays traffic through NATs and firewalls to enable peer-to-peer WebRTC communication.","url":"https://developers.cloudflare.com/realtime/turn/what-is-turn/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-06-05","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```