React Group Video Calling App Tutorial

2 years ago
25

Welcome to a new react tutorial video! In this video, I will be covering how to create a group video calling web application. I'll be creating this using React, JavaScript and Agora.

💻 Thanks to Agora for sponsoring this video! Create real time communication applications using their amazing platform and SDK, check them out here: https://bit.ly/techwithtim

📄 Resources 📄
Code in This Video: https://github.com/techwithtim/Agora-Group-Video-Calling
Agora Documentation: https://docs.agora.io/en
Download VSCode: https://code.visualstudio.com/
Download Node.js: https://nodejs.org/en/
Download ngrok: https://ngrok.com/
Agora SDK React Wrapper: https://github.com/AgoraIO-Community/agora-rtc-react/tree/v1.0.1
Command to install Agora React Wrapper - npm install git://github.com/AgoraIO-Community/agora-rtc-react#v1.0.1

⭐️ Timestamps ⭐️
00:00:00 | Introduction
00:01:17 | Project Overview
00:02:04 | All About Agora?
00:03:14 | Agora Project Setup
00:04:55 | Dev Environment Setup
00:06:43 | React Starting Code
00:12:42 | Agora Authentication and Tokens
00:15:15 | React Dependency Installation
00:19:08 | Agora Configuration
00:25:06 | App Component
00:27:34 | VideoCall Component Setup
00:31:20 | Subscribing To and Publishing Video Streams
00:51:45 | Video Calling Controls Setup
00:58:54 | Leaving and Unsubscribing From Video Streams
01:02:08 | Video Player Display
01:12:45 | Quick Overview of The Code
01:13:12 | Join Call Button
01:14:56 | Bug Fixes and Testing
01:23:34 | nrgok Setup - Hosting The App Publicly
01:27:07 | Conclusion

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
💰 Courses & Merch 💰
💻 The Fundamentals of Programming w/ Python: https://tech-with-tim.teachable.com/p/the-fundamentals-of-programming-with-python
👕 Merchandise: https://teespring.com/stores/tech-with-tim-merch-shop

🔗 Social Medias 🔗
📸 Instagram: https://www.instagram.com/tech_with_tim
📱 Twitter: https://twitter.com/TechWithTimm
⭐ Discord: https://discord.gg/twt
📝 LinkedIn: https://www.linkedin.com/in/tim-ruscica-82631b179/
🌎 Website: https://techwithtim.net
📂 GitHub: https://github.com/techwithtim
🔊 Podcast: https://anchor.fm/tech-with-tim

🎬 My YouTube Gear 🎬
🎥 Main Camera (EOS Canon 90D): https://amzn.to/3cY23y9
🎥 Secondary Camera (Panasonic Lumix G7): https://amzn.to/3fl2iEV
📹 Main Lens (EFS 24mm f/2.8): https://amzn.to/2Yuol5r
🕹 Tripod: https://amzn.to/3hpSprv
🎤 Main Microphone (Rode NT1): https://amzn.to/2HrZxXc
🎤 Secondary Microphone (Synco Wireless Lapel System): https://amzn.to/3e07Swl
🎤 Third Microphone (Rode NTG4+): https://amzn.to/3oi0v8Z
☀️ Lights: https://amzn.to/2ApeiXr
⌨ Keyboard (Daskeyboard 4Q): https://amzn.to/2YpN5vm
🖱 Mouse (Logitech MX Master): https://amzn.to/2HsmRDN
📸 Webcam (Logitech 1080p Pro): https://amzn.to/2B2IXcQ
📢 Speaker (Beats Pill): https://amzn.to/2XYc5ef
🎧 Headphones (Bose Quiet Comfort 35): https://amzn.to/2MWbl3e
🌞 Lamp (BenQ E-reading Lamp): https://amzn.to/3e0UCr8
🌞 Secondary Lamp (BenQ Screenbar Plus): https://amzn.to/30Dtafi
💻 Monitor (BenQ EX2780Q): https://amzn.to/2HsmUPZ
💻 Monitor (LG Ultrawide 34WN750): https://amzn.to/3dSD7tS
🎙 Mic Boom Arm (Rode PSA 1): https://amzn.to/30EZw9m
🎚 Audio Interface (Focusrite Scarlet 4i4): https://amzn.to/2TjXsih

💸 Donations 💸
💵 One-Time Donations: https://www.paypal.com/donate?hosted_button_id=CU9FV329ADNT8
💰 Patreon: https://www.patreon.com/techwithtim
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️

⭐️ Tags ⭐️
- Tech With Tim
- React Tutorial
- Agora
- Group Video Call
- Web App

⭐️ Hashtags ⭐️
#TechWithTim #ReactTutorial

Loading comments...