https://github.com/cloudflare/orange
https://github.com/cloudflare/orange
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/cloudflare/orange
- Owner: cloudflare
- License: other
- Created: 2024-03-25T16:53:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-11T22:09:53.000Z (2 months ago)
- Last Synced: 2025-05-11T23:19:27.069Z (2 months ago)
- Language: TypeScript
- Homepage: https://demo.orange.cloudflare.dev/
- Size: 8.31 MB
- Stars: 1,900
- Watchers: 17
- Forks: 299
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Welcome to Orange Meets
Orange Meets is a demo application built using [Cloudflare Calls](https://developers.cloudflare.com/calls/). To build your own WebRTC application using Cloudflare Calls, get started in the [Cloudflare Dashboard](https://dash.cloudflare.com/?to=/:account/calls).
Simpler examples can be found [here](https://github.com/cloudflare/calls-examples).
[Try the demo here!](https://demo.orange.cloudflare.dev)
## Architecture Diagram
## Variables
Go to the [Cloudflare Calls dashboard](https://dash.cloudflare.com/?to=/:account/calls) and create an application.
Put these variables into `.dev.vars`
```
CALLS_APP_ID=
CALLS_APP_SECRET=
```
### 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 customise these variables, place replacement values in `.dev.vars` (for development) and in the `[vars]` section of `wrangler.toml` (for the deployment).
## Development
```sh
npm install
npm run dev
```
Open up [http://127.0.0.1:8787](http://127.0.0.1:8787) and you should be ready to go!
## Deployment
1. Make sure you've installed `wrangler` and are logged in by running:
```sh
wrangler login
```
2. Update `CALLS_APP_ID` in `wrangler.toml` to use your own Calls App ID
3. You will also need to set the token as a secret by running:
```sh
wrangler secret put CALLS_APP_SECRET
```
or to programmatically set the secret, run:
```sh
echo REPLACE_WITH_YOUR_SECRET | wrangler secret put CALLS_APP_SECRET
```
4. Optionally, you can also use [Cloudflare's TURN Service](https://developers.cloudflare.com/calls/turn/) by setting the `TURN_SERVICE_ID` variable in `wrangler.toml` and `TURN_SERVICE_TOKEN` secret using `wrangler secret put TURN_SERVICE_TOKEN`
5. Also optionally, you can include `OPENAI_MODEL_ENDPOINT` and `OPENAI_API_TOKEN` to use OpenAI's [Realtime API with WebRTC](https://platform.openai.com/docs/guides/realtime-webrtc) to [invite AI](https://www.youtube.com/watch?v=AzMpyAbZfZQ) to join your meeting.
6. Finally you can run the following to deploy:
```sh
npm run deploy
```