index.html 15 KB

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