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

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

[@-_-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]

😁😁😁😁🤣🤣👌🏻👌🏻

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

[@istainblack]

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

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

[@edwincarlsson9014]

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

[@cyrilogoh6171]

Same here

[@codeaperture]

For a while...🔥

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

[@exyios8493]

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

[@phronessys]

No react here, perfect

[@brindhas8907]

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

[@chillmusichour]

You're the absolute man Jeff

[@carlomigueldy]

Fireship is the best YT dev channel

[@jonathanchavez9203]

This series is amazing!!!

[@danielborges.]

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

[@_parassolanki]

Great video. My favourite programming channel..

[@1_AHS_1]

Watch at 2x for best experience.😅😂❤

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

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

[@mamenatech]

How powerful nodejs with webRtc can handing peer connection with SFU method?

[@pranavbonthala1242]

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

[@mohanaggarwal4058]

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

[@dr.d3600]

Through Jeff everything are clear!

[@hitthemoney]

I have been waiting for this!

[@anouarzougrar8332]

JUST.. THANK YOU MAN 🙌🏻🙌🏻

[@jeromearenas4857]

Thank you for sharing your knowledge sir.

[@polyhead]

Fireship....you are better than best

[@lakshaynz]

Magic! Thank you

[@FaizKhan-of9qv]

This video was dope, it feels like I've gained godly powers after reading the holy book of eternal secrets

[@RanjanKumar-bu7ws]

I always get confused in the signalling part, first time i tried webRTC following the google developers source, then tried to use a library for webRTC and i didnt liked the results.

[@Priming-AI]

I make this project new version in Angular 17. Tanks !

[@professeurish]

Thank you man

[@shubhammane542]

This Channel is a 💎.

[@dhartidomadiya3825]

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

[@cristianmari1226]

more of webrtc !!!

[@adelarsq]

You are my hero! 👏🏻

[@programmer4047]

Won't webrtc result in an excessive bandwidth utilisation? For example, we are connected to 50 devices and I have to send my audio/video to 50 devices 50 times

[@Fireship]

Yes, large multi-stream chats will need to implement something like a Selective Forwarding Unit SFU to be efficient with bandwidth.

[@lesptitsoiseaux]

“Vite” is French for fast. You pronounce it this way : do the V then just add the normal English “it” sound. Both short in duration. Same as “ Git” but with a V at the beginning.

[@cbodapati]

Wonderful tutorial videos. I tried to use this in angular, but on line "callDoc.onSnapshot", in main.js, I got this error....Property 'onSnapshot' does not exist on type 'AngularFirestoreDocument'. can you pls help? Wonderful tutorial again!! made a angular version....a very rough version...thanks a lot

[@sankhadip_roy]

why the webcam is not starting in my local machine don't know? can anyone help!

[@alirezahaddadi230]

This is another awesome content on this channel. I am just curious about the security of this connection. can be spoofed? and is there any solutions to secure it?

[@islombekhasanov]

we finally saw you!

[@TheBorninmotion]

please more firebase!

[@0xBerto]

is there a reason that the camera will not activate when using mobile? works on laptop. Also, would you mind doing a full deploy of this will tip $ lol

[@limjohnny4156]

Can someone tell me why WebRTC activity doesnt show up in Chrome's network inspection tool?

[@joseisraeldiazzapata5179]

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

[@FOURBITSEDITS]

How to change camera while on a call?

[@brucewayne2480]

Amazing video just wondering why zoom doesn't use webrtc ? how do you record a video with webrtc ?

[@stomil91]

What is vanila JS if you using node_module there ?

[@SACKO0731]

@Fireship please build this for react-native with firebase

[@chinmoyktamal2837]

This is great tutorial! Can you make a version of this with php and mysql? Its a request to you.Thanks.

[@JohnTyree]

This makes everything _much_ more complicated, since you'll need to essentially implement firebase's "listening" feature on your own (in javascript) in order to handle the offer/answer flow. You can't really do a project like this with php only since webrtc is a javascript API.

[@kumarabhishek3890]

I know js what else do I need to be able to make this?

[@juniordevmedia]

Please make a beyond 100 sec video on RTMP with Nginx and Nodejs please :')

[@geoblk3000]

Casually forgets to mention the peer-to-peer limit for browsers, meaning that you would need centralized server(s) to route the streams if you hit that limit. That's where the real complexity begins with WebRTC, not to mention peer-to-peer performance handling many simultaneous connections.

[@Wakkyguy]

Please tell us the source of your background music

[@stockswill]

As built, what would happen if multiple users answered the call? Or would this be a single P2P call/answer only?

[@brightlyvirya7500]

what about one to many video chat app like google meet?

[@isaacalexisrivera3157]

whats the background theme?

[@XtrAMassivE]

Can WebRTC be used to play multicast stream from an IP camera? I'm looking for a solution to play a live video feed of a security camera over multicast in a browser without any plugins. Any ideas??

[@thisisbadpanda]

Start Webcam button does nothing

[@danko95bgd]

Hi, nice video! Can you maybe do a Keycloak in 100s or more. Its a good technology but no good tutorials :(

[@oziousmegasus9201]

can i use this for a group chat app?

[@aslam3161]

Can we have more than two users

[@inactive_gaming13]

Would there be any possibility of converting the server to python and using socket instead with flask?

[@aungkyawmoe8023]

WE WANT TO SEE THE HAIRLINE!

[@PIYUSH61004]

How did you set up VS Code for WebRTC? I always get this error "ReferenceError: RTCPeerConnection is not defined"

[@AntiWanted]

Nice

[@chrisarmstrong2721]

Can this be used offline using gun.js and p2p

[@ecam90]

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

[@LoveThatSceneChannel]

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

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

[@jakubwegrzyn3798]

Thank you for vanilla JS 💪

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

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

[@DavidVerzolla]

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

[@igorordecha]

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

[@thetrends5670]

Face reveal?

[@jashwanthbheemapaka5108]

Guys don’t waste your time , this only works when both users are connected to the same network

[@TheWLNS]

why is that?

[@stephenkamenar]

"from scratch" has really lost it's meaning, jeez

[@TheMRJewfro]

what about TURN servers?

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

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

[@dandyiy]

thx

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

[@KisrDeveloper]

He made it in JS, no React, why then polls tho?😺

[@Fireship]

Ultimately, I felt like React had too much library-specific code that created a distraction from the main webrtc concepts.

[@weiiswurst]

@@Fireship also vanillajs makes it way easier to adapt this to any framework

[@nlattessi]

gRPC in 100 seconds please! love your channel ❤️

[@Babakinha]

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

[@Vivek2062]

Most awaited video of all time, thanks Jeff! 💯

[@adarshkumar-jw2nz]

First Comment 😍 Finally

[@Fireship]

Gold 🥇

[@klutch4198]

🔦 passing on the torch to you!

[@cherriepie]

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

[@altafmalik2843]

too quick video

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

[@mohityadav21]

Can we do this without using internet using local network? Basically, without using server over the internet instead creating our own local server?

[@SandwichMitGurke]

thanks for not coding it in react

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

[@yokowasis]

As of now this code doesn't work. Because the firebase decided to change the syntax on v9. You either have to use v8 or use compat or upgrade the code to v9. So add that 30 minutes of coding into 3 hour of coding.

[@ZimmyAutomatic]

Does anyone know if its possible to make an app where you livestream from your phone to someone in another country

[@mbadpa]

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

[@kettenbach]

Makes my day when you mention @angular 😍👊

[@swaggitypigfig8413]

Can you hear me judge???

[@yagedygag]

I cloned your repo, pasted in my firebase config, ran npm install, run locally with npm run dev, click start webcam (works), clicked create call (offer) which does indeed make a new doc in my firestore, but then clicking answer does not do anything. I tried this in the same browser (which looks like it works in your video at 2:58) and tried in different browsers both running localhost:3000. Any ideas? I thought that was all that was needed to run your demo

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