|
|
@@ -13,6 +13,7 @@
|
|
|
<meta property="og:type" content="website">
|
|
|
<meta property="og:url" content="http://example.com">
|
|
|
<meta property="og:image" content="http://example.com/image.jpg">
|
|
|
+ <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
|
|
<style>
|
|
|
body{
|
|
|
margin: 0;
|
|
|
@@ -22,25 +23,40 @@
|
|
|
pointer-events: none;
|
|
|
user-select: none;
|
|
|
}
|
|
|
+
|
|
|
+ #remoteCaptureWrapper{
|
|
|
+ box-shadow: none !important;
|
|
|
+ border: 0px solid transparent !important;
|
|
|
+ background: none !important;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <img id="remoteCapture" src="/stream"></img>
|
|
|
+ <button id="remoteCaptureWrapper" onclick="startCapture();">
|
|
|
+ <img id="remoteCapture" src="/stream"></img>
|
|
|
+ </button>
|
|
|
<p>Click start to start connection to backend and start Capture to start KVM-ing</p>
|
|
|
- <button id="startButton">Start</button>
|
|
|
- <button id="stopButton">Stop</button>
|
|
|
+ <!-- <button id="startButton">Start</button>
|
|
|
+ <button id="stopButton">Stop</button> -->
|
|
|
<button id="capture">Capture</button>
|
|
|
<button id="screenshot">Win + Shift + S</button>
|
|
|
+ <button id="reconnect">Reset HID</button>
|
|
|
<script>
|
|
|
let socket;
|
|
|
let protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
|
|
let port = window.location.port ? window.location.port : (protocol === 'wss' ? 443 : 80);
|
|
|
let socketURL = `${protocol}://${window.location.hostname}:${port}/hid`;
|
|
|
|
|
|
- /* Mouse */
|
|
|
- document.getElementById('capture').addEventListener('click', function(event) {
|
|
|
- event.preventDefault();
|
|
|
- event.stopPropagation();
|
|
|
+ function isPointerLocked() {
|
|
|
+ return document.pointerLockElement === document.body;
|
|
|
+ }
|
|
|
+
|
|
|
+ function startCapture(){
|
|
|
+ if (!socket) {
|
|
|
+ alert("control websocket is not opened");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log("Start capture called");
|
|
|
|
|
|
// Remove old listeners if they exist
|
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
|
@@ -55,29 +71,39 @@
|
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
|
document.addEventListener('wheel', handleScroll);
|
|
|
|
|
|
- if (socket) {
|
|
|
- // Reset USBKVM state to avoid stuck keys
|
|
|
- socket.send(JSON.stringify({ t: 'reset'}));
|
|
|
- }
|
|
|
+ // Reset USBKVM state to avoid stuck keys
|
|
|
+ socket.send(JSON.stringify({ t: 'reset'}));
|
|
|
+ }
|
|
|
+
|
|
|
+ document.getElementById('capture').addEventListener('click', function(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ event.stopPropagation();
|
|
|
+ startCapture();
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#remoteCapture").on("click", function(){
|
|
|
+ startCapture();
|
|
|
});
|
|
|
|
|
|
+
|
|
|
+ /* Mouse */
|
|
|
function handleMouseDown(event) {
|
|
|
console.log(`Mouse button pressed: Button=${event.button}`);
|
|
|
- if (socket) {
|
|
|
+ if (socket && isPointerLocked()) {
|
|
|
socket.send(JSON.stringify({ t: 'mw', s: 'md', d: event.button+"" }));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handleMouseUp(event) {
|
|
|
console.log(`Mouse button released: Button=${event.button}`);
|
|
|
- if (socket) {
|
|
|
+ if (socket && isPointerLocked()) {
|
|
|
socket.send(JSON.stringify({ t: 'mw', s: 'mu', d: event.button+"" }));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handleScroll(event) {
|
|
|
console.log(`Mouse scrolled: DeltaX=${event.deltaX}, DeltaY=${event.deltaY}`);
|
|
|
- if (socket) {
|
|
|
+ if (socket && isPointerLocked()) {
|
|
|
socket.send(JSON.stringify({ t: 'ms', y: event.deltaY }));
|
|
|
}
|
|
|
}
|
|
|
@@ -93,58 +119,12 @@
|
|
|
|
|
|
function handleMouseMove(event) {
|
|
|
console.log(`Mouse moved: X=${event.movementX}, Y=${event.movementY}`);
|
|
|
- if (socket) {
|
|
|
+ if (socket && isPointerLocked()) {
|
|
|
socket.send(JSON.stringify({ t: 'mm', x: event.movementX, y: event.movementY }));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* Keyboard */
|
|
|
- document.getElementById('startButton').addEventListener('click', function() {
|
|
|
- const socketUrl = socketURL;
|
|
|
- socket = new WebSocket(socketUrl);
|
|
|
-
|
|
|
- socket.addEventListener('open', function(event) {
|
|
|
- console.log('WebSocket is connected.');
|
|
|
- });
|
|
|
-
|
|
|
- socket.addEventListener('message', function(event) {
|
|
|
- console.log('Message from server ', event.data);
|
|
|
- });
|
|
|
-
|
|
|
- document.addEventListener('keydown', handleKeyDown);
|
|
|
- document.addEventListener('keyup', handleKeyUp);
|
|
|
- });
|
|
|
-
|
|
|
- document.getElementById('stopButton').addEventListener('click', function() {
|
|
|
- if (socket) {
|
|
|
- socket.close();
|
|
|
- console.log('WebSocket is disconnected.');
|
|
|
- }
|
|
|
-
|
|
|
- document.removeEventListener('keydown', handleKeyDown);
|
|
|
- document.removeEventListener('keyup', handleKeyUp);
|
|
|
- });
|
|
|
-
|
|
|
- document.getElementById('screenshot').addEventListener('click', function() {
|
|
|
- if (socket) {
|
|
|
- // Send keydown for Shift
|
|
|
- socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 'LEFT_Shift' }));
|
|
|
- // Send keydown for Windows key
|
|
|
- socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 'Meta' }));
|
|
|
- // Send keydown for S
|
|
|
- socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 's' }));
|
|
|
-
|
|
|
- setTimeout(function() {
|
|
|
- // Send keyup for S
|
|
|
- socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 's' }));
|
|
|
- // Send keyup for Windows key
|
|
|
- socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 'Meta' }));
|
|
|
- // Send keyup for Shift
|
|
|
- socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 'LEFT_Shift' }));
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
function isNumpadEvent(event) {
|
|
|
return event.location === 3;
|
|
|
}
|
|
|
@@ -153,7 +133,7 @@
|
|
|
event.preventDefault();
|
|
|
event.stopImmediatePropagation();
|
|
|
const key = event.key;
|
|
|
- if (socket){
|
|
|
+ if (socket && isPointerLocked()){
|
|
|
if (key == "Shift" || key == "Control" || key == "Alt"){
|
|
|
if (event.location == 1){
|
|
|
socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "LEFT_" + key }));
|
|
|
@@ -174,7 +154,7 @@
|
|
|
event.preventDefault();
|
|
|
event.stopImmediatePropagation();
|
|
|
const key = event.key;
|
|
|
- if (socket) {
|
|
|
+ if (socket && isPointerLocked()) {
|
|
|
if (key == "Shift" || key == "Control" || key == "Alt") {
|
|
|
if (event.location == 1) {
|
|
|
socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "LEFT_" + key }));
|
|
|
@@ -191,7 +171,74 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ /* Start and Stop events */
|
|
|
+ function startWebSocket(){
|
|
|
+ if (socket){
|
|
|
+ //Already started
|
|
|
+ alert("Websocket already started");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const socketUrl = socketURL;
|
|
|
+ socket = new WebSocket(socketUrl);
|
|
|
+
|
|
|
+ socket.addEventListener('open', function(event) {
|
|
|
+ console.log('WebSocket is connected.');
|
|
|
+ });
|
|
|
+
|
|
|
+ socket.addEventListener('message', function(event) {
|
|
|
+ console.log('Message from server ', event.data);
|
|
|
+ });
|
|
|
+
|
|
|
+ document.addEventListener('keydown', handleKeyDown);
|
|
|
+ document.addEventListener('keyup', handleKeyUp);
|
|
|
+ }
|
|
|
+
|
|
|
+ function stopWebSocket(){
|
|
|
+ if (!socket){
|
|
|
+ alert("No ws connection to stop");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ socket.close();
|
|
|
+ console.log('WebSocket is disconnected.');
|
|
|
+ document.removeEventListener('keydown', handleKeyDown);
|
|
|
+ document.removeEventListener('keyup', handleKeyUp);
|
|
|
+ }
|
|
|
+
|
|
|
+ document.getElementById('screenshot').addEventListener('click', function() {
|
|
|
+ if (socket) {
|
|
|
+ // Send keydown for Shift
|
|
|
+ socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 'LEFT_Shift' }));
|
|
|
+ // Send keydown for Windows key
|
|
|
+ socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 'Meta' }));
|
|
|
+ // Send keydown for S
|
|
|
+ socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: 's' }));
|
|
|
+
|
|
|
+ setTimeout(function() {
|
|
|
+ // Send keyup for S
|
|
|
+ socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 's' }));
|
|
|
+ // Send keyup for Windows key
|
|
|
+ socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 'Meta' }));
|
|
|
+ // Send keyup for Shift
|
|
|
+ socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: 'LEFT_Shift' }));
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /* Reconnect USB HID to slave device */
|
|
|
+ $("#reconnect").on("click", function(){
|
|
|
+ if (socket) {
|
|
|
+ socket.send(JSON.stringify({ t: 'sw', s: 'hid', d: "reset"}));
|
|
|
+ }else{
|
|
|
+ alert("Websocket conn not established");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
|
|
|
+
|
|
|
+ $(document).ready(function(){
|
|
|
+ startWebSocket();
|
|
|
+ });
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
TC