dotfiles/dot_agents/skills/cloudflare/references/realtimekit

Cloudflare RealtimeKit

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

Overview

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

Use cases: Team meetings, webinars, social video, audio calls, interactive plugins

Core Concepts

• App: Workspace grouping meetings, participants, presets, recordings. Use separate Apps for staging/production
• Meeting: Re-usable virtual room. Each join creates new Session
• Session: Live meeting instance. Created on first join, ends after last leave
• Participant: User added via REST API. Returns authToken for client SDK. Do not reuse tokens
• Preset: Reusable permission/UI template (permissions, meeting type, theme). Applied at participant creation
• Peer ID (id): Unique per session, changes on rejoin
• Participant ID (userId): Persistent across sessions

Quick Start

1. Create App & Meeting (Backend)

# Create app
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/apps' \
  -H 'Authorization: Bearer <api_token>' \
  -d '{"name": "My RealtimeKit App"}'

# Create meeting
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings' \
  -H 'Authorization: Bearer <api_token>' \
  -d '{"title": "Team Standup"}'

# Add participant
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings/<meeting_id>/participants' \
  -H 'Authorization: Bearer <api_token>' \
  -d '{"name": "Alice", "preset_name": "host"}'
# Returns: { authToken }

2. Client Integration

React:

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

function App() {
  return <RtkMeeting authToken="<participant_auth_token>" onLeave={() => {}} />;
}

Core SDK:

import RealtimeKitClient from '@cloudflare/realtimekit';

const meeting = new RealtimeKitClient({ authToken: '<token>', video: true, audio: true });
await meeting.join();

Reading Order

Task	Files
Quick integration	README only
Custom UI	README → patterns → api
Backend setup	README → configuration
Debug issues	gotchas
Advanced features	patterns → api

RealtimeKit vs Realtime SFU

Choose	When
RealtimeKit	Need pre-built UI, fast integration, React/Angular/HTML
Realtime SFU	Building from scratch, custom WebRTC, full control

RealtimeKit is built on Realtime SFU but abstracts WebRTC complexity with UI components and SDKs.

Which Package?

Need pre-built meeting UI?

• React → @cloudflare/realtimekit-react-ui (<RtkMeeting>)
• Angular → @cloudflare/realtimekit-angular-ui
• HTML/Vanilla → @cloudflare/realtimekit-ui

Need custom UI?

• Core SDK → @cloudflare/realtimekit (RealtimeKitClient) - full control

Need raw WebRTC control?

• See realtime-sfu/ reference

In This Reference

• Configuration - Setup, installation, wrangler config
• API - Meeting object, REST API, SDK methods
• Patterns - Common workflows, code examples
• Gotchas - Common issues, troubleshooting

See Also

• Workers - Backend integration
• D1 - Meeting metadata storage
• R2 - Recording storage
• KV - Session management

Reference Links

• Official Docs: https://developers.cloudflare.com/realtime/realtimekit/
• API Reference: https://developers.cloudflare.com/api/resources/realtime_kit/
• Examples: https://github.com/cloudflare/realtimekit-web-examples
• Dashboard: https://dash.cloudflare.com/?to=/:account/realtime/kit