Skip to content

Commit 76924b8

Browse files
fraisaifraisai
committed
updated documentation
1 parent 65981cd commit 76924b8

File tree

6 files changed

+27
-28
lines changed

6 files changed

+27
-28
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/// <reference types="react" />
22
/**
3-
* @desc Wrapper component containing logic necessary for P2P connections using WebRTC (RTCPeerConnect API + MediaSession API) and Websockets.
3+
* @desc Wrapper component containing logic necessary for P2P connections using WebRTC (RTCPeerConnect API + MediaSession API) and WebSockets.
44
* Any client can call another thus not all functions are invoked for every user.
55
* 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
66
* @param {string} this.props.URL

‎dist/src/components/VideoCall.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const VideoComponent_1 = __importDefault(require("./VideoComponent"));
4242
const actions_1 = __importDefault(require("../constants/actions"));
4343
const { LOGIN, ICECANDIDATE, OFFER, ANSWER, LEAVE } = actions_1.default;
4444
/**
45-
* @desc Wrapper component containing logic necessary for P2P connections using WebRTC (RTCPeerConnect API + MediaSession API) and Websockets.
45+
* @desc Wrapper component containing logic necessary for P2P connections using WebRTC (RTCPeerConnect API + MediaSession API) and WebSockets.
4646
* Any client can call another thus not all functions are invoked for every user.
4747
* 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
4848
* @param {string} this.props.URL
@@ -55,7 +55,7 @@ const VideoCall = ({ URL, mediaOptions }) => {
5555
const [users, setUsers] = (0, react_1.useState)();
5656
// const [message, setMessage] = useState<string>();
5757
// 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
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
5959
const ws = (0, react_1.useRef)(null);
6060
const localVideo = (0, react_1.useRef)(null);
6161
const remoteVideo = (0, react_1.useRef)(null);
@@ -85,17 +85,17 @@ const VideoCall = ({ URL, mediaOptions }) => {
8585
},
8686
audio: true
8787
};
88-
// a new one-time websocket connection is made on component mount and a permissions request for the client's video and audio is made
88+
// a new one-time WebSocket connection is made on component mount and a permissions request for the client's video and audio is made
8989
(0, react_1.useEffect)(() => {
9090
ws.current = new WebSocket(URL);
9191
openUserMedia();
9292
}, []);
9393
/**
9494
* A diagram of the WebRTC Connection logic
95-
* Peer A Stun Signaling Channel(Websockets) Peer B Step
95+
* Peer A Stun Signaling Channel(WebSockets) Peer B Step
9696
* |------>| | | Who Am I? + RTCPeerConnection(configuration) this contains methods to connect to a remote Peer
9797
* |<------| | | Symmetric NAT (your ip that you can be connected to)
98-
* |-------------------------->|------------------>| Calling Peer B, Offer SDP is generated and sent over websockets
98+
* |-------------------------->|------------------>| Calling Peer B, Offer SDP is generated and sent over WebSocket
9999
* |-------------------------->|------------------>| ICE Candidates are also being trickled in, where and what IP:PORT can Peer B connect to Peer A
100100
* | |<------------------|-------------------| Who Am I? PeerB this time!
101101
* | |-------------------|------------------>| Peer B's NAT
@@ -224,7 +224,7 @@ const VideoCall = ({ URL, mediaOptions }) => {
224224
}).catch(e => console.log(e));
225225
}
226226
/**
227-
* @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.
227+
* @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.
228228
* @param {RTCSessionDescriptionInit} data
229229
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer
230230
*/
@@ -340,8 +340,8 @@ const VideoCall = ({ URL, mediaOptions }) => {
340340
height: '50px',
341341
padding: '0 25px',
342342
};
343-
/* 'conditionally rendering' if websocket has a value otherwise on page re-rendering events
344-
multiple websocket connections will be made and error
343+
/* 'conditionally rendering' if WebSocket has a value otherwise on page re-rendering events
344+
multiple WebSocket connections will be made and error
345345
every user when one closes their browser
346346
*/
347347
return (react_1.default.createElement(react_1.default.Fragment, null,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ declare type videoComponent = {
1010
};
1111
};
1212
/**
13-
* @param {HTMLVideoElement} video
14-
* @returns a video component that is either the local or remote video stream
15-
* controls can be set to true to pause and adjust volumes of streams
13+
* @param props {HTMLVideoElement} video is either the local or remote video streams and mediaOptions control the dimensions of the video player.
14+
* @returns a video component that displays either the local or remote video streams.
15+
* Controls can be set to true to be able to pause/play video and adjust volumes of the streams.
1616
*/
1717
declare const VideoComponent: ({ video, mediaOptions }: videoComponent) => JSX.Element;
1818
export default VideoComponent;

‎dist/src/components/VideoComponent.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
55
Object.defineProperty(exports, "__esModule", { value: true });
66
const react_1 = __importDefault(require("react"));
77
/**
8-
* @param {HTMLVideoElement} video
9-
* @returns a video component that is either the local or remote video stream
10-
* controls can be set to true to pause and adjust volumes of streams
8+
* @param props {HTMLVideoElement} video is either the local or remote video streams and mediaOptions control the dimensions of the video player.
9+
* @returns a video component that displays either the local or remote video streams.
10+
* Controls can be set to true to be able to pause/play video and adjust volumes of the streams.
1111
*/
1212
const VideoComponent = ({ video, mediaOptions = { controls: true, style: { width: '640px', height: '360px' } } }) => {
1313
const { controls, style } = mediaOptions;

‎lib/src/components/VideoCall.tsx

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import VideoComponent from './VideoComponent';
66
import actions from '../constants/actions';
77
const { LOGIN, ICECANDIDATE, OFFER, ANSWER, LEAVE } = actions;
88

9-
// Defining interfaces for payloads that will be sent to other socket connections via websockets.
10-
// These interfaces describe the different events for the websocket message event to filter
9+
// 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.
1110
interface payloadObj {
1211
ACTION_TYPE: string,
1312
sender?: string,
@@ -31,7 +30,7 @@ interface icePayObj extends payloadObj {
3130
}
3231

3332
/**
34-
* @desc Wrapper component containing logic necessary for P2P connections using WebRTC (RTCPeerConnect API + MediaSession API) and Websockets.
33+
* @desc Wrapper component containing logic necessary for P2P connections using WebRTC (RTCPeerConnect API + MediaSession API) and WebSockets.
3534
* Any client can call another thus not all functions are invoked for every user.
3635
* 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
3736
* @param {string} this.props.URL
@@ -45,7 +44,7 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
4544
// const [message, setMessage] = useState<string>();
4645

4746
// useRef allows our variables to be stored in Immutable Objects and do not force page re-renders when its value is changed
48-
// 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
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
4948
const ws = useRef<WebSocket>(null!);
5049
const localVideo = useRef<HTMLVideoElement>(null!);
5150
const remoteVideo = useRef<HTMLVideoElement>(null!);
@@ -79,18 +78,18 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
7978
audio: true
8079
};
8180

82-
// a new one-time websocket connection is made on component mount and a permissions request for the client's video and audio is made
81+
// a new one-time WebSocket connection is made on component mount and a permissions request for the client's video and audio is made
8382
useEffect(() => {
8483
ws.current = new WebSocket(URL);
8584
openUserMedia();
8685
},[]);
8786

8887
/**
8988
* A diagram of the WebRTC Connection logic
90-
* Peer A Stun Signaling Channel(Websockets) Peer B Step
89+
* Peer A Stun Signaling Channel(WebSockets) Peer B Step
9190
* |------>| | | Who Am I? + RTCPeerConnection(configuration) this contains methods to connect to a remote Peer
9291
* |<------| | | Symmetric NAT (your ip that you can be connected to)
93-
* |-------------------------->|------------------>| Calling Peer B, Offer SDP is generated and sent over websockets
92+
* |-------------------------->|------------------>| Calling Peer B, Offer SDP is generated and sent over WebSocket
9493
* |-------------------------->|------------------>| ICE Candidates are also being trickled in, where and what IP:PORT can Peer B connect to Peer A
9594
* | |<------------------|-------------------| Who Am I? PeerB this time!
9695
* | |-------------------|------------------>| Peer B's NAT
@@ -235,7 +234,7 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
235234
}
236235

237236
/**
238-
* @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.
237+
* @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.
239238
* @param {RTCSessionDescriptionInit} data
240239
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer
241240
*/
@@ -356,8 +355,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
356355
padding: '0 25px',
357356
};
358357

359-
/* 'conditionally rendering' if websocket has a value otherwise on page re-rendering events
360-
multiple websocket connections will be made and error
358+
/* 'conditionally rendering' if WebSocket has a value otherwise on page re-rendering events
359+
multiple WebSocket connections will be made and error
361360
every user when one closes their browser
362361
*/
363362

‎lib/src/components/VideoComponent.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ type videoComponent = {
66
}
77

88
/**
9-
* @param {HTMLVideoElement} video
10-
* @returns a video component that is either the local or remote video stream
11-
* controls can be set to true to pause and adjust volumes of streams
9+
* @param props {HTMLVideoElement} video is either the local or remote video streams and mediaOptions control the dimensions of the video player.
10+
* @returns a video component that displays either the local or remote video streams.
11+
* Controls can be set to true to be able to pause/play video and adjust volumes of the streams.
1212
*/
1313
const VideoComponent = ({ video, mediaOptions = { controls: true, style: { width: '640px', height: '360px'}}}: videoComponent) => {
1414
const { controls, style } = mediaOptions;

0 commit comments

Comments
 (0)