realtime_animation_stream/index.html at master · checkmate2022/realtime_animation_stream · 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
<!DOCTYPE HTML>
<html>
  <head>
    <title>Webcam over WebSocket using OpenCV and Tornado</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
         if ("WebSocket" in window) {
            var ws_path = 'ws://' + window.location.host + window.location.pathname + 'ws';
            //alert(ws_path);
            var ws = new WebSocket (ws_path);
            //alert(ws);
            ws.onopen = function () {
               ws.send(1);
            };
            ws.onmessage = function (msg) {
               $("#cam").attr('src', 'data:image/jpg;base64,' + msg.data);
               ws.send(1);
            };
            ws.onerror = function (e) {
               console.log(e);
               ws.send(1);
            };
         } else {
             alert("WebSocket not supported");
         }
      });
    </script>
  </head>
  <body>
    <img id="cam" src=""/>
  </body>
</html>