WebRTC in 100 Seconds // Build a Video Chat app from Scratch
HTML-код
- Опубликовано: 30 июн 2024
- Want to build your own peer-to-peer video chat app? WebRTC is a technology that creates a realtime connection between browsers where users can exchange audio/video streams fireship.io/lessons/webrtc-fi...
00:00 WebRTC Explained
02:01 Build your own Video Chat
3:37 Code setup
04:34 Peer Connection & Webcam
06:49 Offer Signaling
09:45 Answer Signaling
Source Code
github.com/fireship-io/webrtc...
Useful Resources
WebRTC Docs webrtc.org/
Codelab webrtc.org/getting-started/fi...
Signaling developer.mozilla.org/en-US/d...
#webdev #js #100SecondsOfCode
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font 
Наука
"This video would be a crazy 20 minutes long or something." - lol. this is why I love this channel.
Literally every single fireship video that comes out juices up any dev who watches it. Rumor has it, that if you watch every single fireship video at least three times you become the danger, end up with a six pack, and Javascript will write itself for you as it sings you to sleep
Ultimate chad dev
his style of not typing the whole code just undoing the snippet is awesome, saves a lot of time and doesn't get bored.
this is the way tutorials should be.
this
These days JavaScript seems to write itself anyway for better or for worse
👎👎👎👎👎👎👎 paid bot
I need a peer-to-peer connection of this channel to my brain
After 15 years of software dev, this channel is the best source of concise and nicely presented information for newcomers I've ever seen.
Wish I had someone like Jeff back in my days. Well done, sir 🔥
Not for new comers. Jeff's videos are tailored to intermediate to pro devs
@@abiiranathan hi. can you help me a little bit. i am in big trouble in trying to generate SHA-1 key to use fire base.
error: missing keystore
imgur.com/a/vMV37OA.
Something about deprecate gradle feature being used causing trouble. How to stop that?
@@shanglee643 This was a web project. Setup for Android is different.
@@abiiranathan i found out :
add 'multidexEnable: true in defaultConfig{}
at build.gradle(app level)
@@abiiranathan no matter what the project, you still need SHA-1 key to use firebase right?
This video is 11 minutes and 18 seconds long and every second is valuable. Thank you.
feels good to know that we have the same nationality
@@anupamadissanayake1299 small world!
It would be a more useful tutorial if it was 20 mins long and not trying to compress everything down to the max.
yes.. now i can finally take down zoom
😂😂😂😂😂😂😂😂😂😂
Only if you don't want low latency high-res group chat. As-is the host is providing all the bandwidth, it quickly disappears as you add more callers. You'll need a TURN server to host multi-parties reliably and those aren't free.
@@toxaq low latency high res on zoom....hahaha keep dreaming
@@JosueRodriguez08 I don't use zoom but the setup as in this demo is misleading. It quickly falls apart with any attempt to scale without TURN.
😁😁😁😁🤣🤣👌🏻👌🏻
This channel is a treasure ✨
What the H___
👎👎👎👎👎👎👎 paid bot
@@Hacking-NASSA-with-HTML bruh!!!!!
What’s your problem?
This channel is awesome. My job (in software) often gets me down, but this channel makes me remember the magic! Thank you.
Video chat in 9 minutes! That's awesome, there's actually a lot of companies looking to get this kind of functionality built at the moment. Great video as always! You're Inspiring me to think of a Flutter version if I can get some time.
Would be nice if they make a new 100 videos talking about webRTC and multi-peer connection. Up vote here. 🚀
I was working on a video streaming project and was waiting for this video to implement the feature in the best possible way.
Thanks a lot!
Most of the new things I learn is from this legendary channel. I hope more people out about it.
I very clearly remember asking for this in your web sockets video.
Thank you so much. Your content is the best.
Most awaited video of all time, thanks Jeff! 💯
I have no words for the quality of your content. Pure gold.
Fireship bringing you the latest and greatest tech content. Great video as always! 🔥
I learn so much on this channel. Great content! Definitely one of the best webdev channels on RUclips. Thanks from Brazil ✌🏼
👎👎👎👎👎👎👎 paid bot
@@Hacking-NASSA-with-HTML Ok then... hahahaha
I was just about to start working on a project based on webRTC. Just what I needed. Thanks!!!
Thank you for vanilla JS 💪
This was super fun to watch 🔥
That signaling process did take a while.
I've been wanting to build a video call app for ages!! But the tutorials are on it are so complex!!
People in the poll voting for webRTC demo in React: "The senate will decide your fate"
Fireship: "I am the senate"
That was hilarious about the cat. I remember seeing that. Really appreciate this video on WebRTC. Very interesting. Much love and respect. See you soon!
I was waiting for this. Thank you.
I think I felt my brain just grew watching this.... Thank you for the valuable information. Can you do a short video about OTT(Netflix, Amazon prime type) next kind sir?
Great format! nice addition to the 100 seconds
No one can teach u like man, You are a Legend
Omg i needed this what the heck,the timing is insane 🤯
yes, I've been wanting this for so long. thank you good sir!
Awesome tutorial, I wish it existed a few years ago. By the way, not sure if you mentioned it, in cases when a direct connection cannot be established (e.g. in a corporate or school network), you can use a TURN server to relay the media data. I think it might be needed in something like 20% of the cases (not sure).
This series is amazing!!!
Most hyped && Awaited video 🔥🔥🔥
Thank you for listening to comments and using vanilla version
Love your channel
Fully fire.. every single second. Thank you for sharing.
Just what I was looking for, thank you!
Clean and concise information, great video!
Thanks for sharing
I didn't even know I wanted this explanation. Thanks.
Seriously. I couldn't belive. I was studying abt Web RTC and ur notification popped.
Are you eavesdropping 🤪
I just started working on a project and it popped up
I love how you used the footage from the guy testifying as a cat
Finally it's here, thanks Jeff
will definetly see you in the next one! thank you
Thanks for making this video.It gonna help me in my final year project.
You're the absolute man Jeff
I have been waiting for this!
Thank you for the tutorial, this is amazing!
Thanks Jeff. The lesson on Fireship was useful.
wow, amazing, simple video but lot of knowledge, Thanks for this tutorial.
Great video.
My favourite programming channel..
Makes my day when you mention @angular 😍👊
JUST.. THANK YOU MAN 🙌🏻🙌🏻
Amazin explaining-skills in this one :-) .... THX for your effort and sharing your talent with us!!
This video is pure educational mastery.
wow! so easy! thank you Fireguy from Fireship!
Where do you get ideas for all these videos? You're following all the latest tech trends. Great video
This channel is incredible!!!
OMG just trying to add video calling on a React Native app with webRtc and I got the notification!!! Awesome!
Someone has already told it but thanks for bringing it using Vanilla JS. And also thanks a ton for the quality of the video. :)
OMG this is perfectly timed i was thinking about how to make a video chat app and this dropped thank you!
Great tutorial! I would love to see one tut about webrtc with angular. Take care.
Omg, I've searched for that yesterday!!!
Man, you really know how to choose perfect meme videos for the videos. 'Am not a cat'
For all those here in 2022 this tutorial is for an older version of the Firebase SDK. The newer SDK is in modular which require different import notation and greatly changed syntax. Please be weary when following. The is a great reference to learn from but there are much more up to date options out there right now.
thx
Can you point us to some updated instructions? What do you recommend for streaming very low latency video? That's all I'm interested in.
I've been trying to get this to work for about a week now. I feel so lost.
would be appriciated if someone knows the updated import, can't find it. Thanks
gRPC in 100 seconds please! love your channel ❤️
Jesus Christ, the video is so informative. Need to watch all videos of this channel
Finally- Thank you ❤️
This is really work🎉🎉 good explanations and examples
Fireship is the best YT dev channel
Thank you for sharing your knowledge sir.
Most awaited!!
You are my hero! 👏🏻
so advanced. I need time to cover it. btw, it's so useful. many tks
Fantastic! Thanks!
Beside the fact that the contents of the video excels in many aspects, I would like to highlight the fact that it does not follow the illusion dominating the development scene where everything should be React or it is not considered web development anymore. Thank you for that.
Oh my christ. I've been looking forward to this.
Same here
For a while...🔥
Just as promised. Thanks Jeff
it would be interesting if you could make a websocket version of it. this is the most clean code I've seen amoung other tutorials.
Through Jeff everything are clear!
Magic! Thank you
You guys are amazing thanks
lol so early for the first time
Btw very nice video man!
This is beautiful
This Channel is a 💎.
Great content 🔥
Thank you man
Great video! A video about MCUs, SFUs, meshing and multi-stream WebRTC would be awesome!
If there's enough demand, I would make a full course that covers multiple connections and tradeoffs of different approaches.
@@Fireship SIP B2B UA's like Asterisk also offer SFUs. Very few people have figured it out with Asterisk tho. I would purchase the course if you make one!
@@Fireship There is demand!! Pls do one on multi-stream!! And if possible, can you please cover the Data Channel as well?
👎👎👎👎👎👎👎 paid bot
I have never subscribed this fast
Nice video thank you
You surpass my expectations
It just works. But a third party can still directly see and even store your streams. I´d use sockets over my own infraestructure for enterprise apps, totally worth the extra time for implementation.
Hey! Great Video! Could you also please make an example for one to many video calling?
Very good video
Finally, i tried WebRTC a year ago and didn't understand nothing, now im building discord 2 lol
Awesome video ! However the way WebRTC establishes the connection raises the question of whether an IP leak is possible to one of the peers. Thanks.
Thank you so much, exactly what I was looking for.
Hey Fireship, I am working on a streaming project too so as always awesome video! Quick question, but does this demo reveal the local and public ip addresses similar to how people were abusing Omegle(i think also using webrtc)? And if it does, would you need a turn server to prevent that?
Sidenote this is like my favorite Dev Channel!
Finally, a professional video about WebRTC technology, which respects your time as a user and touches on the main topics and does not deal with nonsense.
Valuable information in a very short amount of time. I understood the beginning but once into programming part, beyond the peer connection object part you started to lose me. Mainly because I do not understand why you chose to utilize mentioned third party objects and mentioned methods. I will definitely dig deeper in this if I have the chance to do so, however for those interested I would suggest you to make a more elaborate guide on this and get into the details. For example try to explain what problems you faced trying to establish the web app and what solutions you used and for what reason.
Thanks for going vanilla 😉
more of webrtc !!!
Literally, one of the best youtube channel for web developers and enthusiasts!!😍😍