Untitled

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style scoped>
    video { -webkit-transform: scaleX(1); }
    p { text-align: center; }
</style>
<script>
var faceKey = "9a348d36a65e0b8ca3aa010eeb1b395f";
var faceSecret = "6065c6275fca70d187c0d78e2e94d472";

function init() {

    if (navigator.webkitGetUserMedia) {

        navigator.webkitGetUserMedia('video', gotStream, noStream);

        var video = document.getElementById('monitor');
        var canvas = document.getElementById('photo');

        function gotStream(stream) {

            video.src = webkitURL.createObjectURL(stream);
            video.onerror = function () {
                stream.stop();
                streamError();
            };
            document.getElementById('splash').hidden = true;
            document.getElementById('app').hidden = false;
            $("#snapshotbutton").click(snapshot);
        }

        function noStream() {
            document.getElementById('errorMessage').textContent = 'No camera available.';
        }

        function streamError() {
            document.getElementById('errorMessage').textContent = 'Camera error.';
        }

        function snapshot() {

var file = document.getElementById('fileToUpload').files[0];
         console.dir(file);
             var formdata = new FormData();
             formdata.append("api_key", faceKey);
             formdata.append("api_secret", faceSecret);
             formdata.append("filename", file.name);
             formdata.append("file", file);

             $.ajax({
                 url: 'http://api.face.com/faces/detect.json',
                 data: formdata,
                 cache: false,
                 contentType: false,
                 processData: false,
                 type: 'POST',
                 complete: function (data) {
                     console.log(data);
                 },
                 success: function (data) {
                     console.log(data);
                 }
             });
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0);
            context = canvas.getContext("2d");
//          imgdata = canvas.toDataURL("image/jpg");
            imagedata = context.getImageData(0, 0, canvas.width,canvas.height);

                 var canvaspixelarray = imagedata.data;


                 var canvaspixellen = canvaspixelarray.length;
                 var bytearray = new Uint8Array(canvaspixellen);
var s = "";
                 for (var i=0;i<canvaspixellen;++i) {
                      bytearray[i] = canvaspixelarray[i];
                     s+= canvaspixelarray[i];
                 }


            console.log("ok");

            myformdata = new FormData();
            myformdata.append("api_key", faceKey);
            myformdata.append("api_secret", faceSecret);

            myformdata.append("filename","image.jpg");
            myformdata.append("file",s);

            //begin face.com
            /*
            $.post("http://api.face.com/faces/detect.json?api_key="+faceKey+"&api_secret="+faceSecret+"&callback=", formdata,function(res, code) {
                console.dir(res);
            });
            */
            $.ajax({
                    url: "http://api.face.com/faces/detect.json",
                    type: "POST",
                    data: myformdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    complete: function(res) {
                        console.dir(res);
                    },
                    success: function (res) {
                        alert('wt');
                    }
                });

        }

        function testme() {
            console.log("no way");
        }

    } else {
        document.getElementById('errorMessage').textContent = 'No native camera support available.';
    }

}
</script>
</head>
<body onload="init()">


<h1>Webkit WebRTC Video Element Demo</h1>
<section id="splash">
    <p id="errorMessage">Loading...</p>
</section>
<section id="app" hidden>
    <p><video id="monitor" autoplay></video> <canvas id="photo"></canvas></p>
    <p><input value="say cheese!" type=button value="&#x1F4F7;" id="snapshotbutton">
</section>

<input type="file" id="fileToUpload">

<p>
Credit: http://miernicki.com/cam.html
</p>

</body>
</html>