React and WebRTC 2023 & Sharing Location App with Video Chat

8h 11m 54s
English
Paid

Course description

Learn technologies like React, WebRTC (PeerJS) , SocketIO and Google Maps API by creating amazing project ,,GeoCall''. In this practical course we will jump straight to the code and explain all necessary things through the course. We will go through all of the steps to create application with possibility of sharing our location on the map with other users. We will create own PeerJS implementation to show how you can develop WebRTC application with direct calls.

Read more about the course

After this course you will be able to create own application with Google Maps and calling functionality. You will know the process how to establish connection between peers.

In our application we will use:

  • WebRTC (PeerJS)

  • JavaScript

  • SocketIO

  • Express.js

  • Node.js

  • React

  • Google Maps API

We will create necessary UI with React and Google Maps and we will proceed with all of the logic related with SocketIO and WebRTC.

App creating process:

  • Prepare environment

  • Build frontend of our application with React

  • Connect our Application with Google Maps

  • Create chat functionality with SocketIO

  • Create functionality to share with other users our location

  • Connect own PeerJS Server

  • Implement direct calls with PeerJS

I hope you will enjoy the course and after finishing it you will feel confident to create own application with Google Maps and chat functionality with direct calls.

Also you can find theory module about WebRTC if you would like to know more details what is going behind of implementation of PeerJS

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 86 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React and WebRTC 2023 & Sharing Location App with Video Chat

0:00
/
#1: Application Preview

All Course Lessons (86)

#Lesson TitleDurationAccess
1
Application Preview Demo
03:19
2
Node.js installation
02:15
3
Creating Server Project
02:23
4
Creating Express Server
06:53
5
Adding Socket.IO Server
05:37
6
Testing Connection with Postman
02:56
7
Disconnected Event Handler
04:31
8
More about Events Handlers
01:00
9
Creating React Application
04:12
10
Connecting with Redux State Management
08:21
11
Routing with react-router-dom
05:39
12
Creating Login Page View
07:26
13
Handling Username Input
04:02
14
Handling Login Button
06:26
15
Code Refactoring
03:48
16
Getting Geo Location
07:23
17
Disabling Button on Location Error
01:52
18
Saving Location In Store
03:47
19
Redux Store Debugging
05:07
20
Getting Fake Location
05:52
21
Connection with Socket.IO Server
09:45
22
Storing Online Users
07:27
23
Login functionality
08:33
24
Emitting Event with Online Users
11:38
25
Saving Online Users In Store
07:46
26
Removing Disconnected User From Store
06:11
27
Testing Functionality Of Removing Disconnected User
03:30
28
Rendering Google Map
08:25
29
Rendering Map Markers
13:06
30
Rendering Username Label
02:30
31
Creating User Card
04:34
32
Connecting User Info Card
06:49
33
Calculating Distance Between Two Coordinates
05:21
34
Converting Number to Two Decimals
04:20
35
Creating Chat Button
05:05
36
Preparing Store For Messages
07:03
37
Creating Dummy Chatboxes
06:47
38
Adding Nav Bar to Chatbox
06:19
39
Adding Messages Container
01:45
40
Adding New Message Input
02:06
41
Handling User Input
05:27
42
Rendering Dummy Messages
06:31
43
Displaying Real Chatboxes
06:19
44
Closing Chatboxes
03:22
45
Appending Local Messages
18:29
46
Fixing Bug With Messages
02:56
47
Sending Messages To Other Users
09:45
48
Displaying Messages At Server Side
04:28
49
Automatically Opening Chatboxes
04:50
50
Messages Scroll Automatically
04:02
51
Introduction To Video Rooms
00:55
52
Preparing Store For Video Rooms
05:23
53
Create Room Button
07:03
54
Creating Join Room Buttons
07:02
55
Informing Server About New Room Created
10:48
56
Fixing Bug With Emitting Event With New Room
02:27
57
Broadcasting Rooms List to All Users
06:17
58
Setting Real Rooms In Store
03:28
59
Rendering Real Rooms
04:48
60
Getting Access To Local Stream
13:57
61
Displaying Local Video
08:38
62
PeerJS Introduction
04:03
63
Creating Peer Object
04:31
64
How Peer Server Works
08:11
65
Connecting With Peer Server
08:18
66
Preparing Peer Implementation For Calling
07:51
67
Joining Video Room
11:00
68
Updating Rooms At Server Side
09:17
69
Testing Broadcasting Rooms After Login Event
01:08
70
Connecting (Calling) With Second User
03:36
71
Displaying Remote Stream
04:03
72
Creating Video Room Buttons
06:37
73
Leaving Room At Initiator Side
05:10
74
Testing Leaving Room
01:39
75
Server Side Logic Of Leaving Room
07:36
76
Closing Peer Connection At Both Sides
11:17
77
Handling Case Of ,,Dirty Leave"
12:28
78
Microphone and Camera Buttons
10:19
79
Muting And Switching Camera Off
03:19
80
What is WebRTC ?
01:39
81
What is Signaling Server ?
01:17
82
What is STUN Server ?
01:11
83
What is TURN Server ?
02:07
84
What is SDP ?
01:37
85
What are ICE Candidates ?
01:44
86
How To Establish Direct Connection Between Peers
03:12

Unlock unlimited learning

Get instant access to all 85 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

Sources: udemy
We will start with integration of a very clean application layout I have prepared for you. We will follow latest practices of React and Next JS, this means we w
13 hours 5 minutes 9 seconds
React Router v5

React Router v5

Sources: ui.dev (ex. Tyler McGinnis)
The ability to take what you learn and apply it towards a production codebase.
3 hours 38 minutes 49 seconds
Next.js & React with ChatGPT - Development Guide (2023)

Next.js & React with ChatGPT - Development Guide (2023)

Sources: udemy
Throughout the course, you will gain experience developing a Next JS application from the ground up. Additionally, you'll receive instruction on integrating Ope
7 hours 6 minutes 49 seconds
React Chrome Extension boilerplate | Shipped

React Chrome Extension boilerplate | Shipped

Sources: Luca Restagno (shipped.club)
Launch your Chrome Extension in hours, not weeks. The boilerplate for busy makers, to launch your React Chrome Extensions fast. ou don't need to reinvent the wheel and code ever...
Building Large Scale Web Apps | A React Field Guide

Building Large Scale Web Apps | A React Field Guide

Sources: Addy Osmani, Hassan Djirdeh
CODE SMART, SCALE FAST, CONQUER CHALLENGES. Learn tools and techniques to build and maintain large-scale React web applications. “Building Large Scale Web Apps” is a toolkit to ...