repository·main·Indexed 25 days ago
https://github.com/cloudflare/meetA demo WebRTC application built using Cloudflare Realtime SFU, formerly known as Orange Meets. It demonstrates how to build real-time communication applications using Cloudflare's infrastructure, featuring end-to-end encryption (E2EE) via a Rust WASM module (orange-mls-worker), Drizzle ORM for Cloudflare D1, and a Remix application environment.
To run Cloudflare Meet, you must create an application in the Cloudflare Realtime dashboard and provide the application credentials.
For local development, add these to a .dev.vars file:
CALLS_APP_ID=<APP_ID_GOES_HERE>
CALLS_APP_SECRET=<SECRET_GOES_HERE>Follow these steps to deploy the application:
wrangler login.CALLS_APP_ID in your wrangler.toml file with your Cloudflare Realtime App ID.CALLS_APP_SECRET as a secret using Wrangler:wrangler secret put CALLS_APP_SECRETecho REPLACE_WITH_YOUR_SECRET | wrangler secret put CALLS_APP_SECRETTURN_SERVICE_ID in wrangler.toml and set the TURN_SERVICE_TOKEN secret using wrangler secret put TURN_SERVICE_TOKEN.OPENAI_MODEL_ENDPOINT and OPENAI_API_TOKEN in your configuration. npm run deploy
```bash
wrangler login
# ... configure secrets ...
npm run deployInstall dependencies and start the local development server using the following commands:
npm install
npm run devOnce running, access the application at http://127.0.0.1:8787.
The orange-mls-worker crate provides the end-to-end encryption (E2EE) functionality for Orange Meets. To build the Rust code into WebAssembly (WASM), follow these steps:
wasm-pack. If you have cargo installed, you can use:cargo install wasm-pack./build.shpublic/e2ee/wasm-pkg/ directory with the resulting WASM and JS files.You can tune the webcam performance by setting the following optional variables in .dev.vars (for development) or in the [vars] section of wrangler.toml (for deployment):
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 (e.g., 1080 for 1080p).app/utils/e2ee.ts.The remix.config.js file defines how the Remix application is built and served. For this project, the server is configured to run in a Cloudflare Workers environment using the worker condition and specific bundling rules to ensure compatibility with the workerd runtime.
module.exports = {
devServerBroadcastDelay: 1000,
ignoredRouteFiles: ['**/.*'],
server: './server.ts',
serverConditions: ['worker'],
serverDependenciesToBundle: [
/^(?!__STATIC_CONTENT_MANIFEST|cloudflare:workers).*$/,
],
serverMainFields: ['workerd', 'browser', 'module', 'main'],
serverMinify: true,
serverModuleFormat: 'esm',
serverPlatform: 'neutral',
tailwind: true,
postcss: true,
}Browser-specific settings are defined within the projects array. The current configuration includes a chromium project with specific media stream flags to facilitate testing media-heavy features (like a meeting app).
Chromium Project Settings:
name: 'chromium'use.video: Set to 'on-first-retry'.use.launchOptions.args: Includes flags to bypass security and simulate media devices:--disable-web-security--use-fake-ui-for-media-stream--use-fake-device-for-media-streamGlobal use settings:
baseURL: Set to http://localhost:8787 for actions like await page.goto('/').trace: Set to 'on-first-retry' to collect traces when a test fails and is retried.projects: [
{
name: 'chromium',
use: {
video: 'on-first-retry',
...devices['Desktop Chrome'],
launchOptions: {
args: [
'--disable-web-security',
'--use-fake-ui-for-media-stream',
'--use-fake-device-for-media-stream',
],
},
},
},
],The drizzle.config.ts file defines how Drizzle ORM interacts with the database, switching between a local SQLite file and a remote Cloudflare D1 instance based on the presence of the LOCAL_DB_PATH environment variable.
When LOCAL_DB_PATH is set, the configuration uses the sqlite dialect with the better-sqlite driver, pointing to the file path provided in LOCAL_DB_PATH.
When LOCAL_DB_PATH is not set, the configuration uses the sqlite dialect with the d1-http driver. This requires the following environment variables to authenticate with Cloudflare:
DB_ID: The unique identifier for your D1 database.D1_TOKEN: The authentication token for D1.CF_ACCOUNT_ID: Your Cloudflare account ID.Migrations are output to the ./migrations directory.
The project uses Playwright for end-to-end testing. The configuration is defined in playwright.config.ts using defineConfig.
Key global settings include:
testDir: Set to ./e2e-tests.fullyParallel: Enabled (true) to run tests in files in parallel.forbidOnly: Enabled on CI to prevent accidental test.only usage.retries: Configured to 2 on CI and 0 locally.workers: Set to 1 on CI to opt out of parallel tests, otherwise uses default.reporter: Uses 'html' reporter.webServer: Automatically starts the local development server using npm run dev at http://localhost:8787 before running tests. On CI, it does not reuse existing servers.export default defineConfig({
nestDir: './e2e-tests',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
webServer: {
command: 'npm run dev',
url: 'http://localhost:8787',
reuseExistingServer: !process.env.CI,
},
})The following environment variables are used by the application for configuration and secrets.
# Required
CALLS_APP_ID
CALLS_APP_SECRET
# Optional Webcam Settings
MAX_WEBCAM_BITRATE
MAX_WEBCAM_FRAMERATE
MAX_WEBCAM_QUALITY_LEVEL
# Optional TURN Service
TURN_SERVICE_ID
TURN_SERVICE_TOKEN
# Optional OpenAI Integration
OPENAI_MODEL_ENDPOINT
OPENAI_API_TOKENkvAssetHandler and falls back to the remixHandler if no asset is found.