adrianhajdin / project_video_chat Goto Github PK
View Code? Open in Web Editor NEWThis 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.
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.
`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:
I'm getting this error in line client/src/App.js:36
TypeError: Cannot set properties of undefined (setting 'srcObject')
at getUserMedia (SocketContext.js:42:1)
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:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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:
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.
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?
After deployment I am unable to establish connection with anyone, maybe due to the above issue.
C:/Users/mohdw/Desktop/WebRTC/client/src/SocketContext.js:26
.then((currentStream) => {
setStream(currentStream);
myVideo.current.srcObject = currentStream;
});
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
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.
in the index.js of client
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 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
answerCall/<
~/src/SocketContext.js:45
42 | });
43 |
44 | peer.on('stream', (currentStream) => {
45 | userVideo.current.srcObject = currentStream;
| ^ 46 | });
47 |
48 | peer.signal(call.signal);
Cloned this library and tried in my local server but everytime I got error navigation.media....... undefined ! Unexpected error .
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.