|
6 | 6 | ## Overview |
7 | 7 |  |
8 | 8 |
|
9 | | -## How to use |
| 9 | +## How to Use |
10 | 10 | You can either watch this video or follow the steps below. |
11 | | -### How to start live streaming |
12 | | -1. Start the Video server. By default the Video server launches 3 sockets, each acting as a server: |
13 | | -- WebSocket Server (runs on port 1234). |
14 | | -- MJPEG Server (runs on port 4444). |
15 | | -- Camera Server (runs on port 4321). |
| 11 | + |
| 12 | +### How to Start Live Streaming |
| 13 | +1. Start the Video Server. By default, the Video Server launches 3 sockets, each acting as a server: |
| 14 | + - WebSocket Server (runs on port 1234) |
| 15 | + - MJPEG Server (runs on port 4444) |
| 16 | + - Camera Server (runs on port 4321) |
16 | 17 |
|
17 | 18 | 2. Install the app on your phone. |
18 | | -3. Navigate to app's settings screen and setup your Camera's server IP. For example `192.168.0.101:4321`. |
19 | | -4. Open the stream screen and click the Start streaming button. |
20 | | -5. Now your phone sends video data to your Camera Server. |
| 19 | +3. Navigate to the app's settings screen and set up your camera server's IP. For example: `192.168.0.101:4321` |
| 20 | +4. Open the stream screen and click the "Start streaming" button. |
| 21 | +5. Your phone is now sending video data to your Camera Server. |
| 22 | + |
21 | 23 | --- |
22 | | -### Watching the stream |
23 | | -The stream can be watched from either your browser, the Web App or apps like VLC media player. |
| 24 | + |
| 25 | +### Watching the Stream |
| 26 | +The stream can be watched from either your browser, the Web App, or apps like VLC Media Player. |
24 | 27 |
|
25 | 28 | ### Browser |
26 | | -Open your favorite web browser and navigate to your MJPEG server's IP address. For example `http://192.168.0.101:4444` |
| 29 | +Open your favorite web browser and navigate to your MJPEG Server's IP address. For example: |
| 30 | +`http://192.168.0.101:4444` |
27 | 31 |
|
28 | 32 |  |
29 | 33 |
|
30 | | -### VLC meida player |
31 | | -Open the VLC media player, File -> Open Network -> Network and write your MJPEG's server IP address. For example `http://192.168.0.101:4444/` |
| 34 | +### VLC Media Player |
| 35 | +Open VLC Media Player. Go to **File → Open Network → Network** and enter your MJPEG Server's IP address. For example: |
| 36 | +`http://192.168.0.101:4444/` |
32 | 37 |
|
33 | 38 |  |
| 39 | + |
34 | 40 | ### The Web App |
35 | | -1. Navigate to the Web app root directory and in your terminal execute `webpack serve`. |
36 | | -2. Open your browser and navigate to `http://localhost:8080/`. |
37 | | -3. Go to settings and enter your WebSocket server ip address. For example `192.168.0.101:1234`. |
38 | | -4. Go to the streaming page `http://localhost:8080/stream.html` and click the connect button. |
| 41 | +1. Navigate to the Web App's root directory and execute `webpack serve` in your terminal. |
| 42 | +2. Open your browser and go to `http://localhost:8080/`. |
| 43 | +3. Go to the settings page and enter your WebSocket Server's IP address. For example: `192.168.0.101:1234` |
| 44 | +4. Navigate to the streaming page at `http://localhost:8080/stream.html` and click the "Connect" button. |
39 | 45 |
|
40 | 46 |  |
41 | 47 |
|
42 | | -### Configuring the Web App's server |
43 | | -Note: This section is required only if you'd like to be able to take screenshots from the Web App. |
| 48 | +### Configuring the Web App's Server |
| 49 | +> **Note:** This section is only required if you'd like to take screenshots from the Web App. |
44 | 50 |
|
45 | | -1. Open the Web App Server project |
46 | | -2. Open index.js and edit the connection object to match your MySQL credentials. |
47 | | -3. Create the required tables by executing the SQL query located in `user.sql` |
48 | | -4. At the root directory execute `node index.js` in your terminal |
49 | | -5. You may have to update the IP that the Web App connects to. You can edit this IP in Web app's `stream.html` file (`BACKEND_URL` const variable) |
50 | | -6. Create a user through the Web App from `http://localhost:8080/register.html` |
51 | | -7. Take screenshots from `http://localhost:8080/stream.html` |
52 | | -8. View your screenshots at `http://localhost:8080/gallery.html` |
| 51 | +1. Open the Web App's server project. |
| 52 | +2. Open `index.js` and edit the connection object to match your MySQL credentials. |
| 53 | +3. Create the required tables by executing the SQL query located in `user.sql`. |
| 54 | +4. From the root directory, run `node index.js` in your terminal. |
| 55 | +5. You may have to update the IP that the Web App connects to. You can edit this IP in the Web App's `stream.html` file (see the `BACKEND_URL` constant). |
| 56 | +6. Create a user through the Web App at `http://localhost:8080/register.html`. |
| 57 | +7. Take screenshots from `http://localhost:8080/stream.html`. |
| 58 | +8. View your screenshots at `http://localhost:8080/gallery.html`. |
53 | 59 |
|
54 | 60 |  |
55 | | ---- |
|
0 commit comments