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.

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.

Prerequisites

• Sign up for a Daily account.
• Create a Daily room URL to test a video call quickly and hardcode a room URL (this is NOT recommended for production).

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.

OR...

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
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 [email protected]. 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.