// 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 = false; //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() { document.getElementById('form').style.visibility = "hidden"; changeCam(); } //change currently displayed camera to the one in cam variable function changeCam() { var display = document.getElementById('screen'); if (cam <= 7 && cam >= 0) { camDisplay = cam + 1; display.innerHTML = '
' + camDisplay + '
'; display.innerHTML += ''; } else { display.innerHTML = ''; } } //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.responseType = "arraybuffer"; xhr.addEventListener("load", function () { if (xhr.status === 200) { blob = new Blob([xhr.response], {type: "image/png"}); 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); showImage(); } }, false); xhr.send(); } function showImage() { //load snapshot from localstorage an display in background var display1 = document.getElementById("camImage"), display2 = document.getElementById("formImage"), stor = localStorage.getItem("snapShot"); if (stor) { display1.setAttribute("src", stor); display2.setAttribute("src", stor); } //make form visible document.getElementById("form").style.visibility = 'visible'; formActive = true; } function printForm() { document.getElementById("form").style.visibility = 'hidden'; formActive = false; changeCam(); } function keyDown(event) { if (formActive == false) { 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; } } }