Skip to content

Commit e8088e1

Browse files
authored
Merge pull request #56 from oslabs-beta/feature/raisa-cicd
Feature/raisa cicd
2 parents 76b6724 + e29d670 commit e8088e1

File tree

6 files changed

+61
-40
lines changed

6 files changed

+61
-40
lines changed

.eslintignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
# don't lint build or dist output
22
dist
33
build
4-
tsconfig.json
4+
tsconfig.json

.github/workflows/npm-publish.yml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ jobs:
1818
- name: Publish npm package when version is updated
1919
uses: JS-DevTools/npm-publish@v3
2020
with:
21-
token: ${{ secrets.NPM_TOKEN }}
22-
strategy: upgrade
21+
token: ${{ secrets.NPM_TOKEN }} # This works BUT it shows up as problem for some unknown reason ("Context access might be invalid: NPM_TOKEN") and there should not be any errors
2322

2423

2524
# https://github.com/JS-DevTools/npm-publish

.github/workflows/rtconnect-test.yml

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,21 @@ jobs:
2929
- run: npm run lint
3030
- run: npm test
3131
# env:
32-
# CI: true
32+
# CI: true
33+
34+
35+
# slackNotification:
36+
# name: Slack CI status - notify on failure
37+
# runs-on: ubuntu-latest
38+
# steps:
39+
# - name: Slack Notify on Failure
40+
# if: ${{ failure() }}
41+
# id: slack
42+
# uses: slackapi/slack-github-action@v1.24.0
43+
# with:
44+
# channel-id: 'C067F896WG5'
45+
# slack-message: "Github CI Result: ${{ job.status }}\nGithub PR/Commit URL: ${{ github.event.pull_request.html_url || github.event.head_commit.url }}"
46+
# env:
47+
# SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
48+
# # SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
49+
# # SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

.github/workflows/slack-notify.yml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,8 @@ jobs:
1919
channel-id: 'C067F896WG5'
2020
slack-message: "Github CI Result: ${{ job.status }}\nGithub PR/Commit URL: ${{ github.event.pull_request.html_url || github.event.head_commit.url }}"
2121
env:
22-
SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
22+
SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }} # This works BUT it shows up as problem for some unknown reason ("Context access might be invalid: NPM_TOKEN") and there should not be any errors
2323
# SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
24-
# SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
2524

2625

2726
# https://github.com/slackapi/slack-github-action

lib/src/components/VideoCall.tsx

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ interface icePayObj extends payloadObj {
3838
3939
* @desc Wrapper component containing the logic necessary for peer connections using WebRTC APIs (RTCPeerConnect API + MediaSession API) and WebSockets.
4040
*
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.
41+
* ws, localVideo, remoteVideo, peerRef, localStreamRef, 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.
4242
*
4343
* 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.
4444
*
@@ -86,9 +86,9 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
8686
const otherUser = useRef<string>();
8787

8888
/**
89-
* @type {mutable ref object} localStream - It cannot be null or undefined.
89+
* @type {mutable ref object} localStreamRef - It cannot be null or undefined.
9090
*/
91-
const localStream = useRef<MediaStream>(null!);
91+
const localStreamRef = useRef<MediaStream>(null!);
9292

9393
/**
9494
* @type {mutable ref array} senders -
@@ -121,8 +121,10 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
121121
* | |-------------------|------------------>| Peer B's NAT
122122
* |<--------------------------|-------------------| Accepting Peer A's call, sending Answer SDP
123123
* |<--------------------------|-------------------| Peer B's ICE Candidates are now being trickled in to peer A for connectivity.
124-
* |-------------------------->|------------------>| ICE Candidates from Peer A, these steps repeat and are only necessary if Peer B can't connect to the earlier candidates sent.
125-
* |<--------------------------|-------------------| ICE Candidate trickling from Peer B, could also take a second if there's a firewall to be circumvented.
124+
* |-------------------------->|------------------>| ICE Candidates from Peer A, these steps repeat and are only necessary if Peer B can't connect to the
125+
* | | | | earlier candidates sent.
126+
* |<--------------------------|-------------------| ICE Candidate trickling from Peer B, could also take a second if there's a firewall to be
127+
* | | | | circumvented.
126128
* | | | | Connected! Peer to Peer connection is made and now both users are streaming data to eachother!
127129
*
128130
* 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
@@ -154,7 +156,7 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
154156

155157
/**
156158
* @func handleOffer
157-
* @desc When a username is entered that the client wants to "Call" and the client clicks the Call button, into the input field, this starts the Offer-Answer Model exchange
159+
* @desc When a username is entered into the input field that the client wants to "Call" and the client clicks the Call button, this starts the SDP Offer-Answer exchange
158160
*/
159161
const handleOffer = (): void => {
160162
const inputField:HTMLInputElement | null = document.querySelector('#receiverName');
@@ -193,41 +195,42 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
193195
const openUserMedia = async (): Promise<void> => {
194196
try {
195197
if (localVideo.current){
196-
localStream.current = localVideo.current.srcObject = await navigator.mediaDevices.getUserMedia(constraints);
198+
localStreamRef.current = localVideo.current.srcObject = await navigator.mediaDevices.getUserMedia(constraints);
197199
}
198200
} catch (error) {
199201
console.log('Error in openUserMedia: ', error);
200202
}
201203
};
202204

203205
/**
204-
* @function callUser - Constructs a new RTCPeerConnection object that also adds the local client's media tracks to this object.
205-
* @param {string} userID
206+
* @function callUser - Constructs a new RTCPeerConnection object using the createPeer function and then adds the local client's (Peer A/caller) media tracks to peer connection ref object.
207+
* @param {string} userID the remote client's (Peer B/callee) username
206208
*/
207209
const callUser = (userID: string): void => {
208210
peerRef.current = createPeer(userID);
209-
localStream.current.getTracks().forEach((track) => senders.current.push(peerRef.current.addTrack(track, localStream.current)));
211+
localStreamRef.current.getTracks().forEach((track) => senders.current.push(peerRef.current.addTrack(track, localStreamRef.current)));
210212
};
211213

212214
/**
213-
* @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
214-
* @param {string} userID
215+
* @function createPeer - Creates a new RTCPeerConnection object, which represents a WebRTC connection between the local device and a remote peer and adds event listeners (handleIceCandidateEvent, handleTrackEvent, handleNegotiationNeededEvent) to it
216+
* @param {string} userID the remote client's (Peer B/callee) username
215217
* @returns {RTCPeerConnection} RTCPeerConnection object
216218
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionstatechange_event and other events
219+
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection
217220
*/
218221
const createPeer = (userID: string): RTCPeerConnection => {
219-
const peer:RTCPeerConnection = new RTCPeerConnection(configuration);
222+
const peer: RTCPeerConnection = new RTCPeerConnection(configuration);
220223
peer.onicecandidate = handleIceCandidateEvent;
221224
peer.ontrack = handleTrackEvent;
222225
peer.onnegotiationneeded = () => handleNegotiationNeededEvent(userID);
223226

224-
console.log('registerPeerConnectionListners has activated');
225-
226227
peer.addEventListener('negotiationneeded', () => {
227228
console.log('negotiationneeded event has fired');
228229
});
229230

230231
peer.addEventListener('icegatheringstatechange', () => {
232+
// const stateOfIceGathering = peer.iceGatheringState; // returns a string that describes the connection's ICE gathering state (new, gathering, or complete)
233+
// console.log(`ICE gathering state: ${stateOfIceGathering}`);
231234
console.log(`ICE gathering state changed: ${peerRef.current?.iceGatheringState}`);
232235
});
233236

@@ -249,19 +252,22 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
249252

250253
/**
251254
* @function handleNegotiationNeededEvent
252-
* @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
253-
* @param {string} userID
255+
* @desc creates an SDP offer and sends it through the signaling channel to the remote peer: invokes WebRTC's built-in createOffer() function to create an SDP offer, which is an RTCSessionDescription object. After creating the offer, the local end is configured by calling RTCPeerConnection.setLocalDescription().
256+
*
257+
* Then a signaling message is created and sent to the remote peer through the signaling server, to share the offer with the other peer. The other peer should recognize this message and follow up by creating its own RTCPeerConnection, setting the remote description with setRemoteDescription(), and then creating an answer to send back to the offering peer. Finally, the offer, sender and receiver is sent via ws.current.send to the Signaling Channel in the backend
258+
*
259+
* @param {string} userID the remote client's (Peer B/callee) username
260+
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/negotiationneeded_event
254261
*/
255262
function handleNegotiationNeededEvent(userID: string): void {
256-
peerRef.current
257-
?.createOffer()
263+
peerRef.current?.createOffer()
258264
.then((offer) => {
259265
return peerRef.current?.setLocalDescription(offer);
260266
})
261267
.then(() => {
262268
const offerPayload: offerPayObj = {
263269
ACTION_TYPE: OFFER,
264-
sender: username,
270+
sender: username, // local peer
265271
receiver: userID,
266272
payload: peerRef.current?.localDescription
267273
};
@@ -320,7 +326,7 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
320326

321327
peerRef.current.setRemoteDescription(desc)
322328
.then(() => {
323-
localStream.current?.getTracks().forEach((track) => peerRef.current?.addTrack(track, localStream.current));
329+
localStreamRef.current?.getTracks().forEach((track) => peerRef.current?.addTrack(track, localStreamRef.current));
324330
})
325331
.then(() => {
326332
return peerRef.current?.createAnswer();
@@ -412,8 +418,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
412418
screenTrack.onended = function() { // ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available
413419
senders.current
414420
?.find(sender => sender.track?.kind === 'video')
415-
?.replaceTrack(localStream.current.getTracks()[1]); //
416-
localVideo.current.srcObject = localStream.current; // changing local video displayed back to webcam
421+
?.replaceTrack(localStreamRef.current.getTracks()[1]); //
422+
localVideo.current.srcObject = localStreamRef.current; // changing local video displayed back to webcam
417423
};
418424
});
419425
}
@@ -496,14 +502,14 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
496502
>
497503
<input
498504
className='input-username'
499-
type='text'
500-
placeholder='username'
501505
id="username-field"
502-
onChange={(e) => userField = e.target.value}
506+
onChange={(e) => userField = e.target.value}
507+
placeholder='username'
503508
style={{
504509
paddingBottom:'40px',
505510
width:'200px'
506-
}}
511+
}}
512+
type='text'
507513
></input>
508514

509515
<button
@@ -544,8 +550,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
544550
}
545551

546552
<div
547-
id="main-video-container"
548553
className=''
554+
id="main-video-container"
549555
style= {{
550556
alignItems:'center',
551557
display: 'flex',
@@ -556,8 +562,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
556562
>
557563

558564
<div
559-
id="local-video-container"
560565
className=''
566+
id="local-video-container"
561567
style={{
562568
alignContent: 'center',
563569
display:'flex',
@@ -572,8 +578,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
572578
/>
573579

574580
<div
575-
id="local-button-container"
576581
className=''
582+
id="local-button-container"
577583
style= {{
578584
display: 'flex',
579585
flexDirection: 'row',
@@ -629,8 +635,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
629635
</div>
630636

631637
<div
632-
id="remote-video-container"
633638
className=''
639+
id="remote-video-container"
634640
style={{
635641
alignContent: 'center',
636642
display:'flex',
@@ -644,8 +650,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
644650
/>
645651

646652
<div
653+
className=''
647654
id="remote-button-container"
648-
className=''
649655
style= {{
650656
display: 'flex',
651657
flexDirection: 'row',
@@ -679,8 +685,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
679685

680686
<input
681687
className='input-receiver-name'
682-
type='text'
683688
id='receiverName'
689+
type='text'
684690
style={{
685691
marginLeft:'2%'
686692
}}></input>

lib/src/constants/rtcConfiguration.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* @type {Object} configuration - The RTCConfiguration object is used to provide configuration options for how an RTCPeerConnection should be created.
2+
* @type {RTCConfiguration} configuration - The RTCConfiguration object is used to provide configuration options for how an RTCPeerConnection should be created.
33
*
44
* @property {array} iceServers - An array of RTCIceServer objects, each describing one server which
55
* may be used by the ICE agent. These servers are typically STUN and/or TURN servers. If this

0 commit comments

Comments
 (0)