Daily Prebuilt UI demo

This demo highlights Daily's prebuilt UI, and how it can be used to embed a video chat widget in a website or app. The demo also illustrates how to use daily-js methods and events to build custom interfaces outside of the callframe that control the call.

Check out a live version of the demo here.

The demo's custom controls use these Daily methods:

• .setLocalVideo()
• .setLocalAudio()
• .startScreenShare()
• .stopScreenShare()
• .startRecording()
• .stopRecording()
• .requestFullscreen()
• .participants()
• .getNetworkStats()

Prerequisites

• Sign up for a Daily account if you'd like to insert your own URL into the Room URL input field.

How the demo works

The participant either clicks the "Create demo room" button, triggering a helper function that generates a temporary demo room, or enters their own Daily room URL into the input field.

Once a room has been created, the participant can click "Join call." This button calls the Daily .join() method, letting the participant into the call. The app listens for this meeting-joined event, and displays the control panel when the event fires. Each button in the panel triggers a corresponding Daily method when clicked.

Running locally

1. Install dependencies npm i
2. Start dev server npm run dev
3. Then open your browser and go to http://localhost:8080
4. Add your own room url in index.js and comment/uncomment the code as noted

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! Reach us any time at help@daily.co.

What's next

This demo shows off the Daily prebuilt UI, but it's also possible to build an entirely custom video chat interface using the Daily call object. Have a look at our React tutorial to get started.