|
@@ -18,112 +18,142 @@
|
|
|
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>
|
|
|
+
|
|
|
+ <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`;
|
|
|
-
|
|
|
- function isPointerLocked() {
|
|
|
- return document.pointerLockElement === document.body;
|
|
|
- }
|
|
|
+ let mouseMoveAbsolte = true; // Set to true for absolute mouse coordinates, false for relativeZ
|
|
|
+ let mouseScrollSensitivity = 0.01; // Adjust this value to change scroll sensitivity
|
|
|
+ let mouseIsOutside = false;
|
|
|
|
|
|
- function startCapture(){
|
|
|
- if (!socket) {
|
|
|
- alert("control websocket is not opened");
|
|
|
- return;
|
|
|
+ /* 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.");
|
|
|
}
|
|
|
- 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) {
|
|
|
+ function handleMousePress(event) {
|
|
|
event.preventDefault();
|
|
|
- event.stopPropagation();
|
|
|
- startCapture();
|
|
|
- });
|
|
|
+ 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
|
|
|
|
|
|
- $("#remoteCapture").on("click", function(){
|
|
|
- startCapture();
|
|
|
- });
|
|
|
+ const hidCommand = {
|
|
|
+ event: 3,
|
|
|
+ mouse_button: buttonMap[event.button] || 0
|
|
|
+ };
|
|
|
|
|
|
+ console.log(`Mouse down: ${hidCommand.mouse_button}`);
|
|
|
|
|
|
- /* 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+"" }));
|
|
|
+ if (socket && socket.readyState === WebSocket.OPEN) {
|
|
|
+ socket.send(JSON.stringify(hidCommand));
|
|
|
+ } else {
|
|
|
+ console.error("WebSocket is not open.");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- 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 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}`);
|
|
|
|
|
|
- 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 }));
|
|
|
+ if (socket && socket.readyState === WebSocket.OPEN) {
|
|
|
+ socket.send(JSON.stringify(hidCommand));
|
|
|
+ } else {
|
|
|
+ console.error("WebSocket is not open.");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- document.addEventListener('pointerlockchange', function() {
|
|
|
- if (document.pointerLockElement === document.body) {
|
|
|
- console.log('Pointer locked');
|
|
|
- } else {
|
|
|
- console.log('Pointer unlocked');
|
|
|
- document.removeEventListener('mousemove', handleMouseMove);
|
|
|
+ function handleMouseScroll(event) {
|
|
|
+ const hidCommand = {
|
|
|
+ event: 5,
|
|
|
+ mouse_scroll: parseInt(event.deltaY * mouseScrollSensitivity)
|
|
|
+ };
|
|
|
+ if (mouseIsOutside) {
|
|
|
+ console.warn("Mouse is outside the capture area, ignoring mouse press.");
|
|
|
+ return;
|
|
|
}
|
|
|
- });
|
|
|
|
|
|
- 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 }));
|
|
|
+
|
|
|
+ console.log(`Mouse scroll: mouse_scroll=${event.deltaY} (scaled: ${hidCommand.mouse_scroll})`);
|
|
|
+
|
|
|
+ if (socket && socket.readyState === WebSocket.OPEN) {
|
|
|
+ socket.send(JSON.stringify(hidCommand));
|
|
|
+ } else {
|
|
|
+ console.error("WebSocket is not open.");
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+ // Attach mouse event listeners
|
|
|
+ document.addEventListener('mousemove', handleMouseMove);
|
|
|
+ document.addEventListener('mousedown', handleMousePress);
|
|
|
+ document.addEventListener('mouseup', handleMouseRelease);
|
|
|
+ document.addEventListener('wheel', handleMouseScroll);
|
|
|
+
|
|
|
+
|
|
|
/* Keyboard */
|
|
|
function isNumpadEvent(event) {
|
|
|
return event.location === 3;
|
|
@@ -133,20 +163,28 @@
|
|
|
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 }));
|
|
|
- }
|
|
|
+ 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.");
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -154,20 +192,30 @@
|
|
|
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 }));
|
|
|
- }
|
|
|
+
|
|
|
+ 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.");
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -205,36 +253,6 @@
|
|
|
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();
|