/cloudflare-deploy

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

RealtimeKit vs Realtime SFU

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