Skip to content

Commit b17cc1c

Browse files
fraisaifraisai
committed
modularized code
1 parent c166715 commit b17cc1c

File tree

12 files changed

+104
-90
lines changed

12 files changed

+104
-90
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ 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 {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.
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.
2424
* @param props.handleReceiveCall
2525
* @param props.handleAnswer
2626
* @param props.handleNewIceCandidate

‎dist/src/components/Socket.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ 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 {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 {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.
1414
* @param props.handleReceiveCall
1515
* @param props.handleAnswer
1616
* @param props.handleNewIceCandidate

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* 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.
88
*
99
* @param {object} props
10-
* @param {string} props.URL string ws or wss link
10+
* @param {string} props.URL ws or wss link
1111
* @param {object} props.mediaOptions video embed attributes
1212
* @returns A component that renders two VideoComponents
1313
*/

‎dist/src/components/VideoCall.js

Lines changed: 3 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const Socket_1 = __importDefault(require("./Socket"));
4141
const VideoComponent_1 = __importDefault(require("./VideoComponent"));
4242
const actions_1 = __importDefault(require("../constants/actions"));
4343
const mediaStreamConstraints_1 = __importDefault(require("../constants/mediaStreamConstraints"));
44+
const rtcConfiguration_1 = __importDefault(require("../constants/rtcConfiguration"));
4445
const { LOGIN, ICECANDIDATE, OFFER, ANSWER, LEAVE } = actions_1.default;
4546
/**
4647
* @desc Wrapper component containing the logic necessary for P2P connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
@@ -50,7 +51,7 @@ const { LOGIN, ICECANDIDATE, OFFER, ANSWER, LEAVE } = actions_1.default;
5051
* 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.
5152
*
5253
* @param {object} props
53-
* @param {string} props.URL string ws or wss link
54+
* @param {string} props.URL ws or wss link
5455
* @param {object} props.mediaOptions video embed attributes
5556
* @returns A component that renders two VideoComponents
5657
*/
@@ -69,37 +70,6 @@ const VideoCall = ({ URL, mediaOptions }) => {
6970
const senders = (0, react_1.useRef)([]);
7071
let userField = '';
7172
let receiver = '';
72-
// this configuration defines the parameters for how an RTCPeerConnection should be created, also ice trickling is enabled with iceCandidatePoolSize set to a value
73-
// stun servers are used to identify users so that peers can connect to eachother directly without the use of a middleman server (which would create latency)
74-
//'stun:stun2.l.google.com:19302', an additional ice server
75-
const configuration = {
76-
iceServers: [
77-
{
78-
urls: 'stun:stun1.l.google.com:19302',
79-
},
80-
],
81-
iceCandidatePoolSize: 10,
82-
};
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-
// };
10373
// a new one-time WebSocket connection is made on component mount and a permissions request for the client's video and audio is made
10474
(0, react_1.useEffect)(() => {
10575
ws.current = new WebSocket(URL);
@@ -191,7 +161,7 @@ const VideoCall = ({ URL, mediaOptions }) => {
191161
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionstatechange_event and other events
192162
*/
193163
const createPeer = (userID) => {
194-
const peer = new RTCPeerConnection(configuration);
164+
const peer = new RTCPeerConnection(rtcConfiguration_1.default);
195165
peer.onicecandidate = handleIceCandidateEvent;
196166
peer.ontrack = handleTrackEvent;
197167
peer.onnegotiationneeded = () => handleNegotiationNeededEvent(userID);

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
/**
22
*
3-
* @type {object} A MediaStreamConstraints object is used when calling getUserMedia() to specify what kinds of tracks
3+
* @type {Object} A MediaStreamConstraints object is used when calling getUserMedia() to specify what kinds of tracks
44
* should be included in the returned MediaStream and to establish video and audio constraints for
55
* 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
6+
* @property {object} video - The video constraint provides the constraints that must be met by the video track that is
97
* included in the returned MediaStream (essentially it gives constraints for the quality of the video
108
* streams returned by the users's webcams).
9+
* @property {object} video.width - video width constraint (min:640, ideal:1920, max:1920)
10+
* @property {object} video.height - video height constraint (min:480, ideal:1080, max:1080)
11+
* @property {boolean} audio - audio constraint that indicates whether or not an audio track is requested.
12+
*
1113
*/
1214
declare const constraints: MediaStreamConstraints;
1315
export default constraints;

‎dist/src/constants/mediaStreamConstraints.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22
Object.defineProperty(exports, "__esModule", { value: true });
33
/**
44
*
5-
* @type {object} A MediaStreamConstraints object is used when calling getUserMedia() to specify what kinds of tracks
5+
* @type {Object} A MediaStreamConstraints object is used when calling getUserMedia() to specify what kinds of tracks
66
* should be included in the returned MediaStream and to establish video and audio constraints for
77
* 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
8+
* @property {object} video - The video constraint provides the constraints that must be met by the video track that is
119
* included in the returned MediaStream (essentially it gives constraints for the quality of the video
1210
* streams returned by the users's webcams).
11+
* @property {object} video.width - video width constraint (min:640, ideal:1920, max:1920)
12+
* @property {object} video.height - video height constraint (min:480, ideal:1080, max:1080)
13+
* @property {boolean} audio - audio constraint that indicates whether or not an audio track is requested.
14+
*
1315
*/
1416
const constraints = {
1517
video: {

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @type {Object} configuration - The RTCConfiguration object is used to provide configuration options for how an RTCPeerConnection should be created.
3+
* @property {array} iceServers - An array of RTCIceServer objects, each describing one server which
4+
* may be used by the ICE agent. These servers are typically STUN and/or TURN servers. If this isn't
5+
* specified, the connection attempt will be made with no STUN or TURN server available, which limits
6+
* the connection to local peers. STUN servers are used to identify users so that peers can connect to
7+
* each other directly without the use of a middleman server (which would create latency).
8+
* Another RTCIceServer is 'stun:stun2.l.google.com:19302'.
9+
* @property {number} iceCandidatePoolSize - this specifies the size of the prefetched ICE candidate
10+
* pool. The default value is 0 (meaning no candidate prefetching will occur). In some cases,
11+
* connections can be established more quickly by allowing the ICE agent to start fetching ICE
12+
* candidates before the connection is started, so that ICE candidates are already available to be
13+
* inspected by the time RTCPeerConnection.setLocalDescription() is called. Changing the size of the
14+
* ICE candidate pool may trigger the beginning of ICE trickling.
15+
*
16+
*/
17+
declare const configuration: RTCConfiguration;
18+
export default configuration;

‎dist/src/constants/rtcConfiguration.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
/**
4+
* @type {Object} configuration - The RTCConfiguration object is used to provide configuration options for how an RTCPeerConnection should be created.
5+
* @property {array} iceServers - An array of RTCIceServer objects, each describing one server which
6+
* may be used by the ICE agent. These servers are typically STUN and/or TURN servers. If this isn't
7+
* specified, the connection attempt will be made with no STUN or TURN server available, which limits
8+
* the connection to local peers. STUN servers are used to identify users so that peers can connect to
9+
* each other directly without the use of a middleman server (which would create latency).
10+
* Another RTCIceServer is 'stun:stun2.l.google.com:19302'.
11+
* @property {number} iceCandidatePoolSize - this specifies the size of the prefetched ICE candidate
12+
* pool. The default value is 0 (meaning no candidate prefetching will occur). In some cases,
13+
* connections can be established more quickly by allowing the ICE agent to start fetching ICE
14+
* candidates before the connection is started, so that ICE candidates are already available to be
15+
* inspected by the time RTCPeerConnection.setLocalDescription() is called. Changing the size of the
16+
* ICE candidate pool may trigger the beginning of ICE trickling.
17+
*
18+
*/
19+
const configuration = {
20+
iceServers: [
21+
{
22+
urls: 'stun:stun1.l.google.com:19302',
23+
},
24+
],
25+
iceCandidatePoolSize: 10,
26+
};
27+
exports.default = configuration;

‎lib/src/components/Socket.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ 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 {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.
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.
1919
* @param props.handleReceiveCall
2020
* @param props.handleAnswer
2121
* @param props.handleNewIceCandidate

‎lib/src/components/VideoCall.tsx

Lines changed: 2 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Socket from './Socket';
55
import VideoComponent from './VideoComponent';
66
import actions from '../constants/actions';
77
import constraints from '../constants/mediaStreamConstraints';
8+
import configuration from '../constants/rtcConfiguration';
89
const { LOGIN, ICECANDIDATE, OFFER, ANSWER, LEAVE } = actions;
910

1011
// 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.
@@ -38,7 +39,7 @@ interface icePayObj extends payloadObj {
3839
* 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.
3940
*
4041
* @param {object} props
41-
* @param {string} props.URL string ws or wss link
42+
* @param {string} props.URL ws or wss link
4243
* @param {object} props.mediaOptions video embed attributes
4344
* @returns A component that renders two VideoComponents
4445
*/
@@ -60,40 +61,6 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
6061

6162
let userField = '';
6263
let receiver: string | null = '';
63-
64-
// this configuration defines the parameters for how an RTCPeerConnection should be created, also ice trickling is enabled with iceCandidatePoolSize set to a value
65-
// stun servers are used to identify users so that peers can connect to eachother directly without the use of a middleman server (which would create latency)
66-
//'stun:stun2.l.google.com:19302', an additional ice server
67-
const configuration: RTCConfiguration = {
68-
iceServers: [
69-
{
70-
urls: 'stun:stun1.l.google.com:19302',
71-
},
72-
],
73-
iceCandidatePoolSize: 10,
74-
};
75-
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-
// };
9764

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

0 commit comments

Comments
 (0)