Face Detection (Face-API call) using Cordova Camera Plugin & MS-Cognitive Services in JS

Question

Since last 2 days I am trying to figure out what went wrong? I am working on Cordova android app for Face recognition by using Microsoft Cognitive Services. For taking images I used Cordova Camera plugin and for performing operations (detect faces, identify etc) I am using JS. I will explain code step by step in this post. Here is my Content Security Policies:

 <meta http-equiv="Content-Security-Policy" content="media-src * blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
 <meta name="format-detection" content="telephone=no">
 <meta name="msapplication-tap-highlight" content="no">
 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

After that standard HTML Code for display button of Capture Picture

<button id="take-picture-button">Take Picture</button>

Now lets come to .js file code, Since it is Cordova Camera plugin I used some pre-defined events:

    bindEvents: function () {
    document.addEventListener('deviceready', this.onDeviceReady, false);
    document.addEventListener('pause', this.onPause, false);
    document.addEventListener('resume', this.onResume, false);
},
 onDeviceReady: function () {
    document.getElementById("take-picture-button").addEventListener("click", function () {
        appState.takingPicture = true; 
        navigator.camera.getPicture(cameraSuccessCallback, cameraFailureCallback,
            {
                sourceType: Camera.PictureSourceType.CAMERA,
                destinationType: Camera.DestinationType.FILE_URI,
                targetWidth: 500,
                targetHeight: 500
            });     });
},

and after that onPause: function(){} & onResume: function(){} Following is the code where I am making an ajax call by using MS-Cognitive services Face API for face detection: (From the FaceAPI documentation I understood that I can either send Binary data or Blob or File in POST method, therefore I need to convert image into binary data) I am going to post the image conversion code and ajax code together so that you guys can understand.

  var img = new Image();
img.src = imageUri;  // System Path (eg: file:///storage/android/.......)

    var canvas = document.createElement("canvas");
    canvas.width = $(window).width();
    canvas.height = $(window).height();

    var ctx = canvas.getContext("2d");
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
    }
    var dataURL = canvas.toDataURL("image/jpeg");

    var data = dataURL.split(',')[1];
    var mimeType = dataURL.split(';')[0].slice(5)
    var bytes = window.atob(data);
    var buf = new ArrayBuffer(bytes.length);
    var byteArr = new Uint8Array(buf);

    for (var i = 0; i < bytes.length; i++) {
        byteArr[i] = bytes.charCodeAt(i);
    }

var params = {
    "returnFaceId": "true",
    "returnFaceLandmarks": "false",
    "returnFaceAttributes": "age",
};

var faceIds = new Array();
$.ajax({
    url: "https://australiaeast.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params),
    beforeSend: function (xhrObj) {
        xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "API_KEY");
    },
    type: "POST",
    data: byteArr,
    processData: false,
})
    .done(function (data) {
          for (var i = 0; i < data.length; i++) {
                faceIds.push(data.faceId);
                alert("FaceID at index"+ i+" is " + JSON.stringify(data.faceId[i]));
            }
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        alert("Failed in Face Detect, Details:  Status:: " + jqXHR.status + "  ResponseText:: " + jqXHR.statusText + "");
    });

Now, the output of above code is "Failed in Face Detect, Details: Status::400 ResponseText:: Bad Request I am not understanding where I need to make changes or did I missing anything? Please Help. Thank You

Laura_M Laura_M · Accepted Answer · 2017-12-12T10:38:14

There should be a message in the response to tell you what went wrong.There are several possible causes, like InvalidImage, InvalidImageSize etc. Please refer to the doc here for the list of error code and message.

Face Detection (Face-API call) using Cordova Camera Plugin & MS-Cognitive Services in JS

1 Answers