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

Question

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.

Answer 1

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 .