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………..






WebView (inApp and Chrome both) Using Native Android Code and Phonegap

TO OPEN URL IN APP ITSELF :

package com.mkyong.android;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebView;

public class WebViewActivity extends Activity {

private WebView webView;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);

String url =”http://www.google.com&#8221;;
WebView wv=(WebView) findViewById(R.id.webView1);
wv.getSettings().setJavaScriptEnabled(true);
   wv.getSettings().setPluginState(PluginState.ON);
   wv.getSettings().setAllowFileAccess(true);
wv.loadUrl(url);

//String customHtml = “<html><body><h1>Hello, WebView</h1><body><script>var ref = window.open(‘http://www.google.com&#8217;, ‘_system’, ‘location=yes’);</script></body></html>”;
//webView.loadData(customHtml, “text/html”, “UTF-8”);

}

}

FANCY WAY

public class WebViewActivity extends Activity {

private WebView webView;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);

WebSettings mWebSettings;

        WebView mWebView = (WebView)findViewById(R.id.webView1);
        mWebView.getSettings().setBuiltInZoomControls(true);
        mWebView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
        mWebView.setBackgroundColor(Color.TRANSPARENT);
        mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_INSET);

        mWebView.loadUrl(“https://www.google.co.in/&#8221;);
        mWebView.setWebViewClient(new MyWebViewClient());
}


}

package com.mkyong.android;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MyWebViewClient extends WebViewClient { 
    @Override 
    //show the web page in webview but not in web browser
    public boolean shouldOverrideUrlLoading(WebView view, String url) { 
        view.loadUrl (url); 
        return true;
    } 
}

TO OPEN URL IN BROWSER : 

package com.mkyong.android;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebView;

public class WebViewActivity extends Activity {

private WebView webView;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);

webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(“http://www.google.com&#8221;);

//String customHtml = “<html><body><h1>Hello, WebView</h1><body><script>var ref = window.open(‘http://www.google.com&#8217;, ‘_system’, ‘location=yes’);</script></body></html>”;
//webView.loadData(customHtml, “text/html”, “UTF-8”);

}

}

FINALLY GOT THE PHONEGAP THING WORK TOO …THE ISSUE WA THAT I WAS ONLY RUNNING THE PHONEGAP ANDROID EXAMPLE  FROM  : …\phonegap-2.7.0\phonegap-2.7.0\lib\android\example

BUT ACTUALLY  I ALSO HAD TO REPLACE THE INDEX.HTML CODE WITH FULL EG. CODE FROM http://docs.phonegap.com/en/2.7.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser.
But SADLY that also opens inAppBrowser….
OPEN FILE SYSTEM HTML

webView.loadUrl(“file:///android_asset/www/index.html”);

In both cases this is always opening in the App, but i need it to open in Browser…

Resources :

http://developer.android.com/guide/webapps/webview.html#AddingWebView

NEXT STEP :

1. how to load html from file system in browser using android code
2. how to package web apps into android

ANOTHER IDEAL WAY OF DOING THIS IN THIS CIRCUMSTANCE IS TO DEVELOP A HMTL5 WEB APP THAT USES OFFLINE STORAGE..NOW WHEN THE APP IS LAUNCHED, THE APP WILL TRY TO HIT THE URL AND IF IT IS OFFLINE, IT WILL LOAD THE LOCAL HTML FILE (STORED IN THE BROWSER LOCAL STORAGE)……

THAT REMINDS ME THAT I ALREADY HAVE A HOSTED APP FOR USERMEDIA : http://tkhemani.github.io/getusermedia_tk (IF THIS HAS ANY ISSUES USE  http://simpl.info/getusermedia/ )

WELL, ALL I HAD TO DO WAS OPEN IT USING ABOVE CODE :)))))))

FINAL STEP WOULD BE TO CACHE THIS PAGE LOCALLY AND I’M DONE….



Looked into the local storage feature and tried to see some egs.

Next step : understand and use   http://appcache-demo.s3-website-us-east-1.amazonaws.com/localstorage-cache/