482 lines
14 KiB
JavaScript
482 lines
14 KiB
JavaScript
/**
|
|
* Speed of pan and tilt
|
|
* @type {number} 0 - 3F (hex) / 63 (dec)
|
|
*/
|
|
let pan_speed = 20;
|
|
let tilt_speed = 20;
|
|
let video_quality = "LQ";
|
|
/**
|
|
* @type {WebSocket}
|
|
*/
|
|
let ws;
|
|
|
|
let camerastream;
|
|
|
|
|
|
|
|
let files = [null,null,null,null,null];
|
|
|
|
let getbase64handle;
|
|
let getsysteminfohandle;
|
|
|
|
window.addEventListener("unload",function (){
|
|
clearInterval(getbase64handle);
|
|
clearInterval(getsysteminfohandle);
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "STOP AUDIO",
|
|
data: 0
|
|
}));
|
|
|
|
// wait a while
|
|
const start = Date.now();
|
|
while(Date.now()-start<200){}
|
|
}
|
|
|
|
ws.close();
|
|
})
|
|
|
|
window.addEventListener("load", function (){
|
|
camerastream = document.getElementById("camerastream");
|
|
// Update camera stream every 50ms / 20fps
|
|
getbase64handle = setInterval(function (){
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "GET BASE64",
|
|
data: video_quality
|
|
}));
|
|
|
|
} else update_camerastream(null);
|
|
},1000/15);
|
|
|
|
getsysteminfohandle = setInterval(function (){
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "GET SYSTEM INFO",
|
|
data: 0
|
|
}));
|
|
}
|
|
}, 5000);
|
|
|
|
ws = new WebSocket("/ws");
|
|
|
|
ws.onopen = function(){
|
|
console.log("Connected to the server");
|
|
|
|
// request basic parameters
|
|
ws.send(JSON.stringify({
|
|
command: "GET MAX ZOOM",
|
|
data: 0
|
|
}));
|
|
ws.send(JSON.stringify({
|
|
command: "GET VOLUME",
|
|
data: 0
|
|
}));
|
|
ws.send(JSON.stringify({
|
|
command: "GET ZOOM",
|
|
data: 0
|
|
}));
|
|
ws.send(JSON.stringify({
|
|
command: "GET RESOLUTION",
|
|
data: 0
|
|
}));
|
|
ws.send(JSON.stringify({
|
|
command: "GET AUDIOFILES",
|
|
data: 0
|
|
}))
|
|
|
|
}
|
|
ws.onmessage = function(event){
|
|
//console.log("Received data from server: " + event.data);
|
|
/**
|
|
* @type {{reply: string, data: string|number, additional: string}} dx
|
|
*/
|
|
let dx = JSON.parse(event.data);
|
|
switch (dx.reply){
|
|
case "GET BASE64":
|
|
if (dx.data.startsWith("data:image/jpeg;base64,")){
|
|
update_camerastream(dx.data);
|
|
} else update_camerastream(null);
|
|
if (dx.additional && dx.additional.length>0){
|
|
let stat = JSON.parse(dx.additional);
|
|
if (Array.isArray(stat) && stat.length === 3){
|
|
$('#streaming_status').html("Streaming at "+stat[0]+"x"+stat[1]+" "+stat[2]+"fps");
|
|
}
|
|
}
|
|
break;
|
|
case "SET VOLUME":
|
|
console.log("Set Volume: "+dx.data);
|
|
break;
|
|
case "GET VOLUME":
|
|
console.log("Get Volume: "+dx.data);
|
|
$('#customRange').val(dx.data);
|
|
break;
|
|
case "GET MAX ZOOM":
|
|
console.log("Get Max Zoom: "+dx.data);
|
|
let zoom = document.getElementById("zoom");
|
|
zoom.min = 1;
|
|
zoom.max = dx.data;
|
|
break;
|
|
case "GET ZOOM":
|
|
document.getElementById("zoom").value = dx.data;
|
|
console.log("Get Zoom: "+dx.data);
|
|
break;
|
|
case "GET RESOLUTION":
|
|
console.log("Get Resolution: "+dx.data);
|
|
break;
|
|
case "PAN LEFT":
|
|
console.log("Pan Left");
|
|
break;
|
|
case "PAN RIGHT":
|
|
console.log("Pan Right");
|
|
break;
|
|
case "TILT UP":
|
|
console.log("Tilt Up");
|
|
break;
|
|
case "TILT DOWN":
|
|
console.log("Tilt Down");
|
|
break;
|
|
case "STOP MOVEMENT":
|
|
console.log("Stop Movement");
|
|
break;
|
|
case "SET ZOOM":
|
|
console.log("Set Zoom: "+dx.data);
|
|
break;
|
|
case "PLAY AUDIO":
|
|
console.log("Play Audio: "+dx.data);
|
|
if (dx.data.startsWith("Failed")){
|
|
alert(dx.data);
|
|
} else $('#status_player').html("Playing Audio "+dx.data);
|
|
break;
|
|
case "STOP AUDIO":
|
|
console.log("Stop Audio");
|
|
document.getElementById("status_player").innerHTML = "Stop Playback";
|
|
break;
|
|
case 'SET VIDEO QUALITY':
|
|
console.log("Set Video Quality: "+dx.data);
|
|
break;
|
|
case "GET SYSTEM INFO":
|
|
//console.log("Get System Info: "+dx.data);
|
|
/**
|
|
* @type {{cpu_temperature: string, ram_usage: string, cpu: string, cpu0: string, cpu1: string, cpu2: string, cpu3: string}} systeminfo
|
|
*/
|
|
let systeminfo = JSON.parse(dx.data);
|
|
if (systeminfo.cpu_temperature && systeminfo.cpu_temperature.length>0) $('#cpu_temperature').html(`${systeminfo.cpu_temperature} °C`);
|
|
if (systeminfo.cpu && systeminfo.cpu.length>0) $('#cpu_usage').html(`${systeminfo.cpu} %`);
|
|
if (systeminfo.ram_usage && systeminfo.ram_usage.length>0) $('#ram_usage').html(`${systeminfo.ram_usage} %`);
|
|
break;
|
|
case "GET AUDIOFILES":
|
|
console.log("Get Audio Files: "+dx.data);
|
|
let audiofiles = JSON.parse(dx.data);
|
|
if (audiofiles.preset1 && audiofiles.preset1.length>0 && audiofiles.preset1!== "null") {
|
|
files[0] = audiofiles.preset1;
|
|
play_on(1);
|
|
} else {
|
|
files[0] = null;
|
|
play_off(1);
|
|
}
|
|
if (audiofiles.preset2 && audiofiles.preset2.length>0 && audiofiles.preset2!== "null") {
|
|
files[1] = audiofiles.preset2;
|
|
play_on(2);
|
|
} else {
|
|
files[1] = null;
|
|
play_off(2);
|
|
}
|
|
if (audiofiles.preset3 && audiofiles.preset3.length>0 && audiofiles.preset3!== "null") {
|
|
files[2] = audiofiles.preset3;
|
|
play_on(3);
|
|
} else {
|
|
files[2] = null;
|
|
play_off(3);
|
|
}
|
|
if (audiofiles.preset4 && audiofiles.preset4.length>0 && audiofiles.preset4!== "null") {
|
|
files[3] = audiofiles.preset4;
|
|
play_on(4);
|
|
} else {
|
|
files[3] = null;
|
|
play_off(4);
|
|
}
|
|
if (audiofiles.preset5 && audiofiles.preset5.length>0 && audiofiles.preset5!== "null") {
|
|
files[4] = audiofiles.preset5;
|
|
play_on(5);
|
|
} else {
|
|
files[4] = null;
|
|
play_off(5);
|
|
}
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
ws.onclose = function(){
|
|
console.log("Connection closed");
|
|
}
|
|
ws.onerror = function(){
|
|
console.log("Error in connection");
|
|
}
|
|
|
|
set_pan_speed(32);
|
|
set_tilt_speed(32);
|
|
})
|
|
|
|
|
|
|
|
/**
|
|
* Update camera stream
|
|
* @param {String} value
|
|
*/
|
|
function update_camerastream(value){
|
|
if (camerastream){
|
|
if (value && value.length>0){
|
|
camerastream.src = value;
|
|
} else {
|
|
if (camerastream.src!== "public/images/not-available.png") camerastream.src = "public/images/not-available.png";
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function play_off(index){
|
|
$('#div'+index).prop("className", "button-container div-disabled");
|
|
$('#btn_play'+index).prop("className", "btn-play1 show text-light");
|
|
|
|
}
|
|
|
|
function play_on(index){
|
|
$('#div'+index).prop("className", "button-container");
|
|
$('#btn_play'+index).prop("className", "btn-play1 show");
|
|
}
|
|
|
|
function show_play_and_hide_stop(index){
|
|
$('#btn_play'+index).prop("className", "btn-play1 show");
|
|
$('#btn_stop'+index).prop("className", "btn-play1 hide");
|
|
}
|
|
|
|
function show_stop_and_hide_play(index){
|
|
$('#btn_play'+index).prop("className", "btn-play1 hide");
|
|
$('#btn_stop'+index).prop("className", "btn-play1 show");
|
|
|
|
}
|
|
|
|
function allplay(){
|
|
for (let i = 0; i < 5; i++) {
|
|
if (files[i]) play_on(i+1);
|
|
}
|
|
}
|
|
|
|
function play_button(index){
|
|
show_stop_and_hide_play(index);
|
|
$('#status_player').html("Play");
|
|
for (let i = 1; i <= 5; i++){
|
|
if (i!==index) play_off(i);
|
|
}
|
|
send_play_audio(index);
|
|
}
|
|
|
|
function stop_button(index){
|
|
show_play_and_hide_stop(index);
|
|
$('#status_player').html("Stop");
|
|
|
|
allplay();
|
|
send_stop_audio();
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Send command to stop audio
|
|
*/
|
|
function send_stop_audio(){
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "STOP AUDIO",
|
|
data: 0
|
|
}));
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
|
|
/**
|
|
* Send command to play audio
|
|
* @param {number} index 1 - 5
|
|
*/
|
|
function send_play_audio(index){
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "PLAY AUDIO",
|
|
data: index
|
|
}));
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
|
|
function unmute(){
|
|
$('#mute').prop("className", "btn-mute show");
|
|
$('#unmute').prop("className", "btn-mute hide");
|
|
console.log("unmute")
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "UNMUTE",
|
|
data: 0
|
|
}));
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
function mute(){
|
|
$('#mute').prop("className", "btn-mute hide");
|
|
$('#unmute').prop("className", "btn-mute show");
|
|
|
|
console.log("mute")
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "MUTE",
|
|
data: 0
|
|
}));
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
|
|
function btn_center_off(){
|
|
$('#btn_center').prop("className", "btn-center-unactive fa-solid fa-circle");
|
|
}
|
|
|
|
function btn_up(){
|
|
console.log("btn_up")
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "TILT UP",
|
|
data: tilt_speed
|
|
}));
|
|
btn_center_off()
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
function btn_left(){
|
|
console.log("btn_left")
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "PAN LEFT",
|
|
data: pan_speed
|
|
}));
|
|
btn_center_off();
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
function btn_right(){
|
|
console.log("btn_right")
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "PAN RIGHT",
|
|
data: pan_speed
|
|
}));
|
|
btn_center_off()
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
function btn_down(){
|
|
console.log("btn_down")
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "TILT DOWN",
|
|
data: tilt_speed
|
|
}));
|
|
btn_center_off()
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
|
|
function stop_movement(){
|
|
console.log("stop_movement")
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "STOP MOVEMENT",
|
|
data: 0
|
|
}));
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
|
|
function set_zoom(){
|
|
let zoom = document.getElementById("zoom");
|
|
console.log("set_zoom "+zoom.value)
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "SET ZOOM",
|
|
data: zoom.value
|
|
}));
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
|
|
function set_volumeoutput(value){
|
|
$('#volumebarvalue').val(value);
|
|
|
|
console.log("set_volumeoutput "+value)
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "SET VOLUME",
|
|
data: value
|
|
}));
|
|
} else console.log("WebSocket is not open");
|
|
}
|
|
|
|
function set_pan_speed(value){
|
|
pan_speed = value;
|
|
console.log("set_pan_speed "+value);
|
|
clearpan();
|
|
let classvalue = "btn btn-dark btn-sm";
|
|
switch(pan_speed){
|
|
case 16:
|
|
$('#pan1').prop("className", classvalue );
|
|
break;
|
|
case 32:
|
|
$('#pan2').prop("className", classvalue);
|
|
break;
|
|
case 48:
|
|
$('#pan3').prop("className", classvalue);
|
|
break;
|
|
case 63:
|
|
$('#pan4').prop("className", classvalue);
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
function set_tilt_speed(value){
|
|
tilt_speed = value;
|
|
console.log("set_tilt_speed "+value);
|
|
cleartilt();
|
|
let classvalue = "btn btn-dark btn-sm";
|
|
switch (tilt_speed){
|
|
case 16:
|
|
$('#tilt1').prop("className", classvalue);
|
|
break;
|
|
case 32:
|
|
$('#tilt2').prop("className", classvalue);
|
|
break;
|
|
case 48:
|
|
$('#tilt3').prop("className", classvalue);
|
|
break;
|
|
case 63:
|
|
$('#tilt4').prop("className", classvalue);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Pan Tilt Speed
|
|
function clearpan(){
|
|
for(let i = 1; i <= 4; i++){
|
|
$('#pan'+i).prop("className", "btn btn-outline-dark btn-sm");
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function cleartilt(){
|
|
for(let i = 1; i <= 4; i++){
|
|
$('#tilt'+i).prop("className", "btn btn-outline-dark btn-sm");
|
|
}
|
|
}
|
|
|
|
function change_video_quality(){
|
|
let btn = document.getElementById("quality_video")
|
|
video_quality = btn.checked?"HQ":"LQ";
|
|
}
|
|
|
|
|
|
|