React and WebRTC 2023 & Sharing Location App with Video Chat

8h 11m 54s
English
Paid
October 6, 2024

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.

More

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

Make 20 React Apps

Make 20 React AppsChris Sev

Duration 12 hours 20 minutes 3 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!udemy

Duration 12 hours 13 minutes 30 seconds
Master Custom React Hooks with TypeScript

Master Custom React Hooks with TypeScriptfullstack.io

Duration 2 hours 21 minutes 3 seconds