Bro did you put this project in your resume? 'Cause I am also thinking of putting this one in my resume but I am confused like the HR might say "bruh this is a very small project"!
@@beastboy.. That's why you're supposed to create your own version of it from scratch after following the tutorial. If this is done anyone taking this course will be able to create it from scratch.
Hi there, I like your comment so much that I'd like to include it as a testimonial for my upcoming JSM Pro website. Do I have your permission to do that? :)
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.
hey were you successful in adding features like mute and control audio? Im following this tutorial only for voice communication and need some resources that might help me do that .
JSM you are the reason I made it into the third round for a software developer role. I love your channel. Keep doing what you do. You have massively helped me in creating a good-looking portfolio as well. Bless you my man
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!
As a beginner React programmer, I always wondered for a solution for a problem I faced in another one of my projects where I needed to get variables which I passed from another component. Using props didnt work. I learnt about useContext from this video, which was helpful for me. Thank you very much, you're doing a good job at teaching
Hey @PapaStone, I am really struggling on this error and I don't know if you had this error before, I was wondering if you can help me. I received a error on 54:00, Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'srcObject'). Any possible solution?
@@Emmb276 same here, it seems like the JSX is rendered after the SocketContext's job, so you might need to set a timeout before setting the srcObject in SocketContext.js, like this: useEffect(() => { navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then((currentStream) => { setStream(currentStream); if (myVideo.current) { myVideo.current.srcObject = currentStream; } else { setTimeout(function(){ myVideo.current.srcObject = currentStream; }, 1000); } }); // ...
One of the best JavaScript tutorials I have ever seen! Totally high-level polished, great content and easy explanation. Even thought I did not understand the SocketContext and Socket part, I really loved the tutorial. Waiting for more amazing tutorials!
Finally I host this application. I am thankful to you for this awesome project. I took help from ur's netlify video as well for hosting. Thank you so much!!!
Hey dear one, please help me in notification section my code is running totally fine with no error but at last while clicking call button, I'm unable to get notification also and not getting call.... Plz 🙏 help really need this!!
Sir you just became savior for me . I am looking for webrtc tutorial specifically in react and wondering if you will build this and now got this can't beleive this .❤️ lots of love huge fan
Cant lie pretty good content. I actually woke up today wondering how to deploy a backend application and threw it on the "agenda" for whenever I got to it. You killed two birds with one stone. Thanks man
Thanks a lot, exactly what I've been waiting for. Please can you make part two where a passcode is required to join a video chat and audio can be muted, video too, and also a little chat tab by the side. I will really appreciate it and others will too. God bless you.
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!
Superb JSM you are building awesome stuff very soon 100K Can you add Screen sharing and multiple users to stream at the same time.... That would make the app even more powerful and Insane
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 or 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.
Thanks man for this solution, i wonder how many tutorials i left just because of this problem, i was never able to find the right solution for this error.
Please add mute option, screen sharing,emojis option like in teams app and recording options and also multi user.Looking forward to implement and release the video because we are learning a lot from you and my placement season is starting so it will be very helpful if you can add some mentioned features or others so that I can learn something more.Please make a part 2 of it.
Hey JavaScript mastery very amazing videos since 2 years u are the best uploading soo many videos usefully . May can u add a feature adding more than two people in a video call Thank u For ur videos !!!!!!
Thank you so much. Your content is always unique and amazing. Please keep uploading react and nodejs videos. Can you make a video on payment gateway integration video in react and nodejs.
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. 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
As always awesome video mahn. Please make a video where we could disable the video and audio. Also would be great if this could be turned into a pwa app.. Have been here from the start glad you are reaching 100k. Always here to support your quality contents.
To be able to connect another call without reloading the page you just need to remove the callaccepted hook on the socket. Notice that the callUser function has a socket.on('callaccepted', {}) part? That needs to be removed when the peer is destroyed. In the callUser function, after initializing the Peer, just do this: peer.on('close', () => { socket.off('callaccepted') })
You might also want to reset all those call related state vars: peer.on('close', () => { setCallAccepted(false) setCallEnded(true) setCall(null) socket.off('callaccepted') })
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
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
this is one of the top channel. I hope you get lot more view very unique tutorials. How can you add screen sharing with video chat functionality. Could you please show us that on top of this
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
You’re the reason I made it to the third round interview for a software engineering role. Thank you for all of your videos!
Amazing man!
wow
Bro did you put this project in your resume? 'Cause I am also thinking of putting this one in my resume but I am confused like the HR might say "bruh this is a very small project"!
@@beastboy.. That's why you're supposed to create your own version of it from scratch after following the tutorial. If this is done anyone taking this course will be able to create it from scratch.
Hi there, I like your comment so much that I'd like to include it as a testimonial for my upcoming JSM Pro website. Do I have your permission to do that? :)
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.
Great, glad you like it!
hey were you successful in adding features like mute and control audio? Im following this tutorial only for voice communication and need some resources that might help me do that .
You’re the reason I made it to the third round interview for a software engineering role. Thanky ou!
JSM you are the reason I made it into the third round for a software developer role. I love your channel. Keep doing what you do. You have massively helped me in creating a good-looking portfolio as well. Bless you my man
Thank you! 🙌
company name ?
😂😂😂😂I tried other tutorial and came back to this page at last
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!
Thank you man, appreciate it!
Thanks, bro! I requested the video and you really created a video on it. Thank you so much ❤❤❤
No problem 😊
Been looking for a tutorial for a month and this was the only one that actually hellped.
Please add extra features like sharing screen,turn off video,audio.. fantastic tutorial by the way❤️
let's not skip any add for JSM to help him create more content..
As a beginner React programmer, I always wondered for a solution for a problem I faced in another one of my projects where I needed to get variables which I passed from another component. Using props didnt work. I learnt about useContext from this video, which was helpful for me. Thank you very much, you're doing a good job at teaching
Hey @PapaStone, I am really struggling on this error and I don't know if you had this error before, I was wondering if you can help me. I received a error on 54:00, Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'srcObject'). Any possible solution?
@@Emmb276 same here, it seems like the JSX is rendered after the SocketContext's job, so you might need to set a timeout before setting the srcObject in SocketContext.js, like this:
useEffect(() => {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then((currentStream) => {
setStream(currentStream);
if (myVideo.current) {
myVideo.current.srcObject = currentStream;
} else {
setTimeout(function(){
myVideo.current.srcObject = currentStream;
}, 1000);
}
});
// ...
Learning this alongside ChatGPT is a game changer
One of the best JavaScript tutorials I have ever seen! Totally high-level polished, great content and easy explanation. Even thought I did not understand the SocketContext and Socket part, I really loved the tutorial. Waiting for more amazing tutorials!
I love your comment! May I use it as a testimonial for my upcoming course platform? :)
@@javascriptmastery yeah sure! Please continue creating such amazing tutorials!
@@art_of_bayar awesome, contact me at javascriptmastery00@gmail.com please 👌
One of the Best channels with amazing projects.... Thank you so much for your self-giving
Thanks Andrej!
Your subscribe graph will become exponential in no time...good content!!!!!!
Hopefully you're right, thank you!
yah , sure
Finally I host this application.
I am thankful to you for this awesome project. I took help from ur's netlify video as well for hosting. Thank you so much!!!
I'm glad, thanks!
Hey dear one, please help me in notification section my code is running totally fine with no error but at last while clicking call button, I'm unable to get notification also and not getting call.... Plz 🙏 help really need this!!
I am also facing this same problem.
@@snehpipariya1259 had u fixed this bug? If so then plz help me🙏
@@madhusaini22 not yet
WOah! Thanks JSM for this video. I was looking for that :)
I'm glad :)
Thank you so much, now i get to add a project to my resume. I will let you know when i get placed.
I have to say, your contents are beyond Golden...You are the best
Another awesome project
Damn, you really are good at this, thanks for all the valuable content)
Thank you very much!
Thank you for the Video. I'm new to the WebRTC. But I'm gain more and more withing a short time period. Thank you again.
This is phenomenal. How do you know, and learn about the specific libraries and packages? Fantastic tutorial. You're continuously setting the bar. 👍
Thank you Sean! I also keep learning and improving. A lot of interesting things on the internet :)
thank you so much for the VDO, i'm a junior dev and this helps me understand context and socket so much better. very well explain
Hey, have you successfully implemented this project?
If yes, please share me the link
You are just amazing and you are the bone of God to us... seeing your videos we all get inspired. Thanks. Love from India ❤️
Greetings to India! ❤️
Sir you just became savior for me . I am looking for webrtc tutorial specifically in react and wondering if you will build this and now got this can't beleive this .❤️ lots of love huge fan
Thank you Vivek! 😊
Hello vivek
@@sourav6117 hello.👋
@@VivekSingh-cy9hy actually in my project video is not coming what should I do?
Cant lie pretty good content. I actually woke up today wondering how to deploy a backend application and threw it on the "agenda" for whenever I got to it. You killed two birds with one stone. Thanks man
Amazing, I'm glad!
Thank you for this course, had a really amazing time making this project.
Thanks a lot, exactly what I've been waiting for.
Please can you make part two where a passcode is required to join a video chat and audio can be muted, video too, and also a little chat tab by the side.
I will really appreciate it and others will too. God bless you.
I have learned a lot from this channel.
Keep it up JSM sir...
Adrian, great tutorial. Amazing I learned a lot from this one. Thanks for the efforts.
I can't thank you enough man for creating just awesome tutorials.
Youuuu ore unbelievable , oh my words. we love you 💜
Thanks! 😊
It's working , just need to update the material ui syntax , Good video, Thanks
100k soon 💥💥💥
Yess! :D
This was really awaited❤️
Thank you👍👍
You're welcome 😊
Thank you for the great tutorial.
I am a fan of your channel.
Please continue your fantastic job!
Thank you!
Hey bro you have full filled my purpose of life I have been waiting for this tutorial a lot, there is few tutorial over the UA-cam
Hope you'll like it! :)
Build Complete Quiz app with react. Your tutorial is very awesome and helping me to learn about react. Thank you.. 👍👍👍
I have a quizz app planned! 😊
today i found your channel , it's great , i liked your video and subscribed
That tab 9 is savage af 🔥 👌
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!
Great video tutorial! hopefully you add multiple users and chat box to this project :)
Great idea :)
Why are you so awesome sir? Guys don't buy courses, just come here🙂
Thank you! 😊
Thank you for replying. You are the best teacher ❤️
Superb JSM you are building awesome stuff very soon 100K
Can you add Screen sharing and multiple users to stream at the same time.... That would make the app even more powerful and Insane
Thank you!
Thank you soo much, such quality content . I keep waiting for your videos everyday
Thank you!
Always making such awesome projects,you are simply BRILLIANT jsmastery,thank you.
Thank you!
Thanks for sharing this helpful content for free. This will help me sharpen my js and nodejs skills. Thanks so much Man ☺️
Hey JSM , it'll be cool to integrate this in your Microsoft Teams app
Great idea Vivek!
@@javascriptmastery even a quick video integrating this to your Teams app will save my futur career xD
That was actually a thought of mine as well
O sir you are amazing. I really liked your video. Best ever on UA-cam
Thank you so much 😀
@@javascriptmastery you are welcome
JSM your content is amazing!
Thank you!
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 or 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.
This comment should be pined at the top thank you for mentioning this
Thanks man for this solution, i wonder how many tutorials i left just because of this problem, i was never able to find the right solution for this error.
Appreciate It Man. Thanks a Lot. In total I wasted 1 Hour in Searching Stack Overflow and Bugs.
@@054_heenaahmed8 try running "npm audit fix"
all you need to do is to stop the server and run it after installing material ui package
Please add mute option, screen sharing,emojis option like in teams app and recording options and also multi user.Looking forward to implement and release the video because we are learning a lot from you and my placement season is starting so it will be very helpful if you can add some mentioned features or others so that I can learn something more.Please make a part 2 of it.
Great ideas!
@@javascriptmastery Waiting!!!
I loved his way of teaching :)
You are my inspiartion. Love you bro
Hey JavaScript mastery very amazing videos since 2 years u are the best uploading soo many videos usefully . May can u add a feature adding more than two people in a video call
Thank u For ur videos !!!!!!
Thank you so much. Your content is always unique and amazing. Please keep uploading react and nodejs videos. Can you make a video on payment gateway integration video in react and nodejs.
Great idea!
@@javascriptmastery Love you brother. Will be waiting for that. Bless you.
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. 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
worked. thank you
Thanks bro, even GPT4 couldn't come with a solution so simple like this one. God bless you
i change in existing useEffect or add new useEffect@@xlgablx
As always awesome video mahn. Please make a video where we could disable the video and audio. Also would be great if this could be turned into a pwa app..
Have been here from the start glad you are reaching 100k. Always here to support your quality contents.
There is MDN documentation about mediaDevices API. Don't just rely on the video tutorials.
To be able to connect another call without reloading the page you just need to remove the callaccepted hook on the socket.
Notice that the callUser function has a socket.on('callaccepted', {}) part? That needs to be removed when the peer is destroyed.
In the callUser function, after initializing the Peer, just do this:
peer.on('close', () => {
socket.off('callaccepted')
})
You might also want to reset all those call related state vars:
peer.on('close', () => {
setCallAccepted(false)
setCallEnded(true)
setCall(null)
socket.off('callaccepted')
})
Thank you so much I am learning much interesting projects from your tutorials
I have subscribed u with all my youtube accounts😁.And also ,Bro we need more features in it pls.(like screen sharing,chat).
Coming in 2 weeks!
Waiting for it eagerly!! 😁,10 days to go⏭️
I eagerly wait for your videos
Now you have it :)
@@javascriptmastery you upload video weekly ....it will be very helpful for me
@@javascriptmastery i have completed and deployed.....it is working awesome
Awesome!
@@javascriptmastery i have made and deployed all of your projects.....all are good
Sir, I like your videos, you deserve ⭐️⭐️⭐️⭐️⭐️ 🔥
You’re are awesome 👏
Thank you so much 😀
I Loving it, nice, great work, I like the way you try to keep things exciting and interest
Thank you! 😊
@@javascriptmastery now I'm coding it along With you
Great video.
I will like you to do a Zoom clone after this..
It will be the ultimate challenge..
Thank you
You are a legend, You have a nice setup as well !!
Thank you!
@@javascriptmastery do a room tour
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
thanks man you saved a lot of time of mine
Want more upgrade version. 👌👌👌
Thank you so much for the video, really needed it :-D
Glad it was helpful!
sir make a complete react tutorial from basic to advanced. sir your teaching technique is very impressive.
Yes to more features
Coming if a lot of people request it
Very valuable content, thanks for this bro. Now I gotta learn react
Definitely :)
super excited to create this thank's for this beautiful content
Glad you like it man!
thank a lot... please teach more about Socket & webRTC, like (mute microphone or webcam & ...) 😍
I like ur video, great tutorial, you are fabulous, continue to upload more vedios
Thank you!
you are the best teacher :)
Thank you! :)
@@javascriptmastery Thank you for the heart 😭 :)
If you are having an issue with the dependencies, it has been addressed at 56:20
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
I was thinking the same thing. No one caught this mistake. Perfect that's exactly what I did and works. Thanks
Nice explanation of steps bro👌
this is one of the top channel. I hope you get lot more view very unique tutorials. How can you add screen sharing with video chat functionality. Could you please show us that on top of this
Great idea!
I'm your biggest fan of theirs and I'm also following
Man your content is gold
Thanks!
Awesome tutorial. Thank you so much !! :)
Glad you like it! 😊
Thank you for sharing your knowledge. Now i'm gonna build something similar :)
Your knowledge is wonderful ❤️
Thank you! Great content as always!
Thank you!
Thank you bro..... for your all videos
Thank you so much for building this. I request this you created it
Yes! 👌
Ah man !!!
Thanks for this one♥️
Thanks! ❤️
Thank you so much I am waiting for ur videos it's very useful
Thanks you very much for your awesome and valuable content
Glad you like it! 😊
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
You need to give camera & audio permissions , click the info on left of url and give permissions
I LOVEEE YOU ! Mad Respect Bro!
thanks for all the valuable content.
Glad you like it!
Hey JSM, can you teach us something about how to create a stream media platform? such as a simpler UA-cam!
Good day sir once again love this video.
I suggest you add a sign up page
It's the best webRTC app. thanks
Thank you so much for this quality product
Amazing tutorial, thank you :)
Thank you Axel!
Wonderful Done, Very Helpful