rdkartono/BirdDeterrentSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modify Websocket GET BASE64 mechanism to get concise FPS between HQ and LQ.

Browse Source 
Support multiple quality between users.
This commit is contained in:
rdkartono
2024-11-11 11:34:29 +07:00
parent 2450f9f42a
commit 1fe4716bab
15 changed files with 131 additions and 10840 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
Html/html/index.js
View File

@@ -4,7 +4,7 @@
*/
let pan_speed = 20;
let tilt_speed = 20;
let video_quality = "LQ";
/**
* @type {WebSocket}
*/
@@ -12,21 +12,20 @@ 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);
if (ws.readyState === WebSocket.OPEN){
ws.send(JSON.stringify({
command: "GET BASE64",
data: video_quality
}));
} else update_camerastream(null);
},10);
ws = new WebSocket("/ws");
@@ -50,23 +49,22 @@ document.addEventListener("DOMContentLoaded", function(){
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
* @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);
no_stream_counter = 0;
} 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);
@@ -121,10 +119,7 @@ document.addEventListener("DOMContentLoaded", function(){
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;
}
}
@@ -144,11 +139,14 @@ document.addEventListener("DOMContentLoaded", function(){
* @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";
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";
}
}
}
@@ -167,7 +165,7 @@ function play_on(index){
}
function show_play_and_hide_stop(index){
$('#btn_play'+index).prop("className", "btn-play1 show"); ;
$('#btn_play'+index).prop("className", "btn-play1 show");
$('#btn_stop'+index).prop("className", "btn-play1 hide");
}
@@ -387,13 +385,7 @@ function cleartilt(){
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"
}));
}
video_quality = btn.checked?"HQ":"LQ";
}