initial commit
|
@ -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>
|
|
@ -0,0 +1,12 @@
|
||||||
|
img.fullscreen {
|
||||||
|
min-height: 100%;
|
||||||
|
min-width: 1024px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
}
|
|
@ -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 Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 983 B |
After Width: | Height: | Size: 753 B |
After Width: | Height: | Size: 742 B |
After Width: | Height: | Size: 696 KiB |
After Width: | Height: | Size: 685 KiB |
After Width: | Height: | Size: 686 KiB |
After Width: | Height: | Size: 683 KiB |
After Width: | Height: | Size: 1.0 MiB |
After Width: | Height: | Size: 717 KiB |
After Width: | Height: | Size: 977 B |
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|