diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e8c12ef9ec9b8ea..81fdf60a41ed8b4 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -120,9 +120,9 @@ /src/content/release-notes/queues.yaml @elithrar @jonesphillip @cloudflare/pcx-technical-writing /src/content/docs/r2/ @oxyjun @elithrar @jonesphillip @aninibread @harshil1712 @cloudflare/workers-docs @cloudflare/pcx-technical-writing /src/content/release-notes/r2.yaml @oxyjun @elithrar @aninibread @cloudflare/workers-docs @cloudflare/pcx-technical-writing -/src/content/docs/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls -/src/assets/images/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls -/public/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls +/src/content/docs/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls @roerohan @ravindra-dyte +/src/assets/images/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls @roerohan @ravindra-dyte +/public/realtime/ @cloudflare/pcx-technical-writing @cloudflare/calls @roerohan @ravindra-dyte /src/content/docs/stream/ @tsmith512 @ToriLindsay @cloudflare/pcx-technical-writing @renandincer @third774 /src/content/release-notes/stream.yaml @tsmith512 @ToriLindsay @cloudflare/pcx-technical-writing /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 @@ /src/content/docs/web-analytics/ @angelampcosta @cloudflare/pcx-technical-writing # AI Prompts for Cloudflare Workers development -/public/workers/prompts/ @jahands @Maximo-Guk @jbwcloudflare @cloudflare/pcx-technical-writing +/public/workers/prompts/ @jahands @Maximo-Guk @jbwcloudflare @cloudflare/pcx-technical-writing \ No newline at end of file diff --git a/public/__redirects b/public/__redirects index cf8a806971297dd..d927f6a83d6d06e 100644 --- a/public/__redirects +++ b/public/__redirects @@ -2333,3 +2333,16 @@ # Calls /calls/* /realtime/:splat 301 + +# Realtime +/realtime/limits /realtime/sfu/limits 302 +/realtime/sessions-tracks /realtime/sfu/sessions-tracks/ 302 +/realtime/get-started /realtime/sfu/get-started/ 302 +/realtime/calls-vs-sfus /realtime/sfu/calls-vs-sfus/ 302 +/realtime/https-api /realtime/sfu/https-api/ 302 +/realtime/datachannels /realtime/sfu/datachannels/ 302 +/realtime/simulcast /realtime/sfu/simulcast/ 302 +/realtime/demos /realtime/sfu/demos/ 302 +/realtime/example-architecture /realtime/sfu/example-architecture/ 302 +/realtime/pricing /realtime/sfu/pricing/ 302 +/realtime/changelog /realtime/sfu/changelog/ 302 \ No newline at end of file diff --git a/src/content/docs/realtime/concepts.mdx b/src/content/docs/realtime/concepts.mdx new file mode 100644 index 000000000000000..d43ad1b7b182e43 --- /dev/null +++ b/src/content/docs/realtime/concepts.mdx @@ -0,0 +1,58 @@ +--- +pcx_content_type: concept +title: Concepts +sidebar: + order: 3 +--- + +This page explains the core concepts and terminology used in RealtimeKit. + +### Meeting + +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. + +### Session + +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. + +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. + +### Preset + +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. + +Different participants in the same meeting can have different presets, allowing for complex and flexible roles. For example, in a large ed-tech class: + +- The **teacher** might join with a `webinar-host` preset, giving them full control to share video, audio, and their screen. +- **Students** would join with a `webinar-participant` preset, which restricts them from sharing media but allows them to use the chat to ask questions. +- A **teaching assistant** could join with a `group-call-host` preset, enabling them to view all participants in a grid to monitor the class. + +### Participant + +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. + +### Peer + +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. + +### Stage + +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. + +### Waiting Room + +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. + +### Core SDK + +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. + +### UI Kit + +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. + +### Realtime SFU (Selective Forwarding Unit) + +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. + +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. diff --git a/src/content/docs/realtime/getting-started.mdx b/src/content/docs/realtime/getting-started.mdx new file mode 100644 index 000000000000000..7d270d9e5e961c5 --- /dev/null +++ b/src/content/docs/realtime/getting-started.mdx @@ -0,0 +1,7 @@ +--- +pcx_content_type: navigation +title: Getting Started +sidebar: + order: 3 + hidden: true +--- \ No newline at end of file diff --git a/src/content/docs/realtime/index.mdx b/src/content/docs/realtime/index.mdx index 5511bdb8ed8e640..5ba66a7a38b11bd 100644 --- a/src/content/docs/realtime/index.mdx +++ b/src/content/docs/realtime/index.mdx @@ -8,27 +8,92 @@ head: content: Overview --- -import { Description, LinkButton } from "~/components"; +import { + Description, + LinkButton, + RelatedProduct, + CardGrid, + LinkTitleCard, +} from "~/components"; -Build real-time serverless video, audio and data applications. +Build Realtime apps with lowest latency - at any scale! -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. +Cloudflare Realtime is a comprehensive suite of products designed to help you build powerful, scalable real-time applications. It has three main offerings: -Cloudflare Realtime runs on [Cloudflare's global cloud network](https://www.cloudflare.com/network/) in hundreds of cities worldwide. +### RealtimeKit - +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. + +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. + +### Realtime SFU + +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. + +### TURN Service + +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. + + Get started Realtime dashboard - - Orange Meets demo app + + RealtimeKit demo app + +## Related products + + + +Run machine learning models, powered by serverless GPUs, on Cloudflare’s global network. + + + + + +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. + + + +## More resources + + + + + Connect with the Realtime community on Discord to ask questions, show what you + are building, and discuss the platform with other developers. + + + + Learn how you can build and deploy ambitious Realtime applications to + Cloudflare's global network. + + + + Follow @CloudflareDev on Twitter to learn about product announcements, and + what is new in Cloudflare Workers. + + + diff --git a/src/content/docs/realtime/introduction.mdx b/src/content/docs/realtime/introduction.mdx index fd666ee802db1d4..32ae0699e97808e 100644 --- a/src/content/docs/realtime/introduction.mdx +++ b/src/content/docs/realtime/introduction.mdx @@ -1,45 +1,59 @@ --- -pcx_content_type: overview +pcx_content_type: navigation title: Introduction sidebar: order: 2 - --- -Cloudflare Realtime can be used to add realtime audio, video and data into your applications. Cloudflare Realtime uses WebRTC, which is the lowest latency way to communicate across a broad range of platforms like browsers, mobile, and native apps. +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. + +## How RealtimeKit Works + +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. -Realtime integrates with your backend and frontend application to add realtime functionality. +- **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. -## Why Cloudflare Realtime exists +- **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. -* **It is difficult to scale WebRTC**: Many struggle scaling WebRTC servers. Operators run into issues about how many users can be in the same "room" or want to build unique solutions that do not fit into the current concepts in high level APIs. +- **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](/realtime/sfu) relays media between users with low latency. The entire backend runs on Cloudflare's global network, ensuring reliability and scale. -* **High egress costs**: WebRTC is expensive to use as managed solutions charge a high premium on cloud egress and running your own servers incur system administration and scaling overhead. Cloudflare already has 300+ locations with upwards of 1,000 servers in some locations. Cloudflare Realtime scales easily on top of this architecture and can offer the lowest WebRTC usage costs. +## Use Cases -* **WebRTC is growing**: Developers are realizing that WebRTC is not just for video conferencing. WebRTC is supported on many platforms, it is mature and well understood. +RealtimeKit is designed for a variety of real-time communication needs. Here are some of the most common use cases: -## What makes Cloudflare Realtime unique +### Group Calls -* **Unopinionated**: Cloudflare Realtime does not offer a SDK. It instead allows you to access raw WebRTC to solve unique problems that might not fit into existing concepts. The API is deliberately simple. +Build collaborative experiences for team meetings, online classrooms, or social applications. These use cases are powered by WebRTC for real-time, low-latency communication. -* **No rooms**: Unlike other WebRTC products, Cloudflare Realtime lets you be in charge of each track (audio/video/data) instead of offering abstractions such as rooms. You define the presence protocol on top of simple pub/sub. Each end user can publish and subscribe to audio/video/data tracks as they wish. +- **Team Meetings:** Connect with your team through high-quality video conferencing. Share screens, record meetings, and use interactive features. +- **Virtual Classrooms:** Create engaging learning environments with live video and audio, whiteboards, and breakout rooms. +- **Social Networking:** Enable users to have private or group video chats within your platform. -* **No lock-in**: You can use Cloudflare Realtime to solve scalability issues with your SFU. You can use in combination with peer-to-peer architecture. You can use Cloudflare Realtime standalone. To what extent you use Cloudflare Realtime is up to you. +### Webinars -## What exactly does Cloudflare Realtime do? +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](/realtime/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. -* **SFU**: Realtime is a special kind of pub/sub server that is good at forwarding media data to clients that subscribe to certain data. Each client connects to Cloudflare Realtime via WebRTC and either sends data, receives data or both using WebRTC. This can be audio/video tracks or DataChannels. +- **Product Demos:** Showcase your product to a large audience with live video and Q&A sessions. +- **Company All-Hands:** Broadcast company-wide meetings to all your employees, no matter where they are. +- **Live Workshops:** Conduct training sessions and workshops with a live instructor and interactive participation. -* **It scales**: All Cloudflare servers act as a single server so millions of WebRTC clients can connect to Cloudflare Realtime. Each can send data, receive data or both with other clients. +### Livestreaming -## How most developers get started +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. -1. Get started with the echo example, which you can download from the Cloudflare dashboard when you create a Realtime App or from [demos](/realtime/demos/). This will show you how to send and receive audio and video. +- **Live Sports:** Stream sporting events to fans around the world in real-time. +- **Gaming:** Build your own platform to livestream gameplay directly to your followers with RealtimeKit. +- **Concerts and Events:** Share live performances and events with a global audience. -2. Understand how you can manipulate who can receive what media by passing around session and track ids. Remember, you control who receives what media. Each media track is represented by a unique ID. It is your responsibility to save and distribute this ID. +## Capabilities -:::note[Realtime is not a presence protocol] -Realtime does not know what a room is. It only knows media tracks. It is up to you to make a room by saving who is in a room along with track IDs that unique identify media tracks. If each participant publishes their audio/video, and receives audio/video from each other, you have got yourself a video conference! -::: +Explore the capabilities that you can incrementally add to your live video experiences. -3. Create an app where you manage each connection to Cloudflare Realtime and the track IDs created by each connection. You can use any tool to save and share tracks. Check out the example apps at [demos](/realtime/demos/), such as [Orange Meets](https://github.com/cloudflare/orange), which is a full-fledged video conferencing app that uses [Workers Durable Objects](/durable-objects/) to keep track of track IDs. +- **[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. +- **[Chat](https://docs.realtime.cloudflare.com/web-core/chat/introduction):** Enable real-time text-based chat for participants during a video call. +- **[Polls](https://docs.realtime.cloudflare.com/web-core/polls/introduction):** Create and manage interactive polls to engage your audience during calls. +- **[Breakout Rooms](https://docs.realtime.cloudflare.com/guides/capabilities/breakoutroom/create-breakout-rooms):** Split participants into smaller, private groups for focused discussions. +- **[Virtual Backgrounds](https://docs.realtime.cloudflare.com/guides/capabilities/video/add-virtual-background):** Allow users to apply custom virtual backgrounds to their video streams. +- **[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. +- **[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. +- **[Transcription](https://docs.realtime.cloudflare.com/guides/capabilities/audio/transcriptions):** Enable live transcription of audio from video calls for captions or records. diff --git a/src/content/docs/realtime/calls-vs-sfus.mdx b/src/content/docs/realtime/sfu/calls-vs-sfus.mdx similarity index 100% rename from src/content/docs/realtime/calls-vs-sfus.mdx rename to src/content/docs/realtime/sfu/calls-vs-sfus.mdx diff --git a/src/content/docs/realtime/changelog.mdx b/src/content/docs/realtime/sfu/changelog.mdx similarity index 100% rename from src/content/docs/realtime/changelog.mdx rename to src/content/docs/realtime/sfu/changelog.mdx diff --git a/src/content/docs/realtime/datachannels.mdx b/src/content/docs/realtime/sfu/datachannels.mdx similarity index 100% rename from src/content/docs/realtime/datachannels.mdx rename to src/content/docs/realtime/sfu/datachannels.mdx diff --git a/src/content/docs/realtime/demos.mdx b/src/content/docs/realtime/sfu/demos.mdx similarity index 100% rename from src/content/docs/realtime/demos.mdx rename to src/content/docs/realtime/sfu/demos.mdx diff --git a/src/content/docs/realtime/example-architecture.mdx b/src/content/docs/realtime/sfu/example-architecture.mdx similarity index 100% rename from src/content/docs/realtime/example-architecture.mdx rename to src/content/docs/realtime/sfu/example-architecture.mdx diff --git a/src/content/docs/realtime/get-started.mdx b/src/content/docs/realtime/sfu/get-started.mdx similarity index 100% rename from src/content/docs/realtime/get-started.mdx rename to src/content/docs/realtime/sfu/get-started.mdx diff --git a/src/content/docs/realtime/https-api.mdx b/src/content/docs/realtime/sfu/https-api.mdx similarity index 100% rename from src/content/docs/realtime/https-api.mdx rename to src/content/docs/realtime/sfu/https-api.mdx diff --git a/src/content/docs/realtime/sfu/index.mdx b/src/content/docs/realtime/sfu/index.mdx new file mode 100644 index 000000000000000..b917625c98832d1 --- /dev/null +++ b/src/content/docs/realtime/sfu/index.mdx @@ -0,0 +1,34 @@ +--- +title: Realtime SFU +pcx_content_type: overview +sidebar: + order: 9 +head: + - tag: title + content: Overview +--- + +import { Description, LinkButton } from "~/components"; + + + +Build real-time serverless video, audio and data applications. + + + +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. + +Cloudflare Realtime SFU runs on [Cloudflare's global cloud network](https://www.cloudflare.com/network/) in hundreds of cities worldwide. + + + Get started + + + Realtime dashboard + + + Orange Meets demo app + diff --git a/src/content/docs/realtime/sfu/introduction.mdx b/src/content/docs/realtime/sfu/introduction.mdx new file mode 100644 index 000000000000000..377d5a2c10b2926 --- /dev/null +++ b/src/content/docs/realtime/sfu/introduction.mdx @@ -0,0 +1,44 @@ +--- +pcx_content_type: overview +title: Introduction +sidebar: + order: 2 +--- + +Cloudflare Realtime can be used to add realtime audio, video and data into your applications. Cloudflare Realtime uses WebRTC, which is the lowest latency way to communicate across a broad range of platforms like browsers, mobile, and native apps. + +Realtime integrates with your backend and frontend application to add realtime functionality. + +## Why Cloudflare Realtime exists + +- **It is difficult to scale WebRTC**: Many struggle scaling WebRTC servers. Operators run into issues about how many users can be in the same "room" or want to build unique solutions that do not fit into the current concepts in high level APIs. + +- **High egress costs**: WebRTC is expensive to use as managed solutions charge a high premium on cloud egress and running your own servers incur system administration and scaling overhead. Cloudflare already has 300+ locations with upwards of 1,000 servers in some locations. Cloudflare Realtime scales easily on top of this architecture and can offer the lowest WebRTC usage costs. + +- **WebRTC is growing**: Developers are realizing that WebRTC is not just for video conferencing. WebRTC is supported on many platforms, it is mature and well understood. + +## What makes Cloudflare Realtime unique + +- **Unopinionated**: Cloudflare Realtime does not offer a SDK. It instead allows you to access raw WebRTC to solve unique problems that might not fit into existing concepts. The API is deliberately simple. + +- **No rooms**: Unlike other WebRTC products, Cloudflare Realtime lets you be in charge of each track (audio/video/data) instead of offering abstractions such as rooms. You define the presence protocol on top of simple pub/sub. Each end user can publish and subscribe to audio/video/data tracks as they wish. + +- **No lock-in**: You can use Cloudflare Realtime to solve scalability issues with your SFU. You can use in combination with peer-to-peer architecture. You can use Cloudflare Realtime standalone. To what extent you use Cloudflare Realtime is up to you. + +## What exactly does Cloudflare Realtime do? + +- **SFU**: Realtime is a special kind of pub/sub server that is good at forwarding media data to clients that subscribe to certain data. Each client connects to Cloudflare Realtime via WebRTC and either sends data, receives data or both using WebRTC. This can be audio/video tracks or DataChannels. + +- **It scales**: All Cloudflare servers act as a single server so millions of WebRTC clients can connect to Cloudflare Realtime. Each can send data, receive data or both with other clients. + +## How most developers get started + +1. Get started with the echo example, which you can download from the Cloudflare dashboard when you create a Realtime App or from [demos](/realtime/sfu/demos/). This will show you how to send and receive audio and video. + +2. Understand how you can manipulate who can receive what media by passing around session and track ids. Remember, you control who receives what media. Each media track is represented by a unique ID. It is your responsibility to save and distribute this ID. + +:::note[Realtime is not a presence protocol] +Realtime does not know what a room is. It only knows media tracks. It is up to you to make a room by saving who is in a room along with track IDs that unique identify media tracks. If each participant publishes their audio/video, and receives audio/video from each other, you have got yourself a video conference! +::: + +3. Create an app where you manage each connection to Cloudflare Realtime and the track IDs created by each connection. You can use any tool to save and share tracks. Check out the example apps at [demos](/realtime/sfu/demos/), such as [Orange Meets](https://github.com/cloudflare/orange), which is a full-fledged video conferencing app that uses [Workers Durable Objects](/durable-objects/) to keep track of track IDs. diff --git a/src/content/docs/realtime/limits.mdx b/src/content/docs/realtime/sfu/limits.mdx similarity index 100% rename from src/content/docs/realtime/limits.mdx rename to src/content/docs/realtime/sfu/limits.mdx diff --git a/src/content/docs/realtime/pricing.mdx b/src/content/docs/realtime/sfu/pricing.mdx similarity index 100% rename from src/content/docs/realtime/pricing.mdx rename to src/content/docs/realtime/sfu/pricing.mdx diff --git a/src/content/docs/realtime/sessions-tracks.mdx b/src/content/docs/realtime/sfu/sessions-tracks.mdx similarity index 100% rename from src/content/docs/realtime/sessions-tracks.mdx rename to src/content/docs/realtime/sfu/sessions-tracks.mdx diff --git a/src/content/docs/realtime/simulcast.mdx b/src/content/docs/realtime/sfu/simulcast.mdx similarity index 89% rename from src/content/docs/realtime/simulcast.mdx rename to src/content/docs/realtime/sfu/simulcast.mdx index 7c33f3e086d9ab9..d24a0521b426ff9 100644 --- a/src/content/docs/realtime/simulcast.mdx +++ b/src/content/docs/realtime/sfu/simulcast.mdx @@ -66,12 +66,12 @@ If the publisher endpoint is a browser you can include these by specifying `send ```js const transceiver = peerConnection.addTransceiver(track, { - direction: "sendonly", - sendEncodings: [ - { scaleResolutionDownBy: 1, rid: "f" }, - { scaleResolutionDownBy: 2, rid: "h" }, - { scaleResolutionDownBy: 4, rid: "q" } - ] + direction: "sendonly", + sendEncodings: [ + { scaleResolutionDownBy: 1, rid: "f" }, + { scaleResolutionDownBy: 2, rid: "h" }, + { scaleResolutionDownBy: 4, rid: "q" }, + ], }); ``` @@ -80,7 +80,7 @@ const transceiver = peerConnection.addTransceiver(track, { Here's an example of how to use simulcast with Cloudflare Realtime: 1. Create a new local track with simulcast configuration. There should be a section in the SDP with `a=simulcast:send`. -2. Use the [Cloudflare Realtime API](/realtime/https-api) to push this local track, by calling the /tracks/new endpoint. -3. Use the [Cloudflare Realtime API](/realtime/https-api) to start pulling a remote track (from another browser or device), by calling the /tracks/new endpoint and specifying the `simulcast` configuration object along with the remote track ID you get from step 2. +2. Use the [Cloudflare Realtime API](/realtime/sfu/https-api) to push this local track, by calling the /tracks/new endpoint. +3. Use the [Cloudflare Realtime API](/realtime/sfu/https-api) to start pulling a remote track (from another browser or device), by calling the /tracks/new endpoint and specifying the `simulcast` configuration object along with the remote track ID you get from step 2. For more examples, check out the [Realtime Examples GitHub repository](https://github.com/cloudflare/calls-examples/tree/main/echo-simulcast).