how to access the device camera from webview of android application - javascript

I have an android app with a WebView, it is written in Java Script and Angular JS code to access the Camera , I just load the URL in web view and had given camera access permission and read and write external storage permission, still it is not able to access the camera , I had browsed for this problem ,but didn't find the exact solution.
I just want to open the camera , when user click on take photo on his profile page which was written in java script code , don't know when this will happen because I have base URL only which was loaded in web view.
How to let the user open the camera in this application? And also it should support from Kitkat onward, Can any one help me to figure out this?

Use openChooser method when implement UIClient
public void openFileChooser(ValueCallback<Uri> uploadMsg) {
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.addCategory(Intent.ACTION_CAMERA_BUTTON);
i.setType("*/*");
startActivityForResult(Intent.createChooser(i,"File Chooser"), 111);
}

Related

Access DOM content of browser within Android runtime

Say we have a standard login page like the one below:
We can access the HTML elements in the DOM using jQuery or plain JavaScript like this:
In other words, the way to get the pixel location of an element in a web page is quite simply by using element.getBoundingClientRect():
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
So we can do this from the console or programmatically from a web app.
Now, say we have an Android browser (Chrome/Mozilla/WebView) in the foreground at any time. I can retrieve the URL of the web page in the browser. In this case:
https://login.microsoftonline.com/
So my question is, given the URL of a login page, how do I similarly get access to the same input field on an Android browser?
I need to be able to access the HTML elements of a web page in an Android browser, and calculate its pixel location. As input, I have the URL of a web page in any Android browser.
I am talking about doing this from an Android app, within the Android runtime, i.e. programmatically using Java/JS code.
In case someone needs the DOM structure of the page as text, it can be obtained programmatically with the following (Java) code:
URL url;
HttpURLConnection urlConnection;
String DOMContent = null;
try {
url = new URL("https://login.microsoftonline.com/");
urlConnection = (HttpURLConnection) url.openConnection();
int responseCode = urlConnection.getResponseCode();
if(responseCode == HttpURLConnection.HTTP_OK){
DOMContent = readStream(urlConnection.getInputStream());
}
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
I need access to the HTML elements of a mobile web page within the Android runtime, just as we would in a web app or extension in a desktop browser. Or in other words, I need to be able to access/manipulate the DOM content of a mobile browser from an Android app.
How can this be done?
Update:
JavaScriptBridge looks promising. DocumentBuilder could help us convert the DOM into Java objects which may then be accessed/manipulated natively from Android.
References:
1. How to execute JavaScript on Android?
2. Calling JavaScript functions in WebView
3. How to run Javascript code in a background Service on Android
4. Is there any way to get access to DOM structure in Android's WebView?
5. Android webview Access the DOM
6. In Android Webview, am I able to modify a webpage's DOM?
7. Android WebViews and the JavaScript to Java bridge
8. Using Javascript bridge in android
9. Alternative way for communication between WebView and native
Use the following code after the page has been loaded (implement a custom WebViewClient and check the onPageFinished)
String query = "document.getElementById(\"WhateverElement\").getBoundingClientRect();"
webView.evaluateJavascript(query, new ValueCallback<String>() {
#Override
public void onReceiveValue(String s) {
Log.d("LogName", s); // s has the getBoundingClientRect
}
});
The webpage needs to be rendered first in order to get the pixel position of the input field. and to manipulate dom content in android, the best way is to go with JS Interface. The way mentioned by ZUN is also helpful. You can execute arbitrary JavaScript at runtime either way.
However, there is one particular library that can catch your attention i.e. jsoup
From the jsoup website:
jsoup is a Java library for working with real-world HTML. It provides
a very convenient API for extracting and manipulating data, using the
best of DOM, CSS, and jquery-like methods. jsoup implements the WHATWG HTML5 specification and parses HTML to the same DOM as modern browsers do.
Side note: if you don't want to show webpage to the user till all of your calculations are done, you might be interested in playing with Visibility of WebView

Is there a way to get back a result from a PWA I develop to Android using a startActivityForResult from the native app?

I am trying to use a PWA I develop with HTML and JavaScript to process data and send it back to the Android app.
The Android should open the PWA after the user clicks a button for example, I already did this by starting an activity with an intent using the page URL:
Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://examplePWA.com/"));
Log.d(TAG, "onClick() called with: view = [" + browserIntent.getDataString() + "]");
startActivity(browserIntent);
What I want now is to get a response intent from the PWA to a startActivityForResult (browserIntent, 123);
sent from Android for example.
How can I do this from the PWA side, is it possible to send an Android Intent from a PWA using JavaScript or any other way?
If I got you right, for the purpose of starting an activity from within the javascript env, you could employ the #JavascriptInterface which will allow you to invoke Java methods inside your javascript code (if you use WebView).
class WebBridge {
#JavascriptInterface
public void openBrowser(String href) {
// .. start your activity here
}
}
// Somewhere where you initialize your WebView
webView.addJavascriptInterface(new WebBridge(), "AndroidWebBridge");
// Inside your javascript app code
window.AndroidWebBridge.openBrowser("https://google.com");
The code below illustrates the overall concept, not a copy-paste solution. Hope that helps your.

Debugging Android WebViews?

I'm trying to debug an Android app that makes heavy use of WebViews to display web pages from within the app.
The problem is simple - when I load the page, there's an anchor on one page that when clicked gives me a 404. The problem, it does this only when running the page from within the app's WebView. If I load the page in a desktop browser, or from within Chrome or from within the Android Browser on the mobile, I load the page just fine.
More confusingly, there's another anchor on the same page with the same basic architecture that's working just fine.
The URL for the anchor is being set via JQuery:
var url = ...;
$('#submitButton').attr('href', url);
When I load the page on a desktop browser, I can see the URL that the anchor points to, and it's correct. When I run the page within an app's WebView, I cannot see the URL that the anchor points to, so when it fails, I don't know why.
I'm currently running the website with VS2013 and IIS Express, with bindings and firewalls set so I can access it off my machine. I'm building the app in Android Studio 1.1.0, and am running the app within a GenyMotion emulator.
Is there any way I can examine the DOM of a web page loaded into a webview, so I can see exactly what URL we're trying to load? Or any way I can debug the javascript that is constructing that URL?
Is there any way I can examine the DOM of a web page loaded into a webview, >so I can see exactly what URL we're trying to load? Or any way I can debug >the javascript that is constructing that URL?
Yes, but maybe not with your current tools.
If you do however have an android device connected to your computer, you can actually easily debug the webviews with chrome on your computer.
See the following for more details :
https://developer.chrome.com/devtools/docs/remote-debugging
It is possible to configure a WebView so that console.log() messages show up in LogCat. You need to set a WebChromeClient on the WebView, then implement onConsoleMessage() in your client. From http://developer.android.com/guide/webapps/debugging.html:
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
public void onConsoleMessage(String message, int lineNumber, String sourceID) {
Log.d("MyApplication", message + " -- From line "
+ lineNumber + " of "
+ sourceID);
}
});
That got me far enough to figure out what my problem was - the javascript that initialized the link depended upon LocalStorage, and LocalStorage and SessionStorage aren't enabled, in WebViews, by default. You need to enable it with a call to setDomStorageEnabled(). (You also need to enable javascript, but I'd already been doing that):
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings settings = myWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);

Android restart application on configuration change

Hi in my application i am loading local html pages in my webview ,this html pages will load based on the locale or language selected , these pages also have values which i pass dynamically using JS ,but when i am changing the language, i am unable to change the dynamical values so i thought to restart the application if there is configuration change no matter in what screen i am. The application should start from scratch that is splash screen .How can i achieve this. Go code to restart the app, but is it correct way
Intent i = getBaseContext().getPackageManager()
.getLaunchIntentForPackage( getBaseContext().getPackageName() );
i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(i);
Intent i = getBaseContext().getPackageManager().getLaunchIntentForPackage(
getBaseContext().getPackageName());
i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(i);
MainActivity.this.finish();
this is the which works for me. i have a splashscreen before MainActivity and is works fine..

phonegap geo uri association

I am developing a phonegap application using phonegap build (therefore ALL in pure js and html, no native languages).
In my page, i have some geo uri links (http://en.wikipedia.org/wiki/Geo_URI ) that are cliccable (they represent coordinates of markers in a map).
Now, if the mobile device has installed and associated with this type of files an app (usually a gps navigator or the like), they open and launch the associated application as they should.
My issue is that I don't want to show the clickable link (the button appears in the infowdindow of the marker) if the device has no app capable to open them.
In native android code, you have the query-intent command for this. Does anyone know how to verify this in pure phonegap js?
Ty!
D.
I have been asked for code: The only code that is relevant here is the following, which computes the html code to embed in the infowindow of the marker:
var computePathString=<a href='geo:"+area['marker']['position'].lat()+",
"+area['marker']['position'].lng()+"'>Route</a>;
Which translates to the following html:
<a href='geo:45.557,9.1523'>Route</a>
Which works great on click IFF the device has an associated app (usually a gps navigator), but else does nothing on click. I need to achieve something similar to the query intents of android:
PackageManager packageManager = getPackageManager();
List<ResolveInfo> activities = packageManager.queryIntentActivities(intent, 0);
boolean isIntentSafe = activities.size() > 0;
only, in native phonegap js.

Categories