Skip to content

Commit f5a6e53

Browse files
committed
docs: added index.tsx under realtime, and an introduction tab
1 parent b6b5905 commit f5a6e53

File tree

4 files changed

+143
-13
lines changed

4 files changed

+143
-13
lines changed
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
pcx_content_type: overview
3+
title: Concepts
4+
sidebar:
5+
order: 4
6+
---

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+
### Realtime Kit
28+
29+
Cloudflare [RealtimeKit](./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)](./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](./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.
2240

2341
<LinkButton variant="primary" href="/realtime/get-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
34-
</LinkButton>
50+
<LinkButton variant="secondary" href="https://demo.realtime.cloudflare.com">
51+
RealtimeKit demo app
52+
</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>
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
pcx_content_type: overview
3+
title: Introduction
4+
sidebar:
5+
order: 2
6+
---
7+
8+
Cloudflare RealtimeKit 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.
9+
10+
## How RealtimeKit Works
11+
12+
RealtimeKit is composed of three core components that work together to provide a complete real-time communication platform: the UI Kit, the Core SDK, and the backend infrastructure.
13+
14+
- **UI Kit**: It provides a library of pre-built, customizable UI components that sits on top of the Core SDK, allowing you to quickly build a polished user interface for your real-time application. The UI Kit is available for React, Angular, HTML, React Native, iOS, and Android.
15+
16+
- **Core SDK**: The Core SDK provides the business logic for the UI Kit. It can be used independently to build a custom UI from the ground up, but the UI Kit offers a simpler and faster way to get started. The SDK interacts directly with the RealtimeKit backend and SFU, providing powerful APIs for features like live video, audio, and streaming while abstracting away the complexities of WebRTC. The Core SDK is available for JavaScript, React, React Native, iOS, and Android.
17+
18+
- **Backend Infrastructure**: This is the foundation of RealtimeKit. It includes REST APIs for creating meetings, adding participants, retrieving session information, webhooks for server-side notifications, and so on. A dedicated socket server handles real-time signalling, while the [Realtime SFU](./sfu) relays media between users with low latency. The entire backend runs on Cloudflare's global network, ensuring reliability and scale.
19+
20+
## Use Cases
21+
22+
RealtimeKit is designed for a variety of real-time communication needs. Here are some of the most common use cases:
23+
24+
### Group Calls
25+
26+
Build collaborative experiences for team meetings, online classrooms, or social applications. These use cases are powered by WebRTC for real-time, low-latency communication.
27+
28+
- **Team Meetings:** Connect with your team through high-quality video conferencing. Share screens, record meetings, and use interactive features.
29+
- **Virtual Classrooms:** Create engaging learning environments with live video and audio, whiteboards, and breakout rooms.
30+
- **Social Networking:** Enable users to have private or group video chats within your platform.
31+
32+
### Webinars
33+
34+
Webinars are one-to-many events designed for a presenter to share information with a large, interactive audience. Unlike group calls where all participants collaborate freely, webinars have distinct roles for presenters and viewers, managed through [presets](./concepts#presets). This structure, powered by WebRTC, is ideal for product demos, company all-hands, and live workshops, with features like chat, Q&A, and polls to engage the audience.
35+
36+
- **Product Demos:** Showcase your product to a large audience with live video and Q&A sessions.
37+
- **Company All-Hands:** Broadcast company-wide meetings to all your employees, no matter where they are.
38+
- **Live Workshops:** Conduct training sessions and workshops with a live instructor and interactive participation.
39+
40+
### Livestreaming
41+
42+
Livestreaming allows you to broadcast video to a large public audience. While the video itself is a one-way feed, you can enhance audience engagement by adding interactive features like chat and polls. This is powered by [Cloudflare Stream](/stream/) using HLS (HTTP Live Streaming) for maximum scalability, making it perfect for events like sports and concerts.
43+
44+
- **Live Sports:** Stream sporting events to fans around the world in real-time.
45+
- **Gaming:** Build your own platform to livestream gameplay directly to your followers with RealtimeKit.
46+
- **Concerts and Events:** Share live performances and events with a global audience.
47+
48+
## Capabilities
49+
50+
Explore the capabilities that you can incrementally add to your live video experiences.
51+
52+
- **[Recording](https://docs.realtime.cloudflare.com/guides/capabilities/recording/recording-overview):** Record meetings and save them to [Cloudflare R2](/r2/), or a provider of your choice.
53+
- **[Chat](https://docs.realtime.cloudflare.com/web-core/chat/introduction):** Enable real-time text-based chat for participants during a video call.
54+
- **[Polls](https://docs.realtime.cloudflare.com/web-core/polls/introduction):** Create and manage interactive polls to engage your audience during calls.
55+
- **[Breakout Rooms](https://docs.realtime.cloudflare.com/guides/capabilities/breakoutroom/create-breakout-rooms):** Split participants into smaller, private groups for focused discussions.
56+
- **[Virtual Backgrounds](https://docs.realtime.cloudflare.com/guides/capabilities/video/add-virtual-background):** Allow users to apply custom virtual backgrounds to their video streams.
57+
- **[Video Filters](https://docs.realtime.cloudflare.com/guides/capabilities/video/processing) & [Audio Filters](https://docs.realtime.cloudflare.com/guides/capabilities/audio/processing):** Apply custom middlewares to create unique audio and video effects.
58+
- **[Multi-Screen Share](https://docs.realtime.cloudflare.com/web-core/local-user/introduction#enable--disable-screen-share):** Allow multiple participants to share their screens simultaneously.
59+
- **[Transcription](https://docs.realtime.cloudflare.com/guides/capabilities/audio/transcriptions):** Enable live transcription of audio from video calls for captions or records.

src/content/docs/realtime/sfu/index.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Realtime SFU
33
pcx_content_type: overview
44
sidebar:
5-
order: 1
5+
order: 9
66
head:
77
- tag: title
88
content: Overview
@@ -16,11 +16,11 @@ Build real-time serverless video, audio and data applications.
1616

1717
</Description>
1818

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.
19+
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.
2020

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

23-
<LinkButton variant="primary" href="/realtime/get-started/">
23+
<LinkButton variant="primary" href="/realtime/sfu/get-started/">
2424
Get started
2525
</LinkButton>
2626
<LinkButton
@@ -31,4 +31,4 @@ Cloudflare Realtime runs on [Cloudflare's global cloud network](https://www.clou
3131
</LinkButton>
3232
<LinkButton variant="secondary" href="https://github.com/cloudflare/orange">
3333
Orange Meets demo app
34-
</LinkButton>
34+
</LinkButton>

0 commit comments

Comments
 (0)