Problems to capture pictures through Sencha Touch

Question

i'm trying to capture pictures in a app using by Sencha Touch 2.3.1 and Cordova 3.4.1-0.1.0. Reading the docs (http://docs.sencha.com/touch/2.3.1/#!/api/Ext.device.Camera-method-capture) it looks very easy and simple, but i'm having a very weird experience.

First i create a Sencha Touch app and initialize Cordova on in it

sencha app generate MyApp ./MyApp
cd ./MyApp
sencha cordova init

At this point, when i try to build, it works fine on a real device, android emulator or even on browser. Then, i changed Main.js to add the capture feature.

Ext.define('CameraTest.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.device.*'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                },

                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
            },
            {
                title: 'Camera',
                iconCls: 'action',
                layout: {
                            type:"vbox",
                            pack:"center",
                            align:"center"
                        },
                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'CameraTest'
                    },
                    {
                        xtype: 'panel',
                        html: '<img style="height: 200px; width: 200px;" src="http://placehold.it/200x200" />'
                    },
                    {
                        xtype: "button",
                        text: "Photo",
                        handler: function() {
                            function success(image_uri) {
                                var img = Ext.ComponentQuery.query("image")[0];
                                img.setSrc(image_uri);
                            }

                            function fail(message) {
                                Ext.Msg.alert("Failed: " + message);
                            }

                            Ext.device.Camera.capture({
                                    sucess: success, 
                                    failure: fail, 
                                    quality: 50,
                                    destination: 'data',
                                    source: 'camera'
                              });
                        }
                    }
                ]
            }
        ]
    }
});

Done, the app stops loading. It stucks in the appLoadingIndicator and doesn't reach the tab panel component.

However, if i open it in a browser it works just fine. I don't know even how to debug this.

This is the screen that the app gets stuck

Answer 1

I just solved it! Reading these Cordova docs: http://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html i discovered that i need to install the plugins before using the APIs =P.

Doing this solved everything:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

Answer 2

It appears that you may be mixing up some of the parameters.

capture( options, scope, destination, encoding, width, height )

options = an object, which in your case would have {success:, failure:, quality:, source}, ... and, destination: is not part of the options object, but its own parameter (as are, scope, encoding, width, and height)