WL-Tech-FPV-CAR/index.html at main · DEEFRAG/WL-Tech-FPV-CAR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Joystick + WebRTC Stream</title>
</head>
<body>
  <iframe
    src="http://localhost:8889/proxied"
    width="1280"
    height="720"
    allow="camera; microphone; fullscreen"
    style="border:none">
  </iframe>

  <script>
    const socket = new WebSocket("ws://localhost:8765");

    function sendJoystick(x, y) {
      if (socket.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ x, y }));
      }
    }

    function loop() {
      const gamepad = navigator.getGamepads()[0];
      if (gamepad) {
        const x = gamepad.axes[0];
        const y = gamepad.axes[1];
        sendJoystick(x, y);
      }
      requestAnimationFrame(loop);
    }

    function waitForGamepad(timeout = 5000) {
      let waited = 0;
      const interval = 100;

      const check = setInterval(() => {
        const gp = navigator.getGamepads()[0];
        waited += interval;

        if (gp) {
          console.log("Gamepad detected.");
          clearInterval(check);
          loop();
        } else if (waited >= timeout) {
          console.warn("No Gamepad detected. Reloading...");
          clearInterval(check);
          location.reload();
        }
      }, interval);
    }

    window.addEventListener("load", () => {
      waitForGamepad();
    });

    window.addEventListener("gamepadconnected", (e) => {
      console.log("Gamepad connected:", e.gamepad);
      loop();
    });
  </script>
</body>
</html>