Skip to content

Commit 461d12a

Browse files
fraisaifraisai
authored
Merge pull request #46 from oslabs-beta/doc
Doc
2 parents 6e8cabc + f914e53 commit 461d12a

File tree

2 files changed

+364
-72
lines changed

2 files changed

+364
-72
lines changed

‎dist/src/components/VideoCall.js

Lines changed: 183 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -181,18 +181,20 @@ const VideoCall = ({ URL, mediaOptions }) => {
181181
}
182182
});
183183
/**
184-
* @desc Constructs a new RTCPeerConnection object that also adds the local client's media tracks to this object.
185-
* @param {string} userID
184+
* @function callUser
185+
* @desc Constructs a new RTCPeerConnection object that also adds the local client's media tracks to this object.
186+
* @param {string} userID
186187
*/
187188
const callUser = (userID) => {
188189
peerRef.current = createPeer(userID);
189190
localStream.current.getTracks().forEach((track) => senders.current.push(peerRef.current.addTrack(track, localStream.current)));
190191
};
191192
/**
192-
* @desc Creates a new RTCPeerConnection object, which represents a WebRTC connection between the local device and a remote peer and adds event listeners to it
193-
* @param {string} userID
194-
* @returns {RTCPeerConnection} RTCPeerConnection object
195-
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionstatechange_event and other events
193+
* @function createPeer
194+
* @desc Creates a new RTCPeerConnection object, which represents a WebRTC connection between the local device and a remote peer and adds event listeners to it
195+
* @param {string} userID
196+
* @returns {RTCPeerConnection} RTCPeerConnection object
197+
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionstatechange_event and other events
196198
*/
197199
const createPeer = (userID) => {
198200
const peer = new RTCPeerConnection(rtcConfiguration_1.default);
@@ -244,13 +246,44 @@ const VideoCall = ({ URL, mediaOptions }) => {
244246
}).catch(e => console.log(e));
245247
}
246248
/**
247-
* @desc When an offer is received from the SignalingChannel, this function is invoked, creating a new RTCPeerConnection with the local client's media attached and an Answer is created that is then sent back to the original caller through the WebSocket connection.
248-
* @param {RTCSessionDescriptionInit} data
249-
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer
249+
* @namespace handleReceiveCall
250+
* @function handleReceiveCall - When Peer A (caller) calls Peer B (callee), Peer B receives an Offer from the SignalingChannel and this function is invoked. It creates a new RTCPeerConnection with the Peer A's media attached and an Answer is created. The Answer is then sent back to Peer A through the SignalingChannel.
251+
* @returns answerPayload object with ANSWER action type and the local description as the payload is sent via WebSocket.
252+
* @param {Object} data payload object
253+
* @property {string} data.sender is the person making the call
254+
* @property { RTCSessionDescriptionInit object } data.payload object providing the session description and it consists of a string containing a SDP message indicating an Offer from Peer A. This value is an empty string ("") by default and may not be null.
255+
*
256+
* @function createPeer - Creates a new RTCPeerConnection object, which represents a WebRTC connection between the local device and a remote peer and adds event listeners to it
257+
* @memberof handleReceiveCall
258+
*
259+
* @function RTCSessionDescription - initializes a RTCSessionDescription object, which consists of a description type indicating which part of the offer/answer negotiation process it describes and of the SDP descriptor of the session.
260+
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescription
261+
* @memberof handleReceiveCall
262+
*
263+
* @function setRemoteDescription - If Peer B wants to accept the offer, setRemoteDescription() is called to set the RTCSessionDescriptionInit object's remote description to the incoming offer from Peer A. The description specifies the properties of the remote end of the connection, including the media format.
264+
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setRemoteDescription
265+
* @memberof handleReceiveCall
266+
*
267+
* @function createAnswer - Creates an Answer to the Offer received from Peer A during the offer/answer negotiation of a WebRTC connection. The Answer contains information about any media already attached to the session, codecs and options supported by the browser, and any ICE candidates already gathered.
268+
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer
269+
* @memberof handleReceiveCall
270+
*
271+
* @function setLocalDescription - WebRTC selects an appropriate local configuration by invoking setLocalDescription(), which automatically generates an appropriate Answer in response to the received Offer from Peer A. Then we send the Answer through the signaling channel back to Peer A.
272+
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription
273+
* @memberof handleReceiveCall
274+
*
275+
* @returns {Promise} A Promise whose fulfillment handler is called with an RTCSessionDescriptionInit object containing the SDP Answer to be delivered to Peer A.
276+
*
250277
*/
251278
function handleReceiveCall(data) {
252279
otherUser.current = data.sender;
253280
peerRef.current = createPeer(data.sender);
281+
/**
282+
* @type {RTCSessionDescriptionInit object} desc - consists of a description type indicating which part of the answer negotiation process it describes and the SDP descriptor of the session.
283+
* @params {string} desc.type - description type with incoming offer
284+
* @params {string} desc.sdp - string containing a SDP message, the format for describing multimedia communication sessions. SDP contains the codec, source address, and timing information of audio and video
285+
* @see https://developer.mozilla.org/en-US/docs/Glossary/SDP
286+
*/
254287
const desc = new RTCSessionDescription(data.payload);
255288
peerRef.current.setRemoteDescription(desc)
256289
.then(() => {
@@ -347,19 +380,19 @@ const VideoCall = ({ URL, mediaOptions }) => {
347380
isEnded ? (_b = peerRef.current) === null || _b === void 0 ? void 0 : _b.close() : (_c = ws.current) === null || _c === void 0 ? void 0 : _c.send(JSON.stringify(LeavePayload));
348381
remoteVideo.current.srcObject = null;
349382
}
350-
const buttonStyling = {
351-
backgroundColor: '#C2FBD7',
352-
borderRadius: '50px',
353-
borderWidth: '0',
354-
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
355-
color: '#008000',
356-
cursor: 'pointer',
357-
display: 'inline-block',
358-
fontFamily: 'Arial, Helvetica, sans-serif',
359-
fontSize: '1em',
360-
height: '50px',
361-
padding: '0 25px',
362-
};
383+
// const buttonStyling = {
384+
// backgroundColor: '#C2FBD7',
385+
// borderRadius: '50px',
386+
// borderWidth: '0',
387+
// boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
388+
// color: '#008000',
389+
// cursor: 'pointer',
390+
// display: 'inline-block',
391+
// fontFamily: 'Arial, Helvetica, sans-serif',
392+
// fontSize: '1em',
393+
// height: '50px',
394+
// padding: '0 25px',
395+
// };
363396
/* 'conditionally rendering' if WebSocket has a value otherwise on page re-rendering events
364397
multiple WebSocket connections will be made and error
365398
every user when one closes their browser
@@ -368,26 +401,140 @@ const VideoCall = ({ URL, mediaOptions }) => {
368401
ws.current ?
369402
react_1.default.createElement(Socket_1.default, { ws: ws.current, getUsers: getUsers, handleReceiveCall: handleReceiveCall, handleAnswer: handleAnswer, handleNewIceCandidate: handleNewIceCandidate, endCall: endCall }) :
370403
'',
371-
react_1.default.createElement("div", { className: '', style: { display: 'flex', justifyContent: 'space-around', flexDirection: 'column', padding: '10px', marginTop: '10%' } },
404+
react_1.default.createElement("div", { className: '', style: {
405+
display: 'flex',
406+
flexDirection: 'column',
407+
justifyContent: 'space-around',
408+
marginTop: '10%',
409+
padding: '10px',
410+
} },
372411
username === '' ?
373412
react_1.default.createElement(react_1.default.Fragment, null,
374-
react_1.default.createElement("div", { className: 'input-div', style: { display: 'flex', flexDirection: 'column', top: '2%', left: '2%', margin: '0 auto', height: '100px', width: '100px', justifyContent: 'center', alignItems: 'center' } },
375-
react_1.default.createElement("input", { className: '', type: 'text', placeholder: 'username', id: "username-field", onChange: (e) => userField = e.target.value, style: { paddingBottom: '40px', width: '200px' } }),
376-
react_1.default.createElement("button", { className: '', "data-testid": 'submit-username-btn', onClick: () => handleUsername(), style: buttonStyling }, "Submit Username")))
413+
react_1.default.createElement("div", { className: 'input-div', style: {
414+
alignItems: 'center',
415+
display: 'flex',
416+
flexDirection: 'column',
417+
height: '100px',
418+
justifyContent: 'center',
419+
left: '2%',
420+
margin: '0 auto',
421+
top: '2%',
422+
width: '100px'
423+
} },
424+
react_1.default.createElement("input", { className: '', type: 'text', placeholder: 'username', id: "username-field", onChange: (e) => userField = e.target.value, style: {
425+
paddingBottom: '40px',
426+
width: '200px'
427+
} }),
428+
react_1.default.createElement("button", { className: '', "data-testid": 'submit-username-btn', onClick: () => handleUsername(),
429+
// style={ buttonStyling }
430+
style: {
431+
backgroundColor: '#C2FBD7',
432+
borderRadius: '50px',
433+
borderWidth: '0',
434+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
435+
color: '#008000',
436+
cursor: 'pointer',
437+
display: 'inline-block',
438+
fontFamily: 'Arial, Helvetica, sans-serif',
439+
fontSize: '1em',
440+
height: '50px',
441+
padding: '0 25px',
442+
} }, "Submit Username")))
377443
:
378-
react_1.default.createElement("div", { className: 'users-list', style: { fontFamily: 'Arial, Helvetica, sans-serif', fontSize: '16px' } },
444+
react_1.default.createElement("div", { className: 'users-list', style: {
445+
fontFamily: 'Arial, Helvetica, sans-serif',
446+
fontSize: '16px'
447+
} },
379448
"Users connected: ",
380449
users),
381-
react_1.default.createElement("div", { id: "main-video-container", className: '', style: { display: 'flex', flexDirection: 'row', gap: '100px', justifyContent: 'center', alignItems: 'center' } },
382-
react_1.default.createElement("div", { id: "local-video-container", className: '', style: { display: 'flex', flexDirection: 'column', alignContent: 'center', justifyContent: 'center' } },
450+
react_1.default.createElement("div", { id: "main-video-container", className: '', style: {
451+
alignItems: 'center',
452+
display: 'flex',
453+
flexDirection: 'row',
454+
gap: '100px',
455+
justifyContent: 'center'
456+
} },
457+
react_1.default.createElement("div", { id: "local-video-container", className: '', style: {
458+
alignContent: 'center',
459+
display: 'flex',
460+
flexDirection: 'column',
461+
justifyContent: 'center'
462+
} },
383463
react_1.default.createElement(VideoComponent_1.default, { video: localVideo, mediaOptions: mediaOptions }),
384-
react_1.default.createElement("div", { id: "local-button-container", className: '', style: { display: 'flex', flexDirection: 'row', gap: '10px', justifyContent: 'center', marginTop: '10px' } },
385-
react_1.default.createElement("button", { className: 'share-btn', "data-testid": 'share-screen-btn', onClick: () => shareScreen(), style: buttonStyling }, "Share Screen"),
386-
react_1.default.createElement("button", { className: 'end-btn', "data-testid": 'end-call-btn', onClick: () => endCall(false), style: Object.assign(Object.assign({}, buttonStyling), { backgroundColor: '#ff6961', color: '#28282B' }) }, "End Call"))),
387-
react_1.default.createElement("div", { id: "remote-video-container", className: '', style: { display: 'flex', flexDirection: 'column', alignContent: 'center', justifyContent: 'center' } },
464+
react_1.default.createElement("div", { id: "local-button-container", className: '', style: {
465+
display: 'flex',
466+
flexDirection: 'row',
467+
gap: '10px',
468+
justifyContent: 'center',
469+
marginTop: '10px'
470+
} },
471+
react_1.default.createElement("button", { className: 'share-btn', "data-testid": 'share-screen-btn', onClick: () => shareScreen(),
472+
// style={buttonStyling}
473+
style: {
474+
backgroundColor: '#C2FBD7',
475+
borderRadius: '50px',
476+
borderWidth: '0',
477+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
478+
color: '#008000',
479+
cursor: 'pointer',
480+
display: 'inline-block',
481+
fontFamily: 'Arial, Helvetica, sans-serif',
482+
fontSize: '1em',
483+
height: '50px',
484+
padding: '0 25px',
485+
} }, "Share Screen"),
486+
react_1.default.createElement("button", { className: 'end-btn', "data-testid": 'end-call-btn', onClick: () => endCall(false),
487+
// style={{
488+
// ...buttonStyling,
489+
// backgroundColor:'#ff6961',
490+
// color:'#28282B'
491+
// }}
492+
style: {
493+
// backgroundColor: '#C2FBD7',
494+
backgroundColor: '#ff6961',
495+
borderRadius: '50px',
496+
borderWidth: '0',
497+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
498+
// color: '#008000',
499+
color: '#28282B',
500+
cursor: 'pointer',
501+
display: 'inline-block',
502+
fontFamily: 'Arial, Helvetica, sans-serif',
503+
fontSize: '1em',
504+
height: '50px',
505+
padding: '0 25px',
506+
} }, "End Call"))),
507+
react_1.default.createElement("div", { id: "remote-video-container", className: '', style: {
508+
alignContent: 'center',
509+
display: 'flex',
510+
flexDirection: 'column',
511+
justifyContent: 'center'
512+
} },
388513
react_1.default.createElement(VideoComponent_1.default, { video: remoteVideo, mediaOptions: mediaOptions }),
389-
react_1.default.createElement("div", { id: "remote-button-container", className: '', style: { display: 'flex', flexDirection: 'row', gap: '10px', justifyContent: 'center', marginTop: '10px' } },
390-
react_1.default.createElement("button", { className: '', "data-testid": 'call-btn', onClick: handleOffer, style: buttonStyling }, "Call"),
391-
react_1.default.createElement("input", { className: '', type: 'text', id: 'receiverName', style: { marginLeft: '2%' } })))))));
514+
react_1.default.createElement("div", { id: "remote-button-container", className: '', style: {
515+
display: 'flex',
516+
flexDirection: 'row',
517+
gap: '10px',
518+
justifyContent: 'center',
519+
marginTop: '10px'
520+
} },
521+
react_1.default.createElement("button", { className: '', "data-testid": 'call-btn', onClick: handleOffer,
522+
// style={buttonStyling}
523+
style: {
524+
backgroundColor: '#C2FBD7',
525+
borderRadius: '50px',
526+
borderWidth: '0',
527+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
528+
color: '#008000',
529+
cursor: 'pointer',
530+
display: 'inline-block',
531+
fontFamily: 'Arial, Helvetica, sans-serif',
532+
fontSize: '1em',
533+
height: '50px',
534+
padding: '0 25px',
535+
} }, "Call"),
536+
react_1.default.createElement("input", { className: '', type: 'text', id: 'receiverName', style: {
537+
marginLeft: '2%'
538+
} })))))));
392539
};
393540
exports.default = VideoCall;

0 commit comments

Comments
 (0)