mirror of
http://git.sublab.org/cctv-control/
synced 2025-04-16 03:10:15 +02:00
initial commit
This commit is contained in:
commit
918591b770
19 changed files with 338 additions and 0 deletions
13
cam.html
Normal file
13
cam.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="js/cctv-control.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" type="text/css" href="css/cam.css">
|
||||
</head>
|
||||
<body onkeydown="keyDown(event)">
|
||||
<div id="screen">
|
||||
<img src="img/testbild.gif" class="fullscreen">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
12
css/cam.css
Normal file
12
css/cam.css
Normal file
|
@ -0,0 +1,12 @@
|
|||
img.fullscreen {
|
||||
min-height: 100%;
|
||||
min-width: 1024px;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
}
|
65
img/arrow.svg
Normal file
65
img/arrow.svg
Normal file
|
@ -0,0 +1,65 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="100"
|
||||
height="100"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="arrow.svg"
|
||||
inkscape:export-filename="/home/olf/Projekte/Kunstprojekt-CCTV/js-interface/down.png"
|
||||
inkscape:export-xdpi="99.989998"
|
||||
inkscape:export-ydpi="99.989998">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="3.959798"
|
||||
inkscape:cx="72.885621"
|
||||
inkscape:cy="46.110712"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1280"
|
||||
inkscape:window-height="763"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="16"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-952.36218)">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||
d="m 49.999995,1042.3622 40.00001,-80.00001 -80.00001,0 z"
|
||||
id="path2985"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
</g>
|
||||
</svg>
|
After (image error) Size: 1.9 KiB |
BIN
img/down.png
Normal file
BIN
img/down.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 983 B |
BIN
img/left.png
Normal file
BIN
img/left.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 753 B |
BIN
img/right.png
Normal file
BIN
img/right.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 742 B |
BIN
img/testbild-1.png
Normal file
BIN
img/testbild-1.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 696 KiB |
BIN
img/testbild-2.png
Normal file
BIN
img/testbild-2.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 685 KiB |
BIN
img/testbild-3.png
Normal file
BIN
img/testbild-3.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 686 KiB |
BIN
img/testbild-4.png
Normal file
BIN
img/testbild-4.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 683 KiB |
BIN
img/testbild-4.xcf
Normal file
BIN
img/testbild-4.xcf
Normal file
Binary file not shown.
BIN
img/testbild.gif
Normal file
BIN
img/testbild.gif
Normal file
Binary file not shown.
After ![]() (image error) Size: 1 MiB |
BIN
img/testbild.png
Normal file
BIN
img/testbild.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 717 KiB |
BIN
img/testbild.xcf
Normal file
BIN
img/testbild.xcf
Normal file
Binary file not shown.
BIN
img/up.png
Normal file
BIN
img/up.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 977 B |
BIN
js/.main.js.swp
Normal file
BIN
js/.main.js.swp
Normal file
Binary file not shown.
93
js/cctv-control.js
Normal file
93
js/cctv-control.js
Normal file
|
@ -0,0 +1,93 @@
|
|||
// Small lib to
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
|
||||
var cam = 0;
|
||||
var camHost = "172.22.80.56:8080";
|
||||
var controlHost = "172.22.80.56:8080";
|
||||
|
||||
//create event which is triggered when DOM is ready
|
||||
window.onDomReady = initReady;
|
||||
|
||||
//change from testbild to default cam when DOM is ready
|
||||
window.onDomReady(changeCam);
|
||||
|
||||
function initReady(fn) {
|
||||
if(document.addEventListener) {
|
||||
document.addEventListener("DOMContentLoaded", fn, false);
|
||||
}
|
||||
}
|
||||
|
||||
//change currently displayed camera to the one in cam variable
|
||||
function changeCam() {
|
||||
var display = document.getElementById('screen');
|
||||
if (cam <= 7 && cam >= 0) {
|
||||
display.innerHTML = '<img src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
|
||||
}
|
||||
else {
|
||||
display.innerHTML = '<img src="img/testbild.png" />';
|
||||
}
|
||||
}
|
||||
|
||||
//send control command to currently selected camera
|
||||
function controlCam(direction) {
|
||||
if (direction == "left" || direction == "right" || direction == "up" || direction == "down") {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("get", "http://" + controlHost + "/cam/" + cam + "/control/" + direction + "left", false);
|
||||
request.send();
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
function keyDown(event) {
|
||||
|
||||
switch(event.keyCode) {
|
||||
case 49: // 1
|
||||
cam = 0;
|
||||
changeCam();
|
||||
break;
|
||||
case 50: // 2
|
||||
cam = 1;
|
||||
changeCam();
|
||||
break;
|
||||
case 51: // 3
|
||||
cam = 2;
|
||||
changeCam();
|
||||
break;
|
||||
case 52: // 4
|
||||
cam = 3;
|
||||
changeCam();
|
||||
break;
|
||||
case 53: // 5
|
||||
cam = 4;
|
||||
changeCam();
|
||||
break;
|
||||
case 54: // 6
|
||||
cam = 5;
|
||||
changeCam();
|
||||
break;
|
||||
case 55: // 7
|
||||
cam = 6;
|
||||
changeCam();
|
||||
break;
|
||||
case 56: // 8
|
||||
cam = 7;
|
||||
changeCam();
|
||||
break;
|
||||
case 37: // arrow left
|
||||
controlCam("left");
|
||||
break;
|
||||
case 38: // arrow up
|
||||
controlCam("up");
|
||||
break;
|
||||
case 39: // arrow right
|
||||
controlCam("right");
|
||||
break;
|
||||
case 40: // arrow down
|
||||
controlCam("down");
|
||||
break;
|
||||
}
|
||||
}
|
100
js/main.js
Normal file
100
js/main.js
Normal file
|
@ -0,0 +1,100 @@
|
|||
// CCTV Control
|
||||
//
|
||||
// Author: Florian Raemisch
|
||||
// Email: olf@subsignal.org
|
||||
//
|
||||
// cctv-control is a webinterface to control and view
|
||||
// mjpeg encoded videos by cctv cameras which are
|
||||
// proxied by mjpegplexer. camera control is possible
|
||||
// with arrow-keys, if mjpegplexer is configured
|
||||
// properly.
|
||||
//
|
||||
// This Software is licensed under the GPL Version 3, 29 June 2007
|
||||
|
||||
|
||||
var cam = 0;
|
||||
var camHost = "172.22.80.56:8080";
|
||||
var controlHost = "172.22.80.56:8080";
|
||||
|
||||
//create event which is triggered when DOM is ready
|
||||
window.onDomReady = initReady;
|
||||
|
||||
//change from testbild to default cam when DOM is ready
|
||||
window.onDomReady(changeCam);
|
||||
|
||||
function initReady(fn) {
|
||||
if(document.addEventListener) {
|
||||
document.addEventListener("DOMContentLoaded", fn, false);
|
||||
}
|
||||
}
|
||||
|
||||
//change currently displayed camera to the one in cam variable
|
||||
function changeCam() {
|
||||
var display = document.getElementById('screen');
|
||||
if (cam <= 7 && cam >= 0) {
|
||||
display.innerHTML = '<img src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
|
||||
}
|
||||
else {
|
||||
display.innerHTML = '<img src="img/testbild.png" />';
|
||||
}
|
||||
}
|
||||
|
||||
//send control command to currently selected camera
|
||||
function controlCam(direction) {
|
||||
if (direction == "left" || direction == "right" || direction == "up" || direction == "down") {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("get", "http://" + controlHost + "/cam/" + cam + "/control/" + direction + "left", false);
|
||||
request.send();
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
function keyDown(event) {
|
||||
|
||||
switch(event.keyCode) {
|
||||
case 49: // 1
|
||||
cam = 0;
|
||||
changeCam();
|
||||
break;
|
||||
case 50: // 2
|
||||
cam = 1;
|
||||
changeCam();
|
||||
break;
|
||||
case 51: // 3
|
||||
cam = 2;
|
||||
changeCam();
|
||||
break;
|
||||
case 52: // 4
|
||||
cam = 3;
|
||||
changeCam();
|
||||
break;
|
||||
case 53: // 5
|
||||
cam = 4;
|
||||
changeCam();
|
||||
break;
|
||||
case 54: // 6
|
||||
cam = 5;
|
||||
changeCam();
|
||||
break;
|
||||
case 55: // 7
|
||||
cam = 6;
|
||||
changeCam();
|
||||
break;
|
||||
case 56: // 8
|
||||
cam = 7;
|
||||
changeCam();
|
||||
break;
|
||||
case 37: // arrow left
|
||||
controlCam("left");
|
||||
break;
|
||||
case 38: // arrow up
|
||||
controlCam("up");
|
||||
break;
|
||||
case 39: // arrow right
|
||||
controlCam("right");
|
||||
break;
|
||||
case 40: // arrow down
|
||||
controlCam("down");
|
||||
break;
|
||||
}
|
||||
}
|
55
js/main.js.bak
Normal file
55
js/main.js.bak
Normal file
|
@ -0,0 +1,55 @@
|
|||
var cam;
|
||||
|
||||
function keyDown(event) {
|
||||
if (event.keyCode == 49) {
|
||||
var display = document.getElementById('screen');
|
||||
cam = 0;
|
||||
display.innerHTML = '<img src="http://172.22.80.56:8080/cam/0/stream.mjpeg" />'
|
||||
}
|
||||
|
||||
if (event.keyCode == 50) {
|
||||
var display = document.getElementById('screen');
|
||||
cam = 1;
|
||||
display.innerHTML = '<img src="http://172.22.80.56:8080/cam/1/stream.mjpeg" />'
|
||||
}
|
||||
|
||||
if (event.keyCode == 51) {
|
||||
var display = document.getElementById('screen');
|
||||
cam = 2;
|
||||
display.innerHTML = '<img src="http://172.22.80.56:8080/cam/2/stream.mjpeg" />'
|
||||
}
|
||||
|
||||
if (event.keyCode == 52) {
|
||||
var display = document.getElementById('screen');
|
||||
display.innerHTML = '<img src="testbild-4.png" />'
|
||||
}
|
||||
|
||||
if (event.keyCode == 37) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("get", "http://172.22.80.56:8080/cam/" + cam + "/control/left", false);
|
||||
request.send();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (event.keyCode == 38) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("get", "http://172.22.80.56:8080/cam/" + cam +"/control/up", false);
|
||||
request.send();
|
||||
return false;
|
||||
|
||||
}
|
||||
if (event.keyCode == 39) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("get", "http://172.22.80.56:8080/cam/" + cam +"/control/right", false);
|
||||
request.send();
|
||||
return false;
|
||||
}
|
||||
if (event.keyCode == 40) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("get", "http://172.22.80.56:8080/cam/" + cam +"/control/down", false);
|
||||
request.send();
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
}
|
Loading…
Add table
Reference in a new issue