WebRTC in 100 Seconds // Build a Video Chat app from Scratch

[@ecam90]

"This video would be a crazy 20 minutes long or something." - lol. this is why I love this channel.

[@devsauce]

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 🔥

[@abiiranathan]

Not for new comers. Jeff's videos are tailored to intermediate to pro devs

[@shanglee643]

@@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?

[@abiiranathan]

@@shanglee643 This was a web project. Setup for Android is different.

[@shanglee643]

@@abiiranathan i found out : add 'multidexEnable: true in defaultConfig{} at build.gradle(app level)

[@shanglee643]

@@abiiranathan no matter what the project, you still need SHA-1 key to use firebase right?

[@LoveThatSceneChannel]

I need a peer-to-peer connection of this channel to my brain

[@PrasangaBasnayake]

This video is 11 minutes and 18 seconds long and every second is valuable. Thank you.

[@anupamadissanayake1299]

feels good to know that we have the same nationality

[@PrasangaBasnayake]

@@anupamadissanayake1299 small world!

[@alan-]

It would be a more useful tutorial if it was 20 mins long and not trying to compress everything down to the max.

[@klutch4198]

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

[@acm1812]

Ultimate chad dev

[@ayushijaiswal9813]

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.

[@thecashewtrader3328]

this

[@imranq9241]

These days JavaScript seems to write itself anyway for better or for worse

[@Hacking-NASSA-with-HTML]

👎👎👎👎👎👎👎 paid bot

[@omaryassir5885]

This channel is a treasure ✨

[@rendoesmath]

What the H___

[@Hacking-NASSA-with-HTML]

👎👎👎👎👎👎👎 paid bot

[@omaryassir5885]

@@Hacking-NASSA-with-HTML bruh!!!!!

[@omaryassir5885]

What’s your problem?

[@-_-9034]

yes.. now i can finally take down zoom

[@PotatoMagnet]

😂😂😂😂😂😂😂😂😂😂

[@toxaq]

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.

[@JosueRodriguez08]

@@toxaq low latency high res on zoom....hahaha keep dreaming

[@toxaq]

@@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.

[@hamzaelalaoui7690]

😁😁😁😁🤣🤣👌🏻👌🏻

[@mbadpa]

Most of the new things I learn is from this legendary channel. I hope more people out about it.

[@istainblack]

This channel is awesome. My job (in software) often gets me down, but this channel makes me remember the magic! Thank you.

[@FilledStacks]

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.

[@ronnieli5025]

Saved my day 3 years later you posted it. Great thanks bro!

[@talhaibnemahmud]

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!

[@ranaakhil]

I very clearly remember asking for this in your web sockets video. Thank you so much. Your content is the best.

[@igorordecha]

People in the poll voting for webRTC demo in React: "The senate will decide your fate" Fireship: "I am the senate"

[@Vivek2062]

Most awaited video of all time, thanks Jeff! 💯

[@jakubwegrzyn3798]

Thank you for vanilla JS 💪

[@DavidVerzolla]

Would be nice if they make a new 100 videos talking about webRTC and multi-peer connection. Up vote here. 🚀

[@cherriepie]

I've been wanting to build a video call app for ages!! But the tutorials are on it are so complex!!

[@arvind6007]

No one can teach u like man, You are a Legend

[@CodingNuggets]

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!

[@user-cj3yu9nv1u]

Fireship bringing you the latest and greatest tech content. Great video as always! 🔥

[@ramananfinsceal1319]

Seriously. I couldn't belive. I was studying abt Web RTC and ur notification popped. Are you eavesdropping 🤪

[@shrn]

I just started working on a project and it popped up

[@scheimong]

I love how you used the footage from the guy testifying as a cat

[@joaquimley]

I have no words for the quality of your content. Pure gold.

[@temmmbebkd2922]

Omg i needed this what the heck,the timing is insane 🤯

[@krithiksankar2081]

I was just about to start working on a project based on webRTC. Just what I needed. Thanks!!!

[@leoliveirab]

I learn so much on this channel. Great content! Definitely one of the best webdev channels on KZbin. Thanks from Brazil ✌🏼

[@Hacking-NASSA-with-HTML]

👎👎👎👎👎👎👎 paid bot

[@leoliveirab]

@@Hacking-NASSA-with-HTML Ok then... hahahaha

[@edwincarlsson9014]

Oh my christ. I've been looking forward to this.

[@cyrilogoh6171]

Same here

[@codeaperture]

For a while...🔥

[@unknownman1]

Jesus Christ, the video is so informative. Need to watch all videos of this channel

[@galnahum4349]

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.

[@quemediga]

finally an actual review. Thank you Johnny

[@lallawmzualakhawlhring7340]

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?

[@erreerre2001]

OMG just trying to add video calling on a React Native app with webRtc and I got the notification!!! Awesome!

[@AS-hs4xk]

Thank you for listening to comments and using vanilla version Love your channel

[@exyios8493]

OMG this is perfectly timed i was thinking about how to make a video chat app and this dropped thank you!

[@juanmartinguillen4876]

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.

[@djsnooppyzatdepoet7568]

Man, you really know how to choose perfect meme videos for the videos. 'Am not a cat'

[@kettenbach]

Makes my day when you mention @angular 😍👊

[@parthipankalayini8]

Most hyped && Awaited video 🔥🔥🔥

[@brindhas8907]

Fully fire.. every single second. Thank you for sharing.

[@nlattessi]

gRPC in 100 seconds please! love your channel ❤️

[@eduardointech]

Great format! nice addition to the 100 seconds

[@_romeopeter]

This was super fun to watch 🔥 That signaling process did take a while.

[@simonbrandner]

Great video! A video about MCUs, SFUs, meshing and multi-stream WebRTC would be awesome!

[@Fireship]

If there's enough demand, I would make a full course that covers multiple connections and tradeoffs of different approaches.

[@yitzchakpachtman9664]

@@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!

[@raivatshah7781]

@@Fireship There is demand!! Pls do one on multi-stream!! And if possible, can you please cover the Data Channel as well?

[@Hacking-NASSA-with-HTML]

👎👎👎👎👎👎👎 paid bot

[@birdofhermes6152]

Thanks Jeff. The lesson on Fireship was useful.

[@YexyYT]

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.

[@Daniel32396]

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.

[@beng6319]

I've been trying to get this to work for about a week now. I feel so lost.

[@vovithenoob]

would be appriciated if someone knows the updated import, can't find it. Thanks

[@Helleynea]

I didn't even know I wanted this explanation. Thanks.

[@vineetyadav6978]

yes, I've been wanting this for so long. thank you good sir!

[@carlomigueldy]

Fireship is the best YT dev channel

[@shootnado]

This video is pure educational mastery.

[@islombekhasanov]

wow! so easy! thank you Fireguy from Fireship!

[@Babakinha]

Finally, i tried WebRTC a year ago and didn't understand nothing, now im building discord 2 lol

[@fahad.hossain]

I was waiting for this. Thank you.

[@ThePhrenchen]

will definetly see you in the next one! thank you

[@chillmusichour]

You're the absolute man Jeff

[@adityakumar4200]

Thanks for making this video.It gonna help me in my final year project.

[@chanokplaisub3586]

This is really work🎉🎉 good explanations and examples

[@_parassolanki]

Great video. My favourite programming channel..

[@MisterAndreSafari]

Amazin explaining-skills in this one :-) .... THX for your effort and sharing your talent with us!!

[@mohanaggarwal4058]

Literally, one of the best youtube channel for web developers and enthusiasts!!😍😍

[@wenniecatabay7094]

wow, amazing, simple video but lot of knowledge, Thanks for this tutorial.

[@dsi-films1264]

Just what I was looking for, thank you!

[@dr.d3600]

Through Jeff everything are clear!

[@TheAndre2131]

I wish this video came out 2 years ago when I was struggling to develop my application with webRTC. But this is helpful nonetheless

[@codeaperture]

I swear Jeff Knows everything in web development 💯

[@raniketram]

Finally it's here, thanks Jeff

[@pranavbonthala1242]

lol so early for the first time Btw very nice video man!

[@ViniciusBuscacio]

This channel is incredible!!!

[@mathiasjosefweber6419]

Thank you. It was very helpful.

Someone has already told it but thanks for bringing it using Vanilla JS. And also thanks a ton for the quality of the video. :)

[@jonathanchavez9203]

This series is amazing!!!

[@timurtek]

Thank you for the tutorial, this is amazing!

[@CodeJan]

Omg, I've searched for that yesterday!!!

[@danielborges.]

Great tutorial! I would love to see one tut about webrtc with angular. Take care.

[@kecoje]

Where do you get ideas for all these videos? You're following all the latest tech trends. Great video

[@phronessys]

No react here, perfect

[@baolee4622]

so advanced. I need time to cover it. btw, it's so useful. many tks

[@Barrosy]

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.

[@MiquelCanal]

Clean and concise information, great video! Thanks for sharing

[@anouarzougrar8332]

JUST.. THANK YOU MAN 🙌🏻🙌🏻

[@jeromearenas4857]

Thank you for sharing your knowledge sir.

[@abiiranathan]

Just as promised. Thanks Jeff

[@Nermin913]

I have never subscribed this fast

[@ThomasOrlita]

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).

[@hitthemoney]

I have been waiting for this!

[@davidellis1550]

It's important to note that stun servers are free but can't always handle NAT traversal. Turn servers can handle NAT traversals, but can be expensive. When I started my project, I thought all P2P communications would be free. But, requiring turn servers makes the project much less appealing. I wish I realized that when I started. I can reduce P2P costs with WebRTC, but not eliminate it.

[@mrbinspire]

whats a ballpark estimate way to find out how much these costs are you speak of?

[@bilalshaikh6603]

Is stun not usable?

[@rc0d3]

Yeah, I to test with my self 2 different network. With a rree turn server with bandwidth 50gb/month. In 5 minutes, with cam I used 50mb of data. WITH 2 PEERS. This is so much, I can use like 7 days full video chat and spent all my free bandwidth. I think that creating my own turn server with cheap VPS with 2 TB of bandwidth by month and video compression before stream will work with a good amount of users. But I'm stucked at compression in javascript. It's hard to do, no simple way... And I'm using simplepeer, that use 30fps all the time and no option for compression, have other peers library that I will try and ffmpeg maybe for compression. I will find a way and turn that viable

[@eddwinpaz]

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.

[@polyhead]

Fireship....you are better than best

[@GuRuGeorge03]

lmao, our professor needed 6 months to show us how to make a chat app and this guy shows us how to make a VIDEO chat app in 11 minutes. lel

[@alherrera9390]

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.

[@shubhammane542]

This Channel is a 💎.

[@vuelancer]

Using vitejs is a complete surprise for me!

[@AB-md4kt]

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.

[@deathkillertech]

You surpass my expectations

[@Stoney_Eagle]

Thanks for going vanilla 😉

[@user-rg1jp2us4o]

Damn, he buffed. Someone is hitting the gym.

[@muheirwe]

You guys are amazing thanks

[@maoryatskan6346]

Thank you so much, exactly what I was looking for.

[@dhartidomadiya3825]

grate video valuable information to video call app but you build signaling server apprtc ?

[@sabatin0241]

With Firebase we can see a good example. But in some applications in production, can't be a choice, because there are too many reading and writing operations for something like firestore. IMO

[@sgtduckduck]

There is one write and one read per video chat. What are you talking about?