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/VideoCall.d.ts
+4-3Lines changed: 4 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,9 @@
1
1
/// <reference types="react" />
2
2
/**
3
+
* @func VideoCall
4
+
* @param {String} props.URL - ws or wss link
5
+
* @param {object} props.mediaOptions video embed attributes
6
+
3
7
* @desc Wrapper component containing the logic necessary for peer connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
4
8
*
5
9
* 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.
@@ -11,9 +15,6 @@
11
15
* @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.
12
16
* @type {state} users - users state is the list of connected users that is rendered on the frontend.
13
17
*
14
-
* @param {Object} props
15
-
* @param {String} props.URL - ws or wss link
16
-
* @param {object} props.mediaOptions video embed attributes
17
18
* @returns A component that renders two VideoComponents,
* @param {object} props.mediaOptions video embed attributes
50
+
47
51
* @desc Wrapper component containing the logic necessary for peer connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
48
52
*
49
53
* 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.
* @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.
56
60
* @type {state} users - users state is the list of connected users that is rendered on the frontend.
57
61
*
58
-
* @param {Object} props
59
-
* @param {String} props.URL - ws or wss link
60
-
* @param {object} props.mediaOptions video embed attributes
61
62
* @returns A component that renders two VideoComponents,
* @type {mutable ref WebSocket object} ws is the mutable ref object that contains the WebSocket object (ws.current). It cannot be null or undefined.
68
+
* @type {mutable ref WebSocket object} ws is the mutable ref object that contains the WebSocket object in its .current property (ws.current). It cannot be null or undefined.
68
69
*
69
-
* @descThe ws.current WebSocket objectis created using the useEffect hook and it will establish the WebSocket connection to the server. This WebSocket connection is made on component mount and the function openUserMedia is invoked, which makes a permissions request for the client's video and audio.
70
+
* @desc ws.current property contains the WebSocket object, which is created using the useEffect hook and it establishes the WebSocket connection to the server. The useEffect Hook creates the WebSocket object using the URL parameter when the component mounts and the function openUserMedia() is invoked, which makes a permissions request for the client's video and audio.
70
71
*
71
72
* 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.
72
73
*/
73
74
constws=(0,react_1.useRef)(null);
74
75
/**
75
-
* @type {mutable ref object} localVideo - video stream of the local user. It will not be null or undefined.
76
+
* @type {mutable ref object} localVideo - video element of the local user. It will not be null or undefined.
* If Peer A starts a call their order of functions being invoked is... handleOffer --> callUser --> createPeer --> peerRef.current.negotiationNeeded event (handleNegotiationNeededEvent) --> ^send Offer SDP^ --> start ICE trickle, handleIceCandidateEvent --> ^receive Answer^ SDP --> handleIceCandidateMsg --> once connected, handleTrackEvent
126
127
* If Peer B receives a call then we invoke... ^Receive Offer SDP^ --> handleReceiveCall --> createPeer --> ^send Answer SDP^ --> handleIceCandidateMsg --> handleIceCandidateEvent --> once connected, handleTrackEvent
127
128
*
128
-
* Note: Media is attached to the Peer Connection and sent along with the offers/answers to describe what media each client has. (see RTCPeerConnection.addTrack() MDN)
129
+
* Note: Media is attached to the Peer Connection and sent along with the offers/answers to describe what media each client has.
* @desc When the client enters a username and clicks the Submit Username button, a LOGIN event is triggered and the loginPayload is sent via the WebSocketServer (ws.current.send(loginPayload)) to the backend/server.
133
135
*
134
-
* Then, username state is updated with the string stored in the userField variable (the username entered by the client when they clicked the Submit Username).
136
+
* @desc Invoked when clients click the Submit Username button. A loginPayload object is initiated - it contains the LOGIN event and its payload contains the client's username.
137
+
*
138
+
* The loginPayload object is sent via the WebSocketServer (ws.current.send(loginPayload)) to the backend/SignalingChannel.
139
+
*
140
+
* Then, the username state is updated with the userField string (the username entered by the client when they clicked the Submit Username). setUsername(userField)
* @descAsks for the client's permissions to open their webcam and microphone.
175
+
* @function openUserMedia: Invoked in useEffect Hook. openUserMedia uses the constraints provided Requests the clients' browser permissions to open their webcam and microphone.
176
+
* @param {void}
177
+
* @desc If the localVideo.current property exists, the MediaStream from the local camera is assigned to the local video element.
* @param {object} props.mediaOptions video embed attributes
38
+
35
39
* @desc Wrapper component containing the logic necessary for peer connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
36
40
*
37
41
* 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.
* @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.
44
48
* @type {state} users - users state is the list of connected users that is rendered on the frontend.
45
49
*
46
-
* @param {Object} props
47
-
* @param {String} props.URL - ws or wss link
48
-
* @param {object} props.mediaOptions video embed attributes
49
50
* @returns A component that renders two VideoComponents,
* @type {mutable ref WebSocket object} ws is the mutable ref object that contains the WebSocket object (ws.current). It cannot be null or undefined.
59
+
* @type {mutable ref WebSocket object} ws is the mutable ref object that contains the WebSocket object in its .current property (ws.current). It cannot be null or undefined.
59
60
*
60
-
* @descThe ws.current WebSocket objectis created using the useEffect hook and it will establish the WebSocket connection to the server. This WebSocket connection is made on component mount and the function openUserMedia is invoked, which makes a permissions request for the client's video and audio.
61
+
* @desc ws.current property contains the WebSocket object, which is created using the useEffect hook and it establishes the WebSocket connection to the server. The useEffect Hook creates the WebSocket object using the URL parameter when the component mounts and the function openUserMedia() is invoked, which makes a permissions request for the client's video and audio.
61
62
*
62
63
* 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.
63
64
*/
64
65
constws=useRef<WebSocket>(null!);
65
66
66
67
/**
67
-
* @type {mutable ref object} localVideo - video stream of the local user. It will not be null or undefined.
68
+
* @type {mutable ref object} localVideo - video element of the local user. It will not be null or undefined.
* If Peer A starts a call their order of functions being invoked is... handleOffer --> callUser --> createPeer --> peerRef.current.negotiationNeeded event (handleNegotiationNeededEvent) --> ^send Offer SDP^ --> start ICE trickle, handleIceCandidateEvent --> ^receive Answer^ SDP --> handleIceCandidateMsg --> once connected, handleTrackEvent
127
128
* If Peer B receives a call then we invoke... ^Receive Offer SDP^ --> handleReceiveCall --> createPeer --> ^send Answer SDP^ --> handleIceCandidateMsg --> handleIceCandidateEvent --> once connected, handleTrackEvent
128
129
*
129
-
* Note: Media is attached to the Peer Connection and sent along with the offers/answers to describe what media each client has. (see RTCPeerConnection.addTrack() MDN)
130
+
* Note: Media is attached to the Peer Connection and sent along with the offers/answers to describe what media each client has.
* @desc When the client enters a username and clicks the Submit Username button, a LOGIN event is triggered and the loginPayload is sent via the WebSocketServer (ws.current.send(loginPayload)) to the backend/server.
136
+
* @func handleUsername
137
+
*
138
+
* @desc Invoked when clients click the Submit Username button. A loginPayload object is initiated - it contains the LOGIN event and its payload contains the client's username.
139
+
*
140
+
* The loginPayload object is sent via the WebSocketServer (ws.current.send(loginPayload)) to the backend/SignalingChannel.
135
141
*
136
-
* Then, username state is updated with the string stored in the userField variable (the username entered by the client when they clicked the Submit Username).
142
+
* Then, the username state is updated with the userField string (the username entered by the client when they clicked the Submit Username). setUsername(userField)
* @descAsks for the client's permissions to open their webcam and microphone.
184
+
* @function openUserMedia: Invoked in useEffect Hook. openUserMedia uses the constraints provided Requests the clients' browser permissions to open their webcam and microphone.
185
+
* @param {void}
186
+
* @desc If the localVideo.current property exists, the MediaStream from the local camera is assigned to the local video element.
0 commit comments