Skip to content

Commit 3faccc2

Browse files
fraisaifraisai
authored
Merge pull request #37 from oslabs-beta/livestream
Livestream
2 parents 9e4aebd + c793c04 commit 3faccc2

File tree

4 files changed

+121
-32
lines changed

4 files changed

+121
-32
lines changed

‎.npmignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
jest.config.ts
22
lib/__tests__
3-
node_modules
3+
node_modules
4+
.eslintignore
5+
.eslintrc.json

‎README.md

+99-19
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ That is where RTConnect comes in - we take care of signaling and implementing We
4040
RTConnect is available as an [npm package](https://www.npmjs.com/package/rtconnect).
4141

4242
**npm:**
43-
4443
```
4544
npm install rtconnect
4645
```
@@ -56,46 +55,45 @@ npm install rtconnect
5655

5756
4. Invoke the RTConnect Signaling Channel method, initializeConnection().
5857

58+
**server.js:**
5959
```
6060
// server.js file
6161
6262
const path = require('path');
6363
const express = require('express');
64-
const app = express();
64+
app.use(bodyParser.urlencoded({ extended: true }));
6565
const PORT = 3000;
66+
const app = express();
67+
const { SignalingChannel } = require('rtconnect'); // import the RTConnect Signaling Channel class
6668
67-
// import the RTConnect Signaling Channel class
68-
const { SignalingChannel } = require('rtconnect');
6969
7070
app.use(express.json());
71-
app.use(express.urlencoded({extended : true}));
71+
app.use(bodyParser.urlencoded({extended : true}));
7272
app.use('/build', express.static(path.join(__dirname, '../build')));
7373
7474
app.get('/', (req, res) => {
75-
res.status(200).sendFile(path.resolve(__dirname, '../index.html'));
75+
res.status(200).sendFile(path.resolve(__dirname, '../index.html'));
7676
});
7777
7878
const server = app.listen(PORT, () => {
79-
console.log('Listening on port', PORT);
79+
console.log('Listening on port', PORT);
8080
});
8181
82-
// instantiate the RTConnect SignalingChannel
83-
const SignalChannel = new SignalingChannel(server);
84-
85-
// invoke initializeConnection() method
86-
SignalChannel.initializeConnection();
82+
const SignalChannel = new SignalingChannel(server); // instantiate the RTConnect SignalingChannel
8783
84+
SignalChannel.initializeConnection(); // invoke initializeConnection() method
8885
```
8986

9087
5. Import the RTConnect VideoCall component into your desired .jsx file.
9188

92-
6. Finally use the RTConnect VideoCall component as you would any other React component by passing in ‘ws://localhost:PORT’ as the URL prop as well as the optional mediaOptions prop
89+
6. Finally use the RTConnect VideoCall component as you would any other React component by passing in `‘ws://localhost:PORT’` as the URL prop as well as the optional mediaOptions prop
9390

94-
- URL={ ‘ws://localhost:PORT’} (Note: the PORT whatever you specified when you set up your server)
95-
- mediaOptions={{ controls: true, style: { width: ‘640px’, height: ‘480px’ }}
91+
- `URL={ ‘ws://localhost:PORT’}` (Note: the PORT whatever you specified when you set up your server so based on the server above, the port is 3000)
92+
- `mediaOptions={{ controls: true, style: { width: ‘640px’, height: ‘480px’ }}`
9693

97-
(Note: If you are using an https server, then pass in ‘wss://localhost:PORT’ as the URL prop).
94+
(Note: If you are using an https server, then pass in `‘wss://localhost:PORT’` as the URL prop).
9895

96+
**App.jsx:**
9997
```
10098
// App.jsx file
10199
@@ -110,10 +108,93 @@ const App = () => {
110108
/>
111109
)
112110
}
111+
112+
export default App;
113+
```
114+
115+
## Setting Up Public Endpoint/URL Using a Secure Tunnel Service
116+
In order to create a publicly accessible URL that will allow you to share access to your localhost server, you have a number of different options but a simple option is to use a secure tunnel service. One such free, secure tunnel service that you can use to create a secure, encrypted, publicly accessible endpoint/URL that other users can access over the Internet is ngrok.
117+
118+
ngrok Secure Tunnels operate by using a locally installed ngrok agent to establish a private connection to the ngrok service. Your localhost development server is mapped to an ngrok.io sub-domain, which a remote user can then access. Once the connection is established, you get a public endpoint that you or others can use to access your local port. When a user hits the public ngrok endpoint, the ngrok edge figures out where to route the request and forwards the request over an encrypted connection to the locally running ngrok agent.
119+
120+
Thus, you do not need to expose ports, set up forwarding, or make any other network changes. You can simply install [ngrok npm package](https://www.npmjs.com/package/ngrok) and run it.
121+
122+
### Instructions for Using ngrok With RTConnect
123+
1. Sign up for a free ngrok account, verify your email address, and copy your authorization token.
124+
125+
2. Run the following command and replace with add your own authorization token:
126+
```
127+
config authtoken <your authorization token>
128+
```
113129

130+
3. Install the ngrok npm package globally:
131+
```
132+
npm install ngrok -g
133+
```
134+
135+
4. Start your app - make sure your server is running before you initiate the ngrok tunnel.
136+
137+
* The following is a a basic example of what your App.jsx and server.js files might look like at this point if you used `npx create-react-app`. If you're using a proxy server, then the default port when you run `npm start` is 3000 so set your server port to something else such as 8080.
138+
139+
**App.jsx:**
140+
```
141+
// App.jsx file
142+
143+
import React from 'react';
144+
import VideoCall from 'rtconnect';
145+
146+
const App = () => {
147+
return (
148+
<VideoCall
149+
URL={'ws://localhost:8080'}
150+
mediaOptions={controls}
151+
/>
152+
)
153+
}
154+
114155
export default App;
115156
```
116157

158+
**server.js:**
159+
```
160+
// server.js
161+
162+
const path = require('path');
163+
const express = require('express');
164+
const bodyParser = require('body-parser');
165+
const ngrok = require('ngrok');
166+
const PORT = 8080;
167+
const { SignalingChannel } = require('rtconnect'); // import the RTConnect Signaling Channel class
168+
const app = express();
169+
170+
app.use(express.json());
171+
app.use(bodyParser.urlencoded({ extended: true }));
172+
173+
app.get('/', (req, res) => {
174+
res.status(200).sendFile(path.resolve(__dirname, '../index.html'));
175+
});
176+
177+
const server = app.listen(PORT, () => {
178+
console.log('Listening on port', PORT);
179+
});
180+
181+
const SignalChannel = new SignalingChannel(server); // instantiate the RTConnect SignalingChannel
182+
183+
SignalChannel.initializeConnection(); // invoke initializeConnection() method
184+
```
185+
186+
5. To start your ngrok Secure Tunnel, run the following command in your terminal:
187+
```
188+
ngrok http 3000 --host-header="localhost:3000"
189+
```
190+
191+
* To make the connection more secure, you can enforce basic authorization on a tunnel endpoint - just use the username and password of your choosing:
192+
```
193+
ngrok http 3000 --host-header="localhost:3000" --auth='<username>:<a password>`
194+
```
195+
196+
6. Copy the https forwarding URL from the terminal and paste it into a new browser tab or send the link to a remote user.
197+
117198

118199
## <a name="errors" /> Polyfill Errors
119200

@@ -197,7 +278,6 @@ Yoojin Chang | [GitHub](https://github.com/ychang49265) | [LinkedIn](https://www
197278
Louis Disen | [GitHub](https://github.com/LouisDisen) | [LinkedIn](https://www.linkedin.com/in/louis-disen/)
198279
<br>
199280

200-
---
201281

202-
## <a name="support"/> ## A big shoutout to all of RTConnect's stargazers! Thank you!
203-
[![Thanks to all stargazers](https://git-lister.onrender.com/api/stars/oslabs-beta/RTConnect)](https://github.com/oslabs-beta/RTConnect/stargazers)
282+
## <a name="support"/>A big shoutout to all of RTConnect's stargazers! Thank you!
283+
[![Thank you to all of RTConnect's stargazers](https://git-lister.onrender.com/api/stars/oslabs-beta/RTConnect)](https://github.com/oslabs-beta/RTConnect/stargazers)

‎lib/__tests__/react-test/VideoCall.unit.test.tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@ import { render, screen, fireEvent } from '@testing-library/react';
55
import VideoCall from '../../src/components/VideoCall';
66

77
describe('VideoCall', () => {
8-
it('Check Submit Username button - click event fired', () => {
9-
const Url = 'ws://localhost:3000';
10-
const options = {
11-
controls: true,
12-
style: {
13-
width: '640px',
14-
height: '480px'
15-
}
16-
};
8+
const Url = 'ws://localhost:3000';
9+
const options = {
10+
controls: true,
11+
style: {
12+
width: '640px',
13+
height: '480px'
14+
}
15+
};
16+
17+
const { container } = render(<VideoCall URL={Url} mediaOptions={options}/>);
18+
19+
it('Check Submit Username button', () => {
1720

18-
const { container } = render(<VideoCall URL={Url} mediaOptions={options}/>);
1921
const submitBtn = screen.getByTestId('submit-username-btn');
2022
expect(submitBtn.innerHTML).toBe('Submit Username');
2123
// fireEvent.click(submitBtn);

‎package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,16 @@
1717
"url": "git+https://github.com/oslabs-beta/RTConnect.git"
1818
},
1919
"keywords": [
20-
"React",
21-
"React library",
20+
"react",
21+
"react library",
22+
"react component",
23+
"live streaming",
24+
"video",
25+
"screen sharing",
2226
"WebRTC",
2327
"WebSockets",
2428
"video calls",
29+
"video conferencing",
2530
"real time communication",
2631
"live video conferencing",
2732
"developer library"

0 commit comments

Comments
 (0)