index.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="A basic Hello World HTML page with metadata and OpenGraph headers">
  7. <meta name="author" content="Your Name">
  8. <title>Hello World</title>
  9. <!-- OpenGraph Metadata -->
  10. <meta property="og:title" content="Hello World">
  11. <meta property="og:description" content="A basic Hello World HTML page with metadata and OpenGraph headers">
  12. <meta property="og:type" content="website">
  13. <meta property="og:url" content="http://example.com">
  14. <meta property="og:image" content="http://example.com/image.jpg">
  15. </head>
  16. <body>
  17. <h1>Hello World</h1>
  18. <p>Click start to start connection to backend and start Capture to start KVM-ing</p>
  19. <button id="startButton">Start</button>
  20. <button id="stopButton">Stop</button>
  21. <button id="capture">Capture</button>
  22. <button id="screenshot">Win + Shift + S</button>
  23. <script>
  24. let socket;
  25. let protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
  26. let port = window.location.port ? window.location.port : (protocol === 'wss' ? 443 : 80);
  27. let socketURL = `${protocol}://${window.location.hostname}:${port}/hid`;
  28. /* Mouse */
  29. document.getElementById('capture').addEventListener('click', function(event) {
  30. event.preventDefault();
  31. event.stopPropagation();
  32. document.body.requestPointerLock();
  33. document.addEventListener('mousemove', handleMouseMove);
  34. document.addEventListener('mousedown', handleMouseDown);
  35. document.addEventListener('mouseup', handleMouseUp);
  36. document.addEventListener('wheel', handleScroll);
  37. });
  38. function handleMouseDown(event) {
  39. console.log(`Mouse button pressed: Button=${event.button}`);
  40. if (socket) {
  41. socket.send(JSON.stringify({ t: 'mw', s: 'md', d: event.button+"" }));
  42. }
  43. }
  44. function handleMouseUp(event) {
  45. console.log(`Mouse button released: Button=${event.button}`);
  46. if (socket) {
  47. socket.send(JSON.stringify({ t: 'mw', s: 'mu', d: event.button+"" }));
  48. }
  49. }
  50. function handleScroll(event) {
  51. console.log(`Mouse scrolled: DeltaX=${event.deltaX}, DeltaY=${event.deltaY}`);
  52. if (socket) {
  53. socket.send(JSON.stringify({ t: 'ms', y: event.deltaY }));
  54. }
  55. }
  56. document.addEventListener('pointerlockchange', function() {
  57. if (document.pointerLockElement === document.body) {
  58. console.log('Pointer locked');
  59. } else {
  60. console.log('Pointer unlocked');
  61. document.removeEventListener('mousemove', handleMouseMove);
  62. }
  63. });
  64. function handleMouseMove(event) {
  65. console.log(`Mouse moved: X=${event.movementX}, Y=${event.movementY}`);
  66. if (socket) {
  67. socket.send(JSON.stringify({ t: 'mm', x: event.movementX, y: event.movementY }));
  68. }
  69. }
  70. /* Keyboard */
  71. document.getElementById('startButton').addEventListener('click', function() {
  72. const socketUrl = socketURL;
  73. socket = new WebSocket(socketUrl);
  74. socket.addEventListener('open', function(event) {
  75. console.log('WebSocket is connected.');
  76. });
  77. socket.addEventListener('message', function(event) {
  78. console.log('Message from server ', event.data);
  79. });
  80. document.addEventListener('keydown', handleKeyDown);
  81. document.addEventListener('keyup', handleKeyUp);
  82. });
  83. document.getElementById('stopButton').addEventListener('click', function() {
  84. if (socket) {
  85. socket.close();
  86. console.log('WebSocket is disconnected.');
  87. }
  88. document.removeEventListener('keydown', handleKeyDown);
  89. document.removeEventListener('keyup', handleKeyUp);
  90. });
  91. document.getElementById('screenshot').addEventListener('click', function() {
  92. if (socket) {
  93. // Send keydown for Shift
  94. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 'LEFT_Shift' }));
  95. // Send keydown for Windows key
  96. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 'Meta' }));
  97. // Send keydown for S
  98. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 's' }));
  99. setTimeout(function() {
  100. // Send keyup for S
  101. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 's' }));
  102. // Send keyup for Windows key
  103. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 'Meta' }));
  104. // Send keyup for Shift
  105. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 'LEFT_Shift' }));
  106. }, 1000);
  107. }
  108. });
  109. function isNumpadEvent(event) {
  110. return event.location === 3;
  111. }
  112. function handleKeyDown(event) {
  113. event.preventDefault();
  114. const key = event.key;
  115. if (socket){
  116. if (key == "Shift" || key == "Control" || key == "Alt"){
  117. if (event.location == 1){
  118. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "LEFT_" + key }));
  119. } else {
  120. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "RIGHT_" + key }));
  121. }
  122. }else if (isNumpadEvent(event)){
  123. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "NUMPAD_" + key }));
  124. }else if (key == "PrintScreen"){
  125. //Do nothing, press is hardware offloaded
  126. }else{
  127. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: key }));
  128. }
  129. }
  130. }
  131. function handleKeyUp(event) {
  132. event.preventDefault();
  133. const key = event.key;
  134. if (socket) {
  135. if (key == "Shift" || key == "Control" || key == "Alt") {
  136. if (event.location == 1) {
  137. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "LEFT_" + key }));
  138. } else {
  139. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "RIGHT_" + key }));
  140. }
  141. }else if (isNumpadEvent(event)){
  142. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "NUMPAD_" + key }));
  143. }else if (key == "NumLock" || key == "Pause"){
  144. //Do nothing, release is hardware offloaded
  145. } else {
  146. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: key }));
  147. }
  148. }
  149. }
  150. </script>
  151. </body>
  152. </html>