first commit
This commit is contained in:
400
Html/html/index.js
Normal file
400
Html/html/index.js
Normal file
@@ -0,0 +1,400 @@
|
||||
/**
|
||||
* Speed of pan and tilt
|
||||
* @type {number} 0 - 3F (hex) / 63 (dec)
|
||||
*/
|
||||
let pan_speed = 20;
|
||||
let tilt_speed = 20;
|
||||
|
||||
/**
|
||||
* @type {WebSocket}
|
||||
*/
|
||||
let ws;
|
||||
|
||||
let camerastream;
|
||||
|
||||
let no_stream_counter = 0;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
camerastream = document.getElementById("camerastream");
|
||||
|
||||
setInterval(function (){
|
||||
no_stream_counter++;
|
||||
if (no_stream_counter>=20){
|
||||
if (camerastream){
|
||||
if (camerastream.src !== "public/images/not-available.png"){
|
||||
camerastream.src = "public/images/not-available.png";
|
||||
}
|
||||
}
|
||||
}
|
||||
},100);
|
||||
|
||||
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: "STREAMING STATUS",
|
||||
data: 0
|
||||
}));
|
||||
}
|
||||
ws.onmessage = function(event){
|
||||
//console.log("Received data from server: " + event.data);
|
||||
/**
|
||||
* @type {{reply: string, data: string|number}} 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);
|
||||
no_stream_counter = 0;
|
||||
} else update_camerastream(null);
|
||||
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;
|
||||
case "STREAMING STATUS":
|
||||
console.log("Streaming Status: "+dx.data);
|
||||
$('#streaming_status').html(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 (value && value.length>0){
|
||||
if (camerastream) camerastream.src = value;
|
||||
} else {
|
||||
if (camerastream) 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")
|
||||
console.log('High Quality Video: '+btn.checked?'ON':'OFF');
|
||||
if (ws.readyState === WebSocket.OPEN){
|
||||
ws.send(JSON.stringify({
|
||||
command: "SET VIDEO QUALITY",
|
||||
data: btn.checked?"HQ":"LQ"
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user