bullet-time/index.html at main · h4us/bullet-time · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Camera</title>
    <style>
      body {
        margin: 0;
      }

      select {
        display: block;
        margin-bottom: 1rem;
      }

      video {
        max-width: 100%;
        height: auto;
      }
    </style>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
      window.addEventListener("load", () => {
        let id = parseInt(location.pathname.split("/").join(""));
        if (id < 10) {
          id = `0${id}`;
        }
        id = id.toString();

        const video = document.querySelector("video");
        const constraints = {
          audio: false,
          video: {},
        };

        navigator.mediaDevices
          .getUserMedia(constraints)
          .then((stream) => {
            video.srcObject = stream;

            navigator.mediaDevices
              .enumerateDevices()
              .then((devices) => {
                const inputSelector = document.querySelector("#cameras");

                inputSelector.addEventListener("change", (e) => {
                  const selectedId = e.target.value;
                  if (selectedId) {
                    const constraints = {
                      audio: false,
                      video: { deviceId: selectedId },
                    };

                    navigator.mediaDevices
                      .getUserMedia(constraints)
                      .then((stream) => {
                        video.srcObject = stream;
                      })
                      .catch((err) => {
                        console.error(`${err.name}: ${err.message}`);
                      });
                  } else {
                    video.srcObject = null;
                  }
                });

                video.addEventListener("loadedmetadata", () => {
                  video.play();
                  console.log(video.clientWidth, video.clientHeight);
                });

                devices.forEach((device) => {
                  if (device.kind === "videoinput") {
                    if (device.deviceId) {
                      console.log(device.label, device.deviceId);
                      const opt = document.createElement("option");
                      opt.value = device.deviceId;
                      opt.text = device.label;
                      inputSelector.add(opt);
                    } else {
                      const p = document.createElement("p");
                      p.appendChild(
                        document.createTextNode("Couldn't get the device ID")
                      );
                      document.body.appendChild(p);
                    }
                  }
                });
              })
              .catch((err) => {
                console.error(`${err.name}: ${err.message}`);
              });
          })
          .catch((err) => {
            console.error(`${err.name}: ${err.message}`);
          });

        socket.on("capture", () => {
          const canvas = document.createElement("canvas");
          canvas.width = video.clientWidth;
          canvas.height = video.clientHeight;
          const ctx = canvas.getContext("2d");
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          const data = canvas.toDataURL("image/jpeg");
          sendImage(data);
        });

        function sendImage(data) {
          console.log(id);
          const xhr = new XMLHttpRequest();
          xhr.open("POST", `/${id}/capture`, true);
          xhr.setRequestHeader("Content-Type", "application/json");
          xhr.send(JSON.stringify({ data }));
        }
      });
    </script>
  </head>
  <body>
    <select id="cameras">
      <option value="">Select a camera</option>
    </select>
    <video src="" muted autoplay playsinline></video>
  </body>
</html>