CompreFace jQuery demo

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript">
        function video() {
            var video = $("#live").get()[0];
            var canvas = $("#canvas");
            var canvas2 = $("#canvas2");
            var ctx = canvas.get()[0].getContext('2d');
            var ctx2 = canvas2.get()[0].getContext('2d');

            navigator.mediaDevices.getUserMedia({
                video: { width: 640, height: 480 }
            }).then(function(stream) {
                video.srcObject = stream;
              });

            function draw() {
                ctx.drawImage(video, 0, 0, 640, 480);
                canvas[0].toBlob(function(blob){
                    blob.name = "blob.jpeg"
                    var fd = new FormData();
                    fd.append('file', blob, "blob.jpeg");
                    $.ajax({
                      type: "POST",
                      url: "http://localhost:8000/api/v1/detection/detect?face_plugins=landmarks2d106",
                      data: fd,
                      dataType: 'multipart/form-data',
                      headers: {
                        "x-api-key": "f5e06ab3-ef59-495e-9731-82cd52f28aa1"
                      },
                        processData: false,
                        contentType: false
                    }).always(function( data ) {
                        const evt = new Event("next_frame", {"bubbles":true, "cancelable":false});
                        document.dispatchEvent(evt);
                        var body = JSON.parse(data.responseText);
                        var box = JSON.parse(data.responseText).result[0].box;
                        ctx2.clearRect(0, 0, 640, 480);
                        ctx2.drawImage(video, 0, 0, 640, 480);
                        ctx2.strokeStyle = 'green';
                        ctx2.strokeRect(box.x_min, box.y_min, box.x_max - box.x_min, box.y_max - box.y_min);
                      });
                }, 'image/jpeg', 0.95);
            }

            document.addEventListener("next_frame", draw);

            const evt = new Event("next_frame", {"bubbles":true, "cancelable":false});
            document.dispatchEvent(evt);

        }


    </script>
    <title>test</title>
</head>
<body>
    <button onclick="video()">video</button>
<video id="live" width="640" height="480" autoplay style="display:none;"></video>
<canvas width="640" id="canvas" height="480" style="display:none;"></canvas>
<canvas width="640" id="canvas2" height="480"></canvas>
</body>
</html>