kvmevt.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. /*
  2. kvmevt.js
  3. Keyboard, Video, Mouse (KVM) over WebSocket client-side event handling.
  4. Handles mouse and keyboard events, sending them to the server via WebSocket.
  5. Also manages audio streaming from the server.
  6. */
  7. const enableKvmEventDebugPrintout = false; //Set to true to enable debug printout
  8. const cursorCaptureElementId = "remoteCapture";
  9. let socket;
  10. let protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
  11. let port = window.location.port ? window.location.port : (protocol === 'wss' ? 443 : 80);
  12. let hidSocketURL = `${protocol}://${window.location.hostname}:${port}/api/v1/hid/{uuid}/events`;
  13. let audioSocketURL = `${protocol}://${window.location.hostname}:${port}/api/v1/stream/{uuid}/audio`;
  14. let mouseMoveAbsolute = true; // Set to true for absolute mouse coordinates, false for relative
  15. let mouseIsOutside = false; //Mouse is outside capture element
  16. let audioFrontendStarted = false; //Audio frontend has been started
  17. let kvmDeviceUUID = ""; //UUID of the device being controlled
  18. if (window.location.hash.length > 1){
  19. kvmDeviceUUID = window.location.hash.substring(1);
  20. hidSocketURL = hidSocketURL.replace("{uuid}", kvmDeviceUUID);
  21. audioSocketURL = audioSocketURL.replace("{uuid}", kvmDeviceUUID);
  22. massStorageSwitchURL = massStorageSwitchURL.replace("{uuid}", kvmDeviceUUID);
  23. }
  24. $(document).ready(function() {
  25. setStreamingSource(kvmDeviceUUID);
  26. //Start HID WebSocket
  27. startHidWebSocket();
  28. });
  29. /* Initiate API endpoint */
  30. function setStreamingSource(deviceUUID) {
  31. let videoStreamURL = `/api/v1/stream/${deviceUUID}/video`
  32. let videoElement = document.getElementById("remoteCapture");
  33. videoElement.src = videoStreamURL;
  34. }
  35. /* Mouse events */
  36. function handleMouseMove(event) {
  37. const hidCommand = {
  38. event: 2,
  39. mouse_x: event.clientX,
  40. mouse_y: event.clientY,
  41. };
  42. const rect = event.target.getBoundingClientRect();
  43. const relativeX = event.clientX - rect.left;
  44. const relativeY = event.clientY - rect.top;
  45. if (relativeX < 0 || relativeY < 0 || relativeX > rect.width || relativeY > rect.height) {
  46. mouseIsOutside = true;
  47. return; // Mouse is outside the client rect
  48. }
  49. mouseIsOutside = false;
  50. const percentageX = (relativeX / rect.width) * 4096;
  51. const percentageY = (relativeY / rect.height) * 4096;
  52. hidCommand.mouse_x = Math.round(percentageX);
  53. hidCommand.mouse_y = Math.round(percentageY);
  54. if (enableKvmEventDebugPrintout) {
  55. console.log(`Mouse move: (${event.clientX}, ${event.clientY})`);
  56. console.log(`Mouse move relative: (${relativeX}, ${relativeY})`);
  57. console.log(`Mouse move percentage: (${hidCommand.mouse_x}, ${hidCommand.mouse_y})`);
  58. }
  59. if (socket && socket.readyState === WebSocket.OPEN) {
  60. socket.send(JSON.stringify(hidCommand));
  61. } else {
  62. console.error("WebSocket is not open.");
  63. }
  64. }
  65. function handleMousePress(event) {
  66. event.preventDefault();
  67. event.stopImmediatePropagation();
  68. if (mouseIsOutside) {
  69. console.warn("Mouse is outside the capture area, ignoring mouse press.");
  70. return;
  71. }
  72. /* Mouse buttons: 1=left, 2=right, 3=middle */
  73. const buttonMap = {
  74. 0: 1,
  75. 1: 3,
  76. 2: 2
  77. }; //Map javascript mouse buttons to HID buttons
  78. const hidCommand = {
  79. event: 3,
  80. mouse_button: buttonMap[event.button] || 0
  81. };
  82. // Log the mouse button state
  83. if (enableKvmEventDebugPrintout) {
  84. console.log(`Mouse down: ${hidCommand.mouse_button}`);
  85. }
  86. if (socket && socket.readyState === WebSocket.OPEN) {
  87. socket.send(JSON.stringify(hidCommand));
  88. } else {
  89. console.error("WebSocket is not open.");
  90. }
  91. if (!audioFrontendStarted){
  92. startAudioWebSocket();
  93. audioFrontendStarted = true;
  94. }
  95. }
  96. function handleMouseRelease(event) {
  97. event.preventDefault();
  98. event.stopImmediatePropagation();
  99. if (mouseIsOutside) {
  100. console.warn("Mouse is outside the capture area, ignoring mouse press.");
  101. return;
  102. }
  103. /* Mouse buttons: 1=left, 2=right, 3=middle */
  104. const buttonMap = {
  105. 0: 1,
  106. 1: 3,
  107. 2: 2
  108. }; //Map javascript mouse buttons to HID buttons
  109. const hidCommand = {
  110. event: 4,
  111. mouse_button: buttonMap[event.button] || 0
  112. };
  113. if (enableKvmEventDebugPrintout) {
  114. console.log(`Mouse release: ${hidCommand.mouse_button}`);
  115. }
  116. if (socket && socket.readyState === WebSocket.OPEN) {
  117. socket.send(JSON.stringify(hidCommand));
  118. } else {
  119. console.error("WebSocket is not open.");
  120. }
  121. }
  122. function handleMouseScroll(event) {
  123. const hidCommand = {
  124. event: 5,
  125. mouse_scroll: event.deltaY
  126. };
  127. if (mouseIsOutside) {
  128. console.warn("Mouse is outside the capture area, ignoring mouse press.");
  129. return;
  130. }
  131. if (enableKvmEventDebugPrintout) {
  132. console.log(`Mouse scroll: mouse_scroll=${event.deltaY}`);
  133. }
  134. if (socket && socket.readyState === WebSocket.OPEN) {
  135. socket.send(JSON.stringify(hidCommand));
  136. } else {
  137. console.error("WebSocket is not open.");
  138. }
  139. }
  140. // Attach mouse event listeners
  141. let remoteCaptureEle = document.getElementById(cursorCaptureElementId);
  142. remoteCaptureEle.addEventListener('mousemove', handleMouseMove);
  143. remoteCaptureEle.addEventListener('mousedown', handleMousePress);
  144. remoteCaptureEle.addEventListener('mouseup', handleMouseRelease);
  145. remoteCaptureEle.addEventListener('wheel', handleMouseScroll);
  146. /* Keyboard */
  147. function isNumpadEvent(event) {
  148. return event.location === 3;
  149. }
  150. function handleKeyDown(event) {
  151. event.preventDefault();
  152. event.stopImmediatePropagation();
  153. const key = event.key;
  154. let hidCommand = {
  155. event: 0,
  156. keycode: event.keyCode
  157. };
  158. if (enableKvmEventDebugPrintout) {
  159. console.log(`Key down: ${key} (code: ${event.keyCode})`);
  160. }
  161. // Check if the key is a modkey on the right side of the keyboard
  162. const rightModKeys = ['Control', 'Alt', 'Shift', 'Meta'];
  163. if (rightModKeys.includes(key) && event.location === 2) {
  164. hidCommand.is_right_modifier_key = true;
  165. }else if (key === 'Enter' && isNumpadEvent(event)) {
  166. //Special case for Numpad Enter
  167. hidCommand.is_right_modifier_key = true;
  168. }else{
  169. hidCommand.is_right_modifier_key = false;
  170. }
  171. if (socket && socket.readyState === WebSocket.OPEN) {
  172. socket.send(JSON.stringify(hidCommand));
  173. } else {
  174. console.error("WebSocket is not open.");
  175. }
  176. }
  177. function handleKeyUp(event) {
  178. event.preventDefault();
  179. event.stopImmediatePropagation();
  180. const key = event.key;
  181. let hidCommand = {
  182. event: 1,
  183. keycode: event.keyCode
  184. };
  185. if (enableKvmEventDebugPrintout) {
  186. console.log(`Key up: ${key} (code: ${event.keyCode})`);
  187. }
  188. // Check if the key is a modkey on the right side of the keyboard
  189. const rightModKeys = ['Control', 'Alt', 'Shift', 'Meta'];
  190. if (rightModKeys.includes(key) && event.location === 2) {
  191. hidCommand.is_right_modifier_key = true;
  192. } else if (key === 'Enter' && isNumpadEvent(event)) {
  193. //Special case for Numpad Enter
  194. hidCommand.is_right_modifier_key = true;
  195. }else{
  196. hidCommand.is_right_modifier_key = false;
  197. }
  198. if (socket && socket.readyState === WebSocket.OPEN) {
  199. socket.send(JSON.stringify(hidCommand));
  200. } else {
  201. console.error("WebSocket is not open.");
  202. }
  203. }
  204. /* Start and Stop HID events */
  205. function startHidWebSocket(){
  206. if (socket){
  207. //Already started
  208. console.warn("Invalid usage: HID Transport Websocket already started!");
  209. return;
  210. }
  211. const socketUrl = hidSocketURL;
  212. socket = new WebSocket(socketUrl);
  213. socket.addEventListener('open', function(event) {
  214. console.log('HID Transport WebSocket is connected.');
  215. // Send a soft reset command to the server to reset the HID state
  216. // that possibly got out of sync from previous session
  217. const hidResetCommand = {
  218. event: 0xFF
  219. };
  220. socket.send(JSON.stringify(hidResetCommand));
  221. });
  222. socket.addEventListener('message', function(event) {
  223. //Todo: handle control signals from server if needed
  224. //console.log('Message from server ', event.data);
  225. });
  226. document.addEventListener('keydown', handleKeyDown);
  227. document.addEventListener('keyup', handleKeyUp);
  228. }
  229. function stopWebSocket(){
  230. if (!socket){
  231. alert("No ws connection to stop");
  232. return;
  233. }
  234. socket.close();
  235. console.log('HID Transport WebSocket disconnected.');
  236. document.removeEventListener('keydown', handleKeyDown);
  237. document.removeEventListener('keyup', handleKeyUp);
  238. }
  239. /* Audio Streaming Frontend */
  240. let audioSocket;
  241. let audioContext;
  242. let audioQueue = [];
  243. let audioPlaying = false;
  244. //accept low, standard, high quality audio mode
  245. function startAudioWebSocket(quality="standard") {
  246. if (audioSocket) {
  247. console.warn("Audio WebSocket already started");
  248. return;
  249. }
  250. const socketURL = `${audioSocketURL}?quality=${quality}`;
  251. audioSocket = new WebSocket(socketURL);
  252. audioSocket.binaryType = 'arraybuffer';
  253. audioSocket.onopen = function() {
  254. console.log("Audio WebSocket connected");
  255. if (!audioContext) {
  256. audioContext = new (window.AudioContext || window.webkitAudioContext)({sampleRate: 24000});
  257. }
  258. };
  259. const MAX_AUDIO_QUEUE = 4;
  260. let PCM_SAMPLE_RATE;
  261. if (quality == "high"){
  262. PCM_SAMPLE_RATE = 48000; // Use 48kHz for high quality
  263. } else if (quality == "low") {
  264. PCM_SAMPLE_RATE = 16000; // Use 24kHz for low quality
  265. } else {
  266. PCM_SAMPLE_RATE = 24000; // Default to 24kHz for standard quality
  267. }
  268. let scheduledTime = 0;
  269. audioSocket.onmessage = function(event) {
  270. if (!audioContext) return;
  271. let pcm = new Int16Array(event.data);
  272. if (pcm.length === 0) {
  273. console.warn("Received empty PCM data");
  274. return;
  275. }
  276. if (pcm.length % 2 !== 0) {
  277. console.warn("Received PCM data with odd length, dropping last sample");
  278. pcm = pcm.slice(0, -1);
  279. }
  280. // Convert Int16 PCM to Float32 [-1, 1]
  281. let floatBuf = new Float32Array(pcm.length);
  282. for (let i = 0; i < pcm.length; i++) {
  283. floatBuf[i] = pcm[i] / 32768;
  284. }
  285. // Limit queue size to prevent memory overflow
  286. if (audioQueue.length >= MAX_AUDIO_QUEUE) {
  287. audioQueue.shift();
  288. }
  289. audioQueue.push(floatBuf);
  290. scheduleAudioPlayback();
  291. };
  292. audioSocket.onclose = function() {
  293. console.log("Audio WebSocket closed");
  294. audioSocket = null;
  295. audioPlaying = false;
  296. audioQueue = [];
  297. scheduledTime = 0;
  298. };
  299. audioSocket.onerror = function(e) {
  300. console.error("Audio WebSocket error", e);
  301. };
  302. function scheduleAudioPlayback() {
  303. if (!audioContext || audioQueue.length === 0) return;
  304. // Use audioContext.currentTime to schedule buffers back-to-back
  305. if (scheduledTime < audioContext.currentTime) {
  306. scheduledTime = audioContext.currentTime;
  307. }
  308. while (audioQueue.length > 0) {
  309. let floatBuf = audioQueue.shift();
  310. let frameCount = floatBuf.length / 2;
  311. let buffer = audioContext.createBuffer(2, frameCount, PCM_SAMPLE_RATE);
  312. for (let ch = 0; ch < 2; ch++) {
  313. let channelData = buffer.getChannelData(ch);
  314. for (let i = 0; i < frameCount; i++) {
  315. channelData[i] = floatBuf[i * 2 + ch];
  316. }
  317. }
  318. if (scheduledTime - audioContext.currentTime > 0.2) {
  319. console.warn("Audio buffer too far ahead, discarding frame");
  320. continue;
  321. }
  322. let source = audioContext.createBufferSource();
  323. source.buffer = buffer;
  324. source.connect(audioContext.destination);
  325. source.start(scheduledTime);
  326. scheduledTime += buffer.duration;
  327. }
  328. }
  329. }
  330. function stopAudioWebSocket() {
  331. if (!audioSocket) {
  332. console.warn("No audio WebSocket to stop");
  333. return;
  334. }
  335. if (audioSocket.readyState === WebSocket.OPEN) {
  336. audioSocket.send("exit");
  337. }
  338. audioSocket.onclose = null; // Prevent onclose from being called again
  339. audioSocket.onerror = null; // Prevent onerror from being called again
  340. audioSocket.close();
  341. audioSocket = null;
  342. audioPlaying = false;
  343. audioQueue = [];
  344. if (audioContext) {
  345. audioContext.close();
  346. audioContext = null;
  347. }
  348. }
  349. window.addEventListener('beforeunload', function() {
  350. stopAudioWebSocket();
  351. });