Microsoft Oxford Face API with Cordova Camera

2 posts, 0 answers
  1. Jinith
    Jinith avatar
    3 posts
    Member since:
    Jan 2015

    Posted 22 Jun 2015 Link to this post

    Hello there,


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



    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.
            }, function(){
            }, {
                quality: 50,
                destinationType: cameraApp._destinationType.FILE_URI,
                sourceType: source




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


    function GetIdentity(imageData){
         var params = {
             // Specify your subscription key
             'subscription-key': 'XXXXXXXXXXX',
             // analyzesFaceLandmarks: "false",
              analyzesAge: "true",
              analyzesGender: "true",
             // analyzesHeadPose: "false",
        $.support.cors = true;
            url: '' + $.param(params),
            contentType: "application/octet-stream",
            data: imageData,
            type: "POST"
            var html = '';
            $.each(data, function (commentIndex, comment) {
                html += 'faceid:' + comment['faceId']+"\r\n";



    Please help 

  2. Anton Dobrev
    Anton Dobrev avatar
    608 posts

    Posted 25 Jun 2015 Link to this post

    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 = '' + $.param(params);
        var imageURI = imageUri; // the retrieved URI of the file on the file system, e.g. using     
        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) {
        }, 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'); = 'block';
         // Show the captured photo.
         smallImage.src = "data:image/jpeg;base64," + imageData;
        // upload the image for processing by the remote API

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

    Anton Dobrev

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

Back to Top