❗❗ 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.
- 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).
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)
- Install dependencies
npm i - Start dev server
npm run dev - Then open your browser and go to
http://localhost:3002 - Add the Daily room URL you created to line 31 of
api.js, and follow the comment's instructions.
OR...
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):
- Deploy to your Netlify account
- Install the Netlify CLI
npm i -g netlify-cli - Login to your account
netlify login - Rename
sample.envto.envand add your API key - Start the dev server
netlify dev
Note: If the API proxy isn't working locally you may need to run
netlify buildfirst. This will put API key in thenetlify.tomlfile, so make sure you don't commit this change.
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.
To get to know even more Daily API methods and events, explore our other demos, like how to add your own chat interface.
Learn more about how to build your own video chat app in React using Daily with this tutorial.