daily-demos / custom-video-daily-react-hooks Goto Github PK

A React demo showcasing daily-js and the Daily React library

HTML 1.23% CSS 20.49% JavaScript 78.28%

custom-video-daily-react-hooks's Introduction

Custom React video app with Daily React

This repository is part of a Daily blog post series on using the Daily React library to create a custom video calling app.

Features

This app includes:

Custom video tiles using Daily's APIs for multi-participant calls
A tray for local device management
Prejoin UI for device management before joining the call
Screen sharing
Custom text-based chat while in the call
Custom usernames
"Waiting for others" card

This is a demo app meant to showcase how to interact with the Daily APIs. It is not optimized for large calls. (Read our large meetings series for more information.)

Tutorial series

Find our full series on how we built this app on the Daily blog.

The first post in the series covers how to build the video components. The code in the v1.0 tag corresponds to this blog post.

The second post in the series covers how to build a prejoin UI. The code relevant to this post can be found in the v2.0 tag.

The third post in the series covers how to build a custom chat widget. The code relevant to this post can be found in the v3.0 tag.

All features mentioned above are available on main. Earlier versions exclude later features.

Deployed versions of the demo can be found below:

Requirements

To use this demo, you will first need to create a Daily account. You will also need a Daily room URL, which you can get via two options in this demo:

To create new Daily rooms directly through this demo's UI, you will need your Daily API key, which can be found on the Developers page. This will be used in your environment variables. (Instructions below.)
Alternatively, you can use existing Daily rooms in the demo by pasting the room URL into the input. The room URL should be in this format to be valid: https://your-domain.daily.co/room-name, with daily-domain changed to your domain, and room-name changed to the name of the existing room you would like to use.

Running locally

To run this demo locally:

Install dependencies npm install
Start dev server npm start
Then open your browser and go to http://localhost:3000.

Creating new rooms locally

To create new rooms via the app UI while testing locally, follow these additional steps:

rename example.env to .env
add your Daily API key (available in the Daily dashboard) to .env
add the value local to the REACT_APP_ROOM_ENDPOINT variable in .env

REACT_APP_DAILY_API_KEY=your-daily-api-key
REACT_APP_ROOM_ENDPOINT=local

Restart your server, i.e. re-run npm start

OR...

Deploy on Netlify

If you want access to the Daily REST API (using the proxy as specified in netlify.toml), you can deploy your own copy of this repo with one click via Netlify:

Note: You'll need your Daily API key handy for this step.

Visit the deployed domain provided by Netlify after completing this step to view the app.

custom-video-daily-react-hooks's People

Contributors

Stargazers

Watchers

custom-video-daily-react-hooks's Issues

Huge reverb issue with this demo

Hello Dear Daily developers,

Just by cloning the repo, changing api key and "npm run start", we have huge audio reverb issue.
I mean, echo issue.. Is this something normal? Do you have any solution for this?

Tested with multiple users, single user alone in the room, on different computers.
Using Chrome browser.

Daily video on ios

Hello Daily team, we are trying to make the rooms work on ios but we get an error each time it starts :

Error while creating  DailyCall object
TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.ondevicechange')
(fonction anonyme) — daily-iframe-esm.js:1:79874
i2 — daily-iframe-esm.js:1:84240
value — daily-iframe-esm.js:1:85271

Do you have any idea on the origin of the issue? Is the react video hook working on ios? Maybe you can share a working sample?

we are in need of a multi camera setup. Like one person wants to share 3 webcams.
It seems like the useDevices() hook cannot solve this problem. By loading multiple components with this hook, the only thing that happens is that one device is switched.

Project missing a LICENSE

This project is missing a license. Other projects from daily-demos which do have a license tend to favor the BSD-2-Clause license.

The projects missing a license are:

To avoid annoying you I won't spam this issue into all of those projects, but will put it on two or three in the hopes of this issue being seen by a team.

How to inject audio

how to inject audio like if I want to automate joining of a participant and from that participant I want to play an audio in the stream then how is it possible

Could not create rtc connection

Im trying to run the example on a mac but everytime i try to join a room i get the following error in the console.

 error: could not create rtc connection: SyntaxError: Failed to construct 'RTCPeerConnection': 'stun:global.stun.twilio.com:3478?transport=udp' is not a valid stun or turn URL. f31219b0-1686-408f-a12d-9f7009f45fe3
value @ unknown
 Meeting ended in error: Error during call.
value @ unknown
DevTools failed to load source map: Could not load content for http://localhost:3000/call-machine-object-bundle.js.map?2f2271: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
 peer-to-peer offer creation timed out f31219b0-1686-408f-a12d-9f7009f45fe3
value @ unknown
value @ unknown
eval @ unknown
onTimeout @ unknown
localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.