This is a migrated thread and some comments may be shown as answers.

Microsoft Oxford Face API with Cordova Camera

1 Answer 56 Views
iOS Devices
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jinith
Top achievements
Rank 1
Jinith asked on 22 Jun 2015, 09:52 AM

Hello there,

 

 I have been trying to use cordova camera capture as a parameter for Microsoft Project Oxford - Face API Input

(https://dev.projectoxford.ai/docs/services/54d85c1d5eefd00dc474a0ef/operations/54f0375749c3f70a50e79b82)

 

I have for the camera capture the image for me and able to assign to <img> tag in the form. But when I use the same byte data to send to project oxford it says that the format is incorrect. Is there some encoding adaptations I should be doing ?

 

My Cordova code is as :

 

  _getPhoto: function(source) {
        var that = this;
        // Retrieve image file location from specified source.
        navigator.camera.getPicture(function(){
            that._onPhotoURISuccess.apply(that,arguments);
        }, function(){
            cameraApp._onFail.apply(that,arguments);
        }, {
            quality: 50,
            destinationType: cameraApp._destinationType.FILE_URI,
            sourceType: source
        });
    },

 

 

 

   _onPhotoDataSuccess: function(imageData) {
        var smallImage = document.getElementById('smallImage');
        smallImage.style.display = 'block';
    
        // Show the captured photo.
        smallImage.src = "data:image/jpeg;base64," + imageData;
        GetIdentity(imageData);
    },

 

function GetIdentity(imageData){
 
     var params = {
         // Specify your subscription key
         'subscription-key': 'XXXXXXXXXXX',
         // analyzesFaceLandmarks: "false",
          analyzesAge: "true",
          analyzesGender: "true",
         // analyzesHeadPose: "false",
      };
    
    $.support.cors = true;
    $.ajax({
        url: 'https://api.projectoxford.ai/face/v0/detections?' + $.param(params),
        contentType: "application/octet-stream",
        data: imageData,
        type: "POST"
    }).success(function(){
        var html = '';
        $.each(data, function (commentIndex, comment) {
            html += 'faceid:' + comment['faceId']+"\r\n";
        });
        alert(html);
    }).fail(function(x){
          alert("error:"+x.statusText+x.responseText);
    })
}

 

 

Please help 

1 Answer, 1 is accepted

Sort by
0
Anton Dobrev
Telerik team
answered on 25 Jun 2015, 09:27 AM
Hello Jinith,

According to the documentation which you referenced, the file data needs to be uploaded in binary format and with an application/octet-stream MIME type. The current approach in the app is sending the data in base64 format which might be the reason for the error you are receiving. 

May I suggest that you use instead the File API of Cordova (here is a sample for AppBuilder). Make sure that the API is included in the Core Plugins list of your AB project.

For example, incorporate this in the GetIdentity function in order to upload the binary data of the file:

function GetIdentity(imageUri) {
    var params = {
        // Specify your subscription key
        'subscription-key': 'XXXXXXXXXXX',
        // analyzesFaceLandmarks: "false",
        analyzesAge: "true",
        analyzesGender: "true",
        // analyzesHeadPose: "false",
    };
 
    var uploadURI = 'https://api.projectoxford.ai/face/v0/detections?' + $.param(params);
    var imageURI = imageUri; // the retrieved URI of the file on the file system, e.g. using navigator.camera.getPicture()     
 
    var options = new FileUploadOptions();
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
    options.mimeType = "application/octet-stream";
    // options.headers = {}; // use this if you need additional headers
 
    var ft = new FileTransfer();
    ft.upload(imageURI, uploadURI, function(r) {
        alert(JSON.stringify(r));
    }, function(error) {
        alert("An error has occurred:" + JSON.stringify(error));
    }, options)
}

Then call in _onPhotoDataSuccess the GetIdentity function with the same imageData arguments:

_onPhotoDataSuccess: function(imageData) {
     var smallImage = document.getElementById('smallImage');
     smallImage.style.display = 'block';
  
     // Show the captured photo.
     smallImage.src = "data:image/jpeg;base64," + imageData;
 
    // upload the image for processing by the remote API
     GetIdentity(imageData);
 },

Let me know if this works for you and if you have further questions.

Regards,
Anton Dobrev
Telerik
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
Tags
iOS Devices
Asked by
Jinith
Top achievements
Rank 1
Answers by
Anton Dobrev
Telerik team
Share this question
or