393 lines
10 KiB
JavaScript
393 lines
10 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;
|
|
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function(){
|
|
camerastream = document.getElementById("camerastream");
|
|
|
|
setInterval(function (){
|
|
if (ws.readyState === WebSocket.OPEN){
|
|
ws.send(JSON.stringify({
|
|
command: "GET BASE64",
|
|
data: video_quality
|
|
}));
|
|
|
|
} else update_camerastream(null);
|
|
},10);
|
|
|
|
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.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){
|
|
$('#streaming_status').html(dx.additional);
|
|
}
|
|
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);
|
|
$('#zoom')
|
|
.attr("max", dx.data)
|
|
.attr("min", 1);
|
|
|
|
|
|
break;
|
|
case "GET ZOOM":
|
|
console.log("Get Zoom: "+dx.data);
|
|
$('#zoom').val(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");
|
|
$('#status_player').html("Stop Playback");
|
|
break;
|
|
case 'SET VIDEO QUALITY':
|
|
console.log("Set Video Quality: "+dx.data);
|
|
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++) 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";
|
|
}
|
|
|
|
|
|
|