React and WebRTC 2023 & Sharing Location App with Video Chat

8h 11m 54s
English
Paid

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 React and WebRTC 2023 & Sharing Location App with Video Chat

Join premium to watch
Go to premium
# Title Duration
1 Application Preview 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

Similar courses to React and WebRTC 2023 & Sharing Location App with Video Chat

Mastering React With Interview Questions,eStore Project-2024

Mastering React With Interview Questions,eStore Project-2024udemy

Category: React.js
Duration 16 hours 53 minutes 3 seconds
Build a Realtime App with React Hooks and GraphQL

Build a Realtime App with React Hooks and GraphQLudemy

Category: React.js, MongoDB
Duration 4 hours 32 minutes 39 seconds
React Js A-Z With Laravel - For Beginner to Advanced Level

React Js A-Z With Laravel - For Beginner to Advanced Leveludemy

Category: React.js, Laravel
Duration 68 hours 1 minute 33 seconds
React Router v4

React Router v4ui.dev (ex. Tyler McGinnis)

Category: React.js
Duration 6 hours 44 minutes 1 second
React Redux Ecommerce - Master MERN Stack Web Development

React Redux Ecommerce - Master MERN Stack Web Developmentudemy

Category: React.js, Node.js, MongoDB
Duration 43 hours 9 minutes 35 seconds
Responsive LLM Applications with Server-Sent Events

Responsive LLM Applications with Server-Sent Eventsfullstack.io

Category: TypeScript, React.js, Python
Duration 1 hour 18 minutes 18 seconds
Python/Django + React QR Digital Menu Builder

Python/Django + React QR Digital Menu BuilderPythonYoga

Category: React.js, Python
Duration 10 hours 49 minutes 22 seconds
Data fetching with React Server Components

Data fetching with React Server ComponentsBuild UI

Category: React.js
Duration 1 hour 15 minutes 56 seconds