Trying using socket.io instead of websocket, because some device incompatibility

enable better FPS skipping mechanism. For raspberry , optimal at 10 fps.
2024-11-13 14:52:17 +07:00 · 2024-11-13 09:32:05 +07:00 · 2024-11-13 09:29:38 +07:00
9 changed files with 711 additions and 358 deletions
--- a/Html/html/index.html
+++ b/Html/html/index.html
@@ -10,6 +10,7 @@
    <script src="public/js/jquery-3.7.1.min.js"></script>
    <script src="public/js/jquery.dataTables.min.js"></script>
    <script src="public/js/all.min.js"></script>
+    <script src="public/js/socket.io.min.js"></script>
    <link rel="stylesheet" href="public/style/all.min.css">
    <script src="index.js"></script>
 </head>
@@ -59,20 +60,20 @@
                            <div class="col">
                                <div class="d-flex align-items-center">
                                    <span class="fa-solid fa-microchip icon-system"></span>
-                                    <p id="cpu_usage" class="padleft">100 %</p>
+                                    <p id="cpu_usage" class="padleft">0 %</p>
                                </div>
                            </div>

                            <div class="col">
                                <div class="d-flex align-items-center">
                                    <span class="fa-solid fa-temperature-half icon-system"></span>
-                                    <p id="cpu_temperature" class="padleft">55 °C</p>
+                                    <p id="cpu_temperature" class="padleft">0 °C</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="d-flex align-items-center">
                                    <span class="fa-solid fa-memory icon-system"></span>
-                                    <p id="ram_usage" class="padleft">15 %</p>
+                                    <p id="ram_usage" class="padleft">0 %</p>
                                </div>
                            </div>

@@ -109,7 +110,7 @@
                            <div class="row">
                                <div class="col"></div>
                                <div class="col">
-                                    <a onmousedown="btn_up()" onmouseup="stop_movement()">
+                                    <a onmousedown="send_tilt_up()" onmouseup="send_stop_movement()">
                                        <i class="btn-nav fa-solid fa-caret-up pad-top" title="Up"></i>
                                    </a>
                                </div>
@@ -117,7 +118,7 @@
                            </div>
                            <div class="row">
                                <div class="col">
-                                    <a onmousedown="btn_left()" onmouseup="stop_movement()">
+                                    <a onmousedown="send_pan_left()" onmouseup="send_stop_movement()">
                                        <i class="btn-nav fa-solid fa-caret-left pad-left" title="Left"></i>
                                    </a>
                                </div>
@@ -127,7 +128,7 @@
                                    </a>
                                </div>
                                <div class="col">
-                                    <a onmousedown="btn_right()" onmouseup="stop_movement()">
+                                    <a onmousedown="send_pan_right()" onmouseup="send_stop_movement()">
                                        <i class="btn-nav fa-solid fa-caret-right pad-right" title="Right"></i>
                                    </a>
                                </div>
@@ -135,7 +136,7 @@
                            <div class="row">
                                <div class="col"></div>
                                <div class="col">
-                                    <a onmousedown="btn_down()" onmouseup="stop_movement()">
+                                    <a onmousedown="send_tilt_down()" onmouseup="send_stop_movement()">
                                        <i class="i btn-nav fa-solid fa-caret-down pad-bottom" title="Down"></i>
                                    </a>
                                </div>
@@ -181,7 +182,7 @@
                            </a>
                        </div>
                        <br>
-                        <p> Content 1</p>
+                        <p id="desc_content1"> Content 1</p>
                    </div>

                    <div class="col">
@@ -194,7 +195,7 @@
                            </a>
                        </div>
                        <br>
-                        <p> Content 2</p>
+                        <p id="desc_content2"> Content 2</p>
                    </div>

                    <div class="col">
@@ -207,7 +208,7 @@
                            </a>
                        </div>
                        <br>
-                        <p> Content 3</p>
+                        <p id="desc_content3"> Content 3</p>
                    </div>

                    <div class="col">
@@ -220,7 +221,7 @@
                            </a>
                        </div>
                        <br>
-                        <p> Content 4</p>
+                        <p id="desc_content4"> Content 4</p>
                    </div>

                    <div class="col">
@@ -233,7 +234,7 @@
                            </a>
                        </div>
                        <br>
-                        <p>Content 5</p>
+                        <p id="desc_content5">Content 5</p>
                    </div>
                </div>
                <br>
@@ -247,10 +248,10 @@
                        </div>
                        <div class="col-2">
                            <div>
-                                <button id="mute" class="btn-mute show" onclick="mute()" title="mute">
+                                <button id="mute" class="btn-mute show" onclick="send_mute()" title="mute">
                                    <i class="fa-solid fa-volume-high"></i>
                                </button>
-                                <button id="unmute" class="btn-mute hide" onclick="unmute()" title="unmute">
+                                <button id="unmute" class="btn-mute hide" onclick="send_unmute()" title="unmute">
                                    <i class="fa-solid fa-volume-xmark"></i>
                                </button>
                            </div>
--- a/Html/html/index.js
+++ b/Html/html/index.js
@@ -12,78 +12,90 @@ let ws;

 let camerastream;

-
+// socketio
+let socketio;

 let files = [null,null,null,null,null];

 let getbase64handle;
 let getsysteminfohandle;

+let $zoom;
+let $mute;
+let $unmute;
+
 window.addEventListener("unload",function (){
    clearInterval(getbase64handle);
    clearInterval(getsysteminfohandle);
-    if (ws.readyState === WebSocket.OPEN){
-        ws.send(JSON.stringify({
-            command: "STOP AUDIO",
-            data: 0
-        }));
-
+    send_stop_audio();
    // wait a while
    const start = Date.now();
    while(Date.now()-start<200){}
-    }
-
    ws.close();
+
 })

 window.addEventListener("load", function (){
+    $zoom = $('#zoom');
+    $mute = $('#mute');
+    $unmute = $('#unmute');
+
    camerastream = document.getElementById("camerastream");
+
+    // pilihan komunikasi, disable salah satu
+    initialize_socketio();
+    //initialize_websocket();
+
    // 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);
+        send_get_base64();
    },1000/15);

    getsysteminfohandle = setInterval(function (){
-        if (ws.readyState === WebSocket.OPEN){
-            ws.send(JSON.stringify({
-                command: "GET SYSTEM INFO",
-                data: 0
-            }));
-        }
+        send_get_system_info();
    }, 5000);
+    set_pan_speed(32);
+    set_tilt_speed(32);
+})

+function initialize_socketio(){
+    socketio = io(":3001/socketio");
+    if (socketio){
+        socketio.on("connect",()=>{
+            console.log("Socket.io Connected to the server");
+            send_get_max_zoom();
+            send_get_volume();
+            send_get_zoom();
+            send_get_resolution();
+            send_get_audiofiles();
+        })
+        socketio.on("disconnect",(reason)=>{
+            console.log("Socket.io Disconnected from server because "+reason);
+        })
+        socketio.on("connect_error",(error)=>{
+            console.log("Socket.io Connection error "+error);
+        });
+
+        socketio.on("message",(data)=>{
+            let dx = JSON.parse(data);
+            //console.log("Received data from server: "+data);
+            process_command(dx);
+        });
+    }
+}
+
+function initialize_websocket(){
    ws = new WebSocket("/ws");
-
+    if (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
-        }))
+            send_get_max_zoom();
+            send_get_volume();
+            send_get_zoom();
+            send_get_resolution();
+            send_get_audiofiles();

        }
        ws.onmessage = function(event){
@@ -92,121 +104,7 @@ window.addEventListener("load", function (){
             * @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;
-
-        }
-
+            process_command(dx);
        }
        ws.onclose = function(){
            console.log("Connection closed");
@@ -214,10 +112,9 @@ window.addEventListener("load", function (){
        ws.onerror = function(){
            console.log("Error in connection");
        }
+    }

-    set_pan_speed(32);
-    set_tilt_speed(32);
-})
+}



@@ -237,37 +134,62 @@ function update_camerastream(value){
 }


-
-
-
+/**
+ * Disable play button
+ * @param index 1 - 5
+ */
 function play_off(index){
    $('#div'+index).prop("className", "button-container div-disabled");
-    $('#btn_play'+index).prop("className", "btn-play1 show text-light");
-
+    $('#btn_play'+index)
+        .prop("className", "btn-play1 show text-light");
 }

+/**
+ * Enable play button
+ * @param index 1 - 5
+ */
 function play_on(index){
+    let content = $('#desc_content'+index).html();
    $('#div'+index).prop("className", "button-container");
-    $('#btn_play'+index).prop("className", "btn-play1 show");
+    $('#btn_play'+index)
+        .prop("className", "btn-play1 show")
+        .prop("title","Play "+content);
+    $('#btn_stop'+index)
+        .prop("title","Stop "+content);
 }

+/**
+ * Show play button and hide stop button
+ * @param index 1 - 5
+ */
 function show_play_and_hide_stop(index){
    $('#btn_play'+index).prop("className", "btn-play1 show");
    $('#btn_stop'+index).prop("className", "btn-play1 hide");
 }

+/**
+ * Show stop button and hide play button
+ * @param index 1 - 5
+ */
 function show_stop_and_hide_play(index){
    $('#btn_play'+index).prop("className", "btn-play1 hide");
    $('#btn_stop'+index).prop("className", "btn-play1 show");

 }

+/**
+ * Enable all play buttons
+ */
 function allplay(){
    for (let i = 0; i < 5; i++) {
        if (files[i]) play_on(i+1);
    }
 }

+/**
+ * When play button is clicked
+ * @param index 1 - 5
+ */
 function play_button(index){
    show_stop_and_hide_play(index);
    $('#status_player').html("Play");
@@ -277,26 +199,160 @@ function play_button(index){
    send_play_audio(index);
 }

+/**
+ * When stop button is clicked
+ * @param index 1 - 5
+ */
 function stop_button(index){
    show_play_and_hide_stop(index);
    $('#status_player').html("Stop");
-
    allplay();
    send_stop_audio();
 }

+function send_get_audiofiles(){
+    let cmd = JSON.stringify({
+        command: "GET AUDIOFILES",
+        data: 0
+    });
+    if (ws){
+        if (ws.readyState===WebSocket.OPEN){
+            ws.send(cmd)
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }

+}
+
+function send_get_resolution(){
+    let cmd = JSON.stringify({
+        command: "GET RESOLUTION",
+        data: 0
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_get_zoom(){
+    let cmd = JSON.stringify({
+        command: "GET ZOOM",
+        data: 0
+    });
+    if (ws){
+        if (ws.readyState===WebSocket.OPEN){
+            ws.send(cmd);
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
+
+}
+
+function send_get_volume(){
+    let cmd = JSON.stringify({
+        command: "GET VOLUME",
+        data: 0
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_get_max_zoom(){
+    let cmd = JSON.stringify({
+        command: "GET MAX ZOOM",
+        data: 0
+    });
+    if (ws){
+        if (ws && ws.readyState===WebSocket.OPEN){
+            ws.send(cmd);
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+            console.log("get_max_zoom sent using socketio")
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_get_system_info(){
+    let cmd = JSON.stringify({
+        command: "GET SYSTEM INFO",
+        data: 0
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
+}

 /**
 * Send command to stop audio
 */
 function send_stop_audio(){
-    if (ws.readyState === WebSocket.OPEN){
-        ws.send(JSON.stringify({
+    let cmd = JSON.stringify({
        command: "STOP AUDIO",
        data: 0
-        }));
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_get_base64(){
+    let cmd = JSON.stringify({
+        command: "GET BASE64",
+        data: video_quality
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+            return;
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+            return;
+        } else console.log("Socket.io is not connected");
+    }
+
+    update_camerastream(null);
+
 }

 /**
@@ -304,114 +360,194 @@ function send_stop_audio(){
 * @param {number} index 1 - 5
 */
 function send_play_audio(index){
-    if (ws.readyState === WebSocket.OPEN){
-        ws.send(JSON.stringify({
+    let cmd = JSON.stringify({
        command: "PLAY AUDIO",
        data: index
-        }));
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
    }

-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({
+}
+
+function send_unmute(){
+    let cmd = 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){
        if (ws.readyState === WebSocket.OPEN){
-        ws.send(JSON.stringify({
+            ws.send(cmd);
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_mute(){
+    let cmd = JSON.stringify({
        command: "MUTE",
        data: 0
-        }));
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_tilt_up(){
+    let cmd = JSON.stringify({
+        command: "TILT UP",
+        data: tilt_speed
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+            btn_center_off()
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+            btn_center_off()
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_tilt_down(){
+    let cmd = JSON.stringify({
+        command: "TILT DOWN",
+        data: tilt_speed
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+            btn_center_off()
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+            btn_center_off()
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_pan_left(){
+    let cmd = JSON.stringify({
+        command: "PAN LEFT",
+        data: pan_speed
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+            btn_center_off();
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+            btn_center_off();
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_pan_right(){
+    let cmd = JSON.stringify({
+        command: "PAN RIGHT",
+        data: pan_speed
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+            btn_center_off()
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+            btn_center_off()
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_stop_movement(){
+    let cmd = JSON.stringify({
+        command: "STOP MOVEMENT",
+        data: 0
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_set_zoom(value){
+    let cmd = JSON.stringify({
+        command: "SET ZOOM",
+        data: value
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
+}
+
+function send_set_volume(value){
+    let cmd = JSON.stringify({
+        command: "SET VOLUME",
+        data: value
+    });
+    if (ws){
+        if (ws.readyState === WebSocket.OPEN){
+            ws.send(cmd);
+        } else console.log("WebSocket is not open");
+    } else if (socketio){
+        if (socketio.connected){
+            socketio.emit("message",cmd);
+        } else console.log("Socket.io is not connected");
+    }
+
 }

 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");
+    send_set_zoom($('#zoom').val());
 }

 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");
+    send_set_volume(value);
 }

 function set_pan_speed(value){
@@ -477,5 +613,146 @@ function change_video_quality(){
    video_quality = btn.checked?"HQ":"LQ";
 }

+/**
+ * Process Command
+ * @param {{reply: string, data: string, additional: string}}dx
+ */
+function process_command(dx){
+    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":
+            $zoom
+                .prop("min", 1)
+                .prop("max", dx.data);
+            break;
+        case "GET ZOOM":
+            $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");
+            document.getElementById("status_player").innerHTML = "Stop Playback";
+            break;
+        case 'SET VIDEO QUALITY':
+            console.log("Set Video Quality: "+dx.data);
+            break;
+        case "MUTE":
+            console.log("Mute");
+            $mute.prop("className", "btn-mute hide");
+            $unmute.prop("className", "btn-mute show");
+            break;
+        case "UNMUTE":
+            console.log("Unmute");
+            $mute.prop("className", "btn-mute show");
+            $unmute.prop("className", "btn-mute hide");
+            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;
+                $('#desc_content1').html(audiofiles.preset1);
+                play_on(1);
+            } else {
+                files[0] = null;
+                $('#desc_content1').html("");
+                play_off(1);
+            }
+            if (audiofiles.preset2 && audiofiles.preset2.length>0 && audiofiles.preset2!== "null") {
+                files[1] = audiofiles.preset2;
+                $('#desc_content2').html(audiofiles.preset2);
+                play_on(2);
+            } else {
+                files[1] = null;
+                $('#desc_content2').html("");
+                play_off(2);
+            }
+            if (audiofiles.preset3 && audiofiles.preset3.length>0 && audiofiles.preset3!== "null") {
+                files[2] = audiofiles.preset3;
+                $('#desc_content3').html(audiofiles.preset3);
+                play_on(3);
+            } else {
+                files[2] = null;
+                $('#desc_content3').html("");
+                play_off(3);
+            }
+            if (audiofiles.preset4 && audiofiles.preset4.length>0 && audiofiles.preset4!== "null") {
+                files[3] = audiofiles.preset4;
+                $('#desc_content4').html(audiofiles.preset4);
+                play_on(4);
+            } else {
+                files[3] = null;
+                $('#desc_content4').html("");
+                play_off(4);
+            }
+            if (audiofiles.preset5 && audiofiles.preset5.length>0 && audiofiles.preset5!== "null") {
+                files[4] = audiofiles.preset5;
+                $('#desc_content5').html(audiofiles.preset5);
+                play_on(5);
+            } else {
+                files[4] = null;
+                $('#desc_content5').html("");
+                play_off(5);
+            }
+            break;
+
+    }
+}
+
+
+


--- a/Html/html/public/images/airport-terminal.jpg
+++ b/Html/html/public/images/airport-terminal.jpg
--- a/pom.xml
+++ b/pom.xml
@@ -190,6 +190,19 @@
        </dependency>
        -->

+        <!-- https://mvnrepository.com/artifact/com.corundumstudio.socketio/netty-socketio -->
+        <dependency>
+            <groupId>com.corundumstudio.socketio</groupId>
+            <artifactId>netty-socketio</artifactId>
+            <version>2.0.11</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.slf4j</groupId>
+            <artifactId>slf4j-simple</artifactId>
+            <version>2.0.16</version>
+        </dependency>
+
        <dependency>
            <groupId>io.javalin</groupId>
            <artifactId>javalin</artifactId>
--- a/src/main/java/Camera/GrabbingTask.java
+++ b/src/main/java/Camera/GrabbingTask.java
@@ -12,18 +12,28 @@ import org.bytedeco.javacv.FrameGrabber;
 import org.tinylog.Logger;

 public class GrabbingTask implements Runnable {
+    // for while loop control
+    private final AtomicBoolean isGrabbing;
+    // for grabbing frames
+    private final FrameGrabber grabber;
+
+    // Consumers
    @Setter private Consumer<String> onMessageUpdate;
    @Setter private Consumer<Frame> onHQFrameUpdate;
    @Setter private Consumer<Frame> onLQFrameUpdate;
    @Setter private Consumer<String> onHQBase64Update;
    @Setter private Consumer<String> onLQBase64Update;
+
+    // status of capture fps
    @Getter private int CaptureFPS = 0;

-    private final AtomicBoolean isGrabbing;
-    private final FrameGrabber grabber;
-    @Getter private final int lowquality_width = 640;
-    @Getter private final int lowquality_height = 360;
+    @Getter @Setter private int lowquality_width = 640;
+    @Getter @Setter private int lowquality_height = 360;

+    // for FPS calculation
+    private int intendedFps = 10;
+
+    @SuppressWarnings("SameParameterValue")
    private void updateMessage(String message) {
        if (onMessageUpdate != null) {
            onMessageUpdate.accept(message);
@@ -40,6 +50,7 @@ public class GrabbingTask implements Runnable {
        }
    }

+    @SuppressWarnings("SameParameterValue")
    private void updateLQBase64(String base64) {
        if (onLQBase64Update != null) {
            onLQBase64Update.accept(base64);
@@ -62,10 +73,10 @@ public class GrabbingTask implements Runnable {



-    public GrabbingTask(AtomicBoolean isGrabbing, FrameGrabber grabber) {
+    public GrabbingTask(AtomicBoolean isGrabbing, FrameGrabber grabber, int fps) {
        this.isGrabbing = isGrabbing;
        this.grabber = grabber;
-
+        if (fps>0) intendedFps = fps;
    }


@@ -73,39 +84,51 @@ public class GrabbingTask implements Runnable {
        isGrabbing.set(false);
    }

-    private void grabprocess() throws Exception{
-        grabber.flush();
-        Frame fr =grabber.grab();
-
+    private void processFrame(Frame fr){
        if (fr!=null){
            updateHQFrame(fr);
            updateHQBase64(SomeCodes.FrameToBase64(fr));
            Frame resized = SomeCodes.ResizeFrame(fr, lowquality_width, lowquality_height);
            updateLQFrame(resized);
            updateLQBase64(SomeCodes.FrameToBase64(resized));
-        } else updateMessage("Grabber returned null frame");
+        } else updateMessage("processFrame have null frame");
    }

+    private void flush_grabber(){
+        try {
+            if (grabber!=null) grabber.flush();
+        } catch (FrameGrabber.Exception e) {
+            Logger.error("Error flushing grabber: "+e.getMessage());
+        }
+    }

    @Override
    public void run() {
        isGrabbing.set(true);
        Logger.info("Grabbing Task started");
        double fps = grabber.getFrameRate();
-        Logger.info("Grabber framerate = {}", fps);
+        int skippedframes = (int)(fps / intendedFps);
+        //Logger.info("Grabber framerate = {}, intendedFps = {}, Skipping frames = {}", fps, intendedFps, skippedframes);
+        int framecount = 0;
+        flush_grabber();
        long starttick = System.currentTimeMillis();
        while (isGrabbing.get()) {
-
-            long elapsed = System.currentTimeMillis() - starttick;
-            starttick = System.currentTimeMillis();
-            //Logger.info("Elapsed time = {} ms", elapsed);
-            if (elapsed>0) CaptureFPS = (int) (1000 / elapsed);
            try{
                Thread.yield();
-                grabprocess();
+                Frame frame = grabber.grab();
+                if (framecount<Integer.MAX_VALUE) framecount++; else framecount = 0;
+                if (framecount % skippedframes == 0) processFrame(frame);
            } catch (Exception e){
                Logger.error("Error grabbing frame: "+e.getMessage());
            }
+
+            long elapsed = System.currentTimeMillis() - starttick;
+            starttick = System.currentTimeMillis();
+            if (elapsed>0) {
+                int xx = (int) (1000 / elapsed);
+                if (xx<fps) CaptureFPS = xx;
+            }
+            //Logger.info("Elapsed time = {} ms, captureFPS = {}", elapsed, CaptureFPS);
        }
        Logger.info("Grabbing Task stopped");
    }
--- a/src/main/java/Camera/PanTiltController.java
+++ b/src/main/java/Camera/PanTiltController.java
@@ -60,7 +60,7 @@ public class PanTiltController {
        byte[] command = new byte[]{0, cameraid, 0, 0, 0, 0, 0};
        command[6] = Checksum(command);     // add checksum
        command[0] = (byte) 0xFF;           // add synchronization byte
-        serialPort.writeBytes(command, command.length);
+        if (serialPort!=null && serialPort.isOpen()) serialPort.writeBytes(command, command.length);
    }

    /**
@@ -74,7 +74,7 @@ public class PanTiltController {
        byte[] command = new byte[]{0, cameraid, 0, 4, speed, 0, 0};
        command[6] = Checksum(command);     // add checksum
        command[0] = (byte) 0xFF;           // add synchronization byte
-        serialPort.writeBytes(command, command.length);
+        if (serialPort!=null && serialPort.isOpen()) serialPort.writeBytes(command, command.length);
    }

    /**
@@ -88,7 +88,7 @@ public class PanTiltController {
        byte[] command = new byte[]{0, cameraid, 0, 2, speed, 0, 0};
        command[6] = Checksum(command);     // add checksum
        command[0] = (byte) 0xFF;           // add synchronization byte
-        serialPort.writeBytes(command, command.length);
+        if (serialPort!=null && serialPort.isOpen()) serialPort.writeBytes(command, command.length);
    }

    /**
@@ -102,7 +102,7 @@ public class PanTiltController {
        byte[] command = new byte[]{0, cameraid, 0, 8, speed, 0, 0};
        command[6] = Checksum(command);     // add checksum
        command[0] = (byte) 0xFF;           // add synchronization byte
-        serialPort.writeBytes(command, command.length);
+        if (serialPort!=null && serialPort.isOpen()) serialPort.writeBytes(command, command.length);
    }

    /**
@@ -116,7 +116,7 @@ public class PanTiltController {
        byte[] command = new byte[]{0, cameraid, 0, 16, speed, 0, 0};
        command[6] = Checksum(command);     // add checksum
        command[0] = (byte) 0xFF;           // add synchronization byte
-        serialPort.writeBytes(command, command.length);
+        if (serialPort!=null && serialPort.isOpen()) serialPort.writeBytes(command, command.length);
    }

    /**
--- a/src/main/java/Camera/RtspGrabber.java
+++ b/src/main/java/Camera/RtspGrabber.java
@@ -3,12 +3,14 @@ import lombok.Getter;
 import org.bytedeco.ffmpeg.global.avutil;
 import org.bytedeco.javacv.FFmpegFrameGrabber;
 import org.bytedeco.javacv.Frame;
+import org.jetbrains.annotations.NotNull;
 import org.tinylog.Logger;

 import java.util.concurrent.atomic.AtomicBoolean;

 import static Other.SomeCodes.gson;

+@SuppressWarnings("unused")
 public class RtspGrabber {
    private final String rtspUrl;
    private FFmpegFrameGrabber grabber;
@@ -69,40 +71,14 @@ public class RtspGrabber {
        try{
            grabber = FFmpegFrameGrabber.createDefault(rtspUrl);
            if (useTcp) grabber.setOption("rtsp_transport", "tcp");
-            grabber.setTimeout(2000);
-            grabber.setImageWidth(width);
-            grabber.setImageHeight(height);
+
            grabber.setPixelFormat(avutil.AV_PIX_FMT_BGR24);
            grabber.start();

            avutil.av_log_set_level(avutil.AV_LOG_ERROR);

-
-
            Logger.info("Grabber started");
-            GrabbingTask tt = new GrabbingTask(isGrabbing, grabber);
-            tt.setOnMessageUpdate(Logger::info);
-            tt.setOnHQFrameUpdate(value -> {
-                if (value!=null){
-                    if (value.imageWidth>0 && value.imageHeight>0){
-                        setLastHQFrame(value);
-                        HQWidth = value.imageWidth;
-                        HQHeight = value.imageHeight;
-                    }
-
-                }
-            });
-            tt.setOnLQFrameUpdate(value -> {
-                if (value!=null){
-                    if (value.imageWidth>0 && value.imageHeight>0){
-                        setLastLQFrame(value);
-                        LQWidth = value.imageWidth;
-                        LQHeight = value.imageHeight;
-                    }
-                }
-            });
-            tt.setOnHQBase64Update(this::setLastHQBase64);
-            tt.setOnLQBase64Update(this::setLastLQBase64);
+            GrabbingTask tt = getGrabbingTask();
            grabbingTask = tt;
            new Thread(tt).start();

@@ -111,6 +87,8 @@ public class RtspGrabber {
        }
    }

+
+
    /**
     * Stop grabbing frames
     */
@@ -139,4 +117,32 @@ public class RtspGrabber {
    public String HQStreamingStatus(){
        return gson.toJson(new String[]{String.valueOf(HQWidth), String.valueOf(HQHeight) , String.valueOf(grabbingTask.getCaptureFPS())});
    }
+
+    @NotNull
+    private GrabbingTask getGrabbingTask() {
+        GrabbingTask tt = new GrabbingTask(isGrabbing, grabber,10);
+        tt.setOnMessageUpdate(Logger::info);
+        tt.setOnHQFrameUpdate(value -> {
+            if (value!=null){
+                if (value.imageWidth>0 && value.imageHeight>0){
+                    setLastHQFrame(value);
+                    HQWidth = value.imageWidth;
+                    HQHeight = value.imageHeight;
+                }
+
+            }
+        });
+        tt.setOnLQFrameUpdate(value -> {
+            if (value!=null){
+                if (value.imageWidth>0 && value.imageHeight>0){
+                    setLastLQFrame(value);
+                    LQWidth = value.imageWidth;
+                    LQHeight = value.imageHeight;
+                }
+            }
+        });
+        tt.setOnHQBase64Update(this::setLastHQBase64);
+        tt.setOnLQBase64Update(this::setLastLQBase64);
+        return tt;
+    }
 }
--- a/src/main/java/Web/WebServer.java
+++ b/src/main/java/Web/WebServer.java
@@ -1,6 +1,8 @@
 package Web;

 import Other.SomeCodes;
+import com.corundumstudio.socketio.Configuration;
+import com.corundumstudio.socketio.SocketIOServer;
 import io.javalin.Javalin;
 import io.javalin.http.UploadedFile;
 import io.javalin.util.FileUtil;
@@ -26,6 +28,8 @@ public class WebServer {
    private @Getter @Setter String webpassword;
    private final Javalin app;
    private final Set<WsContext> connectedWebsocketClients = ConcurrentHashMap.newKeySet();
+    private final SocketIOServer socketServer;
+    private final Configuration socketConfig;
    public WebServer(WebsocketEvent event, String webusername, String webpassword){
        this.webusername = webusername;
        this.webpassword = webpassword;
@@ -195,6 +199,27 @@ public class WebServer {
            });

        });
+
+        socketConfig = new Configuration();
+        socketConfig.setHostname("0.0.0.0");
+        socketConfig.setPort(3001);
+        socketServer = new SocketIOServer(socketConfig);
+        socketServer.addConnectListener(client -> {
+            Logger.info("SocketIO connected, id {} from {}", client.getSessionId(), client.getRemoteAddress());
+        });
+        socketServer.addDisconnectListener(client -> {
+            Logger.info("SocketIO disconnected, id {} from {}", client.getSessionId(), client.getRemoteAddress());
+        });
+        socketServer.addNamespace("/socketio").addEventListener("message", String.class, (client, data, ackSender) -> {
+            //Logger.info("SocketIO message from namespace /socketio from {}: {}", client.getRemoteAddress(), data);
+            WebsocketCommand command = gson.fromJson(data, WebsocketCommand.class);
+            if (event!=null) {
+                WebsocketReply reply = event.onWebsocketCommand(command);
+                if (reply!=null) client.sendEvent("message", gson.toJson(reply));
+            }
+        });
+
+
    }

    /**
@@ -202,7 +227,11 @@ public class WebServer {
     * @param obj Object to send
     */
    public void SendtoAll(Object obj){
-        connectedWebsocketClients.forEach(wsContext -> wsContext.send(obj));
+
+        connectedWebsocketClients
+                .stream()
+                .filter(ws -> ws.session.isOpen())
+                .forEach(ws -> ws.send(obj));
    }

    /**
@@ -215,6 +244,8 @@ public class WebServer {
            connectedWebsocketClients.forEach(WsContext::closeSession);
            app.start(localip, port);
            Logger.info("Web server started at {}:{}", localip, port);
+            socketServer.start();
+            Logger.info("SocketIO server started at {}:{}", socketConfig.getHostname(), socketConfig.getPort());
        } catch (JavalinException e){
            Logger.error("Web server failed to start: {}", e.getMessage());
        }
@@ -227,6 +258,8 @@ public class WebServer {
        try{
            app.stop();
            Logger.info("Web server stopped");
+            socketServer.stop();
+            Logger.info("SocketIO server stopped");
        } catch (JavalinException e){
            Logger.error("Web server failed to stop: {}", e.getMessage());
        }
--- a/src/main/java/id/co/gtc/Main.java
+++ b/src/main/java/id/co/gtc/Main.java
@@ -51,11 +51,11 @@ public class Main {
        init_properties();
        init_audiofiles();

+        init_Vapix();
        init_audio();
+        init_pantiltcontroller();
        init_webserver();
        init_rtspgrabber();
-        init_pantiltcontroller();
-        init_Vapix();
    }

    private static void init_system_monitoring(){
Author	SHA1	Message	Date
rdkartono	10fad0e192	Trying using socket.io instead of websocket, because some device incompatibility	2024-11-13 14:52:17 +07:00
rdkartono	19da5914ac	enable better FPS skipping mechanism. For raspberry , optimal at 10 fps.	2024-11-13 09:32:05 +07:00
rdkartono	d2f924f5db	enable better FPS skipping mechanism. For raspberry , optimal at 10 fps.	2024-11-13 09:29:38 +07:00