Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live preview in PTZ WebUI #177

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Live preview in PTZ WebUI #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
98ce7d1
Fixed viewport for mobile browsers
lkosson May 30, 2022
b96acec
Non-reloading PTZ controls
lkosson May 30, 2022
d189da6
Live preview in PTZ UI
lkosson May 30, 2022
b21b469
Added MJPEG http live streaming endpoint
lkosson Jun 10, 2022
3808cdc
Updated README.md to reflect recent changes
lkosson Jun 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@ You should also be able to find the firmware version by logging in via telnet an
* Change bitrate of RTSP stream
* Get rid of ```p2pcam``` and use an alternative RTSP server

#### 2022-06-10 - Update 19 (lkosson)
* Added async (non-reloading) PTZ controls in Web UI
* Added http://IPAddress:8080/cgi-bin/snapshot endpoint
* Added http://IPAddress:8080/cgi-bin/stream endpoint for streaming MJPEG live feed

#### 2019-22-05 - Update 18 (susw12)
* Adds the ability to have camera connect to WiFi without needing to setup the camera using the app/software.

Expand Down
5 changes: 5 additions & 0 deletions readonlysd/hack/www/cgi-bin/snapshot
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
#!/bin/sh
#
echo "Content-type: image/jpeg"
echo ""
/home/busybox/wget http://localhost:554/snapshot -O -
11 changes: 11 additions & 0 deletions readonlysd/hack/www/cgi-bin/stream
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
#!/bin/sh
#
echo "Content-Type: multipart/x-mixed-replace; boundary=--boundary"
echo ""
while true
do
echo "--boundary"
echo "Content-Type: image/jpeg"
echo ""
/home/busybox/wget http://localhost:554/snapshot -O -
done
36 changes: 25 additions & 11 deletions readonlysd/hack/www/cgi-bin/webui
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ cat <<EOT
<!DOCTYPE html>
<html>
<head>
<title>zsgx1hacks UI</title>
<title>Camera - WebUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-size: 100%;
Expand All @@ -28,31 +29,34 @@ body {
</head>
<body>
<div>

<img id="snapshot" src="snapshot" />
<br />
<button onclick="window.location.href='webui'" id="home">Home</button>
<br />
<br />
<button onclick="window.location.href='webui?command=iron'" id="irledson">IR LEDs On</button>
<button onclick="cmd('iron');" id="irledson">IR LEDs On</button>
<br />
<button onclick="window.location.href='webui?command=iroff'" id="irledsoff">IR LEDs Off</button>
<button onclick="cmd('iroff');" id="irledsoff">IR LEDs Off</button>
<br />
<br />

</div>
<table>
<tr align="center">
<td><button onclick="window.location.href='webui?command=ptzlu'">&#11017;</button></td>
<td><button onclick="window.location.href='webui?command=ptzu'">&#11014;</button></td>
<td><button onclick="window.location.href='webui?command=ptzru'">&#11016;</button></td>
<td><button onclick="cmd('ptzlu');">&#11017;</button></td>
<td><button onclick="cmd('ptzu');">&#11014;</button></td>
<td><button onclick="cmd('ptzru');">&#11016;</button></td>
</tr>
<tr align="center">
<td><button onclick="window.location.href='webui?command=ptzl'">&#11013;</button></td>
<td><button onclick="cmd('ptzl');">&#11013;</button></td>
<td>PTZ</td>
<td><button onclick="window.location.href='webui?command=ptzr'">&#10145;</button></td>
<td><button onclick="cmd('ptzr');">&#10145;</button></td>
</tr>
<tr align="center">
<td><button onclick="window.location.href='webui?command=ptzld'">&#11019;</button></td>
<td><button onclick="window.location.href='webui?command=ptzd'">&#11015;</button></td>
<td><button onclick="window.location.href='webui?command=ptzrd'">&#11018;</button></td>
<td><button onclick="cmd('ptzld');">&#11019;</button></td>
<td><button onclick="cmd('ptzd');">&#11015;</button></td>
<td><button onclick="cmd('ptzrd');">&#11018;</button></td>
</tr>
</table>
<br />
Expand All @@ -66,6 +70,16 @@ Hack Type - $hacktype
<br />
<a href="https://github.com/ant-thomas/zsgx1hacks" target="_blank">ZS-GX1 Hacks - Github</a>

<script>
setInterval(function() { document.getElementById("snapshot").src = "snapshot?t=" + Math.random(); }, 1000);

function cmd(arg) {
var req = new XMLHttpRequest();
req.open("GET", "webui?command=" + arg, false);
req.send(null);
}
</script>

</body></html>
EOT

Expand Down
5 changes: 5 additions & 0 deletions sdcard/hack/www/cgi-bin/snapshot
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
#!/bin/sh
#
echo "Content-type: image/jpeg"
echo ""
/home/busybox/wget http://localhost:554/snapshot -O -
11 changes: 11 additions & 0 deletions sdcard/hack/www/cgi-bin/stream
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
#!/bin/sh
#
echo "Content-Type: multipart/x-mixed-replace; boundary=--boundary"
echo ""
while true
do
echo "--boundary"
echo "Content-Type: image/jpeg"
echo ""
/home/busybox/wget http://localhost:554/snapshot -O -
done
36 changes: 25 additions & 11 deletions sdcard/hack/www/cgi-bin/webui
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ cat <<EOT
<!DOCTYPE html>
<html>
<head>
<title>zsgx1hacks UI</title>
<title>Camera - WebUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-size: 100%;
Expand All @@ -28,31 +29,34 @@ body {
</head>
<body>
<div>

<img id="snapshot" src="snapshot" />
<br />
<button onclick="window.location.href='webui'" id="home">Home</button>
<br />
<br />
<button onclick="window.location.href='webui?command=iron'" id="irledson">IR LEDs On</button>
<button onclick="cmd('iron');" id="irledson">IR LEDs On</button>
<br />
<button onclick="window.location.href='webui?command=iroff'" id="irledsoff">IR LEDs Off</button>
<button onclick="cmd('iroff');" id="irledsoff">IR LEDs Off</button>
<br />
<br />

</div>
<table>
<tr align="center">
<td><button onclick="window.location.href='webui?command=ptzlu'">&#11017;</button></td>
<td><button onclick="window.location.href='webui?command=ptzu'">&#11014;</button></td>
<td><button onclick="window.location.href='webui?command=ptzru'">&#11016;</button></td>
<td><button onclick="cmd('ptzlu');">&#11017;</button></td>
<td><button onclick="cmd('ptzu');">&#11014;</button></td>
<td><button onclick="cmd('ptzru');">&#11016;</button></td>
</tr>
<tr align="center">
<td><button onclick="window.location.href='webui?command=ptzl'">&#11013;</button></td>
<td><button onclick="cmd('ptzl');">&#11013;</button></td>
<td>PTZ</td>
<td><button onclick="window.location.href='webui?command=ptzr'">&#10145;</button></td>
<td><button onclick="cmd('ptzr');">&#10145;</button></td>
</tr>
<tr align="center">
<td><button onclick="window.location.href='webui?command=ptzld'">&#11019;</button></td>
<td><button onclick="window.location.href='webui?command=ptzd'">&#11015;</button></td>
<td><button onclick="window.location.href='webui?command=ptzrd'">&#11018;</button></td>
<td><button onclick="cmd('ptzld');">&#11019;</button></td>
<td><button onclick="cmd('ptzd');">&#11015;</button></td>
<td><button onclick="cmd('ptzrd');">&#11018;</button></td>
</tr>
</table>
<br />
Expand All @@ -66,6 +70,16 @@ Hack Type - $hacktype
<br />
<a href="https://github.com/ant-thomas/zsgx1hacks" target="_blank">ZS-GX1 Hacks - Github</a>

<script>
setInterval(function() { document.getElementById("snapshot").src = "snapshot?t=" + Math.random(); }, 1000);

function cmd(arg) {
var req = new XMLHttpRequest();
req.open("GET", "webui?command=" + arg, false);
req.send(null);
}
</script>

</body></html>
EOT

Expand Down