mirror of
http://git.sublab.org/mjpegplexer/
synced 2025-07-04 15:06:07 +02:00
added webinterface
This commit is contained in:
Florian
parent
08feea56c8
commit
c35a1c1abb
25 changed files with 738 additions and 6 deletions
244
public/js/cctv-control.js
Normal file
244
public/js/cctv-control.js
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
// 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 = "127.0.0.1:8080";
|
||||
var controlHost = "127.0.0.1:8080";
|
||||
var formActive = 0; //crazy errors if boolean is used here...
|
||||
|
||||
//create event which is triggered when DOM is ready
|
||||
window.onDomReady = initReady;
|
||||
|
||||
//change from testbild to default cam when DOM is ready
|
||||
window.onDomReady(initViewer);
|
||||
|
||||
|
||||
function initReady(fn) {
|
||||
if(document.addEventListener) {
|
||||
document.addEventListener("DOMContentLoaded", fn, false);
|
||||
}
|
||||
}
|
||||
|
||||
//hide the form, and switch on camera
|
||||
function initViewer() {
|
||||
var display = document.getElementById('screen');
|
||||
var tempCam = parseInt(localStorage.getItem('cam'));
|
||||
|
||||
formActive = localStorage.getItem("formActive");
|
||||
if (tempCam <= 7 && tempCam >= 0) {
|
||||
cam = tempCam;
|
||||
}
|
||||
|
||||
//if form was displayed, when page was reloaded, display form
|
||||
if (formActive == 1) {
|
||||
displayCamNumber();
|
||||
display.innerHTML += '<img id="camImage" src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
|
||||
showForm();
|
||||
}
|
||||
else {
|
||||
formActive == 0;
|
||||
document.getElementById('form').style.visibility = "hidden";
|
||||
changeCam();
|
||||
}
|
||||
}
|
||||
|
||||
function displayCamNumber() {
|
||||
var display = document.getElementById('screen');
|
||||
camDisplay = cam + 1;
|
||||
display.innerHTML = '<p class="camNumber">' + camDisplay + '</p>';
|
||||
}
|
||||
|
||||
//change currently displayed camera to the one in cam variable
|
||||
function changeCam() {
|
||||
|
||||
var display = document.getElementById('screen');
|
||||
if (cam <= 7 && cam >= 0) {
|
||||
displayCamNumber();
|
||||
display.innerHTML += '<img id="camImage" src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
|
||||
localStorage.setItem("cam", cam);
|
||||
}
|
||||
else {
|
||||
display.innerHTML = '<img id="camImage" src="img/testbild.gif" />';
|
||||
}
|
||||
}
|
||||
|
||||
//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, false);
|
||||
request.send();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
//save current screenshot in local storage
|
||||
function saveImage() {
|
||||
|
||||
var storageFiles = {}, //local storage object
|
||||
xhr = new XMLHttpRequest(),
|
||||
blob,
|
||||
fileReader = new FileReader(),
|
||||
snapShot = new Image(), //dummy-object to display snapshot
|
||||
imgCanvas = document.createElement("canvas"),
|
||||
imgContext = imgCanvas.getContext("2d");
|
||||
|
||||
|
||||
//xhr.open("GET", 'img/testbild-' + camDisplay + '.png', true);
|
||||
xhr.open("GET", 'http://' + camHost + '/cam/' + cam + '/snapshot.jpg', true);
|
||||
xhr.responseType = "arraybuffer";
|
||||
|
||||
xhr.addEventListener("load", function () {
|
||||
if (xhr.status === 200) {
|
||||
|
||||
blob = new Blob([xhr.response], {type: "image/jpg"});
|
||||
|
||||
|
||||
fileReader.onload = function (evt) {
|
||||
var result = evt.target.result;
|
||||
|
||||
snapShot.src = result;
|
||||
|
||||
try {
|
||||
localStorage.setItem("snapShot", result);
|
||||
}
|
||||
catch (e) {
|
||||
console.log("Storage failed: " + e);
|
||||
}
|
||||
};
|
||||
|
||||
fileReader.readAsDataURL(blob);
|
||||
|
||||
fileReader.onloadend = function() {
|
||||
showForm();
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function showForm() {
|
||||
|
||||
//load snapshot from localstorage
|
||||
var display1 = document.getElementById("camImage"),
|
||||
display2 = document.getElementById("formImage"),
|
||||
stor = localStorage.getItem("snapShot");
|
||||
|
||||
var d = new Date();
|
||||
|
||||
var date = d.getDay();
|
||||
date += '/';
|
||||
date += d.getMonth();
|
||||
date += '/';
|
||||
date += d.getFullYear();
|
||||
|
||||
var time = d.getHours();
|
||||
time += ':';
|
||||
time += d.getMinutes();
|
||||
time += ':';
|
||||
time += d.getSeconds();
|
||||
time += ' Uhr';
|
||||
|
||||
//display loaded image
|
||||
if (stor) {
|
||||
display1.setAttribute("src", stor);
|
||||
display2.setAttribute("src", stor);
|
||||
}
|
||||
|
||||
//insert date in date-field
|
||||
document.getElementById("formDate").value = date + ' ' + time;
|
||||
|
||||
//make form visible
|
||||
document.getElementById("form").style.visibility = 'visible';
|
||||
formActive = 1;
|
||||
localStorage.setItem("formActive", formActive);
|
||||
}
|
||||
|
||||
|
||||
function hideForm() {
|
||||
|
||||
//save form data in local storage for later use
|
||||
localStorage.setItem("formName", document.getElementById('formName').value);
|
||||
localStorage.setItem("formDate", document.getElementById('formDate').value);
|
||||
localStorage.setItem("formAnalysis1", document.getElementById('formAnalysis1').value);
|
||||
localStorage.setItem("formAnalysis2", document.getElementById('formAnalysis2').value);
|
||||
localStorage.setItem("formAnalysis3", document.getElementById('formAnalysis3').value);
|
||||
|
||||
//hide form and unfocus button
|
||||
//otherwise next enter press will trigger print-function
|
||||
document.getElementById('printButton').blur();
|
||||
window.open('print.html', 'Printlayout');
|
||||
document.getElementById("form").style.visibility = 'hidden';
|
||||
formActive = 0;
|
||||
localStorage.setItem("formActive", formActive);
|
||||
changeCam();
|
||||
}
|
||||
|
||||
|
||||
function keyDown(event) {
|
||||
|
||||
// chaning the camera is only possible if the form is not displayed
|
||||
if (formActive != 1) {
|
||||
//numpad has different keycodes!
|
||||
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;
|
||||
case 13: //enter
|
||||
saveImage();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
72
public/js/print.js
Normal file
72
public/js/print.js
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
// 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 popen = '<p id="text">',
|
||||
pclose = '</p>';
|
||||
|
||||
//create event which is triggered when DOM is ready
|
||||
window.onDomReady = initReady;
|
||||
|
||||
//change from testbild to default cam when DOM is ready
|
||||
window.onDomReady(initViewer);
|
||||
|
||||
|
||||
function initReady(fn) {
|
||||
if(document.addEventListener) {
|
||||
document.addEventListener("DOMContentLoaded", fn, false);
|
||||
}
|
||||
}
|
||||
|
||||
function initViewer() {
|
||||
|
||||
//load contents from localStorage
|
||||
var display = document.getElementById("camImage"),
|
||||
meta = document.getElementById("metaContainer"),
|
||||
text = document.getElementById("textContainer"),
|
||||
formName = localStorage.getItem("formName"),
|
||||
formDate = localStorage.getItem("formDate"),
|
||||
formAnalysis1 = localStorage.getItem("formAnalysis1"),
|
||||
formAnalysis2 = localStorage.getItem("formAnalysis2"),
|
||||
formAnalysis3 = localStorage.getItem("formAnalysis3"),
|
||||
camera = localStorage.getItem("cam");
|
||||
stor = localStorage.getItem("snapShot");
|
||||
|
||||
//cameraname is cameraID + 1
|
||||
camera = parseInt(camera) + 1;
|
||||
|
||||
//display loaded data
|
||||
if (stor) {
|
||||
display.setAttribute("src", stor);
|
||||
meta.innerHTML += popen + formName + pclose;
|
||||
meta.innerHTML += popen + formDate + pclose;
|
||||
meta.innerHTML += popen + 'Kamera ' + camera + pclose;
|
||||
text.innerHTML += popen + formAnalysis1 + pclose;
|
||||
text.innerHTML += popen + formAnalysis2 + pclose;
|
||||
text.innerHTML += popen + formAnalysis3 + pclose;
|
||||
}
|
||||
|
||||
//commented out for debugging and layouting purposes
|
||||
print();
|
||||
|
||||
//reset localStorage to default values
|
||||
//localStorage.setItem("formName", "Untersucher");
|
||||
//localStorage.setItem("formDate", "Datum");
|
||||
//localStorage.setItem("formAnalysis1", "Dein Bericht 1");
|
||||
//localStorage.setItem("formAnalysis2", "Dein Bericht 2");
|
||||
//localStorage.setItem("formAnalysis3", "Dein Bericht 3"):
|
||||
|
||||
//commented out for debugging and layouting purposes
|
||||
window.close();
|
||||
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue