kvmevt.js 12 KB

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