Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
December 2, 2020 17:45
December 2, 2020 17:45
November 4, 2022 21:18
December 2, 2020 17:45
December 2, 2020 17:45
December 2, 2020 17:45
September 15, 2021 10:06
March 15, 2023 17:55
December 2, 2020 17:45
December 2, 2020 17:45

A video chat app using React and the Daily JavaScript API

Note: As of July 2022, Daily's team recommends using the custom-video-daily-react-hooks demo app for sample code instead of this repo. It has a similar feature set (all features covered here are included, plus some extras!). Additionally, it showcases how to build a custom Daily video app using Daily React Hooks, Daily's custom React hooks library.

Daily recommends using Daily React Hooks for all custom React apps.

This demo is meant to showcase a basic but complete video chat web app using React and the low-level Daily call object. The call object gives you direct access to the audio and video tracks, letting you build your app however you'd like with those primitives.

Two participants on a video chat call

For a step-by-step guide on how we built this demo, check out our blog post.

Check out a live version of the demo here.


How the demo works

In our app, when a user clicks to start a call, the app will create a meeting room, pass the room’s URL to a new Daily call object, and join the call [0]. The call object is something that keeps track of important information about the meeting, like other participants (including their audio and video tracks) and the things they do on the call (e.g. muting their mic or leaving), and provides methods for interacting with the meeting. The app leverages this object to update its state accordingly, and to carry out user actions like muting or screen-sharing. When the user leaves the meeting room, the call object is destroyed.

[0] If you'll be hardcoding the room URL for testing, the room will be passed as is to the call object. It bears repeating that this is NOT recommended for production.

Please note this project is designed to work with rooms that have privacy set to public. If you are hardcoding a room URL, please bare in mind that token creation, pre-authorization and knock for access have not been implemented (meaning other participants may not be able to join your call)

Running locally

  1. Install dependencies npm i
  2. Start dev server npm run dev
  3. Then open your browser and go to http://localhost:3002
  4. Add the Daily room URL you created to line 31 of api.js, and follow the comment's instructions.


Running using Netlify CLI

If you want access to the Daily REST API (using the proxy as specified in netlify.toml) as well as a more robust local dev environment, please do the following (in this project's directory):

  1. Deploy to your Netlify account Deploy with Netlify
  2. Install the Netlify CLI npm i -g netlify-cli
  3. Login to your account netlify login
  4. Rename sample.env to .env and add your API key
  5. Start the dev server netlify dev

Note: If the API proxy isn't working locally you may need to run netlify build first. This will put API key in the netlify.toml file, so make sure you don't commit this change.

Contributing and feedback

Let us know how experimenting with this demo goes! Feel free to open an Issue, or reach us any time at You can also join the conversation about this demo on DEV.

What's next

To get to know even more Daily API methods and events, explore our other demos, like how to add your own chat interface.

Related blog posts/tutorials

Learn more about how to build your own video chat app in React using Daily with this tutorial.


A react demo showcasing daily-js in call object mode


Code of conduct





No releases published


No packages published