|
@@ -3,33 +3,21 @@
|
|
|
<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>
|
|
|
+ <meta name="description" content="RemdesKVM Management Interface">
|
|
|
+ <meta name="author" content="imuslab">
|
|
|
+ <title>Connected | RemdesKVM</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: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="http://example.com">
|
|
|
- <meta property="og:image" content="http://example.com/image.jpg">
|
|
|
+ <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>
|
|
|
- <style>
|
|
|
- body{
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- #remoteCapture{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- </style>
|
|
|
+ <link rel="stylesheet" href="/main.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
- <button onclick="startAudioWebSocket()">Start Audio</button>
|
|
|
- <button onclick="stopAudioWebSocket()">Stop Audio</button>
|
|
|
<img id="remoteCapture" src="/stream" oncontextmenu="return false;"></img>
|
|
|
-
|
|
|
<script>
|
|
|
let socket;
|
|
|
let protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
|
@@ -37,22 +25,16 @@
|
|
|
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 mouseButtonState = [0, 0, 0]; // Array to track mouse button states, left, middle, right
|
|
|
+ let audioFrontendStarted = false;
|
|
|
|
|
|
/* Mouse events */
|
|
|
function handleMouseMove(event) {
|
|
|
- const mouseButtonBits = mouseButtonState.reduce((acc, state, index) => {
|
|
|
- return acc | (state << index);
|
|
|
- }, 0);
|
|
|
const hidCommand = {
|
|
|
event: 2,
|
|
|
mouse_x: event.clientX,
|
|
|
mouse_y: event.clientY,
|
|
|
- //mouse_move_button_state: mouseButtonBits // Combine mouse button states into a single bitmask
|
|
|
};
|
|
|
|
|
|
-
|
|
|
-
|
|
|
const rect = event.target.getBoundingClientRect();
|
|
|
const relativeX = event.clientX - rect.left;
|
|
|
const relativeY = event.clientY - rect.top;
|
|
@@ -68,9 +50,9 @@
|
|
|
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})`);
|
|
|
+ //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));
|
|
@@ -98,12 +80,7 @@
|
|
|
mouse_button: buttonMap[event.button] || 0
|
|
|
};
|
|
|
|
|
|
- // Update mouse button state
|
|
|
- if (event.button >= 0 && event.button < mouseButtonState.length) {
|
|
|
- mouseButtonState[event.button] = 1; // Set button state to pressed
|
|
|
- }
|
|
|
// Log the mouse button state
|
|
|
-
|
|
|
console.log(`Mouse down: ${hidCommand.mouse_button}`);
|
|
|
|
|
|
if (socket && socket.readyState === WebSocket.OPEN) {
|
|
@@ -111,6 +88,11 @@
|
|
|
} else {
|
|
|
console.error("WebSocket is not open.");
|
|
|
}
|
|
|
+
|
|
|
+ if (!audioFrontendStarted){
|
|
|
+ startAudioWebSocket();
|
|
|
+ audioFrontendStarted = true;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function handleMouseRelease(event) {
|
|
@@ -131,11 +113,6 @@
|
|
|
mouse_button: buttonMap[event.button] || 0
|
|
|
};
|
|
|
|
|
|
- // Update mouse button state
|
|
|
- if (event.button >= 0 && event.button < mouseButtonState.length) {
|
|
|
- mouseButtonState[event.button] = 0; // Set button state to released
|
|
|
- }
|
|
|
-
|
|
|
console.log(`Mouse release: ${hidCommand.mouse_button}`);
|
|
|
|
|
|
if (socket && socket.readyState === WebSocket.OPEN) {
|
|
@@ -166,10 +143,11 @@
|
|
|
}
|
|
|
|
|
|
// Attach mouse event listeners
|
|
|
- document.addEventListener('mousemove', handleMouseMove);
|
|
|
- document.addEventListener('mousedown', handleMousePress);
|
|
|
- document.addEventListener('mouseup', handleMouseRelease);
|
|
|
- document.addEventListener('wheel', handleMouseScroll);
|
|
|
+ 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) {
|
|
@@ -251,7 +229,7 @@
|
|
|
});
|
|
|
|
|
|
socket.addEventListener('message', function(event) {
|
|
|
- console.log('Message from server ', event.data);
|
|
|
+ //console.log('Message from server ', event.data);
|
|
|
});
|
|
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
@@ -270,26 +248,21 @@
|
|
|
document.removeEventListener('keyup', handleKeyUp);
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- $(document).ready(function(){
|
|
|
- startWebSocket();
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
/* Audio Streaming Frontend */
|
|
|
let audioSocket;
|
|
|
let audioContext;
|
|
|
let audioQueue = [];
|
|
|
let audioPlaying = false;
|
|
|
|
|
|
- function startAudioWebSocket() {
|
|
|
+ //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`;
|
|
|
+ let audioSocketURL = `${protocol}://${window.location.hostname}:${port}/audio?quality=${quality}`;
|
|
|
|
|
|
audioSocket = new WebSocket(audioSocketURL);
|
|
|
audioSocket.binaryType = 'arraybuffer';
|
|
@@ -301,7 +274,16 @@
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+
|
|
|
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;
|
|
@@ -350,7 +332,7 @@
|
|
|
while (audioQueue.length > 0) {
|
|
|
let floatBuf = audioQueue.shift();
|
|
|
let frameCount = floatBuf.length / 2;
|
|
|
- let buffer = audioContext.createBuffer(2, frameCount, 48000);
|
|
|
+ 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++) {
|
|
@@ -386,6 +368,12 @@
|
|
|
audioContext = null;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ startWebSocket();
|
|
|
+
|
|
|
+ window.addEventListener('beforeunload', function() {
|
|
|
+ stopAudioWebSocket();
|
|
|
+ });
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|