adrianhajdin/project_video_chat

This is a code repository for the corresponding YouTube video. In this tutorial, we're going to build and deploy a React Video Chat Application using WebRTC.

Realtime Chat Application

Introduction

This is a code repository for the corresponding video tutorial.

In this tutorial, we're going to build and deploy a React Video Chat Application using WebRTC.

Setup:

• run npm i && npm start for both client and server side to start the development server

project_video_chat's Issues

Error while running react app

Issues as like

react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   at resolveDispatcher (react.development.js:1476:1)
   at Object.useContext (react.development.js:1484:1)
   at useTheme (useTheme.js:4:1)
   at useStyles (makeStyles.js:222:1)
   at WithStyles (withStyles.js:55:1)
   at renderWithHooks (react-dom.development.js:14985:1)
   at updateForwardRef (react-dom.development.js:17044:1)
   at beginWork (react-dom.development.js:19098:1)
   at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
   at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
   resolveDispatcher @ react.development.js:1476
   useContext @ react.development.js:1484
   useTheme @ useTheme.js:4
   useStyles @ makeStyles.js:222
   WithStyles @ withStyles.js:55
   renderWithHooks @ react-dom.development.js:14985
   updateForwardRef @ react-dom.development.js:17044
   beginWork @ react-dom.development.js:19098
   callCallback @ react-dom.development.js:3945
   invokeGuardedCallbackDev @ react-dom.development.js:3994
   invokeGuardedCallback @ react-dom.development.js:4056
   beginWork$1 @ react-dom.development.js:23964
   performUnitOfWork @ react-dom.development.js:22776
   workLoopSync @ react-dom.development.js:22707
   renderRootSync @ react-dom.development.js:22670
   performSyncWorkOnRoot @ react-dom.development.js:22293
   scheduleUpdateOnFiber @ react-dom.development.js:21881
   updateContainer @ react-dom.development.js:25482
   (anonymous) @ react-dom.development.js:26021
   unbatchedUpdates @ react-dom.development.js:22431
   legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
   render @ react-dom.development.js:26103
   ./src/index.js @ index.js:10
   options.factory @ react refresh:6
   webpack_require @ bootstrap:24
   (anonymous) @ startup:7
   (anonymous) @ startup:7
   react-dom.development.js:20085 The above error occurred in the <WithStyles(ForwardRef(AppBar))> component:

   at WithStyles (http://localhost:3000/static/js/bundle.js:44508:31)
   at div
   at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:10
options.factory @ react refresh:6
webpack_require @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   at resolveDispatcher (react.development.js:1476:1)
   at Object.useContext (react.development.js:1484:1)
   at useTheme (useTheme.js:4:1)
   at useStyles (makeStyles.js:222:1)
   at WithStyles (withStyles.js:55:1)
   at renderWithHooks (react-dom.development.js:14985:1)
   at updateForwardRef (react-dom.development.js:17044:1)
   at beginWork (react-dom.development.js:19098:1)
   at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
   at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
   resolveDispatcher @ react.development.js:1476
   useContext @ react.development.js:1484
   useTheme @ useTheme.js:4
   useStyles @ makeStyles.js:222
   WithStyles @ withStyles.js:55
   renderWithHooks @ react-dom.development.js:14985
   updateForwardRef @ react-dom.development.js:17044
   beginWork @ react-dom.development.js:19098
   callCallback @ react-dom.development.js:3945
   invokeGuardedCallbackDev @ react-dom.development.js:3994
   invokeGuardedCallback @ react-dom.development.js:4056
   beginWork$1 @ react-dom.development.js:23964
   performUnitOfWork @ react-dom.development.js:22776
   workLoopSync @ react-dom.development.js:22707
   renderRootSync @ react-dom.development.js:22670
   performSyncWorkOnRoot @ react-dom.development.js:22293
   scheduleUpdateOnFiber @ react-dom.development.js:21881
   updateContainer @ react-dom.development.js:25482
   (anonymous) @ react-dom.development.js:26021
   unbatchedUpdates @ react-dom.development.js:22431
   legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
   render @ react-dom.development.js:26103
   ./src/index.js @ index.js:10
   options.factory @ react refresh:6
   webpack_require @ bootstrap:24
   (anonymous) @ startup:7
   (anonymous) @ startup:7
   manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

More Vital Issue:
react-dom.development.js:20085 The above error occurred in the <WithStyles(ForwardRef(AppBar))> component:

at WithStyles (http://localhost:3000/static/js/bundle.js:44508:31)
at div
at App

@adrianhajdin please look into this.

Unhandled Rejection (TypeError): myVideo.current is undefined

C:/Users/mohdw/Desktop/WebRTC/client/src/SocketContext.js:26

.then((currentStream) => {
setStream(currentStream);

        myVideo.current.srcObject = currentStream;
    });

TypeError: Cannot set properties of undefined (setting 'srcObject')

Cannot set properties of undefined (setting 'srcObject')
TypeError: Cannot set properties of undefined (setting 'srcObject')
at http://localhost:3000/static/js/bundle.js:181:33

Getting this error "Uncaught TypeError: Cannot read property 'renegotiate' of undefined" once I establish connection with myself

After deployment I am unable to establish connection with anyone, maybe due to the above issue.

Error: Invalid hook call.

`Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.`

I'm getting this error in line client/src/App.js:36

getting this weird error " Error: Function components cannot have string refs. We recommend using useRef() instead"

in the index.js of client

Cross Origin Issue

I am facing cross origin Issue and I have code to do without cross origin but that is not working can you give your solution for your video chat code.

Uncaught Error: Connection failed. at n.value (index.js:699) at RTCPeerConnection.i._pc.onconnectionstatechange (index.js:118) index.js:699

Getting the following error when i call the client outside my network at first time it connects properly but afterwards it does not and the client videos shows blank get the following error in the console : Uncaught Error: Connection failed.
at n.value (index.js:699)
at RTCPeerConnection.i._pc.onconnectionstatechange (index.js:118) index.js:699

TypeError: userVideo.current is undefined

answerCall/<
~/src/SocketContext.js:45

42 | });
43 |
44 | peer.on('stream', (currentStream) => {

45 | userVideo.current.srcObject = currentStream;
| ^ 46 | });
47 |
48 | peer.signal(call.signal);

copy to clipboard refreshing the page and TypeErro at getUserMedia setting srcObject

TypeError: Cannot set properties of undefined (setting 'srcObject')
at getUserMedia (SocketContext.js:42:1)

How to deploy it?

Only error , not work !

Cloned this library and tried in my local server but everytime I got error navigation.media....... undefined ! Unexpected error .

Uncaught Error: Connection failed.

With a clean clone of this repository, and changing the server to the local server running on port 5000. (The associated heroku app is dead), I see the following error when I attempt to call myself (Probably would be the same calling other people in production):

index.js:699 Uncaught Error: Connection failed.

I looked in: chrome://webrtc-internals/ and it appears that there is no connection being established over ice/stun?

Right side video not coming

I have tested a lot with even myvideo but the right side video does not seem to appear I have tried everything
I also wrote a js statement to see if the uservideo exists which comes out to be true

I am not able to view myvideo as well right side
it only appears if I refresh the page

Copy Your ID Button not working properly

how can i change it into a video conferencing web app?

Camera is not working like mirror cam

Hi, I tried this code and it's working but i am facing one issue , when I run this app locally its not showing camera like mirror . I clone your code and run on server locally and facing same issue on this code also.