CF

React and WebRTC 2023 & Sharing Location App with Video Chat

8h 11m 54s
English
Paid

React and WebRTC 2023 & Sharing Location App with Video Chat is a 86-lesson 8 hours 11 minutes self-paced course by Udemy. Learn technologies like React, WebRTC (PeerJS) , SocketIO and Google Maps API by creating amazing project ,,GeoCall''.

Course facts

Lessons
86
Duration
8 hours 11 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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.

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

Who teaches React and WebRTC 2023 & Sharing Location App with Video Chat? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in React and WebRTC 2023 & Sharing Location App with Video Chat?

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
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

What courses are similar to React and WebRTC 2023 & Sharing Location App with Video Chat?

More courses by Udemy

Frequently asked questions

What are the prerequisites for enrolling in this course?
Prospective students should have a basic understanding of JavaScript and web development concepts. Familiarity with Node.js and React would be beneficial but not mandatory, as the course covers topics like creating a server project with Express and developing a React application. A general familiarity with APIs and state management will also help in navigating the course material effectively.
What kind of project will I be building throughout the course?
Students will build a project called 'GeoCall,' which is a location-sharing application with video chat capabilities. The project involves implementing technologies such as React, WebRTC (via PeerJS), Socket.IO, and the Google Maps API. The application allows users to share their location on a map and includes features such as chat functionalities and video rooms.
Who is the target audience for this course?
This course is designed for developers who wish to enhance their skills in building real-time applications using modern web technologies. It is ideal for those interested in integrating video chat functionalities and location services into their projects. Both intermediate developers and those with some foundational knowledge in React and Node.js will find the course material beneficial.
What specific tools or platforms are covered in the course?
The course covers several key tools and platforms, including React for building the user interface, WebRTC via PeerJS for video communication, Socket.IO for real-time communication, and the Google Maps API for location services. Additionally, it explores state management using Redux and server-side development with Node.js and Express.
What topics are not covered in this course?
The course does not cover advanced React topics such as hooks or context API, nor does it delve into server-side rendering or advanced WebRTC configurations beyond the PeerJS implementation. It also does not cover backend database management or advanced security measures for real-time applications.
How much time should I expect to commit to this course?
The course consists of 86 lessons, and while the total runtime is not specified, students can expect to spend several weeks completing it, depending on their pace. Each lesson involves practical coding exercises, so time should also be allocated for experimentation and debugging outside of the video content.
How will the skills learned in this course transfer to other career opportunities?
The skills acquired in this course, such as building real-time applications with WebRTC and integrating APIs like Google Maps, are highly applicable in fields involving web development and software engineering. Understanding these technologies can be beneficial for roles focused on creating interactive, feature-rich web applications, and can also serve as a strong foundation for further study in advanced web development topics.