index.html

  
 <html>
  <head>
    <title>Video Stream</title>
  </head>
  <body style="background-color:#222;">
    <h1>Video Stream</h1>
    <img id="currentImage" style="border:2px solid teal;height:700px;">
    <script>

      var img = document.getElementById("currentImage");
      var ws = new WebSocket("ws://" + location.host + "/stream");

      ws.onopen = function() {
          console.log("connection was established");
          ws.send("next");
      };

      ws.onmessage = function(msg) {
          img.src = 'data:image/png;base64, ' + msg.data;
      };

      img.onload = function() {
        ws.send("next");
      }
    </script>
  </body>
</html>