WebRTC in 100 Seconds // Build a Video Chat app from Scratch
Vložit
- čas přidán 4. 07. 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 - Věda a technologie
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
"This video would be a crazy 20 minutes long or something." - lol. this is why I love this channel.
I need a peer-to-peer connection of this channel to my brain
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?
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 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.
This channel is a treasure ✨
What the H___
👎👎👎👎👎👎👎 paid bot
@@Hacking-NASSA-with-HTML bruh!!!!!
What’s your problem?
This channel is awesome. My job (in software) often gets me down, but this channel makes me remember the magic! Thank you.
Thank you for vanilla JS 💪
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.
Would be nice if they make a new 100 videos talking about webRTC and multi-peer connection. Up vote here. 🚀
Most of the new things I learn is from this legendary channel. I hope more people out about it.
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!
I have no words for the quality of your content. Pure gold.
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.
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!!!
No one can teach u like man, You are a Legend
I learn so much on this channel. Great content! Definitely one of the best webdev channels on CZcams. 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.
I've been wanting to build a video call app for ages!! But the tutorials are on it are so complex!!
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!
Great format! nice addition to the 100 seconds
Omg i needed this what the heck,the timing is insane 🤯
Thank you for listening to comments and using vanilla version
Love your channel
I didn't even know I wanted this explanation. Thanks.
yes, I've been wanting this for so long. thank you good sir!
Fully fire.. every single second. Thank you for sharing.
This video is pure educational mastery.
I was waiting for this. Thank you.
Clean and concise information, great video!
Thanks for sharing
will definetly see you in the next one! thank you
Great video.
My favourite programming channel..
Just what I was looking for, thank you!
Thanks Jeff. The lesson on Fireship was useful.
Makes my day when you mention @angular 😍👊
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
People in the poll voting for webRTC demo in React: "The senate will decide your fate"
Fireship: "I am the senate"
wow, amazing, simple video but lot of knowledge, Thanks for this tutorial.
OMG just trying to add video calling on a React Native app with webRtc and I got the notification!!! Awesome!
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
Thank you for the tutorial, this is amazing!
Someone has already told it but thanks for bringing it using Vanilla JS. And also thanks a ton for the quality of the video. :)
Most hyped && Awaited video 🔥🔥🔥
Man, you really know how to choose perfect meme videos for the videos. 'Am not a cat'
This series is amazing!!!
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?
wow! so easy! thank you Fireguy from Fireship!
Jesus Christ, the video is so informative. Need to watch all videos of this channel
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).
Amazin explaining-skills in this one :-) .... THX for your effort and sharing your talent with us!!
gRPC in 100 seconds please! love your channel ❤️
OMG this is perfectly timed i was thinking about how to make a video chat app and this dropped thank you!
Finally it's here, thanks Jeff
Thank you for sharing your knowledge sir.
Oh my christ. I've been looking forward to this.
Same here
For a while...🔥
Omg, I've searched for that yesterday!!!
You're the absolute man Jeff
This is really work🎉🎉 good explanations and examples
so advanced. I need time to cover it. btw, it's so useful. many tks
Through Jeff everything are clear!
Fireship is the best YT dev channel
I have been waiting for this!
This channel is incredible!!!
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
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.
JUST.. THANK YOU MAN 🙌🏻🙌🏻
Great tutorial! I would love to see one tut about webrtc with angular. Take care.
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
Just as promised. Thanks Jeff
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.
Where do you get ideas for all these videos? You're following all the latest tech trends. Great video
I have never subscribed this fast
You guys are amazing thanks
Magic! Thank you
lol so early for the first time
Btw very nice video man!
Finally- Thank you ❤️
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.
You surpass my expectations
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.
Finally, i tried WebRTC a year ago and didn't understand nothing, now im building discord 2 lol
You are my hero! 👏🏻
Most awaited!!
Fantastic! Thanks!
This is beautiful
Using vitejs is a complete surprise for me!
Fireship....you are better than best
Nice video thank you
This Channel is a 💎.
Thank you so much, exactly what I was looking for.
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.
Hey! Great Video! Could you also please make an example for one to many video calling?
Literally, one of the best youtube channel for web developers and enthusiasts!!😍😍
Thank you man
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.
This guy is OG
Middle-out file compression will really make the video sharp.
Thanks for going vanilla 😉