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 .
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!
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
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?
@@Ejackson11 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); } }); // ...
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.
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!
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.
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!!
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') })
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.
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
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
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
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
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
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 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.
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
@@javascriptmastery moreover, almost all JavaScript jobs now require typescript knowledge. I personally don't like typescript, but it would be nice to have a good basic or intermediate knowledge.
Hi getting this error Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'srcObject') at SocketContext.js:26:1. Can you please help?
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 !!!!!!
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 tutorial. Couple things I need to bring up though. One might just be me. 1. Works as it should when calling yourself using a single browser window as demonstrated in your tutorial. When I try to use it between 2 browsers windows or different browsers (Chrome/Firefox) on the same computer the name of the caller doesn't show. When I tried it between 2 different computers it didn't work at all. Error I get is 'Uncaught (in promise) DOMException: Requested device not found. 2. This is more design. Assuming everything works how would you use this? If you send someone your id then is said that you are calling yourself. Because you are entering the id on your end instead of being called by someone else the "name is calling" won't work as intended. In other word this will never work where the receiver will see the name of who is calling and when answered you won't see the names of each person in the video box. I appreciate these videos and hate to be greedy but it would be great if you could possibly make an update to this video with all the kinks worked out. Just discovered your channel and subscribed and will look into your paid content as well.
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
@@snehapandey8419 You should post your question as a new question rather than a reply to mine so that the content creator has an easier time seeing it. You will probably have to provide more information as well. Good luck.
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.😢😢
Cannot read properties of undefined (reading 'getUserMedia') This is the error I am getting if I try to check in the On Your Network: option. It shows that 12 frames are stacked
I want you to do a browser push notification without using firebase-cloud-messaging or gcm. And the notification service should work exactly same as facebook or linkedIn
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.
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!
let's not skip any add for JSM to help him create more content..
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!
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
Please add extra features like sharing screen,turn off video,audio.. fantastic tutorial by the way❤️
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?
@@Ejackson11 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
Been looking for a tutorial for a month and this was the only one that actually hellped.
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 :)
Thanks, bro! I requested the video and you really created a video on it. Thank you so much ❤❤❤
No problem 😊
Thank you so much, now i get to add a project to my resume. I will let you know when i get placed.
One of the Best channels with amazing projects.... Thank you so much for your self-giving
Thanks Andrej!
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!!!
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
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 👌
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.
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
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')
})
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
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.
sir make a complete react tutorial from basic to advanced. sir your teaching technique is very impressive.
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
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! ❤️
WOah! Thanks JSM for this video. I was looking for that :)
I'm glad :)
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!
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 ❤️
Your subscribe graph will become exponential in no time...good content!!!!!!
Hopefully you're right, thank you!
yah , sure
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
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!
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?
It's working , just need to update the material ui syntax , Good video, Thanks
Always making such awesome projects,you are simply BRILLIANT jsmastery,thank you.
Thank 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
Thank you for this course, had a really amazing time making this project.
Please make a video with AWS ,not teaching but using it for some project.
I have learned a lot from this channel.
Keep it up JSM sir...
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! 😊
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 loved his way of teaching :)
today i found your channel , it's great , i liked your video and subscribed
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 RUclips
Hope you'll like it! :)
Thank you for the great tutorial.
I am a fan of your channel.
Please continue your fantastic job!
Thank you!
Great video.
I will like you to do a Zoom clone after this..
It will be the ultimate challenge..
Thank you
Adrian, great tutorial. Amazing I learned a lot from this one. Thanks for the efforts.
JSM your content is amazing!
Thank you!
Thank you so much I am learning much interesting projects from your tutorials
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!
100k soon 💥💥💥
Yess! :D
Thank you soo much, such quality content . I keep waiting for your videos everyday
Thank you!
Please make complete series on Zoom clone or Meet clone with screen sharing and recording feature
Great idea!
You are my inspiartion. Love you bro
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.
That tab 9 is savage af 🔥 👌
thank a lot... please teach more about Socket & webRTC, like (mute microphone or webcam & ...) 😍
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 can't thank you enough man for creating just awesome tutorials.
Youuuu ore unbelievable , oh my words. we love you 💜
Thanks! 😊
O sir you are amazing. I really liked your video. Best ever on RUclips
Thank you so much 😀
@@javascriptmastery you are welcome
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!
Great video tutorial! hopefully you add multiple users and chat box to this project :)
Great idea :)
Thank you and please add mute and unmute option and also video on and video off option
Hey JSM, can you teach us something about how to create a stream media platform? such as a simpler RUclips!
Thanks for the tutorial, but I wished your next tutorial using typescript. Hope you will consider doing so. Thanks.
In the future, definitely!
@@javascriptmastery moreover, almost all JavaScript jobs now require typescript knowledge. I personally don't like typescript, but it would be nice to have a good basic or intermediate knowledge.
Hi getting this error Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'srcObject')
at SocketContext.js:26:1. Can you please help?
did you figure it out?
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 !!!!!!
Want more upgrade version. 👌👌👌
Thank you so much for the video, really needed it :-D
Glad it was helpful!
This was really awaited❤️
Thank you👍👍
You're welcome 😊
Sir , useRef is not working in another components what should we do
Please add more features to this app. I love your tutorials
Make an interesting multiplayer game in which we can can share a code with others and play.
You are a legend, You have a nice setup as well !!
Thank you!
@@javascriptmastery do a room tour
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!
Sir can we make it a full fledged video app!! By recording meetings creating sessions etc !!
Thanks for sharing this helpful content for free. This will help me sharpen my js and nodejs skills. Thanks so much Man ☺️
You can add a chat option, mute/unmute, etc
Great tutorial. Couple things I need to bring up though. One might just be me.
1. Works as it should when calling yourself using a single browser window as demonstrated in your tutorial. When I try to use it between 2 browsers windows or different browsers (Chrome/Firefox) on the same computer the name of the caller doesn't show. When I tried it between 2 different computers it didn't work at all. Error I get is 'Uncaught (in promise) DOMException: Requested device not found.
2. This is more design. Assuming everything works how would you use this? If you send someone your id then is said that you are calling yourself. Because you are entering the id on your end instead of being called by someone else the "name is calling" won't work as intended. In other word this will never work where the receiver will see the name of who is calling and when answered you won't see the names of each person in the video box.
I appreciate these videos and hate to be greedy but it would be great if you could possibly make an update to this video with all the kinks worked out. Just discovered your channel and subscribed and will look into your paid content as well.
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
@@snehapandey8419 You should post your question as a new question rather than a reply to mine so that the content creator has an easier time seeing it. You will probably have to provide more information as well. Good luck.
@@snehapandey8419 Pls did you rectify it? Cuz I'm also facing similar issue
@@oluwaseyijoshua2401 I'm also facing this same problem please help me
@@snehapandey8419 exactly same.. no error and no response
When I call someone, his name is just "Name", how can I fix this?
Very valuable content, thanks for this bro. Now I gotta learn react
Definitely :)
you are the best teacher :)
Thank you! :)
@@javascriptmastery Thank you for the heart 😭 :)
Instead of friend's ID..we could probably make use of Mobile No.(phone no.). Thanks
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.😢😢
I like ur video, great tutorial, you are fabulous, continue to upload more vedios
Thank you!
Hey JSM can you teach us how to build the portfilio site with online resume generator
Great idea!
hey a quick question can i call my brother with this app ,who lives in New York from Texas
Cannot read properties of undefined (reading 'getUserMedia')
This is the error I am getting if I try to check in the On Your Network: option. It shows that 12 frames are stacked
Hey Adrian, just a small request. Could you make more videos like teams app and that voice expense tracker?
Thanks again!
Sure!
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
super excited to create this thank's for this beautiful content
Glad you like it man!
I want you to do a browser push notification without using firebase-cloud-messaging or gcm.
And the notification service should work exactly same as facebook or linkedIn
I'm your biggest fan of theirs and I'm also following
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.
Can you please include multiple users and screen sharing/char features in the Part 2 video plz... I really need it soon.
Awesome tutorial. Thank you so much !! :)
Glad you like it! 😊
Hello sir. First, i want to thank you for this good tutorial.
I, have a question. Is this app can be called client-server application?
How powerful nodejs with webRtc can handing peer connection with SFU method?
Would've liked to see a button to mute & a button to stop the camera recording.