Spaces:
Running
Running
| <html lang="en"> | |
| <!-- Mirrored from cloudflarecalls.jamesfuthey.com/docs/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 19 Feb 2025 14:59:44 GMT --> | |
| <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack --> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Home - Documentation</title> | |
| <script src="scripts/prettify/prettify.js"></script> | |
| <script src="scripts/prettify/lang-css.js"></script> | |
| <!--[if lt IE 9]> | |
| <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <link type="text/css" rel="stylesheet" href="styles/prettify.css"> | |
| <link type="text/css" rel="stylesheet" href="styles/jsdoc.css"> | |
| <script src="scripts/nav.js" defer></script> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body> | |
| <input type="checkbox" id="nav-trigger" class="nav-trigger" /> | |
| <label for="nav-trigger" class="navicon-button x"> | |
| <div class="navicon"></div> | |
| </label> | |
| <label for="nav-trigger" class="overlay"></label> | |
| <nav > | |
| <h2><a href="index-2.html">Home</a></h2><h3>Classes</h3><ul><li><a href="CloudflareCalls.html">CloudflareCalls</a><ul class='methods'><li data-type='method'><a href="CloudflareCalls.html#createRoom">createRoom</a></li><li data-type='method'><a href="CloudflareCalls.html#getAvailableDevices">getAvailableDevices</a></li><li data-type='method'><a href="CloudflareCalls.html#getConnectionStats">getConnectionStats</a></li><li data-type='method'><a href="CloudflareCalls.html#getSessionState">getSessionState</a></li><li data-type='method'><a href="CloudflareCalls.html#getTrackStatus">getTrackStatus</a></li><li data-type='method'><a href="CloudflareCalls.html#getUserInfo">getUserInfo</a></li><li data-type='method'><a href="CloudflareCalls.html#getUserMetadata">getUserMetadata</a></li><li data-type='method'><a href="CloudflareCalls.html#joinRoom">joinRoom</a></li><li data-type='method'><a href="CloudflareCalls.html#leaveRoom">leaveRoom</a></li><li data-type='method'><a href="CloudflareCalls.html#listParticipants">listParticipants</a></li><li data-type='method'><a href="CloudflareCalls.html#listRooms">listRooms</a></li><li data-type='method'><a href="CloudflareCalls.html#onConnectionStats">onConnectionStats</a></li><li data-type='method'><a href="CloudflareCalls.html#onDataMessage">onDataMessage</a></li><li data-type='method'><a href="CloudflareCalls.html#onParticipantJoined">onParticipantJoined</a></li><li data-type='method'><a href="CloudflareCalls.html#onParticipantLeft">onParticipantLeft</a></li><li data-type='method'><a href="CloudflareCalls.html#onRemoteTrack">onRemoteTrack</a></li><li data-type='method'><a href="CloudflareCalls.html#onRemoteTrackUnpublished">onRemoteTrackUnpublished</a></li><li data-type='method'><a href="CloudflareCalls.html#onRoomMetadataUpdated">onRoomMetadataUpdated</a></li><li data-type='method'><a href="CloudflareCalls.html#onTrackStatusChanged">onTrackStatusChanged</a></li><li data-type='method'><a href="CloudflareCalls.html#onWebSocketMessage">onWebSocketMessage</a></li><li data-type='method'><a href="CloudflareCalls.html#previewMedia">previewMedia</a></li><li data-type='method'><a href="CloudflareCalls.html#publishTracks">publishTracks</a></li><li data-type='method'><a href="CloudflareCalls.html#selectAudioInputDevice">selectAudioInputDevice</a></li><li data-type='method'><a href="CloudflareCalls.html#selectAudioOutputDevice">selectAudioOutputDevice</a></li><li data-type='method'><a href="CloudflareCalls.html#selectVideoInputDevice">selectVideoInputDevice</a></li><li data-type='method'><a href="CloudflareCalls.html#sendDataToAll">sendDataToAll</a></li><li data-type='method'><a href="CloudflareCalls.html#setDebugMode">setDebugMode</a></li><li data-type='method'><a href="CloudflareCalls.html#setMediaQuality">setMediaQuality</a></li><li data-type='method'><a href="CloudflareCalls.html#setToken">setToken</a></li><li data-type='method'><a href="CloudflareCalls.html#setUserMetadata">setUserMetadata</a></li><li data-type='method'><a href="CloudflareCalls.html#shareScreen">shareScreen</a></li><li data-type='method'><a href="CloudflareCalls.html#startStatsMonitoring">startStatsMonitoring</a></li><li data-type='method'><a href="CloudflareCalls.html#stopStatsMonitoring">stopStatsMonitoring</a></li><li data-type='method'><a href="CloudflareCalls.html#toggleMedia">toggleMedia</a></li><li data-type='method'><a href="CloudflareCalls.html#unpublishAllTracks">unpublishAllTracks</a></li><li data-type='method'><a href="CloudflareCalls.html#updatePublishedTracks">updatePublishedTracks</a></li><li data-type='method'><a href="CloudflareCalls.html#updateRoomMetadata">updateRoomMetadata</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#broadcastToRoom">broadcastToRoom</a></li><li><a href="global.html#getRoomIdByUserId">getRoomIdByUserId</a></li><li><a href="global.html#getWebSocketByUserId">getWebSocketByUserId</a></li><li><a href="global.html#handleDataMessage">handleDataMessage</a></li><li><a href="global.html#handleWSDisconnect">handleWSDisconnect</a></li><li><a href="global.html#handleWSJoin">handleWSJoin</a></li><li><a href="global.html#rooms">rooms</a></li><li><a href="global.html#server">server</a></li></ul> | |
| </nav> | |
| <div id="main"> | |
| <section class="package"> | |
| <h3> </h3> | |
| </section> | |
| <section class="readme usertext"> | |
| <article><h1>CloudflareCalls.js</h1> | |
| <p>A reference implementation of Cloudflare Calls, including a client-side library <a href="CloudflareCalls.html">(CloudflareCalls class)</a>, and a minimal Express <a href="api/index.html">signaling server</a>.</p> | |
| <p><a href="index.html">Library Docs</a> | <a href="api/index.html">API (server) Docs</a> </p> | |
| <h1>Getting Started</h1> | |
| <p>Cloudflare Calls requires a backend server to protect its <code>CLOUDFLARE_APP_ID</code> and <code>CLOUDFLARE_APP_SECRET</code>. These are stored as environment variables in this example.</p> | |
| <p>Optionally, <code>CLOUDFLARE_TURN_ID</code> and <code>CLOUDFLARE_TURN_TOKEN</code> are used to authenticate users to Cloudflare's ICE servers.</p> | |
| <p>You will receive all of these tokens and identifiers after creating a <a href="https://dash.cloudflare.com/?to=/:account/calls">Cloudflare Calls Serverless SFU app</a> on your dashboard. The TURN section is optional, but recommended.</p> | |
| <p>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.</p> | |
| <p>Authentication and moderation functions should be implemented on the provided routes as you see fit for your application.</p> | |
| <p>The included <code>/auth/token</code> 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.</p> | |
| <p>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.</p> | |
| <h2>Demo</h2> | |
| <p>Try the <a href="../index.html">demo</a> to see how the implemented methods function in a real application.</p> | |
| <h1>Usage</h1> | |
| <h2>Setting up</h2> | |
| <ol> | |
| <li>Instantiate an instance of <code>CloudflareCalls</code> class:</li> | |
| </ol> | |
| <pre class="prettyprint source lang-js"><code>import CloudflareCalls from './CloudflareCalls.js'; | |
| const calls = new CloudflareCalls({ | |
| backendUrl: 'http://localhost:5001', | |
| websocketUrl: 'ws://localhost:5001' | |
| }); | |
| </code></pre> | |
| <p>Additionally, Cloudflare recommends the inclusion of the <a href="https://cdnjs.com/libraries/webrtc-adapter/8.1.2">webrtc-adapter</a>. This is a shim to insulate apps from WebRTC spec changes and browser prefix differences.</p> | |
| <h2>Establishing a call between participants</h2> | |
| <ol start="2"> | |
| <li><a href="CloudflareCalls.html#getAvailableDevices">Get media devices</a></li> | |
| <li><a href="CloudflareCalls.html#previewMedia">Preview Media (optional)</a></li> | |
| <li>Handle <a href="CloudflareCalls.html#onParticipantJoined">onParticipantJoined</a>, <a href="CloudflareCalls.html#onRemoteTrack">onRemoteTrack</a>, <a href="CloudflareCalls.html#onDataMessage">onDataMessage</a></li> | |
| <li><a href="CloudflareCalls.html#createRoom">Create a room</a> (only one participant needs to do this, returns a GUID)</li> | |
| <li><a href="CloudflareCalls.html#joinRoom">Join a room</a> (by GUID)</li> | |
| </ol> | |
| <p>You can see an example of this flow in the example included at <code>public/index.html</code>.</p></article> | |
| </section> | |
| </div> | |
| <br class="clear"> | |
| <footer> | |
| Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.4</a> on Tue Dec 31 2024 08:15:00 GMT+0000 (Coordinated Universal Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme. | |
| </footer> | |
| <script>prettyPrint();</script> | |
| <script src="scripts/polyfill.js"></script> | |
| <script src="scripts/linenumber.js"></script> | |
| </body> | |
| <!-- Mirrored from cloudflarecalls.jamesfuthey.com/docs/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 19 Feb 2025 14:59:44 GMT --> | |
| </html> |