static/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Blink Liveview Middleware - Demo</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 8px;
      background: #757575;
      color: #000;
    }

    h1 {
      margin: 0
    }

    video {
      width: 100%;
      max-width: 640px;
    }
  </style>
</head>

<body>
  <h1>Blink Liveview Middleware - Demo</h1>
  <div>
    <div>
      <h2>Controls</h2>
      <button id="open">Open</button>
      <button id="close" disabled>Close</button>
      <button id="toggle-liveview" disabled>Start Liveview</button>
    </div>
    <div>
      <h2>Connection Credentials</h2>
      <form>
        <div>
          <label for="account-region">Account Region</label>
          <input type="text" id="account-region" placeholder="u011" />
        </div>
        <div>
          <label for="api-token">API Token</label>
          <input type="text" id="api-token" placeholder="" />
        </div>
        <div>
          <label for="account-id">Account ID</label>
          <input type="number" id="account-id" placeholder="57381" />
        </div>
        <div>
          <label for="network-id">Network ID</label>
          <input type="number" id="network-id" placeholder="128991" />
        </div>
        <div>
          <label for="camera-id">Camera ID</label>
          <input type="number" id="camera-id" placeholder="122" />
        </div>
        <div>
          <label for="camera-type">Camera Type</label>
          <input type="text" id="camera-type" placeholder="owl" />
        </div>
      </form>
    </div>
    <hr />
    <div>
      <h2>Video stream</h2>
      <video id="video" alt="Video stream" controls />
    </div>
    <div>
      <h2>Raw WebSocket Output</h2>
      <div id="output" style="max-height: 400px; overflow-y: scroll"></div>
    </div>
  </div>
  <script>
    var ws;
    var liveviewActive = false;
    const mediaSource = new MediaSource();
    let queue = [];
    let sourceBuffer = null;

    document.getElementById("video").src = URL.createObjectURL(mediaSource);

    mediaSource.addEventListener('sourceopen', () => {
      if (!mediaSource.sourceBuffers.length) {
        sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.640029,mp4a.40.2"');
        sourceBuffer.mode = "segments";
      }

      sourceBuffer.addEventListener('updateend', () => {
        if (queue.length > 0 && !sourceBuffer.updating) {
          sourceBuffer.appendBuffer(queue.shift());
        }
      });
    });

    const output = document.getElementById("output");
    const print = (data) => {
      var d = document.createElement("div");
      d.textContent = data;
      output.appendChild(d);
      output.scroll(0, output.scrollHeight);
    };

    const toggleButtons = (state) => {
      document.getElementById("open").disabled = !state;
      document.getElementById("toggle-liveview").disabled = state;
      document.getElementById("close").disabled = state;
      toggleLiveview(false);
    };

    const toggleLiveview = (state) => {
      liveviewActive = state;
      document.getElementById("toggle-liveview").textContent = !state ? "Start Liveview" : "Stop Liveview";
    };

    document.getElementById("open").onclick = function (evt) {
      if (ws) {
        return false;
      }

      ws = new WebSocket("ws://localhost:8080/liveview");
      ws.binaryType = "arraybuffer";

      ws.onopen = function (evt) {
        print("OPEN");
        toggleButtons(false);
      }

      ws.onclose = function (evt) {
        print("CLOSE");
        toggleButtons(true);
        ws = null;
      }

      ws.onmessage = function (evt) {
        if (evt.data instanceof ArrayBuffer) {
          queue.push(new Uint8Array(evt.data));
          if (sourceBuffer && !sourceBuffer.updating) {
            sourceBuffer.appendBuffer(queue.shift());
          }

          return;
        }

        if (JSON.parse(evt.data)?.command === "liveview:stop") {
          toggleLiveview(false);
          document.getElementById("video").pause();
        } else if (JSON.parse(evt.data)?.command === "liveview:start") {
          document.getElementById("video").play();
        }

        print("RESPONSE: " + evt.data);
      }
      ws.onerror = function (evt) {
        print("ERROR: " + evt.data);
      }

      return false;
    };

    document.getElementById("toggle-liveview").onclick = function (evt) {
      if (!ws) {
        return false;
      }

      if (liveviewActive) {
        const data = {
          command: "liveview:stop",
          data: {},
        };
        ws.send(JSON.stringify(data));
        print("SENT: " + JSON.stringify(data));
        toggleLiveview(false);
        return false;
      }

      const form = document.querySelector("form");
      const data = {
        command: "liveview:start",
        data: {
          account_region: form.querySelector("#account-region").value,
          api_token: form.querySelector("#api-token").value,
          account_id: form.querySelector("#account-id").value,
          network_id: form.querySelector("#network-id").value,
          camera_id: form.querySelector("#camera-id").value,
          camera_type: form.querySelector("#camera-type").value,
        },
      };
      localStorage.setItem("details", JSON.stringify(data));
      ws.send(JSON.stringify(data));
      toggleLiveview(true);
      print("SENT: " + JSON.stringify(data));
    };

    document.getElementById("close").onclick = function (evt) {
      if (!ws) {
        return false;
      }
      ws.close();
      return false;
    };

    window.onload = function (evt) {
      const details = JSON.parse(localStorage.getItem("details"));
      if (details) {
        const form = document.querySelector("form");
        form.querySelector("#account-region").value = details.data.account_region;
        form.querySelector("#api-token").value = details.data.api_token;
        form.querySelector("#account-id").value = details.data.account_id;
        form.querySelector("#network-id").value = details.data.network_id;
        form.querySelector("#camera-id").value = details.data.camera_id;
        form.querySelector("#camera-type").value = details.data.camera_type;
      }
    };
  </script>
</body>

</html>