You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: dist/src/components/Socket.d.ts
+7-3Lines changed: 7 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,7 @@
1
1
/// <reference types="react" />
2
+
/**
3
+
* @file Socket.tsx is the component that initalizes and loads the client's socket connection with event listeners.
4
+
*/
2
5
declaretypeSocketType={
3
6
ws: WebSocket;
4
7
getUsers: (parsedData: {
@@ -18,9 +21,10 @@ declare type SocketType = {
18
21
};
19
22
/**
20
23
* @desc Using the initial WebSocket connection, this functional component provides the event listeners for each client's socket connection to allow bilateral communication.
21
-
* @param {Object} props
22
-
* @param {string} props.ws - the socket that will initiate the connection with the WebSocket server
23
-
* @param props.getUsers - the functions that are executed upon on each switch case event.
24
+
* @param {string} props.ws - the ws or wss socket url that will initiate the connection with the WebSocket server
25
+
* @param {function} props.getUser - When data (the list of connected users) is received from the WebSocketServer/backend, getUser
26
+
* function is invoked and it updates the userList state so that the list of currently connected users
* @desc Using the initial WebSocket connection, this functional component provides the event listeners for each client's socket connection to allow bilateral communication.
11
-
* @param {Object} props
12
-
* @param {string} props.ws - the socket that will initiate the connection with the WebSocket server
13
-
* @param props.getUsers - the functions that are executed upon on each switch case event.
11
+
* @param {string} props.ws - the ws or wss socket url that will initiate the connection with the WebSocket server
12
+
* @param {function} props.getUser - When data (the list of connected users) is received from the WebSocketServer/backend, getUser
13
+
* function is invoked and it updates the userList state so that the list of currently connected users
Copy file name to clipboardExpand all lines: dist/src/components/VideoCall.d.ts
+12-5Lines changed: 12 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,22 @@
1
1
/// <reference types="react" />
2
2
/**
3
-
* @desc Wrapper component containing the logic necessary for P2P connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
3
+
* @desc Wrapper component containing the logic necessary for peer connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
4
4
*
5
-
* Any client can call another client and thus not all functions are invoked for every user.
5
+
* ws, localVideo, remoteVideo, peerRef, localStream, otherUser, senders are all mutable ref objects that are created using the useRef hook. The useRef hook allows you to persist values between renders and it is used to store a mutable value that does NOT cause a re-render when updated.
6
6
*
7
+
* The WebSocket connection (ws.current) is established using the useEffect hook and once the component mounts, the Socket component is rendered. The Socket component adds event listeners that handle the offer-answer model and the exchange of SDP objects between peers and the socket.
8
+
*
9
+
* The WebSocket message event will filter through various events to determine the payloads that will be sent to other serverside socket connection via WebSocket.
10
+
*
11
+
* @type {object} ws is the mutable ref object that contains the WebSocket object (ws.current). The ws.current WebSocket object will be created using the useEffect hook and it will establish the WebSocket connection to the server.
7
12
* ws.current.send enqueues the specified messages that need to be transmitted to the server over the WebSocket connection and this WebSocket connection is connected to the server by using RTConnect's importable SignalingChannel module.
13
+
* @type {state} username - username state stores the name the client enters. All users (see getUsers) will be able to see an updated list of all other users whenever a new user logs in or leaves.
14
+
* @type {state} users - users state is the list of connected users that is rendered on the frontend.
8
15
*
9
-
* @param {object} props
10
-
* @param {string} props.URL ws or wss link
16
+
* @param {Object} props
17
+
* @param {String} props.URL - ws or wss link
11
18
* @param {object} props.mediaOptions video embed attributes
12
-
* @returns A component that renders two VideoComponents
19
+
* @returns A component that renders two VideoComponents,
* @desc Wrapper component containing the logic necessary for P2P connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
47
+
* @desc Wrapper component containing the logic necessary for peer connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
48
48
*
49
-
* Any client can call another client and thus not all functions are invoked for every user.
49
+
* ws, localVideo, remoteVideo, peerRef, localStream, otherUser, senders are all mutable ref objects that are created using the useRef hook. The useRef hook allows you to persist values between renders and it is used to store a mutable value that does NOT cause a re-render when updated.
50
50
*
51
+
* The WebSocket connection (ws.current) is established using the useEffect hook and once the component mounts, the Socket component is rendered. The Socket component adds event listeners that handle the offer-answer model and the exchange of SDP objects between peers and the socket.
52
+
*
53
+
* The WebSocket message event will filter through various events to determine the payloads that will be sent to other serverside socket connection via WebSocket.
54
+
*
55
+
* @type {object} ws is the mutable ref object that contains the WebSocket object (ws.current). The ws.current WebSocket object will be created using the useEffect hook and it will establish the WebSocket connection to the server.
51
56
* ws.current.send enqueues the specified messages that need to be transmitted to the server over the WebSocket connection and this WebSocket connection is connected to the server by using RTConnect's importable SignalingChannel module.
57
+
* @type {state} username - username state stores the name the client enters. All users (see getUsers) will be able to see an updated list of all other users whenever a new user logs in or leaves.
58
+
* @type {state} users - users state is the list of connected users that is rendered on the frontend.
52
59
*
53
-
* @param {object} props
54
-
* @param {string} props.URL ws or wss link
60
+
* @param {Object} props
61
+
* @param {String} props.URL - ws or wss link
55
62
* @param {object} props.mediaOptions video embed attributes
56
-
* @returns A component that renders two VideoComponents
63
+
* @returns A component that renders two VideoComponents,
57
64
*/
58
65
constVideoCall=({URL, mediaOptions })=>{
59
-
// The username state stores the name the client enters. All users (see getUsers) will be able to see an updated list of all other users whenever a new user logs in or leaves.
// The useRef hook allows our variables to be stored as Immutable Objects and thus they do not force page re-renders when their values are changed.
63
-
// The WebSocket connection is established using the useEffect hook - once the component mounts we then render the Socket component, which adds event listeners that can handle the offer-answer model and SDP objects being exchanged between peers to the socket.
68
+
/**
69
+
* @type {mutable ref WebSocket object} ws contains the WebSocket object (ws.current). It cannot be null or undefined.
70
+
*
71
+
* The ws.current WebSocket object will be created using the useEffect hook and it will establish the WebSocket connection to the server.
72
+
*/
64
73
constws=(0,react_1.useRef)(null);
74
+
/**
75
+
* @type {mutable ref object} localVideo - video stream of the local user. It will not be null or undefined.
76
+
*/
65
77
constlocalVideo=(0,react_1.useRef)(null);
78
+
/**
79
+
* @type {mutable ref object} remoteVideo - video stream of the remote user. It cannot be null or undefined.
80
+
*/
66
81
constremoteVideo=(0,react_1.useRef)(null);
82
+
/**
83
+
* @type {mutable ref object} peerRef - It cannot be null or undefined.
84
+
*/
67
85
constpeerRef=(0,react_1.useRef)(null);
86
+
/**
87
+
* @type {mutable ref string} otherUser -
88
+
*/
68
89
constotherUser=(0,react_1.useRef)();
90
+
/**
91
+
* @type {mutable ref object} localStream - It cannot be null or undefined.
92
+
*/
69
93
constlocalStream=(0,react_1.useRef)(null);
94
+
/**
95
+
* @type {mutable ref array} senders -
96
+
*/
70
97
constsenders=(0,react_1.useRef)([]);
98
+
/**
99
+
* @type {string} userField - the username that is entered in the input field when the Submit Username
100
+
* button is clicked.
101
+
*/
71
102
letuserField='';
72
103
letreceiver='';
73
-
// a new one-time WebSocket connection is made on component mount and a permissions request for the client's video and audio is made
104
+
/**
105
+
* @desc
106
+
* A WebSocket connection is made on component mount and the function openUserMedia is invoked, which
107
+
* makes a permissions request for the client's video and audio is made
* @desc invokes WebRTC's built-in createOffer() function to create an SDP offer, which is an RTCSessionDescription object. This offer is then set as the local description using WebRTC's built-in setLocalDescription() function. Finally, the offer, sender and receiver is sent via ws.current.send to the Signaling Channel in the backend
193
-
* @param {string} userID
236
+
* @function handleNegotiationNeededEvent
237
+
* @desc invokes WebRTC's built-in createOffer() function to create an SDP offer, which is an RTCSessionDescription object. This offer is then set as the local description using WebRTC's built-in setLocalDescription() function. Finally, the offer, sender and receiver is sent via ws.current.send to the Signaling Channel in the backend
0 commit comments