React and WebRTC 2023 & Sharing Location App with Video Chat

Focused View

Marek Gryszkiewicz

8:10:31

236 View

1 - Introduction

1 - Application Preview.mp4

03:18

2 - Creating Server Side

2 - Nodejs installation.mp4

02:14

3 - Creating Server Project.mp4

02:22

4 - Creating Express Server.mp4

06:52

5 - Adding SocketIO Server.mp4

05:36

6 - Testing Connection with Postman.mp4

02:55

7 - Disconnected Event Handler.mp4

04:30

8 - More about Events Handlers.mp4

00:59

3 - Creating Client Side Application

9 - Creating React Application.mp4

04:11

10 - Connecting with Redux State Management.mp4

08:20

11 - Routing with reactrouterdom.mp4

05:38

12 - Creating Login Page View.mp4

07:25

12 - loginpage.zip

13 - Handling Username Input.mp4

04:01

14 - Handling Login Button.mp4

06:25

15 - Code Refactoring.mp4

03:47

16 - Getting Geo Location.mp4

07:22

17 - Disabling Button on Location Error.mp4

01:51

18 - Saving Location In Store.mp4

03:46

19 - Redux Store Debugging.mp4

05:06

20 - Getting Fake Location.mp4

05:51

4 - Connecting Client App with Server Side

21 - Connection with SocketIO Server.mp4

09:44

22 - Storing Online Users.mp4

07:26

23 - Login functionality.mp4

08:32

24 - Emitting Event with Online Users.mp4

11:37

25 - Saving Online Users In Store.mp4

07:45

26 - Removing Disconnected User From Store.mp4

06:10

27 - Testing Functionality Of Removing Disconnected User.mp4

03:29

28 - Application Source Code After Section.html

28 - S03E07App.zip

5 - Working with Map

29 - Rendering Google Map.mp4

08:24

29 - mappage.zip

30 - Rendering Map Markers.mp4

13:05

30 - location-icon.zip

31 - Rendering Username Label.mp4

02:29

32 - Creating User Card.mp4

04:33

33 - Connecting User Info Card.mp4

06:48

34 - Calculating Distance Between Two Coordinates.mp4

05:20

34 - distancefunction.zip

35 - Converting Number to Two Decimals.mp4

04:19

36 - Creating Chat Button.mp4

05:04

36 - chat-icon.zip

37 - Application Source Code After Section.html

37 - S04E08App.zip

6 - Creating Chat

38 - Preparing Store For Messages.mp4

07:02

39 - Creating Dummy Chatboxes.mp4

06:46

40 - Adding Nav Bar to Chatbox.mp4

06:18

40 - close-icon.zip

41 - Adding Messages Container.mp4

01:44

42 - Adding New Message Input.mp4

02:05

43 - Handling User Input.mp4

05:26

44 - Rendering Dummy Messages.mp4

06:30

45 - Displaying Real Chatboxes.mp4

06:19

46 - Closing Chatboxes.mp4

03:21

47 - Appending Local Messages.mp4

18:28

48 - Fixing Bug With Messages.mp4

02:55

49 - Sending Messages To Other Users.mp4

09:44

50 - Displaying Messages At Server Side.mp4

04:27

51 - Automatically Opening Chatboxes.mp4

04:49

52 - Messages Scroll Automatically.mp4

04:01

53 - Application Source Code After Section.html

53 - S05E15App.zip

7 - Video Rooms Preparation

54 - Introduction To Video Rooms.mp4

00:54

55 - Preparing Store For Video Rooms.mp4

05:22

56 - Create Room Button.mp4

07:02

56 - call-icon.zip

57 - Creating Join Room Buttons.mp4

07:01

58 - Informing Server About New Room Created.mp4

10:47

59 - Fixing Bug With Emitting Event With New Room.mp4

02:26

60 - Broadcasting Rooms List to All Users.mp4

06:16

61 - Setting Real Rooms In Store.mp4

03:27

62 - Rendering Real Rooms.mp4

04:47

63 - Getting Access To Local Stream.mp4

13:56

64 - Displaying Local Video.mp4

08:37

8 - Video Rooms Connecting WebRTC Using PeerJS Library

65 - PeerJS Introduction.mp4

04:02

66 - Creating Peer Object.mp4

04:30

67 - How Peer Server Works.mp4

08:11

68 - Connecting With Peer Server.mp4

08:17

69 - Preparing Peer Implementation For Calling.mp4

07:50

70 - Joining Video Room.mp4

10:59

71 - Updating Rooms At Server Side.mp4

09:16

72 - Testing Broadcasting Rooms After Login Event.mp4

01:07

73 - Connecting Calling With Second User.mp4

03:36

74 - Displaying Remote Stream.mp4

04:02

75 - Creating Video Room Buttons.mp4

06:36

75 - call-disconnect-icon.zip

75 - camera-icon.zip

75 - camera-off-icon.zip

75 - mic-icon.zip

75 - mic-off-icon.zip

76 - Leaving Room At Initiator Side.mp4

05:09

77 - Testing Leaving Room.mp4

01:38

78 - Server Side Logic Of Leaving Room.mp4

07:35

79 - Closing Peer Connection At Both Sides.mp4

11:16

80 - Handling Case Of Dirty Leave.mp4

12:27

81 - Microphone and Camera Buttons.mp4

10:18

82 - Muting And Switching Camera Off.mp4

03:18

83 - Complete Application Source Code.html

83 - geocall-completed.zip

9 - Optional WebRTC Theory

84 - What is WebRTC.mp4

01:38

85 - What is Signaling Server.mp4

01:16

86 - What is STUN Server.mp4

01:10

87 - What is TURN Server.mp4

02:06

88 - What is SDP.mp4

01:36

89 - What are ICE Candidates.mp4

01:43

90 - How To Establish Direct Connection Between Peers.mp4

03:11

Description

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 Realtime Communication
Create Chat Functionality
Create Tracking Online Users System
Build entire project from Scratch

Who is this for?

Students who want to learn how to create Sharing Location Application

Students who want to create Realtime Application

Students who want to know how to Create Video Chat

Students who want to know how to create Chat Functionality

More details

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)
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 this course is for:
Students who want to learn how to create Sharing Location Application
Students who want to create Realtime Application
Students who want to know how to Create Video Chat
Students who want to know how to create Chat Functionality

User Reviews

Rating

average 0

Total votes0

Focused display

React

Marek Gryszkiewicz

Instructor's Courses

My main goal is to improve as a developer and share my knowledge. I am working as full stack web developer and my main interests are programming and boxing. I like learning new stuff and programming makes me happy when I can share my knowledge. I will do my best to show you how you can create amazing apps.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.