Elijas/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Excerpt from 

https://pastebin.com/KSfJrdWR 

https://www.reddit.com/r/coolgithubprojects/comments/n6zek1/compreface_version_05_is_live_heres_whats_new/gxf6uq9?utm_source=share&utm_medium=web2x&context=3


To try it out you need to create a detection service and replace the API key. It will work out of the box, just open it in a browser.
Please send subject as query param: "http://localhost:8000/api/v1/recognition/faces/?subject=" + name
x-api-key should be in header:
headers: {
    "x-api-key": "f5e06ab3-ef59-495e-9731-82cd52f28aa1"
}

Do not forget:
processData: false,
contentType: false

Other examples that could be useful:
Our JS SDK webcam demo: https://github.com/exadel-inc/compreface-javascript-sdk/tree/sdk-0.5.1/webcam_demo
A third-party project that uses CompreFace: https://github.com/jakowenko/double-take/blob/eeb34c6008b38aa5bb347d3940a9ffa84052b915/api/src/util/detectors/compreface.js


## index.html
<!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>
	<!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>