Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
.vscode		.vscode
app		app
e2e-tests		e2e-tests
migrations		migrations
public		public
rust-mls-worker		rust-mls-worker
.eslintignore		.eslintignore
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.hintrc		.hintrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
architecture.png		architecture.png
drizzle.config.ts		drizzle.config.ts
orange-meets.png		orange-meets.png
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
remix.config.js		remix.config.js
remix.env.d.ts		remix.env.d.ts
schema.ts		schema.ts
server.ts		server.ts
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vitest.config.mts		vitest.config.mts
vitest.workers.config.ts		vitest.workers.config.ts
wrangler.development.toml		wrangler.development.toml
wrangler.e2ee.toml		wrangler.e2ee.toml
wrangler.production.toml		wrangler.production.toml
wrangler.public.toml		wrangler.public.toml
wrangler.staging.toml		wrangler.staging.toml
wrangler.toml		wrangler.toml

Repository files navigation

Welcome to Cloudflare Meet

(Cloudflare Meet was formerly known as Orange Meets)

Meet is a demo application built using Cloudflare Realtime SFU. To build your own WebRTC application using Cloudflare Realtime, get started in the Cloudflare Dashboard.

Simpler examples can be found here.

Try the demo here!

Architecture Diagram

Variables

Go to the Cloudflare Realtime dashboard and create an application.

Put these variables into .dev.vars

CALLS_APP_ID=<APP_ID_GOES_HERE>
CALLS_APP_SECRET=<SECRET_GOES_HERE>

Optional variables

The following variables are optional:

MAX_WEBCAM_BITRATE (default 1200000): the maximum bitrate for each meeting participant's webcam.
MAX_WEBCAM_FRAMERATE (default: 24): the maximum number of frames per second for each meeting participant's webcam.
MAX_WEBCAM_QUALITY_LEVEL (default 1080): the maximum resolution for each meeting participant's webcam, based on the smallest dimension (i.e. the default is 1080p).

To customize these variables, place replacement values in .dev.vars (for development) and in the [vars] section of wrangler.toml (for the deployment).

Development

npm install
npm run dev

Open up http://127.0.0.1:8787 and you should be ready to go!

Deployment

Make sure you've installed wrangler and are logged in by running:

wrangler login

Update CALLS_APP_ID in wrangler.toml to use your own Calls App ID
You will also need to set the token as a secret by running:

wrangler secret put CALLS_APP_SECRET

or to programmatically set the secret, run:

echo REPLACE_WITH_YOUR_SECRET | wrangler secret put CALLS_APP_SECRET

Optionally, you can also use Cloudflare's TURN Service by setting the TURN_SERVICE_ID variable in wrangler.toml and TURN_SERVICE_TOKEN secret using wrangler secret put TURN_SERVICE_TOKEN
Also optionally, you can include OPENAI_MODEL_ENDPOINT and OPENAI_API_TOKEN to use OpenAI's Realtime API with WebRTC to invite AI to join your meeting.
Finally you can run the following to deploy: