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

Рет қаралды 546,741

Күн бұрын

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

Пікірлер: 444

@ecam90 3 жыл бұрын

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

@LoveThatSceneChannel 3 жыл бұрын

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

@klutch4198 3 жыл бұрын

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 3 жыл бұрын

Ultimate chad dev

@ayushijaiswal9813 3 жыл бұрын

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 3 жыл бұрын

this

@imranq9241 Жыл бұрын

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

@Hacking-NASSA-with-HTML Жыл бұрын

👎👎👎👎👎👎👎 paid bot

@devsauce 3 жыл бұрын

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 3 жыл бұрын

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

@shanglee643 3 жыл бұрын

@@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 3 жыл бұрын

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

@shanglee643 3 жыл бұрын

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

@shanglee643 3 жыл бұрын

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

@PrasangaBasnayake 3 жыл бұрын

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

@anupamadissanayake1299 3 жыл бұрын

feels good to know that we have the same nationality

@PrasangaBasnayake 3 жыл бұрын

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

@-_-9034 3 жыл бұрын

yes.. now i can finally take down zoom

@PotatoMagnet 3 жыл бұрын

😂😂😂😂😂😂😂😂😂😂

@toxaq 3 жыл бұрын

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 3 жыл бұрын

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

@toxaq 3 жыл бұрын

@@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 3 жыл бұрын

😁😁😁😁🤣🤣👌🏻👌🏻

@omaryassir5885 3 жыл бұрын

This channel is a treasure ✨

@rendoesmath 3 жыл бұрын

What the H___

@Hacking-NASSA-with-HTML Жыл бұрын

👎👎👎👎👎👎👎 paid bot

@omaryassir5885 Жыл бұрын

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

@omaryassir5885 Жыл бұрын

What’s your problem?

@istainblack 3 жыл бұрын

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

@FilledStacks 3 жыл бұрын

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.

@talhaibnemahmud 3 жыл бұрын

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!

@mbadpa 3 жыл бұрын

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

@ranaakhil 3 жыл бұрын

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

@Vivek2062 3 жыл бұрын

Most awaited video of all time, thanks Jeff! 💯

@user-cj3yu9nv1u 3 жыл бұрын

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

@joaquimley 3 жыл бұрын

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

@leoliveirab 3 жыл бұрын

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

@Hacking-NASSA-with-HTML Жыл бұрын

👎👎👎👎👎👎👎 paid bot

@leoliveirab Жыл бұрын

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

@jakubwegrzyn3798 3 жыл бұрын

Thank you for vanilla JS 💪

@_romeopeter 2 жыл бұрын

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

@krithiksankar2081 3 жыл бұрын

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

@DavidVerzolla 3 жыл бұрын

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

@cherriepie 3 жыл бұрын

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

@CodingNuggets 3 жыл бұрын

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!

@eduardointech 3 жыл бұрын

Great format! nice addition to the 100 seconds

@temmmbebkd2922 3 жыл бұрын

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

@igorordecha 3 жыл бұрын

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

@fahad.hossain 3 жыл бұрын

I was waiting for this. Thank you.

@arvind6007 3 жыл бұрын

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

@vineetyadav6978 3 жыл бұрын

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

@AS-hs4xk 3 жыл бұрын

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

@lallawmzualakhawlhring7340 3 жыл бұрын

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?

@MiquelCanal 3 жыл бұрын

Clean and concise information, great video! Thanks for sharing

@brindhas8907 3 жыл бұрын

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

@parthipankalayini8 3 жыл бұрын

Most hyped && Awaited video 🔥🔥🔥

@dsi-films1264 3 жыл бұрын

Just what I was looking for, thank you!

@Helleynea 3 жыл бұрын

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

@jonathanchavez9203 3 жыл бұрын

This series is amazing!!!

@adityakumar4200 3 жыл бұрын

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

@exyios8493 3 жыл бұрын

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

@ThomasOrlita 3 жыл бұрын

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

@birdofhermes6152 Жыл бұрын

Thanks Jeff. The lesson on Fireship was useful.

@hitthemoney 3 жыл бұрын

I have been waiting for this!

@timurtek 2 жыл бұрын

Thank you for the tutorial, this is amazing!

@wenniecatabay7094 3 жыл бұрын

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

@MisterAndreSafari 3 жыл бұрын

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

@shootnado 3 жыл бұрын

This video is pure educational mastery.

@raniketram 3 жыл бұрын

Finally it's here, thanks Jeff

@erreerre2001 3 жыл бұрын

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

@ThePhrenchen 3 жыл бұрын

will definetly see you in the next one! thank you

@YexyYT 2 жыл бұрын

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.

@dandyiy 2 жыл бұрын

thx

@Daniel32396 2 жыл бұрын

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 2 жыл бұрын

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

@_parassolanki 3 жыл бұрын

Great video. My favourite programming channel..

3 жыл бұрын

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

@kettenbach 3 жыл бұрын

Makes my day when you mention @angular 😍👊

@islombekhasanov 2 жыл бұрын

wow! so easy! thank you Fireguy from Fireship!

@ramananfinsceal1319 3 жыл бұрын

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

@shrn 3 жыл бұрын

I just started working on a project and it popped up

@chillmusichour 3 жыл бұрын

You're the absolute man Jeff

@unknownman1 3 жыл бұрын

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

@ViniciusBuscacio Жыл бұрын

This channel is incredible!!!

@djsnooppyzatdepoet7568 3 жыл бұрын

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

@CodeJan 3 жыл бұрын

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

@scheimong 3 жыл бұрын

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

@carlomigueldy 3 жыл бұрын

Fireship is the best YT dev channel

@danielborges. 3 жыл бұрын

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

@anouarzougrar8332 3 жыл бұрын

JUST.. THANK YOU MAN 🙌🏻🙌🏻

@chanokplaisub3586 7 ай бұрын

This is really work🎉🎉 good explanations and examples

@edwincarlsson9014 3 жыл бұрын

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

@cyrilogoh6171 3 жыл бұрын

Same here

@codeaperture 3 жыл бұрын

For a while...🔥

@kecoje 3 жыл бұрын

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

@baolee4622 3 жыл бұрын

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

@jeromearenas4857 3 жыл бұрын

Thank you for sharing your knowledge sir.

@prakhyathshetty 3 жыл бұрын

Most awaited!!

@abiiranathan 3 жыл бұрын

Just as promised. Thanks Jeff

@tuxdoesstuff 3 жыл бұрын

Finally- Thank you ❤️

@nlattessi 3 жыл бұрын

gRPC in 100 seconds please! love your channel ❤️

@pranavbonthala1242 3 жыл бұрын

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

@dr.d3600 3 жыл бұрын

Through Jeff everything are clear!

@Nermin913 3 жыл бұрын

I have never subscribed this fast

@mohanaggarwal4058 3 жыл бұрын

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

@juanmartinguillen4876 3 жыл бұрын

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.

@adelarsq 3 жыл бұрын

You are my hero! 👏🏻

@eddwinpaz 2 жыл бұрын

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.

@simonbrandner 3 жыл бұрын

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

@Fireship 3 жыл бұрын

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

@yitzchakpachtman9664 3 жыл бұрын

@@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 3 жыл бұрын

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

@maoryatskan6346 3 жыл бұрын

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

@muheirwe 3 жыл бұрын

You guys are amazing thanks

@justins4996 3 жыл бұрын

Fantastic! Thanks!

@galnahum4349 3 жыл бұрын

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.

@lakshaynz Жыл бұрын

Magic! Thank you

@alherrera9390 3 жыл бұрын

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.