# RealtimeKit

import {
	CardGrid,
	Description,
	Feature,
	LinkButton,
	LinkTitleCard,
} from "~/components";
import RealtimeKitArchitecture from "~/components/realtimekit/RealtimeKitArchitecture/RealtimeKitArchitecture.astro";

<Description>
	Cloudflare RealtimeKit lets you build your own audio and video experiences
	inside web and mobile apps. It routes media on [Cloudflare's global WebRTC
	infrastructure](/realtime/sfu/concepts/architecture/), so you can deliver
	low-latency experiences to a global audience without scaling media servers or
	choosing regions.
</Description>

Your application controls who can join and what they can do. RealtimeKit provides the SDKs and infrastructure that connect participants inside your web or mobile app.

<LinkButton variant="primary" href="/realtime/realtimekit/quickstart/">
	Get started
</LinkButton>
<LinkButton
	variant="secondary"
	href="https://examples.realtime.cloudflare.com/meeting?demo=Default"
	target="_blank"
>
	Try a demo meeting
</LinkButton>
<LinkButton
	variant="secondary"
	href="https://github.com/cloudflare/realtimekit-web-examples"
	target="_blank"
>
	View code examples
</LinkButton>
<LinkButton
	variant="secondary"
	href="https://test.realtime.cloudflare.com/"
	target="_blank"
>
	Run a pre-call test
</LinkButton>

## What you can build

<CardGrid>

<LinkTitleCard
	title="Group video calls"
	href="/realtime/realtimekit/quickstart/"
	icon="ph:video-camera"
>
	Add multiparty calls to collaboration tools, customer portals, and online
	communities.
</LinkTitleCard>

<LinkTitleCard
	title="Virtual classrooms"
	href="/realtime/realtimekit/humans/ui-kit/breakout-rooms/"
	icon="ph:graduation-cap"
>
	Split a class into smaller discussion rooms and assign participants
	automatically or manually.
</LinkTitleCard>

<LinkTitleCard
	title="Webinars and live events"
	href="/realtime/realtimekit/webinar/"
	icon="ph:broadcast"
>
	Keep attendees view-only until a host grants them access to the stage.
</LinkTitleCard>

<LinkTitleCard
	title="Audio rooms and support calls"
	href="/realtime/realtimekit/audio-calls/"
	icon="ph:headset"
>
	Build voice-only sessions for support lines and community discussions.
</LinkTitleCard>

</CardGrid>

## How RealtimeKit fits into your app

Your application owns users and workflows, while RealtimeKit manages sessions and
media.

<RealtimeKitArchitecture />

## Key features

<Feature
	header="Participant roles and permissions"
	href="/realtime/realtimekit/concepts/preset/"
	cta="Configure presets"
>
	Give hosts, speakers, and attendees different permissions for media,
	moderation, and in-meeting features. Reuse the same presets across meetings.
</Feature>

<Feature
	header="Recording and custom layouts"
	href="/realtime/realtimekit/recording-guide/"
	cta="Explore recording"
>
	Capture composite video or separate participant audio tracks. Store recordings
	in [your own Cloudflare R2
	bucket](/realtime/realtimekit/recording-guide/custom-cloud-storage/#cloudflare-r2),
	or deploy a [custom recording
	app](/realtime/realtimekit/recording-guide/create-record-app-using-sdks/) on
	[Cloudflare Workers](/workers/) when you need a different layout.
</Feature>

<Feature
	header="Transcription and summaries"
	href="/realtime/realtimekit/ai/"
	cta="Add meeting AI"
>
	RealtimeKit uses [Cloudflare Workers AI](/workers-ai/) for real-time and
	post-meeting transcription. Generate an AI summary when a meeting ends.
</Feature>

<Feature
	header="In-meeting apps"
	href="/realtime/realtimekit/custom-plugins/"
	cta="Build a plugin"
>
	Add your own browser-based, interactive apps such as whiteboard, document
	viewer into the meeting layout. Use the [meeting key-value
	store](/realtime/realtimekit/collaboration/meeting-key-value-store/) to
	synchronize plugin state across participants.
</Feature>

<Feature
	header="Backend automation"
	href="/realtime/realtimekit/webhooks/"
	cta="Handle lifecycle events"
>
	Receive signed meeting, participant, and recording events in your backend. A
	[Cloudflare Worker](/workers/) can verify each callback and start post-meeting
	processing.
</Feature>

## Choose how to build

RealtimeKit gives you two ways to build the client experience. Choose based on how much of the interface you want to build yourself.

### RealtimeKit UI Kit

Use [RealtimeKit UI Kit](/realtime/realtimekit/humans/ui-kit/) when you want prebuilt screens and controls for joining and running a call. It includes the setup screen, participant grid, media controls, chat, and polls. Use the default layout or customize individual components and branding.

RealtimeKit UI Kit includes RealtimeKit Core SDK, so you can use its APIs when prebuilt components don't cover your workflow.

### RealtimeKit Core SDK

Use [RealtimeKit Core SDK](/realtime/realtimekit/humans/core/) to build every screen and interaction yourself. It provides direct access to session, participant, and media state while RealtimeKit manages signaling and media routing.

Compare supported platforms and packages in [SDK selection](/realtime/realtimekit/humans/sdk-selection/).