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

Подписаться 3,1 млн

Просмотров 530 тыс.

50% 1

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

Наука

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 440

@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 2 года назад

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?

@ecam90 3 года назад

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

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

@LoveThatSceneChannel 3 года назад

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

@-_-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 года назад

😁😁😁😁🤣🤣👌🏻👌🏻

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

@mbadpa 3 года назад

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

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

@omaryassir5885 3 года назад

This channel is a treasure ✨

@Rentaro_dev 3 года назад

What the H___

@Hacking-NASSA-with-HTML Год назад

👎👎👎👎👎👎👎 paid bot

@omaryassir5885 Год назад

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

@omaryassir5885 Год назад

What’s your problem?

@ranaakhil 3 года назад

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

@joaquimley 3 года назад

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

@user-cj3yu9nv1u 3 года назад

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

@Vivek2062 3 года назад

Most awaited video of all time, thanks Jeff! 💯

@DavidVerzolla 3 года назад

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

@leoliveirab 3 года назад

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

@Hacking-NASSA-with-HTML Год назад

👎👎👎👎👎👎👎 paid bot

@leoliveirab Год назад

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

@krithiksankar2081 3 года назад

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

@_romeopeter 2 года назад

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

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

@arvind6007 3 года назад

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

@cherriepie 3 года назад

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

@jakubwegrzyn3798 3 года назад

Thank you for vanilla JS 💪

@AS-hs4xk 3 года назад

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

@eduardointech 3 года назад

Great format! nice addition to the 100 seconds

@vineetyadav6978 3 года назад

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

@temmmbebkd2922 3 года назад

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

@brindhas8907 2 года назад

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

@erreerre2001 3 года назад

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

@MiquelCanal 3 года назад

Clean and concise information, great video! Thanks for sharing

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

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

@Helleynea 3 года назад

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

@_parassolanki 3 года назад

Great video. My favourite programming channel..

@kettenbach 3 года назад

Makes my day when you mention @angular 😍👊

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

@adityakumar4200 3 года назад

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

@scheimong 3 года назад

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

@unknownman1 3 года назад

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

@fahad.hossain 3 года назад

I was waiting for this. Thank you.

@djsnooppyzatdepoet7568 3 года назад

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

@ThePhrenchen 3 года назад

will definetly see you in the next one! thank you

@birdofhermes6152 Год назад

Thanks Jeff. The lesson on Fireship was useful.

@shootnado 3 года назад

This video is pure educational mastery.

@nlattessi 3 года назад

gRPC in 100 seconds please! love your channel ❤️

@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

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

@dsi-films1264 3 года назад

Just what I was looking for, thank you!

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

@parthipankalayini8 3 года назад

Most hyped && Awaited video 🔥🔥🔥

@timurtek 2 года назад

Thank you for the tutorial, this is amazing!

@edwincarlsson9014 3 года назад

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

@cyrilogoh6171 3 года назад

Same here

@codeaperture 3 года назад

For a while...🔥

@exyios8493 3 года назад

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

@islombekhasanov 2 года назад

wow! so easy! thank you Fireguy from Fireship!

@jonathanchavez9203 3 года назад

This series is amazing!!!

@chanokplaisub3586 6 месяцев назад

This is really work🎉🎉 good explanations and examples

@danielborges. 3 года назад

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

@carlomigueldy 3 года назад

Fireship is the best YT dev channel

@kecoje 3 года назад

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

@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

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

@igorordecha 3 года назад

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

@chillmusichour 3 года назад

You're the absolute man Jeff

@CodeJan 3 года назад

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

@raniketram 3 года назад

Finally it's here, thanks Jeff

@mohanaggarwal4058 3 года назад

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

@dr.d3600 3 года назад

Through Jeff everything are clear!

@hitthemoney 3 года назад

I have been waiting for this!

@ViniciusBuscacio Год назад

This channel is incredible!!!

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

@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

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

@anouarzougrar8332 3 года назад

JUST.. THANK YOU MAN 🙌🏻🙌🏻

@pranavbonthala1242 3 года назад

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

@Babakinha 3 года назад

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

@abiiranathan 3 года назад

Just as promised. Thanks Jeff

@osamaa.h.altameemi5592 3 года назад

fantastic video, how is the networking aspect different from NAT-punch-through?

@maoryatskan6346 3 года назад

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

@Nermin913 3 года назад

I have never subscribed this fast

@andrewvanbeek081 3 года назад

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?

@andrewvanbeek081 3 года назад

Sidenote this is like my favorite Dev Channel!

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

@koenbrink 3 года назад

would this also be relevant for server-client audio/video streaming, or is webRTC really only focussed on p2p connections as you describe in this video?

@arnavbansal8159 3 года назад

Hey! Great Video! Could you also please make an example for one to many video calling?

@test-kx9qx 2 года назад

Thanks for the great content. How would we do if I want to emit my webcam and other users can see without them to have to stream theirs as well?

@prakhyathshetty 3 года назад

Most awaited!!

@tuxdoesstuff 3 года назад

Finally- Thank you ❤️

@ejslondontech 3 года назад

Awesome Video! What do I need to change in the main.js to make it work? Thanks

@Stoney_Eagle 3 года назад

Thanks for going vanilla 😉

@muheirwe 2 года назад

You guys are amazing thanks

@AB-md4kt 3 года назад

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 3 года назад

You surpass my expectations

@adelarsq 3 года назад

You are my hero! 👏🏻

@raghav.bhardwaj 3 года назад

Thank you for this video. Can you please tell me from where did you learn things like these? Like How do you know from Where to start? Thanks.

@joseisraeldiazzapata5179 2 года назад

Awesome, i have a question i hope can receive advices. What should i do if i need to share a Chrome tab with audio to participants and also can use my mic at any time. It's like 2 independent audio streams through webrtc. Pls help