Develop Reference

Why doesn't capture="user" change my phone's camera to front facing?

I tried the following attribute capture to set the input element to try to select the front facing camera. user is front facing, and environment is back facing.
However, while experimenting with Chrome (latest) on mobile (Pixel 1, latest OS), the back camera is still selected.
I used an example snippet:
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*" capture="user">
<input type="submit" value="Upload">
</form>
(from https://w3c.github.io/html-media-capture/#the-capture-attribute)
I am able to change accept to require video on my phone, so that and other attributes work, but not the capture attribute.
EDIT: Am using the latest Android Chrome browser. The following page implies that iOS and older versions of Android Chrome cannot use capture altogether, but otherwise can use capture. https://caniuse.com/#search=html-media-capture

I cloned the chromium repository today (2019-07-21). I then used ripgrep to get a list of files that do not contain capture. After passing that list to rm, I removed any directories that were either empty or clearly irrelevant (such as telemetry). Going through the remaining ~50 files was a relatively trivial task.
Hopefully the Chrome team will get around to implementing this in the future, but there is currently no indication that this behavior is supported in official documentation, official blog posts, or the code itself.
I know it's not the answer you'd like to hear, but those are the facts as I've found them.

Would it be Chrome specifically that hinders the code from working properly? I suggest using a different browser such as Firefox in order to test this theory. If it does succeed on Firefox, then the simple answer is: Chrome has yet to implement it yet.

Here are some tests, I included user agent:
Didn't worked with :
Android Chrome: Mozilla/5.0 (Linux; Android 6.0; Ilium X510) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.143 Mobile Safari/537.36
Android Firefox: Mozilla/5.0 (Android 6.0; Mobile; rv:68.0) Gecko/68.0 Firefox/68.0
Worked with :
IPhone Chrome: Mozilla/5.0 (iPhone; CPU iPhone OS 12_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/75.0.3770.103 Mobile/15E148 Safari/605.1
IPhone Safari: Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Mobile/15E148 Safari/604.1
In Summary:
All tested iPhone navigators displayed the front camera view when capture is user, and back camera view if it is environment.
Both tested Android navigators displayed always the back camera view.
So regardless the information in the accepted answer, it doesn't seem to be a browser issue. It would be helpful if it works correctly with an Android device and a specific browser.
I hope other people can share tests on their Android devices, in particular on working ones, displaying front camera view while testing the capture="user" attribute-value.

How to request desktop in a webview?

I searched Google and stack exchange and found about 15 different solutions, none of which work. They either throw syntax errors upon compiling, or they just don't work on the website I'm requesting. (Tradingview.com/chart)
When I go to my target website in chrome and click Request desktop, it works fine. In the webview in the app I'm building, it doesn't work. Google displays as desktop, but my target site does not. However, it does display properly in chrome or Firefox, just not my app.
What I tried:
Every solution provided here: Setting WebView to view Desktop Site and Not Mobile Site
Including this library https://github.com/delight-im/Android-AdvancedWebView/blob/master/README.md
This
How to open desktop site in webview in android
That
How to load Desktop view instead of mobile view in webview
The other
setUserAgentString in Android webview has no effect on HTTP header used in loadURL()
Most of those don't cause any change (on my target site), while a few of them throw syntax errors, sometimes up to 13 of them.
I tend to see comments being left saying something to the effect of, "Contact the website owner to make them change their site." That's not an acceptable solution, and is unhelpful without further explanation. How is it that in chrome, Firefox, Opera, etc. I'm well able to see a desktop version of the page, but it isn't working on the webview? This needs to be explained if the only answer is that it's"the website's fault contact the owner."
Right now I've got this in here,
WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());
webView.getSettings().setUserAgentString("Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/57.0");
webView.loadUrl("http://facebook.com");
This works fine on Facebook.com for example, but not TradingView.

After much trial and error, I came to a solution. This isn't perfect, but much closer. (Maybe comments can help correct my code where I've fallen short)
webview_chart.getSettings().setLoadWithOverviewMode(true);
webview_chart.setInitialScale(200);
webview_chart.getSettings().setUseWideViewPort(false);
webview_chart.getSettings().setMinimumFontSize(16);
String newUA= "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.45 Safari/535.19";
webview_chart.getSettings().setUserAgentString(newUA);
webview_chart.loadUrl("http://tradingview.com/chart");
What this seems to do is spoof a larger screen size, which causes responsive design to send desktop version rather than mobile. It's not perfect, as you can see I have to adjust minimum font size up so things are readable, and on smaller screens it still doesn't work.
But that's the reason you can send desktop headers and still get a mobile site.
(I haven't found an explanation like this anywhere else, so I think it can be helpful to others having this same problem)

Android, webview user agent vs browser user agent

I'm building my website and I want to know whether the user is using Android's browser or an app with a webview.
is it possible ??

As per Chrome dev docs: "If you’re attempting to differentiate between the WebView and Chrome for Android, you should look for the presence of the Version/X.X string in the WebView user-agent string."

FROM: http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html
With a User-Agent like this:
Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13
since there is no “mobile” string, serve this user the desktop version (or a version customized for Android large-screen touch devices). The User-Agent tells us they’re coming from a large-screen device, the XOOM tablet.
On the other hand, this User-Agent:
Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; Nexus One Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
contains “mobile” and “android,” so serve the web surfer on this Nexus One the mobile experience!
FROM https://stackoverflow.com/a/7327201
it looks like the User-Agent is the same in webview as in the default mobile browser

FYI: This can't be done with user agents, however it can be detected. Android's web views send an addition header "X-Requested-With". The value of this header will be the application's name space that is running the webview.
For Example Dolphin browser sends: "mobi.mgeek.TunnyBrowser"
My test app sent: "com.jamestymann.identifyawebview"
The standard browser actually does not send this header at all, so it is pretty easy to detect these.
I have two caveats though:
"X-Requested-With" is a standard header and could potentially be sent from full blown webpages/browsers from desktops. (For example this is used to detect ajax calls with these values "X-Requested-With XMLHttpRequest")
Most google play store browsers use webviews to display webpages. Even though these are full blown browsers, they will still send this header. So if your intent is to disable this feature you may want to be careful as you may be disabling peoples default browsers.

For more current information, look here https://developer.chrome.com/multidevice/user-agent The lolipop and newer devices include wv) in the UserAgent.

You can used below code for checked android webview or browser.
public static bool is_mobile_and_webview()
{
return System.Web.HttpContext.Current.Request.Browser.IsMobileDevice && System.Web.HttpContext.Current.Request.UserAgent.Contains("; wv");
}

yes and you can optimize your website by adding these meta tags
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="HandheldFriendly" content="True" />
you can find more information here http://learnthemobileweb.com/2009/07/mobile-meta-tags/

I use this serverside, to access info about client' browser (agent) in PHP
...
$_SERVER['HTTP_USER_AGENT']; // Different browsers ...
...
this boilerplate can be interpreted - hence you will know the agent ...
on client side - navigator.userAgent

Web App Compatibility on Mobiles

I am new to Mobile Development . I am developing a Web Page for Android Mobiles..I am testing the Page using User Agent .
Mozilla/5.0 (Linux; U; Android 2.2.1; en-ca; LG-P505R Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Is this works only in the model which is specified or It will work well in all the Android Mobiles ?
And I want to know ,whether the web page alignments will be changes when the Mobile size changes ?
Thanks in advance .

Govind,
I am thinking there are probably several answers to your question. From my perspective, as a .NET developer, I would go with the method described on this CodeProject page to detect the "mobile-ness" of the client's browser. If you're strictly looking in the User Agent though, look how the word "Android" shows up in there. Just make sure your comparison code contains the word "android" without any other stuff and ignoring case and you should be fine.
As far as the size changes, your mobile device will try to do its best to show you the page you want to view. This could mean it just "zooms out" so everything looks tiny, or maybe it only shows you a small chunk of the page in its regular size. You should look into responsive design techniques. All the documentation I've read on the subject says it is more beneficial to load a separate page, or at least a separate set of CSS, instead of your normal site and/or CSS for mobile browsers. Then you can optimize the scripts and CSS and even HTML code shown in the page for these devices.
Good luck,
Matt

Overflow:hidden doesn't work on Xoom Browser

I have an image within a div container, that div container
has the style "overflow:hidden" which works on all major browsers
but for some reason doesn't work on Xoom, any ideas?
What browser is that anyway?

I've got a similar quandary in that overflow:auto stuff appears properly when the dom element is within the viewport, but once the element has moved above or below the viewport, it's content breaks free and becomes visible.
To answer your "what browser is that anyway", the User Agent I got during my tests was:
Mozilla/5.0 (Linux; Android 3.1; en-us; Xoom Build/HMJ37) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13
The interface certainly looks like Chrome, but I guess it's a custom browser(?)
Paste that into http://useragentstring.com to get a pretty good analysis of the agent string.