WebRTC in 100 Seconds // Build a Video Chat app from Scratch
ฝัง
- เผยแพร่เมื่อ 24 ก.ค. 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.
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.
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?
I need a peer-to-peer connection of this channel to my brain
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
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 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.
This channel is a treasure ✨
What the H___
👎👎👎👎👎👎👎 paid bot
@@Hacking-NASSA-with-HTML bruh!!!!!
What’s your problem?
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.
Most awaited video of all time, thanks Jeff! 💯
I very clearly remember asking for this in your web sockets video.
Thank you so much. Your content is the best.
I have no words for the quality of your content. Pure gold.
Would be nice if they make a new 100 videos talking about webRTC and multi-peer connection. Up vote here. 🚀
Fireship bringing you the latest and greatest tech content. Great video as always! 🔥
I was just about to start working on a project based on webRTC. Just what I needed. Thanks!!!
I learn so much on this channel. Great content! Definitely one of the best webdev channels on TH-cam. Thanks from Brazil ✌🏼
👎👎👎👎👎👎👎 paid bot
@@Hacking-NASSA-with-HTML Ok then... hahahaha
This was super fun to watch 🔥
That signaling process did take a while.
Thank you for vanilla JS 💪
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!
People in the poll voting for webRTC demo in React: "The senate will decide your fate"
Fireship: "I am the senate"
yes, I've been wanting this for so long. thank you good sir!
Great format! nice addition to the 100 seconds
Omg i needed this what the heck,the timing is insane 🤯
I was waiting for this. Thank you.
I've been wanting to build a video call app for ages!! But the tutorials are on it are so complex!!
No one can teach u like man, You are a Legend
Thank you for listening to comments and using vanilla version
Love your channel
Clean and concise information, great video!
Thanks for sharing
Fully fire.. every single second. Thank you for sharing.
I didn't even know I wanted this explanation. Thanks.
This series is amazing!!!
Just what I was looking for, thank you!
Most hyped && Awaited video 🔥🔥🔥
Thanks for making this video.It gonna help me in my final year project.
I love how you used the footage from the guy testifying as a cat
will definetly see you in the next one! thank you
Thank you for the tutorial, this is amazing!
This video is pure educational mastery.
I have been waiting for this!
wow, amazing, simple video but lot of knowledge, Thanks for this tutorial.
Finally it's here, thanks Jeff
Thanks Jeff. The lesson on Fireship was useful.
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?
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).
OMG this is perfectly timed i was thinking about how to make a video chat app and this dropped thank you!
Makes my day when you mention @angular 😍👊
You're the absolute man Jeff
Oh my christ. I've been looking forward to this.
Same here
For a while...🔥
Great video.
My favourite programming channel..
OMG just trying to add video calling on a React Native app with webRtc and I got the notification!!! Awesome!
Man, you really know how to choose perfect meme videos for the videos. 'Am not a cat'
Someone has already told it but thanks for bringing it using Vanilla JS. And also thanks a ton for the quality of the video. :)
wow! so easy! thank you Fireguy from Fireship!
Omg, I've searched for that yesterday!!!
Amazin explaining-skills in this one :-) .... THX for your effort and sharing your talent with us!!
JUST.. THANK YOU MAN 🙌🏻🙌🏻
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
Jesus Christ, the video is so informative. Need to watch all videos of this channel
This channel is incredible!!!
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
so advanced. I need time to cover it. btw, it's so useful. many tks
Great tutorial! I would love to see one tut about webrtc with angular. Take care.
This is really work🎉🎉 good explanations and examples
gRPC in 100 seconds please! love your channel ❤️
Finally- Thank you ❤️
Thank you for sharing your knowledge sir.
Most awaited!!
Fireship is the best YT dev channel
Just as promised. Thanks Jeff
lol so early for the first time
Btw very nice video man!
You are my hero! 👏🏻
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.
Through Jeff everything are clear!
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
You guys are amazing thanks
This is beautiful
Thank you man
Magic! Thank you
Thank you so much, exactly what I was looking for.
Where do you get ideas for all these videos? You're following all the latest tech trends. Great video
Nice video thank you
This Channel is a 💎.
Great content 🔥
I have never subscribed this fast
Finally, i tried WebRTC a year ago and didn't understand nothing, now im building discord 2 lol
fantastic video, how is the networking aspect different from NAT-punch-through?
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.
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?
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?
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?
Awesome Video! What do I need to change in the main.js to make it work? Thanks
How could this implementation be extended to handle multiple people (more than 2) connecting to the same session?
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
Thanks!
When tried to add rtc data channel the channel was not opening and was stale on connecting state
Literally, one of the best youtube channel for web developers and enthusiasts!!😍😍