How To Create A Video Chat App With WebRTC

  Рет қаралды 917,993

Web Dev Simplified

Web Dev Simplified

Күн бұрын

Пікірлер: 1 800
@llampwall
@llampwall 4 жыл бұрын
I like how you just set up from nothing. No dev environment stuff, no starter kit, just npm init. Makes me think about stuff in a lower level way. Makes me realize a lot of stuff is simpler than I’m making it.
@IgorogI1000
@IgorogI1000 3 жыл бұрын
Yeah, man. I feel you... With these videos I understand the concept of MVP
@PabloGnesutta
@PabloGnesutta 2 жыл бұрын
The stuff is not simpler than you are making it... You are just relying on libraries that do all the work for you and end up not understanding how the technology you use works at all
@PabloGnesutta
@PabloGnesutta 2 жыл бұрын
How is this at all making you think in a lower level way? It can't get higher level than this!
@fxstreamer238
@fxstreamer238 2 жыл бұрын
main stream nonsense to make the video longer apparently always appeals to people like you. how many times he has to create a server with npm init and express? The guy used to be a good youtuber but as he grew his channel he became robotic . focusing on trivial tasks like DOM and server creation and repeating the arguments as he is typing and calling it "explanation" . Rather than talking about the bone of WebRTC. ICe candidates SDP , NAT difficulties for symmetrical routers, TURN and STUN servers. Hell he didnt even mention that peerJS has limitations .
@jerryjeremy4038
@jerryjeremy4038 4 жыл бұрын
This guy is so dedicated at helping devs like me. Thanks bro
@sarpedonmontecarlo8397
@sarpedonmontecarlo8397 4 жыл бұрын
a simple, comprehensive, useful and well structured tutorial with nice and clean code, and an ASMR'ish voice along the way which was an amazing learning and experience for me! thanks to all in Web Dev Simplified, Cheers to all of you guys!
@fxstreamer238
@fxstreamer238 2 жыл бұрын
"comprehensive" LMFAO . You didnt comprehend sht about webrtc with this video.
@ibikunleshuaib7187
@ibikunleshuaib7187 4 жыл бұрын
I had intended writing a blog post today but this is way more interesting project to do today. Thanks Kyle.
@dummypg6129
@dummypg6129 4 жыл бұрын
I can say i am good with python, and it really amazes me when I am watching node tutorials. I dont even need it for something, i am just watching it.
@DeltaStudios1
@DeltaStudios1 4 жыл бұрын
it would be interesting to see more flushed out UI for something like this. Great video Kyle, cheers man!
@zenoteks
@zenoteks 4 жыл бұрын
After watching this, I could not resist subscribing to your channel immediately. You were awesome
@xavi_6767
@xavi_6767 4 жыл бұрын
What's better than 1 single kyle simplifying the web. That's 4.
@boluwarinoladipo8509
@boluwarinoladipo8509 4 жыл бұрын
legendary
@unknown-frames
@unknown-frames Жыл бұрын
This helped me a lot really!. I am on a webRTC project, this is the best tutorial I saw to get basic undestanding. Thanks a lot
@workingTchr
@workingTchr 2 жыл бұрын
Information is such an incredibly important thing. And presenting it in a helpful way to those who do not yet have it deserves massive remuneration. Until then, thank you.
@julio10004
@julio10004 3 жыл бұрын
Thanks Kyle!, but got a contribution to you this time. Makes me happy to be able to help. I can confirm, after a lot of work that Kyle's code has a major flaw in it, that will make it not work in many occasions. Here is the problem, when you call the nonsynchronous function that returns the user stream, the promise takes an unpredictable amount of time to return, what that does to you is to create a situation where the remote client can receive a call from the originator client without the remote have had set up the peer.on('call', ....{...}) listener function. Then the 'call' event gets lost and the behavior will be highly dependent on your environment, since it is dependant on how long it takes for the promise to return. I looked all over the internet and could find what was going on, so I ended up having to figure it out the difficult way. Now I changed the code so that you call the event handler first async peer.on('call" and then from inside the handler I call the navigator.mediaDevices.getUserMedia function. And then everything works. For those of you that want more details, please go to github, where I placed the complete code of a working example (today 7/19/2021) of an incomplete app that handles n rooms. No idea what the limit of n is for now. It is not production ready, but it allows you to open as many windows as you want between browser tabs. I based it on another tutorial, that didn't work either!, and explain everything in the readme.md file Good luck and happy programming! and thanks to Kyle for this video. I got me started!
@marindedic441
@marindedic441 3 жыл бұрын
link to github??
@venkateshprasath6395
@venkateshprasath6395 2 жыл бұрын
Life Savior. Thanks a lot!
@Daniel-fs2mw
@Daniel-fs2mw 2 жыл бұрын
Cant find your github repo/profile, can you share it please?
@KandMe1
@KandMe1 4 жыл бұрын
Just wanted to add a thank you and just to say yours is probably the first decent tutorial on coding I ever followed. Took my one evening to download and start to figure out the IDE but now I am going fine with it. It was a challenge but it's like your teaching us to climb and tree the others taught how to flutter about from leaf to leaf.
@Salehalanazi-7
@Salehalanazi-7 4 жыл бұрын
This is incredible. I would've killed for content like this 5 years ago, similar to the coronavirus search extension it really broke my fear of Chrome extensions and eventually I made a Chrome extension that checks if tweets are spam with ML api and hides tweets. Thanks Kyle
@AndreasDelleske
@AndreasDelleske 4 жыл бұрын
Sal7_one webRTC had been in a bad state in all browsers back then if I remember well...
@harshitsantosh825
@harshitsantosh825 4 жыл бұрын
Thanks for demystifying WebRTC. I was searching for such kind of video since March 2020. No one taught the full execution of the project. Thanks a lot man.
@PabloGnesutta
@PabloGnesutta 2 жыл бұрын
This does not demistify webrtc. In fact there is no single line of webrtc implementation code. It just shows how to use peers js which does all the work for you
@suchaimmuchwow9776
@suchaimmuchwow9776 Жыл бұрын
This just uses TCP sockets, not WebRTC. I dont know why it says WebRTC on the title ? Maybe to confuse new learners.
@waddkara
@waddkara 4 жыл бұрын
Thank you man you and Brad taught me all I know in web development
@tazubacyrus5361
@tazubacyrus5361 4 жыл бұрын
Brad is another great guy. I can't even compare him to the years I spent in college.How i wish i had known him before. I wouldn't have wasted my years in college.
@SantoshGupta-tv4mp
@SantoshGupta-tv4mp 4 жыл бұрын
Men you are great .I have already seen this code in youtube channel Cleaver programming . They were shit talking nonsense which never make sense why we are doing some particular code . I was so confused and started searching for webRTC , peer , socket and what not. But then I seen your video by God grace and everything is making sense now . Thank you very much sir❤️.
@binarygnome
@binarygnome 4 жыл бұрын
You're videos have helped me so much in my own programming and web development, and I want to say thank you. Projects like these take concepts and shows us real world applications for them,and by following along, we get to experiment and learn along with you.
@mouayadmouayad6798
@mouayadmouayad6798 2 жыл бұрын
I do not subscribe for more videos, I do subscribe to support this guys that share knowledge
@ArpanCodes
@ArpanCodes 4 жыл бұрын
since you prefer using shorthand like npm 'i' for 'install' you might wanna use '-D' instead of '--save-dev' :)
@nocturno7887
@nocturno7887 4 жыл бұрын
Thanks
@koreanbroadcastarchive306
@koreanbroadcastarchive306 4 жыл бұрын
@Wafi Hartono Laughed at this one :)
@ArpanCodes
@ArpanCodes 4 жыл бұрын
@Wafi Hartono you're missing out then 😂
@vincentjonathan4529
@vincentjonathan4529 4 жыл бұрын
@Wafi Hartono actually its D, because the D is big ;)
@dnynu
@dnynu 4 жыл бұрын
If you have latest version then you need not have to add save it will automatically add all dependencies related with it.
@sanket.hosalli
@sanket.hosalli 2 жыл бұрын
man!!! This guy's got a sense of humor for explanation.
@paulgodley1297
@paulgodley1297 3 жыл бұрын
This was absolutely brilliant. It clearly shows the concepts and paradigms. Good job!
@Mapko0
@Mapko0 3 жыл бұрын
You should do a episode 2 of this and address the client memory leak problems and other issues that may occur. Kudos to you for the presentation and simplification of the code. keep it up.
@PabloGnesutta
@PabloGnesutta 2 жыл бұрын
Read the mdn webrtc docs
@felipepontilho3921
@felipepontilho3921 4 жыл бұрын
This is AWESOME! Now I have a cool study project for the weekend. Thank you, Kyle. You rock!!! 🤘👍🏻👏🏼👏🏼👏🏼
@xaapt
@xaapt Жыл бұрын
Thanks a lot. After I've been watching hours of theoretical video, this API is much simpler and clear to jump in and start something with that
@josealuis607
@josealuis607 4 жыл бұрын
Zoom has been really quiet since this video came out 💀
@ArpanCodes
@ArpanCodes 4 жыл бұрын
This video came out like 5 minutes ago :/
@josealuis607
@josealuis607 4 жыл бұрын
@@ArpanCodes you must be the king of the parties with that sense of humor
@leomarquez2349
@leomarquez2349 4 жыл бұрын
they have 24 hours to respond, no cap 😂
@Anonymous-kw7ls
@Anonymous-kw7ls 4 жыл бұрын
@@ArpanCodes 😂😂
@godloven.6564
@godloven.6564 4 жыл бұрын
@Arpan Codes 😂😂😂
@allanregista4422
@allanregista4422 3 жыл бұрын
Been watching for your vids for quite while, but as soon as i see this video i subbed. Man, you're truly amazing, u made some thing complicated far less terrifying an less horror.. thumbs up 👍👍👍 may god bless you brother 🙏
@oskarmarkin5674
@oskarmarkin5674 4 жыл бұрын
Welcome to web dev simplified “tImEs FoUr” 😂
@GiannisKarmas
@GiannisKarmas 4 жыл бұрын
Can you please do a simple-peer version of this? Just an addition on the main differences would suffice. Webrtc is difficult to understand by nature and having more examples would make things so much cleaner. Many thanks 😊
@mrhonrer
@mrhonrer 4 жыл бұрын
I just want to let you know that you are carrying my Comp Science degree
@workingTchr
@workingTchr 3 жыл бұрын
I wish, as a society, we had a way to reimburse people who make valuable creations like this, for their work.
@shoaibkiyani9813
@shoaibkiyani9813 4 жыл бұрын
He is an awesome teacher. I wish I had him in my university :)
@ethanleo3365
@ethanleo3365 4 жыл бұрын
This is a really great tutorial to me to understand how to create a video chat application. However, I would like to point out that this video only goes through the basics which is that of setting up the connection between users and I do wish that you could make a tutorials (or a series hopefully) on creating a video conferencing application that includes functionalities such as creating a room, inviting users where users are actual users that people can create themselves rather than using peer.js to handle the users. Another thing I wish to see is if you could actually show how to go about implementing mute/unmute and enable/disable video functionality. Also, perhaps you could also show how to handle deployment too. Other than that, the video is quite a straightforward and useful video for the basics. I do appreciate this tutorial and I hope that you can take in my suggestion.
@vontrae
@vontrae 3 жыл бұрын
you just made me lots of money with this video, thanks brother!
@aaronbaraiya3692
@aaronbaraiya3692 4 жыл бұрын
i was just going to watch for around 3 minutes but ended up watching the whole thing
@thunderboltxtra2811
@thunderboltxtra2811 4 жыл бұрын
-y same
@tazubacyrus5361
@tazubacyrus5361 4 жыл бұрын
guy you are incredible. I came to know about your channel after the video you published on brads channel . great job.
@dimitargetsov9690
@dimitargetsov9690 4 жыл бұрын
@Tazuba Cyrus Please, please send me that video URL!!! I am ready to PAY for that.
@codingmasteryt2021
@codingmasteryt2021 4 жыл бұрын
Wow, exactly what I needed! Thanks Kyle!
@voidmind
@voidmind 4 жыл бұрын
WebRTC is one of the least documented feature of modern browsers. I doesn't surprise me this video did so well.
@mvrdara
@mvrdara 4 жыл бұрын
Would love to see more real world apps cloned. Thanks.
@15pratapreddy
@15pratapreddy 4 жыл бұрын
0:21 to 0:34 - INNOVATIVE INTRO :)
@PilotGT
@PilotGT 4 жыл бұрын
Great video. Thanks for posting! Would love to see a follow-up video that shows how to deploy the app to heroku, netlify, etc. Again, well done!
@theroboticscodedepot7736
@theroboticscodedepot7736 3 жыл бұрын
I made some progress on this by setting my domain name to point to my routers public IP address. Then I have my router port forwarding port 8080 traffic to my computer behind the router. I also changed the port in the serve.js file to use port 8080. Now it all works if I use local host but when I access using my domain name I get redirected to the roomId but no video shows. Does it need another protocol open for the video traffic like UDP?
@clipmania42
@clipmania42 3 жыл бұрын
I dont think heroku supports running two servers on different ports
@mbmalek92
@mbmalek92 2 жыл бұрын
this is a really helpful tutorial kyle.. you are great, Please add a screen share option from one to many users
@joshblf
@joshblf 3 жыл бұрын
Great video. It would have been nice to show a diagram of how all the libraries work together to get the big picture while building it though.
@WebWonders1
@WebWonders1 2 жыл бұрын
I love your neat and clean way of coding and clean setup
@manugalaxy14
@manugalaxy14 4 жыл бұрын
For new people watching this video: Testing this on mobile devices might not work as navigator.mediaDevices will be undefined on android phones even if you test it on localhost as it requires a "secure context" meaning you need to test it using a HTTPS context.
@bananaliquorable
@bananaliquorable 2 жыл бұрын
Hello Manu! Right. ran into this problem yesterday night. Tried to setup secure context for localhost, but chrome doesn't seem to bite! Could you send me in the right direction? thanks so much!
@killian9843
@killian9843 7 ай бұрын
This video is crazy simple and easy to follow. Thanks alot
@tannerbarcelos6880
@tannerbarcelos6880 4 жыл бұрын
I literally have been thinking about something like this the past week . Get out of my head! 😂
@IshanKesharwani
@IshanKesharwani 4 жыл бұрын
Seriously, i wanted to design this one too but I never knew where to start.
@ModzKo
@ModzKo 3 жыл бұрын
This code will make the world a better place!
@six1free
@six1free 4 жыл бұрын
that was beautiful, I've been searching for this video for weeks now (note the date!) and none of the videos I found explained it so simply/so well much thanks - if anyone has problems getting it to run somewhere other than localhost, it's because you need https for mediaDevices now (except for localhost)
@pozaking96
@pozaking96 4 жыл бұрын
can you explain it more in detail, what we need to change to run it with https?
@six1free
@six1free 4 жыл бұрын
@@pozaking96 it took me pretty much since I've written that comment to implement it, but i finally got it working... trying to route it through an nginx reverse proxy ended in nogo... lets see, sorry if i miss anything watch for edits ;) first and mainly, on the require('http') you of course need to set it to https and give a cert and key (man has that process changed in the 2-3 years since I've done it last!) once you get the certs (if you don't know how, google it, it's a whole other 3 page essay) it's basically the same {} object as for the peerjs (far below) with these lines: (replacing the require('http').server(app); line) const fs = require('fs'); const server = require('https').createServer({ key: fs.readFileSync('/path/to/my/ssl/cert/key'); cert: fs.readFileSync('/path/to/my/ssl/cert/cer'); }, app); second, I'm not sure if the peer server needs it, but just in case I modified the top of script.js's peerjs parameters to include secure:true third, likewise unsure if mandatory but certainly better than running two node instances, I edited server.js to incorporate a peerJS server with the following lines: const PeerServer = require("peer").PeerServer; var peer_server = PeerServer({ port: 3001, ssl: { key: fs.readFileSync('/path/to/my/ssl/cert/key'), cert: fs.readFileSync('/path/to/my/ssl/cert/cer') }, allow_discover: true; //not sure why }); console.log('*** peer server running on port 3001'); fourth, countless more changes including adding in a mute button and using different ports, source input changing and aliases... I don't think any were related to the SSL but let me know if it doesn't work... and you can see that it should at virc.ceneezer.com - note it's still in testing mode, my script.js should probably not be copied, fair warning ;)
@pozaking96
@pozaking96 4 жыл бұрын
@@six1free thank you so much for your answer ! Will try it out later today!
@miku1982
@miku1982 4 жыл бұрын
@@six1free yay, after some syntax errors I made it work with your hints... I just want to add: The semicolons did not work for me(at least within the objects). Delete all and replace with comma where needed(Key-Value pairs within objects) And... to get a self-signed certificate(yes it's not trusted... but works at least for my purpose) you can google a 3-pager or just linuxize.com/post/creating-a-self-signed-ssl-certificate/ or just make sure you have openssl installed and run: openssl req -newkey rsa:4096 \ -x509 \ -sha256 \ -days 3650 \ -nodes \ -out cer \ -keyout key Copy then the cer and key files where you want to have them (ssl folder?) and adapt the lines in server.js pointing to these relative to your server.js -> ie key: fs.readFileSync('ssl/key'), thanks for your help again
@six1free
@six1free 4 жыл бұрын
@@miku1982 might have been a few typeos, it was re-typed not copypastad - glad you got it
@mostafabohram
@mostafabohram 4 жыл бұрын
Best intro ever 😂
@bananavrrr
@bananavrrr 3 жыл бұрын
So fun😂😂😂😂😂ny I am so 😂😂😂😂😂 sorry I need to edit it sOrYy
@qing1jia
@qing1jia 3 жыл бұрын
Best intro ever
@christian-schubert
@christian-schubert 4 жыл бұрын
Love how he crams into a half-hour exercise what would be a whole course over on NetNinja's channel 😄
@CodingFire
@CodingFire 3 жыл бұрын
You cracked it bro amazing 🌟
@troys1426
@troys1426 4 жыл бұрын
This should be renamed to: “How to be an instant millionaire in just one or three videos.
@AndreasDelleske
@AndreasDelleske 4 жыл бұрын
Troy Serapio Zoom will be furious!
@RekhaGujar83
@RekhaGujar83 4 жыл бұрын
Hi I also created this type of app : call.rekhagujar.repl.co please visit
@ADeeSHUPA
@ADeeSHUPA 4 жыл бұрын
@@RekhaGujar83 uP
@troys1426
@troys1426 4 жыл бұрын
@@RekhaGujar83 Its really nice
@AmanSingh-xo5hf
@AmanSingh-xo5hf 4 жыл бұрын
@@RekhaGujar83 please help me...I am getting only one screen after using this
@kitgary
@kitgary 4 жыл бұрын
Amazing! The image quality is even better than Zoom!
@Kujeful
@Kujeful 3 жыл бұрын
Very good tutorial on WebRTC, thank you so much! I've been meaning to pour over material on this, and your video just saved a whole lot of time in that. Thank you!
@PabloGnesutta
@PabloGnesutta 2 жыл бұрын
This is not a tutorial on webrtc. Is a tutorial on peers js
@hugomcm1
@hugomcm1 Жыл бұрын
@@PabloGnesutta Not the inner parts of webRTC but it uses the technology thru peer server
@PabloGnesutta
@PabloGnesutta Жыл бұрын
@@hugomcm1 yeah but it's like saying that your are creating a web application with c++ because you are using javascript which runs on top of a browser which is made on c++... It's misleading. In this video you don't learn anything about webrtc
@hugomcm1
@hugomcm1 Жыл бұрын
@@PabloGnesutta true
@hakienet3897
@hakienet3897 4 жыл бұрын
alternative title: i made a more secure zoom clone in 28 minutes
@FinlayDaG33k
@FinlayDaG33k 4 жыл бұрын
I was just about to comment: "Probably more secure as well" :^)
@prakharpandey6009
@prakharpandey6009 4 жыл бұрын
How
@FinlayDaG33k
@FinlayDaG33k 4 жыл бұрын
@@prakharpandey6009 Step one: actually do something about security. Step two: there is none, you're now more secure than Zoom.
@peacockmangolotus3483
@peacockmangolotus3483 4 жыл бұрын
Indian apps started to arise in the play store. Do you know the alternate apps created by Indians for camscanner, share it, here is a list of them at poornichefacts.blogspot.com/2020/07/banning-that-paved-road-to-success-for.html
@amruthap6334
@amruthap6334 4 жыл бұрын
i have tried and also downloaded your code but still the second user is not adding in the page. what should i do ???? PLease help. btw i m working on firefox. is that the problem ?????
@ivcbusinesssystems6613
@ivcbusinesssystems6613 2 жыл бұрын
Consider putting this in Docker, with a docker compose.
@rs-zl7re
@rs-zl7re 4 жыл бұрын
Good tutorial as usually but too advance for me now, I just started learning CSS, HTML and Javascript. Probabaly I would get it when I start a project.
@kyrollosaziz7519
@kyrollosaziz7519 2 жыл бұрын
I was mistaken, great tutorial just needs npm start when you close the project, thank you for this video and apologies for the last comment
@sp--nt1gg
@sp--nt1gg 4 жыл бұрын
0:24 _proof you're _*_REAL_*_ Kyle_
@andrey_lunar
@andrey_lunar 4 жыл бұрын
I understood nothing, but still it’s very exciting! :)
@kanishkbharti8692
@kanishkbharti8692 4 жыл бұрын
JIO has already made an exact zoom clone 😂
@guidingtechbd
@guidingtechbd 4 жыл бұрын
App name?
@garvnanwani9835
@garvnanwani9835 4 жыл бұрын
@@guidingtechbd jio meet
@varunram5413
@varunram5413 4 жыл бұрын
Searched for this comment as soon as I read the video title lol
@garvnanwani9835
@garvnanwani9835 4 жыл бұрын
@Sentinel Jio is an Indian company that has even copied whatsapp theme for its jiochat app, I don't know why they are doing this but anyway
@varunram5413
@varunram5413 4 жыл бұрын
@@garvnanwani9835 Plot twist: Kyle works for Jio
@deveshkaushik6375
@deveshkaushik6375 4 жыл бұрын
Thanks, Kyle, a video on modification needed, to make it work on Heroku would be great
@mdahsanraza
@mdahsanraza 4 жыл бұрын
Showing how to deploy this would have been a better!! Thanks anyway.
@usmanabdurehman97
@usmanabdurehman97 4 жыл бұрын
You can easily deploy node.js on heroku.
@mesutcemilaslan
@mesutcemilaslan 4 жыл бұрын
What about non heroku servers ?
@copypaste_pro
@copypaste_pro 4 жыл бұрын
doesn't work on heroku
@ripusudan100
@ripusudan100 3 жыл бұрын
You are awesome, Intelligent, smart also..i like the way you teach
4 жыл бұрын
this might be safer than zoom.
@dekcode2824
@dekcode2824 2 жыл бұрын
You're a great teacher. I really enjoyed it and learned stuff. Thanks for putting this together.
@willaddison9234
@willaddison9234 3 жыл бұрын
This is awesome, thank you so much. Do you have any tutorials of now how to get this published to a live server so we can make it public?
@theroboticscodedepot7736
@theroboticscodedepot7736 3 жыл бұрын
I made some progress on this by setting my domain name to point to my routers public IP address. Then I have my router port forwarding port 8080 traffic to my computer behind the router. I also changed the port in the serve.js file to use port 8080. Now it all works if I use local host but when I access using my domain name I get redirected to the roomId but no video shows. Does it need another protocol open for the video traffic like UDP?
@eraramchandra1338
@eraramchandra1338 3 жыл бұрын
@@theroboticscodedepot7736 same here , did you solve it ?
@theroboticscodedepot7736
@theroboticscodedepot7736 3 жыл бұрын
@@eraramchandra1338 - I had to abandon my efforts as other work took precedent.
@DaRealTT
@DaRealTT 4 жыл бұрын
I have no idea why, but, everything else I tried went well except the cameras in the call. I still like it though. You helped made me program a camera!
@alejandrojavieralbarranesp2877
@alejandrojavieralbarranesp2877 3 жыл бұрын
did you manage to solve it?
@rickyzheng572
@rickyzheng572 4 жыл бұрын
Can you do an electron.js tutorial or some machine learning topics using js?
@rajeshvadavia61
@rajeshvadavia61 3 жыл бұрын
hi, you are a great teacher and explainer.
@RNMERIA
@RNMERIA 4 жыл бұрын
Thanks Kyle, If you could assist in getting this hosted somewhere than it would be very helpful
@hx_gt
@hx_gt 4 жыл бұрын
Good Video! A warning to Junior Devs. It only works well for peer to peer, If you do it with more users, your internet connection and those in the room will die.
@rafaelgpontes
@rafaelgpontes 4 жыл бұрын
Hey, this was an amazing on-point tutorial. I had to remove the defer from for it to work here for me. It kept saying that io was not defined on my script.js file. I think "defer" introduces a race condition bug. If it happens to load before the script file, it works. Otherwise, an io not defined expetion is thrown.
@Genspirit45
@Genspirit45 4 жыл бұрын
You likely put your script.js above your socket.io script or did not defer your script.js. You typically want to defer any non-essential javascript as it will block loading the website if it runs right away causing it to load slower for the user.
@riyastp1835
@riyastp1835 2 жыл бұрын
Thanks mate
@dasten123
@dasten123 4 жыл бұрын
It's insane how easy this is °__°
@vanajmoorthy4018
@vanajmoorthy4018 4 жыл бұрын
How would you deploy this and add in some functionality for users to create rooms?
@nemigam223
@nemigam223 3 жыл бұрын
Amazing instructor! Well explained!
@austinfrbs
@austinfrbs 4 жыл бұрын
I'm having some trouble using it across devices, is there any chance of you doing a tutorial for deployment?
@mosesatanda3530
@mosesatanda3530 3 жыл бұрын
Add the port number to the IP address generated by your router
@jeffreyjansen
@jeffreyjansen 3 жыл бұрын
@@mosesatanda3530 can you explain this a bit more. Seems that a lot of people struggle with the deployment of this app. Me myself tried Heroku but that didn’t work...
@Hangoutapp
@Hangoutapp 3 жыл бұрын
I really love when you do clone.
@963design8
@963design8 Жыл бұрын
I got an issue at the moment peerjs try to connect i fot ERR CONNECTION REFUSED, i am running the code as it is on github and only shows your current camera, no incomming video is shown.
@rockycool18
@rockycool18 4 жыл бұрын
Hey buddy you explain it the best way , would be nicer to know the security considerations and how this system will work in different network setups (like through NAT, firewall, proxies etc)
@radheafre8862
@radheafre8862 4 жыл бұрын
this apps works on just local machines. Can you guide to deploy and make it work on all machines?
@FatihErikci
@FatihErikci 3 жыл бұрын
you need to add STUN / TURN server
@theroboticscodedepot7736
@theroboticscodedepot7736 3 жыл бұрын
I made some progress on this by setting my domain name to point to my routers public IP address. Then I have my router port forwarding port 8080 traffic to my computer behind the router. I also changed the port in the serve.js file to use port 8080. Now it all works if I use local host but when I access using my domain name I get redirected to the roomId but no video shows. Does it need another protocol open for the video traffic like UDP?
@ThatMinecraftGuy_YT
@ThatMinecraftGuy_YT Жыл бұрын
@The Robotics Code Depot i also have the same quesion and you need an ssl certificate, otherwise it won't work and you can set up an ssl certificate verry easily trough cloudflare. and yea, you need to port forword the protocol UDP and TCP on the port that nodemon runs on, mine is 80👍👍
@JamCluster
@JamCluster 4 жыл бұрын
Amazing Bro!! not as much people know about webrtc, great job!
@PabloGnesutta
@PabloGnesutta 2 жыл бұрын
He doesn't either. Just using a high level library to do all the work
@rishavkumar8718
@rishavkumar8718 2 жыл бұрын
A bug a coming. Let say user1 connected first and then user2 connected, if user1 disconnects then video element of user1 is not getting removed from user 2 (a blank non-streaming box will be there). How to fix that? Thanks for the video though, very helpful
@lokeshsharma3907
@lokeshsharma3907 Жыл бұрын
have you got any clue?
@yegoallan8560
@yegoallan8560 4 жыл бұрын
Oh my short... You know how long I've been looking for a solution like this? Thanks man
@marcelopotty5218
@marcelopotty5218 4 жыл бұрын
So, if this is a peer-to-peer model, it means that each user streams its video to each other user? And if there are 10 users, each user would stream to 10 other users? That woudln't kill user's internet? 🤔
@MaulikParmar210
@MaulikParmar210 4 жыл бұрын
True, that's why commercial applications still exists which takes care of optimization. Peer to peer works as long as it doesnt scale out of peers capacity, other alternative model exists to adress these issues.
@arjunshinojiya7571
@arjunshinojiya7571 4 жыл бұрын
That's true,zoom is not using peer to peer
@MilanDrazic
@MilanDrazic 4 жыл бұрын
That wouldn't kill the user's internet? P2P is mama that's why zoom is shit
@Jorgeee
@Jorgeee 4 жыл бұрын
Milan Drazic p2p isn’t very secure since you can pull ips from connected people, also if someone has shit internet it can fuck up thr whole room
@MilanDrazic
@MilanDrazic 4 жыл бұрын
@@Jorgeee You can never hide an IP, you can only ensure that others cannot access the data through your IP P2P technology is like a branch. The more users branch off the source stream, the better the network and signal quality my opinion I came to
@inhibited44
@inhibited44 3 жыл бұрын
looks like the room is the MD5 code of the name of the room you typed in. I love how the video goes away when you close the other browser. I saw another guy do this using javascript using html video link and a js script.
@JahangirJadi
@JahangirJadi 3 жыл бұрын
On start of the video you had your phone connected to the server. How did you do that?
@Th3Younesse
@Th3Younesse 10 ай бұрын
thanks you so much this video really helped me with implementing peerjs in nextjs
@MohammadGabr
@MohammadGabr 4 жыл бұрын
This is an excellent video. But I would like to ask about how I can measure the max user load of the server so I can scale it up
@mepaul22
@mepaul22 3 жыл бұрын
To measure anything capacity, offcourse you have to test drive.keep connecting new clients to your server until you realize all clients are choked and the server too that would be the max user load capacity of your server.
@juanmoctezuma9225
@juanmoctezuma9225 4 жыл бұрын
this is indeed simplified web development, gracias!
@yajassardana3495
@yajassardana3495 3 жыл бұрын
Hey, won't this app break down/ not work when trying to connect accross different networks, as you're deploying without using STUN or TURN servers?
@tanmayaeron8230
@tanmayaeron8230 3 жыл бұрын
Hey, do you know how to implement using STUN or TURN server?
@timoernst
@timoernst 4 жыл бұрын
Incredibly easy and well explained. Subscribed! 👍
@rajeshbk8534
@rajeshbk8534 3 жыл бұрын
I am not able to see the 2nd grid when the second person connects. How to solve this? I have actually compared the source code line-by-line. Everything is the same, but still facing this issue.
@avipriyaghosh5163
@avipriyaghosh5163 3 жыл бұрын
Please anyone reply i am also facing the same issue
@yashkhare7308
@yashkhare7308 3 жыл бұрын
I think maybe u didnt connected the peer server
@rajeshbk8534
@rajeshbk8534 3 жыл бұрын
@@yashkhare7308 yes, even I get the different ids which are connected but not the 2 videos in the same page.
@avipriyaghosh5163
@avipriyaghosh5163 3 жыл бұрын
Same i am also not getting 2 videos in the same page but in console the user is getting connected
@rimjhimshukla365
@rimjhimshukla365 3 жыл бұрын
Yeah, same issue
@eulersson
@eulersson 4 жыл бұрын
Your explanations are perfect :) Thanks for sharing.
@slay3rgamingyt
@slay3rgamingyt 4 жыл бұрын
Jiomeet developers: 🤐🤐🤐
@amantudu4233
@amantudu4233 4 жыл бұрын
jiomeet
@mvh1521
@mvh1521 4 жыл бұрын
loved this vid! I think it would be a great idea to make a follow up vid where you add some extra functions like mute button etc
@sundeepamrutia
@sundeepamrutia 4 жыл бұрын
How can we host it? How many user can we expect to connect? Is it good for small business?
@shubhamsharma0099
@shubhamsharma0099 4 жыл бұрын
How can i host it on firebase that it will work on Realtime internet. Pls reply
@seo5856
@seo5856 3 жыл бұрын
Thank you! I always love your video and appreciate your works!
@echo-ps9685
@echo-ps9685 3 жыл бұрын
a question, wouldn't this overload the user's internet as all of the users are sending their stream to many other users resulting in a redundant upload, and with each new user the upload will suffer even more ?
@ashishmaurya3113
@ashishmaurya3113 3 жыл бұрын
Yes it will thats why big corporation have some kind of compression algorithm depending on the network ig.
@TheMasterAram
@TheMasterAram 3 жыл бұрын
@@ashishmaurya3113 alternatively they don't use p2p, instead they reroute all the streams into an aggregator, which returns one stream that contains all the other streams.
@ashishmaurya3113
@ashishmaurya3113 3 жыл бұрын
@@TheMasterAram I had no clue about that.
@estevezben454
@estevezben454 3 жыл бұрын
@@TheMasterAram Do you have any reference link for this? I interested to check it out.
@traveler292
@traveler292 4 жыл бұрын
Exactly what I’ve been looking for. Thanks man :)
How To Handle Permissions Like A Senior Dev
36:39
Web Dev Simplified
Рет қаралды 44 М.
Want to make a video chat app? Watch this video for WebRTC!
1:22:35
Good Morning Developers
Рет қаралды 42 М.
World’s strongest WOMAN vs regular GIRLS
00:56
A4
Рет қаралды 35 МЛН
How To Create A Messaging App With Socket.io And React
1:44:08
Web Dev Simplified
Рет қаралды 382 М.
WebRTC Tutorial - How does WebRTC work?
10:22
Fullstack Academy
Рет қаралды 219 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 978 М.
How ChatGPT Built My App in Minutes 🤯
8:28
Website Learners
Рет қаралды 2,7 МЛН
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 486 М.
WebRTC Crash Course
1:10:06
Hussein Nasser
Рет қаралды 236 М.
Build A REST API With Node.js, Express, & MongoDB - Quick
28:56
Web Dev Simplified
Рет қаралды 835 М.
I'm Ditching Try/Catch for Good!
10:29
Web Dev Simplified
Рет қаралды 171 М.