In Android App, how do I give a webview access to camera without address bar displayed

rebelrabbit

I am trying to create an Android App (Xamarin) which is a wrapper for a website. The website has a feature that allows the user to do a QR scan. I got it to work using WebChromeClient. However, it shows the address bar at the top. When I try to also add WebViewClient, the address bar is gone like I want but the QR Scan (camera) no longer works.

In my MainActivity.cs:


WebView web_view;
protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    SetContentView(Resource.Layout.activity_main);

    web_view = FindViewById<WebView>(Resource.Id.webview);

    web_view.Settings.JavaScriptEnabled = true;
    web_view.Settings.DomStorageEnabled = true;
    web_view.Settings.AllowFileAccessFromFileURLs = true;
    web_view.Settings.AllowUniversalAccessFromFileURLs = true;
    web_view.Settings.SetPluginState(WebSettings.PluginState.On);
    web_view.Settings.MediaPlaybackRequiresUserGesture = false;
    web_view.SetWebViewClient(new WorkspaceDroidClient());  //With this line included, the QR scan no longer works
    web_view.SetWebChromeClient(new CustomChromeClient());
    web_view.LoadUrl("https://qrstuff.com/scan");
}
public class WorkspaceDroidClient : WebViewClient
{
    // For API level 24 and later
    public override bool ShouldOverrideUrlLoading(WebView view, IWebResourceRequest request)
    {
        view.LoadUrl(request.Url.ToString());
        return false;
    }
}
public class CustomChromeClient : WebChromeClient
{
    public override void OnPermissionRequest(PermissionRequest request)
    {
        request.Grant(request.GetResources());
    }
}
public override bool OnCreateOptionsMenu(IMenu menu)
{
    MenuInflater.Inflate(Resource.Menu.menu_main, menu);
    return true;
}

public override bool OnOptionsItemSelected(IMenuItem item)
{
    int id = item.ItemId;
    if (id == Resource.Id.action_settings)
    {
        return true;
    }

    return base.OnOptionsItemSelected(item);
}

AndroidManifest.xml has the following:


<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_INTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" />

Any help would be greatly appreciated.

Lucas Zhang

That because of the default WebViewClient doesn't support the QR scan function in the site .And I don't think it is possible to remove the URL bar unless you invoke JS code . Which is not a friendly solution .

If you just implement QR scan in Android , it is unnecessary to load the third-party website on WebView . You could install the plugin ZXing.Net.Mobile from nuget to your project .

Usage

buttonScan.Click += (sender, e) => {

    #if __ANDROID__
    // Initialize the scanner first so it can track the current context
    MobileBarcodeScanner.Initialize (Application);
    #endif
    
    var scanner = new ZXing.Mobile.MobileBarcodeScanner();

    var result = await scanner.Scan();

    if (result != null)
        Console.WriteLine("Scanned Barcode: " + result.Text);
};

For more details you could refer https://github.com/Redth/ZXing.Net.Mobile .

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How do I get the APK of an installed app without root access?

How do I give different users access to different rows without creating separate views in BigQuery?

Android - How to open the Hangout app from a Hangout URL displayed in the webview?

How do I give a container access to a device file in kubernetes?

How do I choose an ImageReader buffer type for my Android camera app?

How do I give access to Google Cloud Dataprep?

How to access camera through webview in react native

Access an external USB camera from the webview in Android

In React Native how can I access the native camera app?

How do I give ECS containers access to a private git repo?

How do I give twisted server an ip address?

How to access database on Android app without root

How do I give a hexadecimal color to different bars in a bar chart?

How do i make an android app that will detect whether a person is real or fake in front of camera?

How do I hide the status bar in my Android App ( Android Studio 4.1)

How do I give administrators access to a folder without destroying current permissions?

I want to give access to users of their own dropbox from my java web app. How can I do that?

How do I delete the Windows Explorer address bar history

Android WebView : how do I control webView height?

How do I give multiple users access to a Windows NTFS partition?

How do I give myself access to /var/www to create and edit files and folders in it without 'sudo'?

How do I change priority of firefox address bar suggestions to tags?

How do I make site info appear in the address bar of a browser

How do I NOT display input text in address bar

How do I access the camera in Swift 4?

How do I give an App Registration permission to access Azure KeyVault?

How do I hide the url bar in the WPA app generated for Android?

How do I give axios interceptors access to my react app's state?

How do I hide the progress bar without waiting for the entire page to load in webview?