TC
/
RemdesKVM


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="RemdesKVM Management Interface">
    <meta name="author" content="imuslab">
    <title>Connected | RemdesKVM</title>
    
    <!-- OpenGraph Metadata -->
    <meta property="og:title" content="RemdesKVM Management Interface">
    <meta property="og:description" content="A web-based management interface for RemdesKVM">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://kvm.aroz.org">
    <meta property="og:image" content="https://kvm.aroz.org/og.jpg">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/main.css">
</head>
<body>
    <img id="remoteCapture" src="/stream" oncontextmenu="return false;"></img>
    <script>
        let socket;
        let protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
        let port = window.location.port ? window.location.port : (protocol === 'wss' ? 443 : 80);
        let socketURL = `${protocol}://${window.location.hostname}:${port}/hid`;
        let mouseMoveAbsolte = true; // Set to true for absolute mouse coordinates, false for relativeZ
        let mouseIsOutside = false;
        let audioFrontendStarted = false;

        /* Mouse events */
        function handleMouseMove(event) {
            const hidCommand = {
                event: 2,
                mouse_x: event.clientX,
                mouse_y: event.clientY,
            };

            const rect = event.target.getBoundingClientRect();
            const relativeX = event.clientX - rect.left;
            const relativeY = event.clientY - rect.top;
            
            if (relativeX < 0 || relativeY < 0 || relativeX > rect.width || relativeY > rect.height) {
                mouseIsOutside = true;
                return; // Mouse is outside the client rect
            }
            mouseIsOutside = false;
            const percentageX = (relativeX / rect.width) * 4096;
            const percentageY = (relativeY / rect.height) * 4096;

            hidCommand.mouse_x = Math.round(percentageX);
            hidCommand.mouse_y = Math.round(percentageY);

            //console.log(`Mouse move: (${event.clientX}, ${event.clientY})`);
            //console.log(`Mouse move relative: (${relativeX}, ${relativeY})`);
            //console.log(`Mouse move percentage: (${hidCommand.mouse_x}, ${hidCommand.mouse_y})`);

            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send(JSON.stringify(hidCommand));
            } else {
                console.error("WebSocket is not open.");
            }
        }
        

        function handleMousePress(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            if (mouseIsOutside) {
                console.warn("Mouse is outside the capture area, ignoring mouse press.");
                return;
            }
            const buttonMap = {
                0: 1, 
                1: 3,
                2: 2
            }; //Map javascript mouse buttons to HID buttons

            const hidCommand = {
                event: 3,
                mouse_button: buttonMap[event.button] || 0
            };

            // Log the mouse button state
            console.log(`Mouse down: ${hidCommand.mouse_button}`);

            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send(JSON.stringify(hidCommand));
            } else {
                console.error("WebSocket is not open.");
            }

            if (!audioFrontendStarted){
                startAudioWebSocket();
                audioFrontendStarted = true;
            }
        }

        function handleMouseRelease(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            if (mouseIsOutside) {
                console.warn("Mouse is outside the capture area, ignoring mouse press.");
                return;
            }
            const buttonMap = {
                0: 1, 
                1: 3,
                2: 2
            }; //Map javascript mouse buttons to HID buttons
            
            const hidCommand = {
                event: 4,
                mouse_button: buttonMap[event.button] || 0
            };

            console.log(`Mouse release: ${hidCommand.mouse_button}`);

            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send(JSON.stringify(hidCommand));
            } else {
                console.error("WebSocket is not open.");
            }
        }

        function handleMouseScroll(event) {
            const hidCommand = {
                event: 5,
                mouse_scroll: event.deltaY
            };
            if (mouseIsOutside) {
                console.warn("Mouse is outside the capture area, ignoring mouse press.");
                return;
            }


            console.log(`Mouse scroll: mouse_scroll=${event.deltaY}`);

            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send(JSON.stringify(hidCommand));
            } else {
                console.error("WebSocket is not open.");
            }
        }

        // Attach mouse event listeners
        let remoteCaptureEle = document.getElementById('remoteCapture');
        remoteCaptureEle.addEventListener('mousemove', handleMouseMove);
        remoteCaptureEle.addEventListener('mousedown', handleMousePress);
        remoteCaptureEle.addEventListener('mouseup', handleMouseRelease);
        remoteCaptureEle.addEventListener('wheel', handleMouseScroll);

        /* Keyboard */
        function isNumpadEvent(event) {
            return event.location === 3;
        }

        function handleKeyDown(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            const key = event.key;
            let hidCommand = {
                event: 0,
                keycode: event.keyCode
            };

            console.log(`Key down: ${key} (code: ${event.keyCode})`);

            // Check if the key is a modkey on the right side of the keyboard
            const rightModKeys = ['Control', 'Alt', 'Shift', 'Meta'];
            if (rightModKeys.includes(key) && event.location === 2) {
                hidCommand.is_right_modifier_key = true;
            }else if (key === 'Enter' && isNumpadEvent(event)) {
                //Special case for Numpad Enter
                hidCommand.is_right_modifier_key = true;
            }else{
                hidCommand.is_right_modifier_key = false;
            }

            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send(JSON.stringify(hidCommand));
            } else {
                console.error("WebSocket is not open.");
            }
        }

        function handleKeyUp(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            const key = event.key;
            
            let hidCommand = {
                event: 1,
                keycode: event.keyCode
            };

            console.log(`Key up: ${key} (code: ${event.keyCode})`);

            // Check if the key is a modkey on the right side of the keyboard
            const rightModKeys = ['Control', 'Alt', 'Shift', 'Meta'];
            if (rightModKeys.includes(key) && event.location === 2) {
                hidCommand.is_right_modifier_key = true;
            } else if (key === 'Enter' && isNumpadEvent(event)) {
                //Special case for Numpad Enter
                hidCommand.is_right_modifier_key = true;
            }else{
                hidCommand.is_right_modifier_key = false;
            }


            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send(JSON.stringify(hidCommand));
            } else {
                console.error("WebSocket is not open.");
            }
        }

        /* Start and Stop events */
        function startWebSocket(){
            if (socket){
                //Already started
                alert("Websocket already started");
                return;
            }
            const socketUrl = socketURL;
            socket = new WebSocket(socketUrl);

            socket.addEventListener('open', function(event) {
                console.log('WebSocket is connected.');
            });

            socket.addEventListener('message', function(event) {
                //console.log('Message from server ', event.data);
            });

            document.addEventListener('keydown', handleKeyDown);
            document.addEventListener('keyup', handleKeyUp);
        }

        function stopWebSocket(){
            if (!socket){
                alert("No ws connection to stop");
                return;
            }

            socket.close();
            console.log('WebSocket is disconnected.');
            document.removeEventListener('keydown', handleKeyDown);
            document.removeEventListener('keyup', handleKeyUp);
        }

        /* Audio Streaming Frontend */
        let audioSocket;
        let audioContext;
        let audioQueue = [];
        let audioPlaying = false;

        //accept low, standard, high quality audio mode
        function startAudioWebSocket(quality="standard") {
            if (audioSocket) {
                console.warn("Audio WebSocket already started");
                return;
            }
            let protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
            let port = window.location.port ? window.location.port : (protocol === 'wss' ? 443 : 80);
            let audioSocketURL = `${protocol}://${window.location.hostname}:${port}/audio?quality=${quality}`;

            audioSocket = new WebSocket(audioSocketURL);
            audioSocket.binaryType = 'arraybuffer';

            audioSocket.onopen = function() {
                console.log("Audio WebSocket connected");
                if (!audioContext) {
                    audioContext = new (window.AudioContext || window.webkitAudioContext)({sampleRate: 24000});
                }
            };


            const MAX_AUDIO_QUEUE = 8;
            let PCM_SAMPLE_RATE;
            if (quality == "high"){
                PCM_SAMPLE_RATE = 48000; // Use 48kHz for high quality
            } else if (quality == "low") {
                PCM_SAMPLE_RATE = 16000; // Use 24kHz for low quality
            } else {
                PCM_SAMPLE_RATE = 24000; // Default to 24kHz for standard quality
            }
            let scheduledTime = 0;
            audioSocket.onmessage = function(event) {
                if (!audioContext) return;
                let pcm = new Int16Array(event.data);
                if (pcm.length === 0) {
                    console.warn("Received empty PCM data");
                    return;
                }
                if (pcm.length % 2 !== 0) {
                    console.warn("Received PCM data with odd length, dropping last sample");
                    pcm = pcm.slice(0, -1);
                }
                // Convert Int16 PCM to Float32 [-1, 1]
                let floatBuf = new Float32Array(pcm.length);
                for (let i = 0; i < pcm.length; i++) {
                    floatBuf[i] = pcm[i] / 32768;
                }
                // Limit queue size to prevent memory overflow
                if (audioQueue.length >= MAX_AUDIO_QUEUE) {
                    audioQueue.shift();
                }
                audioQueue.push(floatBuf);
                scheduleAudioPlayback();
            };

            audioSocket.onclose = function() {
                console.log("Audio WebSocket closed");
                audioSocket = null;
                audioPlaying = false;
                audioQueue = [];
                scheduledTime = 0;
            };

            audioSocket.onerror = function(e) {
                console.error("Audio WebSocket error", e);
            };

            function scheduleAudioPlayback() {
                if (!audioContext || audioQueue.length === 0) return;

                // Use audioContext.currentTime to schedule buffers back-to-back
                if (scheduledTime < audioContext.currentTime) {
                    scheduledTime = audioContext.currentTime;
                }

                while (audioQueue.length > 0) {
                    let floatBuf = audioQueue.shift();
                    let frameCount = floatBuf.length / 2;
                    let buffer = audioContext.createBuffer(2, frameCount, PCM_SAMPLE_RATE);
                    for (let ch = 0; ch < 2; ch++) {
                        let channelData = buffer.getChannelData(ch);
                        for (let i = 0; i < frameCount; i++) {
                            channelData[i] = floatBuf[i * 2 + ch];
                        }
                    }
                    let source = audioContext.createBufferSource();
                    source.buffer = buffer;
                    source.connect(audioContext.destination);
                    source.start(scheduledTime);
                    scheduledTime += buffer.duration;
                }
            }
        }

        function stopAudioWebSocket() {
            if (!audioSocket) {
                console.warn("No audio WebSocket to stop");
                return;
            }

            if (audioSocket.readyState === WebSocket.OPEN) {
                audioSocket.send("exit");
            }
            audioSocket.onclose = null; // Prevent onclose from being called again
            audioSocket.onerror = null; // Prevent onerror from being called again
            audioSocket.close();
            audioSocket = null;
            audioPlaying = false;
            audioQueue = [];
            if (audioContext) {
                audioContext.close();
                audioContext = null;
            }
        }

        startWebSocket();

        window.addEventListener('beforeunload', function() {
            stopAudioWebSocket();
        });
    </script>
</body>
</html>