Skip to content

Commit 8183445

Browse files
docs: added realtime kit documentation (#24293)
* docs: move realtime SFU docs into subfolder * docs: added index.tsx under realtime, and an introduction tab * docs: added realtimekit concepts * fix: rename Realtime Kit to RealtimeKit Co-authored-by: Harsh Shandilya <[email protected]> * fix: update CODEOWNERS for realtime docs * fix: broken links * fix: added dummy getting-started page to fix broken url * fix: hide sidebar temporarily * fix: added redirects for SFU routes --------- Co-authored-by: Harsh Shandilya <[email protected]>
1 parent 147fb10 commit 8183445

19 files changed

+277
-42
lines changed

.github/CODEOWNERS

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,9 @@
120120
/src/content/release-notes/queues.yaml @elithrar @jonesphillip @cloudflare/pcx-technical-writing
121121
/src/content/docs/r2/ @oxyjun @elithrar @jonesphillip @aninibread @harshil1712 @cloudflare/workers-docs @cloudflare/pcx-technical-writing
122122
/src/content/release-notes/r2.yaml @oxyjun @elithrar @aninibread @cloudflare/workers-docs @cloudflare/pcx-technical-writing
123-
/src/content/docs/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls
124-
/src/assets/images/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls
125-
/public/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls
123+
/src/content/docs/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls @roerohan @ravindra-dyte
124+
/src/assets/images/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls @roerohan @ravindra-dyte
125+
/public/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls @roerohan @ravindra-dyte
126126
/src/content/docs/stream/ @tsmith512 @ToriLindsay @cloudflare/pcx-technical-writing @renandincer @third774
127127
/src/content/release-notes/stream.yaml @tsmith512 @ToriLindsay @cloudflare/pcx-technical-writing
128128
/src/content/docs/workers/ @cloudflare/workers-docs @GregBrimble @irvinebroque @mikenomitch @korinne @WalshyDev @cloudflare/deploy-config @cloudflare/pcx-technical-writing @kodster28 @cloudflare/wrangler @cloudflare/workers-runtime-1 @cloudflare/wrangler
@@ -230,4 +230,4 @@
230230
/src/content/docs/web-analytics/ @angelampcosta @cloudflare/pcx-technical-writing
231231

232232
# AI Prompts for Cloudflare Workers development
233-
/public/workers/prompts/ @jahands @Maximo-Guk @jbwcloudflare @cloudflare/pcx-technical-writing
233+
/public/workers/prompts/ @jahands @Maximo-Guk @jbwcloudflare @cloudflare/pcx-technical-writing

public/__redirects

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2333,3 +2333,16 @@
23332333

23342334
# Calls
23352335
/calls/* /realtime/:splat 301
2336+
2337+
# Realtime
2338+
/realtime/limits /realtime/sfu/limits 302
2339+
/realtime/sessions-tracks /realtime/sfu/sessions-tracks/ 302
2340+
/realtime/get-started /realtime/sfu/get-started/ 302
2341+
/realtime/calls-vs-sfus /realtime/sfu/calls-vs-sfus/ 302
2342+
/realtime/https-api /realtime/sfu/https-api/ 302
2343+
/realtime/datachannels /realtime/sfu/datachannels/ 302
2344+
/realtime/simulcast /realtime/sfu/simulcast/ 302
2345+
/realtime/demos /realtime/sfu/demos/ 302
2346+
/realtime/example-architecture /realtime/sfu/example-architecture/ 302
2347+
/realtime/pricing /realtime/sfu/pricing/ 302
2348+
/realtime/changelog /realtime/sfu/changelog/ 302
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
pcx_content_type: concept
3+
title: Concepts
4+
sidebar:
5+
order: 3
6+
---
7+
8+
This page explains the core concepts and terminology used in RealtimeKit.
9+
10+
### Meeting
11+
12+
A **Meeting** is the fundamental communication channel in RealtimeKit. You can think of it like an event on your calendar - it's a persistent, long-lived container or "room" that serves as a blueprint for its [sessions](/realtime/concepts#session). Every session created for this meeting inherits the same base configuration, such as the title of the meeting and whether to automatically record the session when it starts. You add participants to the meeting, which grants them access to join a session of that meeting.
13+
14+
### Session
15+
16+
A **Session** is a single, live instance of a meeting. To continue the analogy, if a meeting is the calendar event, the session is the actual video call you join. It begins when the first participant joins and ends shortly after the last participant leaves. Each session is unique and has its own lifecycle, including its own set of participants and associated data like chat messages and recordings.
17+
18+
For example, you might have a recurring "Weekly Standup" **meeting** with five participants added to it. The standup that takes place on Monday, August 11th at 11:30 AM is a specific **session**. All five participants can join this session using their unique `authToken`. For the following week's standup, you could create a new meeting and add participants again, or you could simply reuse the existing meeting and auth tokens (as long as they haven't expired) to create a new session.
19+
20+
### Preset
21+
22+
A **Preset** is a powerful template that defines a participant's role, permissions, and UI experience within a session. Beyond controlling permissions for actions like producing video and audio, sharing screens, and creating polls, presets also allow you to customize the look and feel of the UI, including colors and themes to match your app's branding.
23+
24+
Different participants in the same meeting can have different presets, allowing for complex and flexible roles. For example, in a large ed-tech class:
25+
26+
- The **teacher** might join with a `webinar-host` preset, giving them full control to share video, audio, and their screen.
27+
- **Students** would join with a `webinar-participant` preset, which restricts them from sharing media but allows them to use the chat to ask questions.
28+
- A **teaching assistant** could join with a `group-call-host` preset, enabling them to view all participants in a grid to monitor the class.
29+
30+
### Participant
31+
32+
A **Participant** is the server-side representation of a user within a session. When you add a user to a meeting via the REST API, a participant is created. This API call returns a unique `authToken` that the client-side SDK uses to join the session and authenticate the user.
33+
34+
### Peer
35+
36+
A **Peer** is the client-side representation of a [participant](/realtime/concepts#participant) in a session. While the terms are sometimes used interchangeably, a peer represents a specific instance of a participant joining the meeting. For example, if a single user joins the same meeting from two different browser tabs, they will have the same participant ID (also referred to as a user ID) but two unique peer IDs.
37+
38+
### Stage
39+
40+
The **Stage** is the logical space within a video call where participants can actively share their audio and video. In use cases like webinars, a participant's preset determines whether they have permission to be "on stage" as a presenter or if they are an audience member who only consumes the content.
41+
42+
### Waiting Room
43+
44+
The **Waiting Room** is a virtual lobby that provides an extra layer of security. When enabled, participants are held in the waiting room until a host with the proper permissions explicitly admits them into the main session. This is useful for controlling access to private or sensitive meetings.
45+
46+
### Core SDK
47+
48+
The **Core SDK** is the client-side library that provides the business logic for all of RealtimeKit's features. It is a data-only library that handles the complex media and networking tasks, giving you full control to build a completely custom user interface. It serves as the foundation upon which the UI Kit is built.
49+
50+
### UI Kit
51+
52+
The **UI Kit** is a library of pre-built, customizable UI components that sits on top of the Core SDK. It provides the fastest and simplest way to integrate a complete video and voice call interface into any application, allowing you to get started with just a few lines of code while still offering flexibility for customization.
53+
54+
### Realtime SFU (Selective Forwarding Unit)
55+
56+
A **Selective Forwarding Unit (SFU)** is a server architecture that efficiently manages real-time media streams in multi-party video calls. Instead of each participant sending their media directly to every other participant in a bandwidth-intensive mesh network, each participant sends a single stream to the SFU. The SFU then forwards those streams to the other participants, making it a highly scalable model.
57+
58+
The [**Realtime SFU**](/realtime/sfu) is Cloudflare's implementation of this architecture and is the core engine that powers RealtimeKit. It runs on Cloudflare's global Anycast network, meaning participants automatically connect to the nearest data center. This minimizes latency and ensures a high-quality experience regardless of a user's location. The SFU intelligently routes media, handling the complex task of receiving multiple streams and forwarding them to the appropriate participants.
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Getting Started
4+
sidebar:
5+
order: 3
6+
hidden: true
7+
---

src/content/docs/realtime/index.mdx

Lines changed: 73 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,92 @@ head:
88
content: Overview
99
---
1010

11-
import { Description, LinkButton } from "~/components";
11+
import {
12+
Description,
13+
LinkButton,
14+
RelatedProduct,
15+
CardGrid,
16+
LinkTitleCard,
17+
} from "~/components";
1218

1319
<Description>
1420

15-
Build real-time serverless video, audio and data applications.
21+
Build Realtime apps with lowest latency - at any scale!
1622

1723
</Description>
1824

19-
Cloudflare Realtime 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.
25+
Cloudflare Realtime is a comprehensive suite of products designed to help you build powerful, scalable real-time applications. It has three main offerings:
2026

21-
Cloudflare Realtime runs on [Cloudflare's global cloud network](https://www.cloudflare.com/network/) in hundreds of cities worldwide.
27+
### RealtimeKit
2228

23-
<LinkButton variant="primary" href="/realtime/get-started/">
29+
Cloudflare [RealtimeKit](/realtime/introduction) allows you to integrate programmable and easily customizable live video and voice into your web, mobile, and desktop applications. With just a few lines of code, you can enable live video communication, voice calls, and interactive live streaming.
30+
31+
At its core, RealtimeKit is powered by the [Realtime SFU](/realtime/sfu), which efficiently routes video and audio streams between participants. RealtimeKit provides a set of user-friendly SDKs and APIs that act as a layer on top of the SFU, so you don't have to handle the complexities of media track management, peer management, and other intricate WebRTC-related tasks.
32+
33+
### Realtime SFU
34+
35+
The [Realtime SFU (Selective Forwarding Unit)](/realtime/sfu) is a powerful media server that efficiently routes video and audio streams between participants, and underpins the RealtimeKit. 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.
36+
37+
### TURN Service
38+
39+
The [TURN service](/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.
40+
41+
<LinkButton variant="primary" href="/realtime/getting-started/">
2442
Get started
2543
</LinkButton>
2644
<LinkButton
2745
variant="secondary"
28-
href="https://dash.cloudflare.com/?to=/:account/calls"
46+
href="https://dash.cloudflare.com/?to=/:account/realtime"
2947
>
3048
Realtime dashboard
3149
</LinkButton>
32-
<LinkButton variant="secondary" href="https://github.com/cloudflare/orange">
33-
Orange Meets demo app
50+
<LinkButton variant="secondary" href="https://demo.realtime.cloudflare.com">
51+
RealtimeKit demo app
3452
</LinkButton>
53+
54+
## Related products
55+
56+
<RelatedProduct header="Workers AI" href="/workers-ai/" product="workers-ai">
57+
58+
Run machine learning models, powered by serverless GPUs, on Cloudflare’s global network.
59+
60+
</RelatedProduct>
61+
62+
<RelatedProduct header="Stream" href="/stream/" product="stream">
63+
64+
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.
65+
66+
</RelatedProduct>
67+
68+
## More resources
69+
70+
<CardGrid>
71+
72+
<LinkTitleCard
73+
title="Developer Discord"
74+
href="https://discord.cloudflare.com"
75+
icon="discord"
76+
>
77+
Connect with the Realtime community on Discord to ask questions, show what you
78+
are building, and discuss the platform with other developers.
79+
</LinkTitleCard>
80+
81+
<LinkTitleCard
82+
title="Use cases"
83+
href="/realtime/introduction#use-cases"
84+
icon="document"
85+
>
86+
Learn how you can build and deploy ambitious Realtime applications to
87+
Cloudflare's global network.
88+
</LinkTitleCard>
89+
90+
<LinkTitleCard
91+
title="@CloudflareDev"
92+
href="https://x.com/cloudflaredev"
93+
icon="x.com"
94+
>
95+
Follow @CloudflareDev on Twitter to learn about product announcements, and
96+
what is new in Cloudflare Workers.
97+
</LinkTitleCard>
98+
99+
</CardGrid>

0 commit comments

Comments
 (0)