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

Share it with your friends Like

Thanks! Share it with your friends!

Close

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 https://fireship.io/lessons/webrtc-firebase-video-chat/

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

https://github.com/fireship-io/webrtc-firebase-demo

Useful Resources

WebRTC Docs https://webrtc.org/
Codelab https://webrtc.org/getting-started/firebase-rtc-codelab
Signaling https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling

#webdev #js #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

My VS Code Theme

– Atom One Dark
– vscode-icons
– Fira Code Font

Comments

TRIGGERING ENCOURAGEMENT says:

Please make a video on geolocation with node js that provides nearby service like food delivery or any other services application

jose israel diaz zapata says:

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

Pero Juric says:

This video is a piece of Sh*it. Not a single one of these tutorials does not work without a third party PAYED libraries. Unless you're happy with the limit of 20 concurrent connections. 0/10 and thumb down.

Александр Мариничев says:

Good content. I tried to do it, but the browser blocks video and audio outside of the localhost. How did you solve this problem?

gadi tzkhori says:

Thanks!
When tried to add rtc data channel the channel was not opening and was stale on connecting state

Stuart Loria says:

Broken with the latest versions of firebase and vite

Wasis Haryo Sasoko says:

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.

J_Net Reloaded says:

how do i runit on port 8000 ?

Romeo peter says:

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

ricko lopez says:

will this have screen monitoring? i dont want my boss seeing me on FB while working

polyhead says:

Fireship….you are better than best

Randomly Interesting says:

lmao, our professor needed 6 months to show us how to make a chat app and this guy shows us how to make a VIDEO chat app in 11 minutes. lel

Avox Design says:

This kind of p2p connection sounds really interesting, is it possible to use a similar setup to perform realtime file transfer?

Bappy Tech Tips says:

Doesn't work when using a VPN. 🙁

Islombek Hasanov says:

wow! so easy! thank you Fireguy from Fireship!

Islombek Hasanov says:

we finally saw you!

Aiden W says:

BUT HOW DO I MAKE ZOOM CLONE WITHOUT WEBRTC I DONT WANNA USE API'S

peng says:

I have a problem TT 
when I click answerButton it can't setRemoteDescription(await callDoc.get()).data().offer 
>> error happened: Description type is incompatible with current signaling state
descriptionType is "offer" but signalingState is "have-local-offer"
I really do not know how to fix this ;-;, please someone tell me the solution

Write a comment

*

Area 51
Ringing

Answer