1# Cloudflare RealtimeKit
2 
3Expert guidance for building real-time video and audio applications using **Cloudflare RealtimeKit** - a comprehensive SDK suite for adding customizable live video and voice to web or mobile applications.
4 
5## Overview
6 
7RealtimeKit is Cloudflare's SDK suite built on Realtime SFU, abstracting WebRTC complexity with fast integration, pre-built UI components, global performance (300+ cities), and production features (recording, transcription, chat, polls).
8 
9**Use cases**: Team meetings, webinars, social video, audio calls, interactive plugins
10 
11## Core Concepts
12 
13- **App**: Workspace grouping meetings, participants, presets, recordings. Use separate Apps for staging/production
14- **Meeting**: Re-usable virtual room. Each join creates new **Session**
15- **Session**: Live meeting instance. Created on first join, ends after last leave
16- **Participant**: User added via REST API. Returns `authToken` for client SDK. **Do not reuse tokens**
17- **Preset**: Reusable permission/UI template (permissions, meeting type, theme). Applied at participant creation
18- **Peer ID** (`id`): Unique per session, changes on rejoin
19- **Participant ID** (`userId`): Persistent across sessions
20 
21## Quick Start
22 
23### 1. Create App & Meeting (Backend)
24 
25```bash
26# Create app
27curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/apps' \
28  -H 'Authorization: Bearer <api_token>' \
29  -d '{"name": "My RealtimeKit App"}'
30 
31# Create meeting
32curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings' \
33  -H 'Authorization: Bearer <api_token>' \
34  -d '{"title": "Team Standup"}'
35 
36# Add participant
37curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings/<meeting_id>/participants' \
38  -H 'Authorization: Bearer <api_token>' \
39  -d '{"name": "Alice", "preset_name": "host"}'
40# Returns: { authToken }
41```
42 
43### 2. Client Integration
44 
45**React**:
46```tsx
47import { RtkMeeting } from '@cloudflare/realtimekit-react-ui';
48 
49function App() {
50  return <RtkMeeting authToken="<participant_auth_token>" onLeave={() => {}} />;
51}
52```
53 
54**Core SDK**:
55```typescript
56import RealtimeKitClient from '@cloudflare/realtimekit';
57 
58const meeting = new RealtimeKitClient({ authToken: '<token>', video: true, audio: true });
59await meeting.join();
60```
61 
62## Reading Order
63 
64| Task | Files |
65|------|-------|
66| Quick integration | README only |
67| Custom UI | README → patterns → api |
68| Backend setup | README → configuration |
69| Debug issues | gotchas |
70| Advanced features | patterns → api |
71 
72## RealtimeKit vs Realtime SFU
73 
74| Choose | When |
75|--------|------|
76| **RealtimeKit** | Need pre-built UI, fast integration, React/Angular/HTML |
77| **Realtime SFU** | Building from scratch, custom WebRTC, full control |
78 
79RealtimeKit is built on Realtime SFU but abstracts WebRTC complexity with UI components and SDKs.
80 
81## Which Package?
82 
83Need pre-built meeting UI?
84- React → `@cloudflare/realtimekit-react-ui` (`<RtkMeeting>`)
85- Angular → `@cloudflare/realtimekit-angular-ui`
86- HTML/Vanilla → `@cloudflare/realtimekit-ui`
87 
88Need custom UI?
89- Core SDK → `@cloudflare/realtimekit` (RealtimeKitClient) - full control
90 
91Need raw WebRTC control?
92- See `realtime-sfu/` reference
93 
94## In This Reference
95 
96- [Configuration](./configuration.md) - Setup, installation, wrangler config
97- [API](./api.md) - Meeting object, REST API, SDK methods
98- [Patterns](./patterns.md) - Common workflows, code examples
99- [Gotchas](./gotchas.md) - Common issues, troubleshooting
100 
101## See Also
102 
103- [Workers](../workers/) - Backend integration
104- [D1](../d1/) - Meeting metadata storage
105- [R2](../r2/) - Recording storage
106- [KV](../kv/) - Session management
107 
108## Reference Links
109 
110- **Official Docs**: https://developers.cloudflare.com/realtime/realtimekit/
111- **API Reference**: https://developers.cloudflare.com/api/resources/realtime_kit/
112- **Examples**: https://github.com/cloudflare/realtimekit-web-examples
113- **Dashboard**: https://dash.cloudflare.com/?to=/:account/realtime/kit
114