TC
/
RemdesKVM


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!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="A basic Hello World HTML page with metadata and OpenGraph headers">
    <meta name="author" content="Your Name">
    <title>Hello World</title>
    
    <!-- OpenGraph Metadata -->
    <meta property="og:title" content="Hello World">
    <meta property="og:description" content="A basic Hello World HTML page with metadata and OpenGraph headers">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://example.com">
    <meta property="og:image" content="http://example.com/image.jpg">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <style>
        body{
            margin: 0;
        }
        #remoteCapture{
            width: 100%;
            pointer-events: none;
            user-select: none;
        }

        #remoteCaptureWrapper{
            box-shadow: none !important;
            border: 0px solid transparent !important;
            background: none !important;
        }
    </style>
</head>
<body>
    <button id="remoteCaptureWrapper" onclick="startCapture();">
        <img id="remoteCapture" src="/stream"></img>
    </button>
    <p>Click start to start connection to backend and start Capture to start KVM-ing</p>
    <!-- <button id="startButton">Start</button>
    <button id="stopButton">Stop</button> -->
    <button id="capture">Capture</button>
    <button id="screenshot">Win + Shift + S</button>
    <button id="reconnect">Reset HID</button>
    <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`;
        
        function isPointerLocked() {
            return document.pointerLockElement === document.body;
        }

        function startCapture(){
            if (!socket) {
                alert("control websocket is not opened");
                return;
            }
            console.log("Start capture called");

            // Remove old listeners if they exist
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mousedown', handleMouseDown);
            document.removeEventListener('mouseup', handleMouseUp);
            document.removeEventListener('wheel', handleScroll);

            // Add new listeners
            document.body.requestPointerLock();
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mousedown', handleMouseDown);
            document.addEventListener('mouseup', handleMouseUp);
            document.addEventListener('wheel', handleScroll);

            // Reset USBKVM state to avoid stuck keys
            socket.send(JSON.stringify({ t: 'reset'}));
        }

        document.getElementById('capture').addEventListener('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            startCapture();
        });

        $("#remoteCapture").on("click", function(){
            startCapture();
        });


        /* Mouse */
        function handleMouseDown(event) {
            console.log(`Mouse button pressed: Button=${event.button}`);
            if (socket && isPointerLocked()) {
                socket.send(JSON.stringify({ t: 'mw', s: 'md', d: event.button+"" }));
            }
        }

        function handleMouseUp(event) {
            console.log(`Mouse button released: Button=${event.button}`);
            if (socket && isPointerLocked()) {
                socket.send(JSON.stringify({ t: 'mw', s: 'mu', d: event.button+"" }));
            }
        }

        function handleScroll(event) {
            console.log(`Mouse scrolled: DeltaX=${event.deltaX}, DeltaY=${event.deltaY}`);
            if (socket && isPointerLocked()) {
                socket.send(JSON.stringify({ t: 'ms', y: event.deltaY }));
            }
        }

        document.addEventListener('pointerlockchange', function() {
            if (document.pointerLockElement === document.body) {
                console.log('Pointer locked');
            } else {
                console.log('Pointer unlocked');
                document.removeEventListener('mousemove', handleMouseMove);
            }
        });

        function handleMouseMove(event) {
            console.log(`Mouse moved: X=${event.movementX}, Y=${event.movementY}`);
            if (socket && isPointerLocked()) {
                socket.send(JSON.stringify({ t: 'mm', x: event.movementX, y: event.movementY }));
            }
        }
        
        /* Keyboard */
        function isNumpadEvent(event) {
            return event.location === 3;
        }

        function handleKeyDown(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            const key = event.key;
            if (socket && isPointerLocked()){
                if (key == "Shift" || key == "Control" || key == "Alt"){
                    if (event.location == 1){
                        socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "LEFT_" + key }));
                    } else {
                        socket.send(JSON.stringify({ t: 'kw', s: 'kd', d:  "RIGHT_" + key }));
                    }
                }else if (isNumpadEvent(event)){
                    socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "NUMPAD_" + key }));
                }else if (key == "PrintScreen"){
                    //Do nothing, press is hardware offloaded
                }else{
                    socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: key }));
                }
            }
        }

        function handleKeyUp(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            const key = event.key;
            if (socket && isPointerLocked()) {
                if (key == "Shift" || key == "Control" || key == "Alt") {
                    if (event.location == 1) {
                        socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "LEFT_" + key }));
                    } else {
                        socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "RIGHT_" + key }));
                    }
                }else if (isNumpadEvent(event)){
                    socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "NUMPAD_" + key }));
                }else if (key == "NumLock" || key == "Pause"){
                   //Do nothing, release is hardware offloaded
                } else {
                    socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: key }));
                }
            }
        }

        /* 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);
        }

        document.getElementById('screenshot').addEventListener('click', function() {
            if (socket) {
                // Send keydown for Shift
                socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 'LEFT_Shift' }));
                // Send keydown for Windows key
                socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 'Meta' }));
                // Send keydown for S
                socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 's' }));
                
                setTimeout(function() {
                    // Send keyup for S
                    socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 's' }));
                    // Send keyup for Windows key
                    socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 'Meta' }));
                    // Send keyup for Shift
                    socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 'LEFT_Shift' }));
                }, 1000);
            }
        });

        /* Reconnect USB HID to slave device */
        $("#reconnect").on("click", function(){
            if (socket) {   
                socket.send(JSON.stringify({ t: 'sw', s: 'hid', d: "reset"}));
            }else{
                alert("Websocket conn not established");
            }
        });

        
        $(document).ready(function(){
            startWebSocket();
        });
    </script>
</body>
</html>