React and WebRTC 2023 & Sharing Location App with Video Chat

سرفصل های دوره

Create Sharing Location Application with Google Maps and React. Connect App with Video Chats thanks to WebRTC

1 - Introduction

1 - Application Preview

2 - Creating Server Side

2 - Nodejs installation

3 - Creating Server Project

4 - Creating Express Server

5 - Adding SocketIO Server

6 - Testing Connection with Postman

7 - Disconnected Event Handler

8 - More about Events Handlers

3 - Creating Client Side Application

9 - Creating React Application

10 - Connecting with Redux State Management

11 - Routing with reactrouterdom

12 - Creating Login Page View

12 - loginpage.zip

13 - Handling Username Input

14 - Handling Login Button

15 - Code Refactoring

16 - Getting Geo Location

17 - Disabling Button on Location Error

18 - Saving Location In Store

19 - Redux Store Debugging

20 - Getting Fake Location

4 - Connecting Client App with Server Side

21 - Connection with SocketIO Server

22 - Storing Online Users

23 - Login functionality

24 - Emitting Event with Online Users

25 - Saving Online Users In Store

26 - Removing Disconnected User From Store

27 - Testing Functionality Of Removing Disconnected User

28 - Application Source Code After Section.html

28 - S03E07App.zip

5 - Working with Map

29 - Rendering Google Map

29 - mappage.zip

30 - Rendering Map Markers

30 - location-icon.zip

31 - Rendering Username Label

32 - Creating User Card

33 - Connecting User Info Card

34 - Calculating Distance Between Two Coordinates

34 - distancefunction.zip

35 - Converting Number to Two Decimals

36 - Creating Chat Button

36 - chat-icon.zip

37 - Application Source Code After Section.html

37 - S04E08App.zip

6 - Creating Chat

38 - Preparing Store For Messages

39 - Creating Dummy Chatboxes

40 - Adding Nav Bar to Chatbox

40 - close-icon.zip

41 - Adding Messages Container

42 - Adding New Message Input

43 - Handling User Input

44 - Rendering Dummy Messages

45 - Displaying Real Chatboxes

46 - Closing Chatboxes

47 - Appending Local Messages

48 - Fixing Bug With Messages

49 - Sending Messages To Other Users

50 - Displaying Messages At Server Side

51 - Automatically Opening Chatboxes

52 - Messages Scroll Automatically

53 - Application Source Code After Section.html

53 - S05E15App.zip

7 - Video Rooms Preparation

54 - Introduction To Video Rooms

55 - Preparing Store For Video Rooms

56 - Create Room Button

56 - call-icon.zip

57 - Creating Join Room Buttons

58 - Informing Server About New Room Created

59 - Fixing Bug With Emitting Event With New Room

60 - Broadcasting Rooms List to All Users

61 - Setting Real Rooms In Store

62 - Rendering Real Rooms

63 - Getting Access To Local Stream

64 - Displaying Local Video

8 - Video Rooms Connecting WebRTC Using PeerJS Library

65 - PeerJS Introduction

66 - Creating Peer Object

67 - How Peer Server Works

68 - Connecting With Peer Server

69 - Preparing Peer Implementation For Calling

70 - Joining Video Room

71 - Updating Rooms At Server Side

72 - Testing Broadcasting Rooms After Login Event

73 - Connecting Calling With Second User

74 - Displaying Remote Stream

75 - Creating Video Room Buttons

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

77 - Testing Leaving Room

78 - Server Side Logic Of Leaving Room

79 - Closing Peer Connection At Both Sides

80 - Handling Case Of Dirty Leave

81 - Microphone and Camera Buttons

82 - Muting And Switching Camera Off

83 - Complete Application Source Code.html

83 - geocall-completed.zip

9 - Optional WebRTC Theory

84 - What is WebRTC

85 - What is Signaling Server

86 - What is STUN Server

87 - What is TURN Server

88 - What is SDP

89 - What are ICE Candidates

90 - How To Establish Direct Connection Between Peers

45,900 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training