11# IP Camera
2- ![ Preview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/preview.gif?raw=true )
32
4- [ Fullscreen ] ( https://youtu.be/NtQ_Al-56Qs )
3+ [ ![ Preview ] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/preview.gif?raw=true ) ]( https://youtu.be/NtQ_Al-56Qs )
54
65## Overview
6+
77![ Overview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/high_level_overview.png?raw=true )
88
99## How to Use
10- You can either watch this video or follow the steps below.
10+
11+ You can either watch the video above or follow the steps below.
1112
1213### How to Start Live Streaming
14+
13151 . Start the Video Server. By default, the Video Server launches 3 sockets, each acting as a server:
1416 - WebSocket Server (runs on port 1234)
1517 - MJPEG Server (runs on port 4444)
1618 - Camera Server (runs on port 4321)
17-
18192 . Install the app on your phone.
19203 . Navigate to the app's settings screen and set up your camera server's IP. For example: ` 192.168.178.101:4321 `
20214 . Open the stream screen and click the "Start streaming" button.
@@ -23,29 +24,34 @@ You can either watch this video or follow the steps below.
2324---
2425
2526### Watching the Stream
27+
2628The stream can be watched from either your browser, the Web App, or apps like VLC Media Player.
2729
2830### Browser
31+
2932Open your favorite web browser and navigate to your MJPEG Server's IP address. For example:
3033` http://192.168.178.101:4444 `
3134
32- ![ Preview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/browser.gif?raw=true )
35+ [ ![ Browser Preview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/browser.gif?raw=true )] ( https://youtu.be/NtQ_Al-56Qs )
3336
3437### VLC Media Player
38+
3539Open VLC Media Player. Go to ** File → Open Network → Network** and enter your MJPEG Server's IP address. For example:
3640` http://192.168.178.101:4444/ `
3741
38- ![ Preview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/vlc.gif?raw=true )
42+ [ ![ VLC Preview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/vlc.gif?raw=true )] ( https://youtu.be/NtQ_Al-56Qs )
3943
4044### The Web App
45+
41461 . Navigate to the Web App's root directory and execute ` webpack serve ` in your terminal.
42472 . Open your browser and go to ` http://localhost:8080/ ` .
43483 . Go to the settings page and enter your WebSocket Server's IP address. For example: ` 192.168.178.101:1234 `
44494 . Navigate to the streaming page at ` http://localhost:8080/stream.html ` and click the "Connect" button.
4550
46- ![ Preview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/webapp.gif?raw=true )
51+ [ ![ Web App Preview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/webapp.gif?raw=true )] ( https://youtu.be/NtQ_Al-56Qs )
4752
4853### Configuring the Web App's Server
54+
4955> ** Note:** This section is only required if you'd like to take screenshots from the Web App.
5056
51571 . Open the Web App's server project.
@@ -57,4 +63,5 @@ Open VLC Media Player. Go to **File → Open Network → Network** and enter you
57637 . Take screenshots from ` http://localhost:8080/stream.html ` .
58648 . View your screenshots at ` http://localhost:8080/gallery.html ` .
5965
60- ![ Preview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/webapp_gallery.gif?raw=true )
66+ [ ![ Web App Gallery Preview] ( https://github.com/BalioFVFX/IP-Camera/blob/main/media/webapp_gallery.gif?raw=true )] ( https://youtu.be/NtQ_Al-56Qs )
67+
0 commit comments