Skip to content

Commit b0a1728

Browse files
fraisaifraisai
committed
modularized code and updated jsdoc documentation
1 parent 76924b8 commit b0a1728

File tree

9 files changed

+157
-47
lines changed

9 files changed

+157
-47
lines changed

‎dist/src/components/Socket.d.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,13 @@ declare type SocketType = {
1818
};
1919
/**
2020
* @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 props ws is the socket that will initiate the connection with the WebSocket server and getUsers, handleReceiveCall, handleAnswer, handleNewIceCandidate, endCall are the functions that are executed upon on each switch case event.
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 props.handleReceiveCall
25+
* @param props.handleAnswer
26+
* @param props.handleNewIceCandidate
27+
* @param props.endCall
2228
* @returns an empty element when rendered and populates the client's socket connection with event listeners that can handle the offer-answer model and SDP objects being exchanged between peers.
2329
*/
2430
declare const Socket: ({ ws, getUsers, handleReceiveCall, handleAnswer, handleNewIceCandidate, endCall }: SocketType) => JSX.Element;

‎dist/src/components/Socket.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@ const actions_1 = __importDefault(require("../constants/actions"));
88
const { LOGIN, ICECANDIDATE, OFFER, ANSWER, LEAVE } = actions_1.default;
99
/**
1010
* @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 props ws is the socket that will initiate the connection with the WebSocket server and getUsers, handleReceiveCall, handleAnswer, handleNewIceCandidate, endCall are the functions that are executed upon on each switch case event.
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.
14+
* @param props.handleReceiveCall
15+
* @param props.handleAnswer
16+
* @param props.handleNewIceCandidate
17+
* @param props.endCall
1218
* @returns an empty element when rendered and populates the client's socket connection with event listeners that can handle the offer-answer model and SDP objects being exchanged between peers.
1319
*/
1420
const Socket = ({ ws, getUsers, handleReceiveCall, handleAnswer, handleNewIceCandidate, endCall }) => {

‎dist/src/components/VideoCall.d.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
/// <reference types="react" />
22
/**
3-
* @desc Wrapper component containing logic necessary for P2P connections using WebRTC (RTCPeerConnect API + MediaSession API) and WebSockets.
4-
* Any client can call another thus not all functions are invoked for every user.
5-
* ws.current.send enqueues the specified messages that need to be transmitted to the server over the WebSocket connection, which we connected in our backend using RTConnect's importable SignalingChannel
6-
* @param {string} this.props.URL
7-
* @returns A component that renders two VideoComponents (currently not dynamic), a
3+
* @desc Wrapper component containing the logic necessary for P2P connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
4+
*
5+
* Any client can call another client and thus not all functions are invoked for every user.
6+
*
7+
* 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.
8+
*
9+
* @param {object} props
10+
* @param {string} props.URL string ws or wss link
11+
* @param {object} props.mediaOptions video embed attributes
12+
* @returns A component that renders two VideoComponents
813
*/
914
declare const VideoCall: ({ URL, mediaOptions }: {
1015
URL: string;

‎dist/src/components/VideoCall.js

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -40,30 +40,33 @@ const react_1 = __importStar(require("react"));
4040
const Socket_1 = __importDefault(require("./Socket"));
4141
const VideoComponent_1 = __importDefault(require("./VideoComponent"));
4242
const actions_1 = __importDefault(require("../constants/actions"));
43+
const mediaStreamConstraints_1 = __importDefault(require("../constants/mediaStreamConstraints"));
4344
const { LOGIN, ICECANDIDATE, OFFER, ANSWER, LEAVE } = actions_1.default;
4445
/**
45-
* @desc Wrapper component containing logic necessary for P2P connections using WebRTC (RTCPeerConnect API + MediaSession API) and WebSockets.
46-
* Any client can call another thus not all functions are invoked for every user.
47-
* ws.current.send enqueues the specified messages that need to be transmitted to the server over the WebSocket connection, which we connected in our backend using RTConnect's importable SignalingChannel
48-
* @param {string} this.props.URL
49-
* @returns A component that renders two VideoComponents (currently not dynamic), a
46+
* @desc Wrapper component containing the logic necessary for P2P connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
47+
*
48+
* Any client can call another client and thus not all functions are invoked for every user.
49+
*
50+
* 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.
51+
*
52+
* @param {object} props
53+
* @param {string} props.URL string ws or wss link
54+
* @param {object} props.mediaOptions video embed attributes
55+
* @returns A component that renders two VideoComponents
5056
*/
51-
//mediaOptions: { controls: boolean, style: { width: string, height: string }
5257
const VideoCall = ({ URL, mediaOptions }) => {
53-
//username will store a name the client enters and users (see getUsers) will be updated whenever a user logs in or leaves
58+
// 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.
5459
const [username, setUsername] = (0, react_1.useState)('');
5560
const [users, setUsers] = (0, react_1.useState)();
56-
// const [message, setMessage] = useState<string>();
57-
// useRef allows our variables to be stored in Immutable Objects and do not force page re-renders when its value is changed
58-
// The WebSocket connection is made later in useEffect once the component mounts then we render <Socket>, an empty component but adds event listeners to the socket
61+
// 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.
62+
// 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.
5963
const ws = (0, react_1.useRef)(null);
6064
const localVideo = (0, react_1.useRef)(null);
6165
const remoteVideo = (0, react_1.useRef)(null);
6266
const peerRef = (0, react_1.useRef)(null);
6367
const otherUser = (0, react_1.useRef)();
6468
const localStream = (0, react_1.useRef)(null);
6569
const senders = (0, react_1.useRef)([]);
66-
//maybe try to use context/reference hooks here for html input elements
6770
let userField = '';
6871
let receiver = '';
6972
// this configuration defines the parameters for how an RTCPeerConnection should be created, also ice trickling is enabled with iceCandidatePoolSize set to a value
@@ -77,14 +80,26 @@ const VideoCall = ({ URL, mediaOptions }) => {
7780
],
7881
iceCandidatePoolSize: 10,
7982
};
80-
// These constraints will be used for our webcam video stream quality
81-
const constraints = {
82-
video: {
83-
width: { min: 640, ideal: 1920, max: 1920 },
84-
height: { min: 480, ideal: 1080, max: 1080 },
85-
},
86-
audio: true
87-
};
83+
// /**
84+
// * @type {object}
85+
// *
86+
// * A MediaStreamConstraints object is used when calling getUserMedia() to specify what kinds of tracks
87+
// * should be included in the returned MediaStream and to establish video and audio constraints for
88+
// * these tracks' settings.
89+
// *
90+
// * @type {Boolean} The audio constraint indicates whether or not an audio track is requested.
91+
// *
92+
// * @type {object} The video constraint provides the constraints that must be met by the video track that is
93+
// * included in the returned MediaStream (essentially it gives constraints for the quality of the video
94+
// * streams returned by the users's webcams)
95+
// */
96+
// const constraints: MediaStreamConstraints = {
97+
// video: {
98+
// width: { min:640, ideal:1920, max:1920 },
99+
// height: { min:480, ideal:1080, max:1080 },
100+
// },
101+
// audio: true
102+
// };
88103
// a new one-time WebSocket connection is made on component mount and a permissions request for the client's video and audio is made
89104
(0, react_1.useEffect)(() => {
90105
ws.current = new WebSocket(URL);
@@ -154,7 +169,7 @@ const VideoCall = ({ URL, mediaOptions }) => {
154169
const openUserMedia = () => __awaiter(void 0, void 0, void 0, function* () {
155170
try {
156171
if (localVideo.current) {
157-
localStream.current = localVideo.current.srcObject = yield navigator.mediaDevices.getUserMedia(constraints);
172+
localStream.current = localVideo.current.srcObject = yield navigator.mediaDevices.getUserMedia(mediaStreamConstraints_1.default);
158173
}
159174
}
160175
catch (error) {

‎dist/src/constants/mediaStreamConstraints.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
*
3+
* @type {object} A MediaStreamConstraints object is used when calling getUserMedia() to specify what kinds of tracks
4+
* should be included in the returned MediaStream and to establish video and audio constraints for
5+
* these tracks' settings.
6+
* @type {boolean} The audio constraint indicates whether or not an audio track is requested.
7+
*
8+
* @type {object} The video constraint provides the constraints that must be met by the video track that is
9+
* included in the returned MediaStream (essentially it gives constraints for the quality of the video
10+
* streams returned by the users's webcams).
11+
*/
12+
declare const constraints: MediaStreamConstraints;
13+
export default constraints;

‎dist/src/constants/mediaStreamConstraints.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
/**
4+
*
5+
* @type {object} A MediaStreamConstraints object is used when calling getUserMedia() to specify what kinds of tracks
6+
* should be included in the returned MediaStream and to establish video and audio constraints for
7+
* these tracks' settings.
8+
* @type {boolean} The audio constraint indicates whether or not an audio track is requested.
9+
*
10+
* @type {object} The video constraint provides the constraints that must be met by the video track that is
11+
* included in the returned MediaStream (essentially it gives constraints for the quality of the video
12+
* streams returned by the users's webcams).
13+
*/
14+
const constraints = {
15+
video: {
16+
width: { min: 640, ideal: 1920, max: 1920 },
17+
height: { min: 480, ideal: 1080, max: 1080 },
18+
},
19+
audio: true
20+
};
21+
exports.default = constraints;

‎lib/src/components/Socket.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ type SocketType = {
1313

1414
/**
1515
* @desc Using the initial WebSocket connection, this functional component provides the event listeners for each client's socket connection to allow bilateral communication.
16-
* @param props ws is the socket that will initiate the connection with the WebSocket server and getUsers, handleReceiveCall, handleAnswer, handleNewIceCandidate, endCall are the functions that are executed upon on each switch case event.
16+
* @param {object} props
17+
* @param {string} props.ws the socket that will initiate the connection with the WebSocket server
18+
* @param props.getUsers the functions that are executed upon on each switch case event.
19+
* @param props.handleReceiveCall
20+
* @param props.handleAnswer
21+
* @param props.handleNewIceCandidate
22+
* @param props.endCall
1723
* @returns an empty element when rendered and populates the client's socket connection with event listeners that can handle the offer-answer model and SDP objects being exchanged between peers.
1824
*/
1925
const Socket = ({ ws, getUsers, handleReceiveCall, handleAnswer, handleNewIceCandidate, endCall }: SocketType): JSX.Element => {

‎lib/src/components/VideoCall.tsx

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React, { useState, useRef, useEffect } from 'react';
44
import Socket from './Socket';
55
import VideoComponent from './VideoComponent';
66
import actions from '../constants/actions';
7+
import constraints from '../constants/mediaStreamConstraints';
78
const { LOGIN, ICECANDIDATE, OFFER, ANSWER, LEAVE } = actions;
89

910
// These interfaces describe the different events that the WebSocket message event to will filter through and the payloads that will be sent to other socket connections via webSocket.
@@ -30,21 +31,25 @@ interface icePayObj extends payloadObj {
3031
}
3132

3233
/**
33-
* @desc Wrapper component containing logic necessary for P2P connections using WebRTC (RTCPeerConnect API + MediaSession API) and WebSockets.
34-
* Any client can call another thus not all functions are invoked for every user.
35-
* ws.current.send enqueues the specified messages that need to be transmitted to the server over the WebSocket connection, which we connected in our backend using RTConnect's importable SignalingChannel
36-
* @param {string} this.props.URL
37-
* @returns A component that renders two VideoComponents (currently not dynamic), a
34+
* @desc Wrapper component containing the logic necessary for P2P connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
35+
*
36+
* Any client can call another client and thus not all functions are invoked for every user.
37+
*
38+
* 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.
39+
*
40+
* @param {object} props
41+
* @param {string} props.URL string ws or wss link
42+
* @param {object} props.mediaOptions video embed attributes
43+
* @returns A component that renders two VideoComponents
3844
*/
39-
//mediaOptions: { controls: boolean, style: { width: string, height: string }
4045
const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { controls: boolean, style: { width: string, height: string }}}): JSX.Element => {
41-
//username will store a name the client enters and users (see getUsers) will be updated whenever a user logs in or leaves
46+
47+
// 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.
4248
const [username, setUsername] = useState<string>('');
4349
const [users, setUsers] = useState<JSX.Element[]>();
44-
// const [message, setMessage] = useState<string>();
4550

46-
// useRef allows our variables to be stored in Immutable Objects and do not force page re-renders when its value is changed
47-
// The WebSocket connection is made later in useEffect once the component mounts then we render <Socket>, an empty component but adds event listeners to the socket
51+
// 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.
52+
// 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.
4853
const ws = useRef<WebSocket>(null!);
4954
const localVideo = useRef<HTMLVideoElement>(null!);
5055
const remoteVideo = useRef<HTMLVideoElement>(null!);
@@ -53,7 +58,6 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
5358
const localStream = useRef<MediaStream>(null!);
5459
const senders = useRef<RTCRtpSender[]>([]);
5560

56-
//maybe try to use context/reference hooks here for html input elements
5761
let userField = '';
5862
let receiver: string | null = '';
5963

@@ -69,14 +73,27 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
6973
iceCandidatePoolSize: 10,
7074
};
7175

72-
// These constraints will be used for our webcam video stream quality
73-
const constraints: MediaStreamConstraints = {
74-
video: {
75-
width: { min:640, ideal:1920, max:1920 },
76-
height: { min:480, ideal:1080, max:1080 },
77-
},
78-
audio: true
79-
};
76+
77+
// /**
78+
// * @type {object}
79+
// *
80+
// * A MediaStreamConstraints object is used when calling getUserMedia() to specify what kinds of tracks
81+
// * should be included in the returned MediaStream and to establish video and audio constraints for
82+
// * these tracks' settings.
83+
// *
84+
// * @type {Boolean} The audio constraint indicates whether or not an audio track is requested.
85+
// *
86+
// * @type {object} The video constraint provides the constraints that must be met by the video track that is
87+
// * included in the returned MediaStream (essentially it gives constraints for the quality of the video
88+
// * streams returned by the users's webcams)
89+
// */
90+
// const constraints: MediaStreamConstraints = {
91+
// video: {
92+
// width: { min:640, ideal:1920, max:1920 },
93+
// height: { min:480, ideal:1080, max:1080 },
94+
// },
95+
// audio: true
96+
// };
8097

8198
// a new one-time WebSocket connection is made on component mount and a permissions request for the client's video and audio is made
8299
useEffect(() => {

‎lib/src/constants/mediaStreamConstraints.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
/**
3+
*
4+
* @type {object} A MediaStreamConstraints object is used when calling getUserMedia() to specify what kinds of tracks
5+
* should be included in the returned MediaStream and to establish video and audio constraints for
6+
* these tracks' settings.
7+
* @type {boolean} The audio constraint indicates whether or not an audio track is requested.
8+
*
9+
* @type {object} The video constraint provides the constraints that must be met by the video track that is
10+
* included in the returned MediaStream (essentially it gives constraints for the quality of the video
11+
* streams returned by the users's webcams).
12+
*/
13+
const constraints: MediaStreamConstraints = {
14+
video: {
15+
width: { min:640, ideal:1920, max:1920 },
16+
height: { min:480, ideal:1080, max:1080 },
17+
},
18+
audio: true
19+
};
20+
21+
export default constraints;

0 commit comments

Comments
 (0)