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.
React and WebRTC 2023 & Sharing Location App with Video Chat
8h 11m 54s
English
Paid
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
About the Author: Udemy
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.
Watch Online 86 lessons
0:00
/ #1: Application Preview
All Course Lessons (86)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionRelated courses
-
Updated 11mo agoAdvanced React Patterns
By: Cosden SolutionsMaster Advanced React Patterns - Explore over 700 minutes of comprehensive instructional material focusing on advanced React patterns.12h 7m5/5 -
Updated 2y agoREACT ROUTER (v6)
By: UI.dev (Tyler McGinnis)There s an easier way to master React Router. Our linear course is like having a smart, experienced friend sit down next to you, walk you through each concept.3h 15m5/5 -
Updated 2y agoThe Ultimate React Course 2024: React, Redux & More
By: UdemyIn 2023, React is still the #1 skill to learn if you want to become a successful front-end developer! But it can be hard. There are so many moving parts, so ma67h 14m3/5
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.