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

  • 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

    Thursday, November 23, 2017 12:36 AM

All replies