Published 2/2023MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHzLanguage: English | Size: 4.41 GB | Duration: 8h 11m
Create Sharing Location Application with Google Maps and React. Connect App with Video Chats thanks to WebRTC What you'll learn Create React Application Share Location with SocketIO and Google Maps API Create Video Chat with WebRTC and PeerJS Implement Real Communication Create Chat Functionality Create Tracking Online Users System Requirements javascript and Basic React knowledge 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. 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)javascriptSocketIOExpress.jsNode.jsReactGoogle Maps APIWe 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 environmentBuild frontend of our application with ReactConnect our Application with Google MapsCreate chat functionality with SocketIOCreate functionality to share with other users our locationConnect own PeerJS ServerImplement direct calls with PeerJSI 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 Overview Section 1: Introduction Lecture 1 Application Preview Section 2: Creating Server Side Lecture 2 Node.js installation Lecture 3 Creating Server Project Lecture 4 Creating Express Server Lecture 5 Adding Socket.IO Server Lecture 6 Testing Connection with Postman Lecture 7 Disconnected Event Handler Lecture 8 More about Events Handlers Section 3: Creating Client Side Application Lecture 9 Creating React Application Lecture 10 Connecting with Redux State Management Lecture 11 Routing with react-router-dom Lecture 12 Creating Login Page View Lecture 13 Handling Username Input Lecture 14 Handling Login Button Lecture 15 Code Refactoring Lecture 16 Getting Geo Location Lecture 17 Disabling Button on Location Error Lecture 18 Saving Location In Store Lecture 19 Redux Store Debugging Lecture 20 Getting Fake Location Section 4: Connecting Client App with Server Side Lecture 21 Connection with Socket.IO Server Lecture 22 Storing Online Users Lecture 23 Login functionality Lecture 24 ting Event with Online Users Lecture 25 Saving Online Users In Store Lecture 26 Removing Disconnected User From Store Lecture 27 Testing Functionality Of Removing Disconnected User Lecture 28 Application Source Code After Section Section 5: Working with Map Lecture 29 Rendering Google Map Lecture 30 Rendering Map Markers Lecture 31 Rendering Username Label Lecture 32 Creating User Card Lecture 33 Connecting User Info Card Lecture 34 Calculating Distance Between Two Coordinates Lecture 35 Converting Number to Two Decimals Lecture 36 Creating Chat Button Lecture 37 Application Source Code After Section Section 6: Creating Chat Lecture 38 Preparing Store For Messages Lecture 39 Creating Dummy Chatboxes Lecture 40 Adding Nav Bar to Chatbox Lecture 41 Adding Messages Container Lecture 42 Adding New Message Input Lecture 43 Handling User Input Lecture 44 Rendering Dummy Messages Lecture 45 Displaying Real Chatboxes Lecture 46 Closing Chatboxes Lecture 47 Appending Local Messages Lecture 48 Fixing Bug With Messages Lecture 49 Sending Messages To Other Users Lecture 50 Displaying Messages At Server Side Lecture 51 Automatically Opening Chatboxes Lecture 52 Messages Scroll Automatically Lecture 53 Application Source Code After Section Section 7: Video Rooms - Preparation Lecture 54 Introduction To Video Rooms Lecture 55 Preparing Store For Video Rooms Lecture 56 Create Room Button Lecture 57 Creating Join Room Buttons Lecture 58 Infog Server About New Room Created Lecture 59 Fixing Bug With ting Event With New Room Lecture 60 Broadcasting Rooms List to All Users Lecture 61 Setting Real Rooms In Store Lecture 62 Rendering Real Rooms Lecture 63 Getting Access To Local Stream Lecture 64 Displaying Local Video Section 8: Video Rooms - Connecting WebRTC Using PeerJS Library Lecture 65 PeerJS Introduction Lecture 66 Creating Peer Object Lecture 67 How Peer Server Works Lecture 68 Connecting With Peer Server Lecture 69 Preparing Peer Implementation For Calling Lecture 70 Joining Video Room Lecture 71 Updating Rooms At Server Side Lecture 72 Testing Broadcasting Rooms After Login Event Lecture 73 Connecting (Calling) With Second User Lecture 74 Displaying Remote Stream Lecture 75 Creating Video Room Buttons Lecture 76 Leaving Room At Initiator Side Lecture 77 Testing Leaving Room Lecture 78 Server Side Logic Of Leaving Room Lecture 79 Closing Peer Connection At Both Sides Lecture 80 Handling Case Of ,,Dirty Leave" Lecture 81 Microphone and Camera Buttons Lecture 82 Muting And Switching Camera Off Lecture 83 Complete Application - Source Code Section 9: (Optional) WebRTC Theory Lecture 84 What is WebRTC ? Lecture 85 What is Signaling Server ? Lecture 86 What is STUN Server ? Lecture 87 What is TURN Server ? Lecture 88 What is SDP ? Lecture 89 What are ICE Candidates ? Lecture 90 How To Establish Direct Connection Between Peers Students who want to learn how to create Sharing Location Application,Students who want to create Real Application,Students who want to know how to Create Video Chat,Students who want to know how to create Chat Functionality HomePage: gfxtra__React_and_.part1.rar.html gfxtra__React_and_.part2.rar.html gfxtra__React_and_.part3.rar.html
TO MAC USERS: If RAR password doesn't work, use this archive program:
RAR Expander 0.8.5 Beta 4 and extract password protected files without error.
TO WIN USERS: If RAR password doesn't work, use this archive program:
Latest Winrar and extract password protected files without error.