The code below enables to detect the facial features. I'm having an issue with getting the response when the request is sent. Please help troubleshoot such issue.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Facerect</title>
</head>
<body>
<script>
//chnage this url
url += "url=" + encodeURI(image_location);
url += "&features=true";
alert(url);
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",url,true);
xmlhttp.setRequestHeader("X-Mashape-Authorization", "zVNNYMfznlE1LpqFTWDjx7Ddt3yD51oy");
xmlhttp.onreadystatechange=function(){
alert(xmlhttp.readyState + "," + xmlhttp.status);
alert(xmlhttp.statusText);
alert(xmlhttp.responseText);
if(xmlhttp.readyState==4) {
alert ("response text = " + xmlhttp.responseText);
var response=JSON.parse(xmlhttp.responseText);
//alert (xmlhttp.responseText);
alert (response.faces[0].features.nose.x);
//var response=JSON.parse(xmlhttp.responseText);
//alert (xmlhttp.responseText);
alert (response.faces[0].features.nose.y);
//var response=JSON.parse(xmlhttp.responseText);
//alert (xmlhttp.responseText);
alert (response.faces[0].features.mouth.x);
//var response=JSON.parse(xmlhttp.responseText);
//alert (xmlhttp.responseText);
alert (response.faces[0].features.mouth.y);
alert (response.faces[0].features.eyes[0].x);
alert (response.faces[0].features.eyes[0].y);
alert (response.faces[0].features.eyes[1].x);
alert (response.faces[0].features.eyes[1].y);
var x1 = response.faces[0].features.eyes[0].x;
var y1 = response.faces[0].features.eyes[0].y;
var x2 = response.faces[0].features.eyes[1].x;
var y2 = response.faces[0].features.eyes[1].y;
var dist = Math.sqrt(((x1-x2)*(x1-x2)) + ((y1-y2)*(y1-y2)));
alert(dist);
}
}
xmlhttp.send(null);
</script>
</body>
</html>