index.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  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. <script>
  23. let socket;
  24. let protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
  25. let port = window.location.port ? window.location.port : (protocol === 'wss' ? 443 : 80);
  26. let socketURL = `${protocol}://${window.location.hostname}:${port}/hid`;
  27. /* Mouse */
  28. document.getElementById('capture').addEventListener('click', function() {
  29. document.body.requestPointerLock();
  30. document.addEventListener('mousemove', handleMouseMove);
  31. document.addEventListener('mousedown', handleMouseDown);
  32. document.addEventListener('mouseup', handleMouseUp);
  33. document.addEventListener('wheel', handleScroll);
  34. });
  35. function handleMouseDown(event) {
  36. console.log(`Mouse button pressed: Button=${event.button}`);
  37. if (socket) {
  38. socket.send(JSON.stringify({ t: 'mw', s: 'md', d: event.button+"" }));
  39. }
  40. }
  41. function handleMouseUp(event) {
  42. console.log(`Mouse button released: Button=${event.button}`);
  43. if (socket) {
  44. socket.send(JSON.stringify({ t: 'mw', s: 'mu', d: event.button+"" }));
  45. }
  46. }
  47. function handleScroll(event) {
  48. console.log(`Mouse scrolled: DeltaX=${event.deltaX}, DeltaY=${event.deltaY}`);
  49. if (socket) {
  50. socket.send(JSON.stringify({ t: 'ms', y: event.deltaY }));
  51. }
  52. }
  53. document.addEventListener('pointerlockchange', function() {
  54. if (document.pointerLockElement === document.body) {
  55. console.log('Pointer locked');
  56. } else {
  57. console.log('Pointer unlocked');
  58. document.removeEventListener('mousemove', handleMouseMove);
  59. }
  60. });
  61. function handleMouseMove(event) {
  62. console.log(`Mouse moved: X=${event.movementX}, Y=${event.movementY}`);
  63. if (socket) {
  64. socket.send(JSON.stringify({ t: 'mm', x: event.movementX, y: event.movementY }));
  65. }
  66. }
  67. /* Keyboard */
  68. document.getElementById('startButton').addEventListener('click', function() {
  69. const socketUrl = socketURL;
  70. socket = new WebSocket(socketUrl);
  71. socket.addEventListener('open', function(event) {
  72. console.log('WebSocket is connected.');
  73. });
  74. socket.addEventListener('message', function(event) {
  75. console.log('Message from server ', event.data);
  76. });
  77. document.addEventListener('keydown', handleKeyDown);
  78. document.addEventListener('keyup', handleKeyUp);
  79. });
  80. document.getElementById('stopButton').addEventListener('click', function() {
  81. if (socket) {
  82. socket.close();
  83. console.log('WebSocket is disconnected.');
  84. }
  85. document.removeEventListener('keydown', handleKeyDown);
  86. document.removeEventListener('keyup', handleKeyUp);
  87. });
  88. function isNumpadEvent(event) {
  89. return event.location === 3;
  90. }
  91. function handleKeyDown(event) {
  92. event.preventDefault();
  93. const key = event.key;
  94. if (socket){
  95. if (key == "Shift" || key == "Control" || key == "Alt"){
  96. if (event.location == 1){
  97. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "LEFT_" + key }));
  98. } else {
  99. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "RIGHT_" + key }));
  100. }
  101. }else if (isNumpadEvent(event)){
  102. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "NUMPAD_" + key }));
  103. }else if (key == "PrintScreen"){
  104. //Do nothing, press is hardware offloaded
  105. }else{
  106. socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: key }));
  107. }
  108. }
  109. }
  110. function handleKeyUp(event) {
  111. event.preventDefault();
  112. const key = event.key;
  113. if (socket) {
  114. if (key == "Shift" || key == "Control" || key == "Alt") {
  115. if (event.location == 1) {
  116. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "LEFT_" + key }));
  117. } else {
  118. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "RIGHT_" + key }));
  119. }
  120. }else if (isNumpadEvent(event)){
  121. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "NUMPAD_" + key }));
  122. }else if (key == "NumLock" || key == "Pause"){
  123. //Do nothing, release is hardware offloaded
  124. } else {
  125. socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: key }));
  126. }
  127. }
  128. }
  129. </script>
  130. </body>
  131. </html>