React Video Chat App | WebRTC Video Chat Zoom Clone | Tabnine

Create a React Video Chat Application using WebRTC.

As you know,, most of the social and work life moved online; that sparked an evolution in video sharing services like Zoom, Google Meet, and many others. Today, you're going to build an app that allows you to video chat with your friends and colleagues just as well as Zoom does.

📚 Materials/References:

🌎 Find Me Here:

[fraction]

You’re the reason I made it to the third round interview for a software engineering role. Thank you for all of your videos!

[shashankojha]

In the video, when you are installing the npm packages for the React App(like @material-ui/core @material-ui/icons ...) then you are inside the main project folder and not inside the client folder because of which when we use <AppBar /> or <Typography /> in our React App there is an error thrown that states "Error: Invalid hook call. Hooks can only be called inside of the body of a function component...." .The following error is hard to judge and it might cause many peoples to get frustated and leave the project in between.

How to fix it : Install the npm packages for the React App(like @material-ui/core @material-ui/icons ...) inside the /client folder .

PS: I myself is not completely able to detect the real meaning behind the error displayed. Is it because there are two different versions of React available in same Project?? If yes, then How?? Could someone please provide an explanation for it.

[Ejackson]

Hi guys! I was wondering if anyone could help me with this error that I received, I got an Uncaught (in promise) TypeError: Cannot set properties of null (setting 'srcObject') in 54:30. Help would be much appreciated, thanks!

[vivekmohan]

Hey JSM, it'll be cool to integrate this in your Microsoft Teams app

[parasdarmal]

Hi getting this error Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'srcObject')
at SocketContext.js:26:1. Can you please help?

[CodeDreamer]

Wow, cloned repo, did yarn install, made a couple minor bugfixes, and presto, it actually worked for me. Thank you! Now I get to really have some fun adding features like mute and disable camera, etc.

[strawhat]

Thanks, bro! I requested the video and you really created a video on it. Thank you so much ❤❤❤

[subujekupadupa]

Lacks a lot of things, very poorly explained what the code does

[adante]

This is phenomenal. How do you know, and learn about the specific libraries and packages? Fantastic tutorial. You're continuously setting the bar. 👍

[areyoukidding]

if possible help me . when i was clicking on call button then there was no response. neither a error nor the notification. i followed the same procedure as shown

[bba]

For those having difficulty rendering the video, what worked for me was adding this to my ContextProvider:

useEffect(() => {
if (myVideo.current) {
myVideo.current.srcObject = stream;
}
}, [myVideo, stream]);

Essentially what I think happened was a looping error where:
1. stream was null
2. <Paper> component was unmounted from the DOM
3. the ref couldn't be set
4. stream couldn't be passed to the unset ref

The useEffect fixes this by keeping track of ref and state changes and updating it if a change occurs. So my understanding is:
1. the stream gets set initially using:

navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((currentStream) => {
setStream(currentStream);
});

(but at this point there's still no ref so you cant set it here)

2. the <Paper component gets mounted because stream has been set

3. when this component is mounted, the myVideo ref gets set

4. once the ref is set, the [myVideo, stream] useEffect gets run again and finally assigns the stream to the myVideo ref

[pantherff]

I haved completed this project but i have a problem that call button is not working, when I click the call button is not giving the content in the notifications.i am unable to make a call to another.😢😢

[HasanAli-vpci]

Please add extra features like sharing screen, turn off video, audio.. fantastic tutorial by the way❤️

[pranjalpatil]

Can you please help, I am getting these errors :
index.js:1 Uncaught Error: The error you provided does not contain a stack trace.
localhost/:1 Uncaught (in promise) DOMException: Permission denied
I am not able to move past 54:46

[TungNguyen-ezev]

When i click Call, It doesn''t work. Can anyone explaint to me ???

[shrutiomatic]

Hey bro i cloned your project the I'd is not getting copied?

[placideirandora]

Thank you for sharing this video content. I have been searching for helpful content to help me implement WebRTC in my current project for the Video Chat feature and here comes your tutorial today. I'm lucky because the rest tutorials were not clear enough as yours. Thank you once again, you've saved me a lot of time!

[tushaltak]

i am not passing data in context i am passing data in child component direct as a props
it gives error,
"Cannot set properties of undefined (setting 'srcObject') " please help

[deepanshutejan]

I have subscribed u with all my youtube accounts😁.And also, Bro we need more features in it pls.(like screen sharing, chat).

[chakrasactivation]

I think client side is not listening to callended event broadcasted from the server.. in that case the app for the user who pressed the hang up button will work fine, but the other one will have to refresh manually....I think we can do the same as leavecall function while listening for callEnded event in useEffect hook...please lemme know whether I am right or wrong....excellent work btw