React Group Video Calling App Tutorial
Key Takeaways
Creates a group video calling app using React, JavaScript, and Agora
Original Description
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
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Tech With Tim · Tech With Tim · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
A* Path Finding Algorithm(Visualization)
Tech With Tim
Python Programming Tutorial #1 - Variables and Data Types
Tech With Tim
Python Programming Tutorial #2 - Basic Operators and Input
Tech With Tim
Python Programming Tutorial #3 - Conditions
Tech With Tim
Python Programming Tutorial #4 - IF/ELIF/ELSE
Tech With Tim
Python Programming Tutorial #5 - Chained Conditionals and Nested Statements
Tech With Tim
Python Programming Tutorial #6 - For Loops
Tech With Tim
Python Programming Tutorial #7 - While Loops
Tech With Tim
Python Programming Tutorial #8 - Lists and Tuples
Tech With Tim
Python Programming Tutorial #9 - Iteration by Item (For Loops Continued...)
Tech With Tim
Python Programming Tutorial #10 - String Methods
Tech With Tim
How to Overclock a NVIDIA GPU
Tech With Tim
Python Programming Tutorial #11 - Slice Operator
Tech With Tim
Python Programming Tutorial #12 - Functions
Tech With Tim
Python Programming Tutorial #13 - How to Read a Text File
Tech With Tim
Python Programming Tutorial #14 - Writing to a Text File
Tech With Tim
Python Programming Tutorial #15 - Using .count() and .find()
Tech With Tim
Python Programming Tutorial #16 - Introduction to Modular Programming
Tech With Tim
Python Programming Tutorial #17 - Optional Parameters
Tech With Tim
Python Programming Tutorial #18 - Try and Except (Python Error Handling)
Tech With Tim
Python Programming Tutorial #19 - Global vs Local Variables
Tech With Tim
Python Programming Tutorial #20 - Classes and Objects
Tech With Tim
Cool VBS Script to Prank Your Friends!
Tech With Tim
How to Overclock an AMD GPU
Tech With Tim
Best GPU'S For Mining Ethereum (2018)
Tech With Tim
Recursion and Memoization Tutorial Python
Tech With Tim
Ethereum Mining Rig - Hardware Guide
Tech With Tim
Pygame Tutorial #1 - Basic Movement and Key Presses
Tech With Tim
How to Install Pygame (Windows 8/10)
Tech With Tim
How to Trade Your Cryptocurrency (Bitcoin, Ethereum etc.) For Cash!
Tech With Tim
How to Mine Ethereum 2018 - WORKING (Super-Easy)
Tech With Tim
Microphone Comparison - $10 Mic vs $150 Mic (Blue Yeti USB)
Tech With Tim
Pygame Tutorial #2 - Jumping and Boundaries
Tech With Tim
Pygame Tutorial #3 - Character Animation & Sprites
Tech With Tim
Pygame Tutorial #4 - Optimization & OOP
Tech With Tim
OBS Studio Tutorial - Best OBS Settings
Tech With Tim
Linear Search Algorithm - Python Example and Code
Tech With Tim
Make Any Mic Sound AMAZING! (WITH OBS)
Tech With Tim
Binary Search Algorithm - Python Example & Code
Tech With Tim
Pygame Tutorial #5 - Projectiles
Tech With Tim
Pygame Game - Mini Golf
Tech With Tim
Pygame Tutorial - Projectile Motion (Part 1)
Tech With Tim
Pygame Tutorial - Projectile Motion (Part 2)
Tech With Tim
Pygame Tutorial #6 - Enemies
Tech With Tim
Pygame Tutorial #7 - Collision and Hit Boxes
Tech With Tim
Pygame Tutorial #8 - Scoring and Health Bars
Tech With Tim
Cloud Mining vs. Hardware Mining - 2018
Tech With Tim
How to Install Pygame on Mac OSX (Fast-Simple)
Tech With Tim
Pygame Tutorial #9 - Sound Effects, Music & More Collision
Tech With Tim
Pygame Tutorial #10 - Finishing Touches & Next Steps
Tech With Tim
How to Fade Your Screen in Pygame [CODE IN DESCRIPTION]
Tech With Tim
How to Create a Button in Pygame [CODE IN DESCRIPTION]
Tech With Tim
Pygame Side-Scroller Tutorial #1 - Scrolling Background/Character Movement
Tech With Tim
Pygame Side-Scroller Tutorial #2 - Random Object Generation
Tech With Tim
Pygame Side-Scroller Tutorial #3 - Collision
Tech With Tim
Pygame Side-Scroller Tutorial #4 - Scoring and End Screen
Tech With Tim
How to Create A Message Box in Python - Tkinter
Tech With Tim
Is Ethereum Mining Still Profitable - Is It Worth It (April 2018)
Tech With Tim
How to Run MAC OSX on a WINDOWS PC (Clover Boot-loader)
Tech With Tim
Programming Problem #1 - Alphabet Soup (Beginner/Novice)
Tech With Tim
Related AI Lessons
⚡
⚡
⚡
⚡
Common Next.js Errors (and How I Solved Them)
Dev.to · gary killen
Applying Scalability in Backend (CodeBuddy)
Medium · LLM
Why Every Backend Developer Should Learn Nginx Before Going to Production
Medium · DevOps
Connecting Frontend to Backend: A Backend Engineer’s Reality Check
Medium · Programming
Chapters (20)
| Introduction
1:17
| Project Overview
2:04
| All About Agora?
3:14
| Agora Project Setup
4:55
| Dev Environment Setup
6:43
| React Starting Code
12:42
| Agora Authentication and Tokens
15:15
| React Dependency Installation
19:08
| Agora Configuration
25:06
| App Component
27:34
| VideoCall Component Setup
31:20
| Subscribing To and Publishing Video Streams
51:45
| Video Calling Controls Setup
58:54
| Leaving and Unsubscribing From Video Streams
1:02:08
| Video Player Display
1:12:45
| Quick Overview of The Code
1:13:12
| Join Call Button
1:14:56
| Bug Fixes and Testing
1:23:34
| nrgok Setup - Hosting The App Publicly
1:27:07
| Conclusion
🎓
Tutor Explanation
DeepCamp AI