Skip to content

react-examples

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

react-examples

README.md

Cloudflare RealtimeKit React UI Examples

Contents

  1. Introduction
  2. About This Repository
  3. Setting Up the Project
  4. Usage
  5. Contributing
  6. License

Introduction

This repository consists of all the different ways in which you can use Cloudflare RealtimeKit's React UI and other packages to its full extent to get the best live audio/video experience.

Examples

Here are the list of available examples at the moment.

  1. Default Meeting UI
  2. Using Background Transformer to modify your background
  3. Audio Room
  4. Facetime
  5. Chat
  6. Live Auction App

Usage

First, you'll need to create a meeting and add a participant to that meeting.

You can do so by following the Cloudflare RealtimeKit documentation.

Make sure you've created your Cloudflare account at https://dash.cloudflare.com/ and have your Account ID and API Token ready.

  1. Follow the Cloudflare RealtimeKit documentation to create a new Room.
  2. Create a new Session Token to join the room.

Once you're done, you'll get an authToken, which you can use in an example as explained below.

Here are steps to try out the examples:

  1. Clone the repo:
git clone https://github.com/cloudflare/realtimekit-web-examples.git
  1. Change directory to the example you want to try, for example: in default-meeting-ui:
cd examples/default-meeting-ui
  1. Install the packages with your preferred package manager and start a development server and open up the page.
npm install
# and to start a dev server
npm run dev
  1. Load the dev server in your browser and make sure you pass the authToken query in the URL.
http://localhost:5173/?authToken=<your-token>