CloudflareCalls.js

A reference implementation of Cloudflare Calls, including a client-side library (CloudflareCalls class), and a minimal Express signaling server.

Library Docs | API (server) Docs | GitHub | Demo

Getting Started

Cloudflare Calls requires a backend server to protect its CLOUDFLARE_APP_ID and CLOUDFLARE_APP_SECRET. These are stored as environment variables in this example.

Optionally, CLOUDFLARE_TURN_ID and CLOUDFLARE_TURN_TOKEN are used to authenticate users to Cloudflare's ICE servers.

You will receive all of these tokens and identifiers after creating a Cloudflare Calls Serverless SFU app on your dashboard. The TURN section is optional, but recommended.

Your backend server (and our Express server in this example) is responsible for peer discovery and track discovery. Cloudflare does not provide this as part of the Calls service.

Authentication and moderation functions should be implemented on the provided routes as you see fit for your application.

The included /auth/token route on the server is for demonstration only, and issues a JWT token without authentication, to demonstrate the implementation requirements in the client library and server to secure requests to SFU resources.

Everything you need to run the demo app is included in the example server, with no special dependencies. There is no database so it cannot scale past a single server instance.

Demo

Try the demo to see how the implemented methods function in a real application.

Usage

Setting up

  1. Instantiate an instance of CloudflareCalls class:
import CloudflareCalls from './CloudflareCalls.js';

const calls = new CloudflareCalls({
    backendUrl: 'http://localhost:5001',
    websocketUrl: 'ws://localhost:5001'
});

Additionally, Cloudflare recommends the inclusion of the webrtc-adapter. This is a shim to insulate apps from WebRTC spec changes and browser prefix differences.

Establishing a call between participants

  1. Get media devices
  2. Preview Media (optional)
  3. Handle onParticipantJoined, onRemoteTrack, onDataMessage
  4. Create a room (only one participant needs to do this, returns a GUID)
  5. Join a room (by GUID)

You can see an example of this flow in the example included at public/index.html.