Face Recognition

by ismaelc

HTML

<script src="http://wolframhempel.github.com/photobooth-js/photobooth_min.js"></script>
<script src="https://raw.github.com/jaysalvat/jquery.facedetection/master/js/jquery.facedetection.js"></script>
<script src="https://raw.github.com/jaysalvat/jquery.facedetection/master/js/facedetection/ccv.js"></script>
<script src="https://raw.github.com/jaysalvat/jquery.facedetection/master/js/facedetection/face.js"></script>
<div id="photo"></div>
<h3>Sample Code for Face Recognition in Javascript (Mashape)</h3>
1. Mashape key: 
<br/>&nbsp;&nbsp;&nbsp;
<input type="text" id="mashapeKey" value="FT8HznbkAmNaXLKpzXVmlbP1Rp7Vtm1R" />
<br/>2. album: 
<br/>&nbsp;&nbsp;&nbsp;
<input type="text" id="album" value="apitraveler" />
<br/>3.albumkey: 
<br/>&nbsp;&nbsp;&nbsp;
<input type="text" id="albumkey" value="c2de7705a8dfd6056fe0cfb9e486e55ca62bde9ba41fd5990f0d0d8b87aa193f" />
<div id="gallery"></div>

CSS

#photo {
    height: 300px;
    width: 380px;
}
#gallery {
    margin: 5px 0;
    background: #f6f6f6;
}

JavaScript

$(document).ready(function () {
    var file = null;
    $('#photo').photobooth().on("image", function (event, dataUrl) {
        file = dataURLtoBlob(dataUrl);
        var size = file.size;
        alert("Picture size: " + size);
        uploadImage(file);
        $("#gallery").append('<img src="' + dataUrl + '" >');
    });
});

 $(function() {
        var coords = $('.photobooth.T').faceDetection();
        console.log(coords);    
    });


function dataURLtoBlob(dataUrl) {
    // Decode the dataURL    
    var binary = atob(dataUrl.split(',')[1]);

    // Create 8-bit unsigned array
    var array = [];
    for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }

    // Return our Blob object
    return new Blob([new Uint8Array(array)], {
        type: 'image/png'
    });
}

function uploadImage(file) {
    var fd = new FormData();
    // Append our Canvas image file to the form data
    fd.append("files", file);
    fd.append("album", $("#album").val());
    fd.append("albumkey", $("#albumkey").val());
    // And send it
    $.ajax({
        url: "https://lambda-face-recognition.p.mashape.com/recognize",
        type: "POST",
        data: fd,
        processData: false,
        contentType: false,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("X-Mashape-Authorization", $("#mashapeKey").val());
        }
    }).done(function (result) {
        alert("Received response..");
        var resultObject = JSON.stringify(result);
        alert(resultObject);
    });
}