Access Device Camera using Sencha Touch

1 .

Ext.device.Camera.capture({
    source: ‘camera’,
    destination: ‘file’,

    success: function(url) {
        //show the newly captured image in a full screen Ext.Img component:
        Ext.create(‘Ext.Img’, {
            src: url,
            fullscreen: true
        });
    }
});

2.

Ext.device.Camera.capture({
success: function(image) {
imageView.setSrc(image);
},
quality: 75,
width: 200,
height: 200,
destination: ‘data’
});

3. <input type=”file” id=”take-picture” accept=”image/*”> : https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API

Options

1. Use the HTML 5 API for accessing camera. : Adv. Then we can provide a web interface of the app too… and also single code
2. Use the Native OS API to access the camera using phonegap…DisAdv : will have to write seperate code for seperate OSs.

In option 1 , i checked that we can’t use WEBRTC (http://www.html5rocks.com/en/tutorials/getusermedia/intro/) as its not implemented in Chrome or Firefox or Safari.It works only on Chrome Dextop for now.

Instead try using  : http://www.w3.org/TR/html-media-capture/ or http://dev.w3.org/2009/dap/camera/
OR
http://stackoverflow.com/questions/6336641/html5-camera-access-through-browser-in-ios
OR
http://stackoverflow.com/questions/7676036/can-you-launch-the-native-camera-app-from-an-html-5-web-app

Comparison of getUserMedia behaviour in browsers as of February 2013
Firefox 18  Opera 12    Chrome 24
Requires vendor prefix  Yes (moz)   No  Yes (webkit)
Triggered with autoplay attribute   No  Yes Yes
Requires enabling by user   Yes 1   No  No
Firing of playing event Repeatedly  Once    Once
Supports file:// protocol   Yes Yes No
Tab playing notification    None    Icon    Animated icon
Permission request  Each page load  First page load only    Each page load
getUserMedia has to be enabled in Firefox by setting the media.peerconnection.enabled option to true in about:config.

Advertisements

Sencha Ext.device.Camera.capture

Till now i have tried this in Sencha :

function a() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById(“canvas”),
    context = canvas.getContext(“2d”),
    video = document.getElementById(“video”),
    videoObj = { “video”: true },
    errBack = function (error) {console.log(“Video capture error: “, error.code);};

    // Put video listeners into place
    if (navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function (stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function (stream) {
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    }

    // Trigger photo take
    document.getElementById(“snap”).addEventListener(“click”, function () {
        context.drawImage(video, 0, 0, 200, 100);
    });

}

a();

This thing works like a charm in mobile and dextop chrome browsers (note that in mobile chrome it worked only on hosting and not thru the local copy of html)…but sadly, the sencha app isn’t able to work  with this….

Trying this Sencha thing out :

Ext.device.Camera.capture({
success
: function(image) {
imageView
.setSrc(image);
},
quality
: 75,
width
: 200,
height
: 200,
destination
: 'data'
});
Well i now saw that in both the cases above the browser is actually searching for camera on the dextop chrome ..so it works 🙂

But on device, as apk is opening some other webview ..its not showing up…



1.36
NOW The only option is PHONEGAP………..






Sencha Touch Quirks and Lessons

I know that there are many posts by me on this thing :

Here’s what i learnt today :

1. Do not give up on the sencha architect as it is a great tool, if for nothing else, to tell you the available configurations of the UI controls

2. If you get any inconsistent behavior in the methods and handlers created using architect then plz delete and create again with another name

3. Never Duplicate controls as it creates a lot of mess specially in case there are handlers attached to stuff..Just don’t do it…simply create again as its not worth it at all.

4. Sencha HTML property of controls or even panels is not complete HTML but just specific elements like to add a canvas of button to a panel using HTML, in its HTML just  give <button..>

And then don’t forget to enable HTML styling

5. Another thing that i got stuck at was the HTML Styling of a sencha button and finally figured out that the right way is to add the HTML as text of the button (not as HTML of Button) and then to enable HTML styling

6. Always aim at writing minimum code and reusing controls even if it means more effort

Accessing Native Camera in Sencha App using Phonegap

Lessons : 


1. Native Camera API provides many features that Phonegap doesn’t expose yet (in 2.7), so native code has to be written for it.

2. In fact, WebRTC provide more photo editing features (using the HTML Canvas) than Phonegap does today.

>> The code is simple but i spent a day trying to make it complex..so as a rule always look for the eg. in the official source instead of banging your head with hit and try…

I used the example from the Phonegap Site as it is (tested) :

Basically this goes in the handler of the button tap of the button on the panel and then on success it shows the captured image on the current panel, so in the panel add HTML :

 xtype: ‘panel’,
                hidden: true,
                html: ‘<br/><img style=”display:none;margin-left: 20px;width:340px;height:185px;” id=”FrontImage” src=”” /><br/>’,
Code for handler :

var pictureSource;   // picture source
var destinationType; // sets the format of returned value 

pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;


navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, 
destinationType: destinationType.DATA_URL });

function onFail(message) {
    alert(‘Failed because: ‘ + message);
}

function onPhotoDataSuccess(imageData) {
    //Ext.getCmp(‘makeDeposit’).hide();
    //Ext.getCmp(‘FrontPicContainer’).show();


    Ext.getCmp(‘frontCheckBtnD’).setText(‘Image Captured’);

    if((Ext.getCmp(‘frontCheckBtnD’).getText()===’Image Captured’)&&(Ext.getCmp(‘toFieldLabelDnew’).getValue()!== ”)&&(Ext.getCmp(‘transferAmount’).getValue()!== ”))
    Ext.getCmp(‘continueBtnD’).enable();

    // Uncomment to view the base64 encoded image data
    // console.log(imageData);

    // Get image handle
    //
    var FrontImage = document.getElementById(‘FrontImage’);

    // Unhide image elements
    //
    FrontImage.style.display = ‘block’;

    // Show the captured photo
    // The inline CSS rules are used to resize the image
    //
    FrontImage.src = “data:image/jpeg;base64,” + imageData;

}