How do I adapt-migrate my existing Xamarin Forms code project code to Blazor WebView project?

[soykanozcelik]

Hi All,
I’ve Xamarin Forms project(s) which is using WebView (within aspnet webforms) and working well all but last project is different because it’s using web camera and location for qrcode reading via zxing js library codes. Related page running well with desktop or mobile browser w/o problem.

But when I run my web project under Xamarin project via WebView it’s working but something is blocking camera and location access :/

What is my goal?
If its possible want to fix my project with some touches-modifies with you help its will be very appreciated

If its not possible or if necessary current technologies and are easy and updatedle for future and versions, which is maui app or Andriod+iOS blazor webview app can solve my need and how can I easily migrate it to with my current structure and codes?

I want to explain my project workflow as you will see below codes

Actually my project is very simple and I have 2 xaml file main.xaml and mainpage.xaml, when main page (main.xaml) executing at first load searching a value which is created Xamarin Essentials plugin Preferences.
Eg. Prefences.Get(“myValue”); if myValue is not exist or null one of an entry field and an button appearing and ask “please enter your firm nickname” to user, after user clicked save button this value is saving via Prefences.Set(“myValue”,txtNickName,Text) and then setting webview source property like below

var nickName = Preferences.Get(“myValue”); 
myBroser.Source = “https://blabla.net?fid=” + nickName&did=d2910e53-01e6-4c0c-bf01-a966976dfc7e;

That’s it and all of process is running on related web site within webview. Xamarin forms project mission that's it and so simple.

If I should summarize, only problem is camera and location permissions not accepting by webview even if it’s already set in AndroidManifest file.

So I want to share my codes for easily understanding

Here is my codes main.xaml.cs and mainPage.xaml.cs

//main.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Plugin.Connectivity;
using Xamarin.Essentials;
using Permissions = Xamarin.Essentials.Permissions; 


namespace HabitMobile
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Main : ContentPage
    {
        public Main()
        {
            InitializeComponent();
            LoadWebViewContent();
        }

        private void LoadWebViewContent()
        {
            
            LoadWebView();
        }

        private void LoadWebView()
        {
            //check firmShortName
            string isFirmShortName = GetFirmShortName();

            if (string.IsNullOrWhiteSpace(isFirmShortName))
            {
                LblFirmShortNameCheck.Text = "Size verilmiş olan";
                LblFirmShortNameCheck.IsVisible = true;
                txtFirmShortName.IsVisible = true;
                btnKaydet.IsVisible = true;
            }
            else
            {
                //check internet connectivity
                bool isInternet = CheckConnectivity();
                if (isInternet)
                {
                    string mydeviceID = GetDeviceID();
                    if (!string.IsNullOrWhiteSpace(mydeviceID))
                    {
                        //don't forget mobile browsers doesn't allow camera and location access from http use http(s) instead of it
                        Browser.IsVisible = true;
                        //var urlWithDid = $@"https://www.xsentius.net/login.aspx?fid={isFirmShortName.Trim()}?per&did={mydeviceID.Trim()}";
                        Browser.Source = "https://www.xsentius.net/login.aspx?fid=" + isFirmShortName.ToString().Trim() + "?per&did=" + mydeviceID.ToString().Trim();
                    }
                    else
                    {
                        //don't forget mobile browsers doesn't allow camera and location access from http use http(s) instead of it
                        Browser.IsVisible = true;
                        //var urlWoDid = $@"https://www.xsentius.net/login.aspx?fid={isFirmShortName.Trim()}?per";
                        Browser.Source = "https://www.xsentius.net/login.aspx?fid=" + isFirmShortName.ToString().Trim() + "?per";
                    }
                }
            }
        }

        private bool CheckConnectivity()
        {
            var isConnected = CrossConnectivity.Current.IsConnected;

            if (isConnected == true)
            {
                imgNoInternet.IsVisible = false;
                LblConnectivityCheck.IsVisible = false;
                LblConnectivityCheck.Text = "Internet Bağlantınız Var...";
            }
            else
            {
                imgNoInternet.IsVisible = true;
                LblConnectivityCheck.IsVisible = true;
                LblConnectivityCheck.Text = "Internet Bağlantınız Yok!";
            }

            return isConnected;
        }

        private string GetDeviceID()
        {
            var deviceId = Preferences.Get("my_deviceId", string.Empty);
            if (string.IsNullOrWhiteSpace(deviceId))
            {
                deviceId = System.Guid.NewGuid().ToString();
                Preferences.Set("my_deviceId", deviceId);
            }

            return deviceId;
        }

        private string GetFirmShortName()
        {
            var shortName = Preferences.Get("my_firmName", string.Empty);

            return shortName;
        }

        private void BtnKaydet_Clicked(object sender, EventArgs e)
        {
            string firmName = txtFirmShortName.Text.Trim();
            Preferences.Set("my_firmName", firmName);
            LblFirmShortNameCheck.TextColor = Color.Red;
            LblFirmShortNameCheck.Text = "Kısa Firma Adı kaydedildi, uygulamadan çıkıp tekrar çalıştırınız";
            txtFirmShortName.IsVisible = false;
            btnKaydet.IsVisible = false;
        }

        private void Browser_Navigating(object sender, WebNavigatingEventArgs e)
        {
            LoadingLabel.IsVisible = true;
        }

        private void Browser_Navigated(object sender, WebNavigatingEventArgs e)
        {
            LoadingLabel.IsVisible = false;
        }

        
    }
}

//mainPage.xaml.cs
//using Android.App;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Essentials;
using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using static HabitMobile.MainPage;


namespace HabitMobile
{
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();

            Detail = new NavigationPage(new Main()); //ilk gelecek sayfa

            IsPresented = false; //true olursa master page menu acik gelir

            //var settings = new ToolbarItem { IconImageSource = "exit.png", Text = "Çıkış", Command = new Command(this.ExitApp)};
            //this.ToolbarItems.Add(settings);

            // Disable the navigation bar for this page.
            NavigationPage.SetHasNavigationBar(this, false);

            string mydeviceID = GetDeviceID();
            if (!string.IsNullOrWhiteSpace(mydeviceID))
            {
                LblDeviceIDCheck.IsVisible = true;
                LblDeviceIDCheck.Text = "ID: " + mydeviceID.ToString().Trim();
            }
            string isFirmShortName = GetFirmShortName();
            if (!string.IsNullOrWhiteSpace(isFirmShortName))
            {
                LblFirmShortNameCheck.IsVisible = true;
                LblFirmShortNameCheck.Text = "Firma kısa adı: " + isFirmShortName.ToString().Trim();
                btnFirmaAdiKaldir.IsVisible = true;
            }

        }

        private void ExitApp()
        {
            //OnBackButtonPressed();

            /// Begin an asyncronous task on the UI thread because we intend to ask the users permission.
            Device.BeginInvokeOnMainThread(async () =>
            {
                if (await DisplayAlert("Uygulama Kapatılsın mı?", "", "Evet", "Hayır"))
                {
                    base.OnBackButtonPressed();
                    DependencyService.Get<IBackButton>().Pressed();
                    //await App.Navigation.PopAsync(); 
                }
            });

            /// Always return true because this method is not asynchronous.
            /// We must handle the action ourselves: see above.

            //return true;

        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
        }

        protected override bool OnBackButtonPressed()
        {
            /// Begin an asyncronous task on the UI thread because we intend to ask the users permission.
            //Device.BeginInvokeOnMainThread(async () =>
            //{
            //    if (await DisplayAlert("Uygulama Kapatılsın mı?", "", "Evet", "Hayır"))
            //    {
            //        base.OnBackButtonPressed();

            //        ///await App.Navigation.PopAsync(); 
            //        Android.OS.Process.KillProcess(Android.OS.Process.MyPid());
            //    }
            //});

            /// Always return true because this method is not asynchronous.
            /// We must handle the action ourselves: see above.
            //return true;

            return false;
        }

        private string GetDeviceID()
        {
            var deviceId = Preferences.Get("my_deviceId", string.Empty);
            if (string.IsNullOrWhiteSpace(deviceId))
            {
                deviceId = System.Guid.NewGuid().ToString();
                Preferences.Set("my_deviceId", deviceId);
            }

            return deviceId;
        }

        private string GetFirmShortName()
        {
            var shortName = Preferences.Get("my_firmName", string.Empty);

            return shortName;
        }

        private void btnFirmaAdiKaldir_Clicked(object sender, EventArgs e)
        {
            Preferences.Remove("my_firmName");
            LblFirmShortNameCheck.TextColor = Color.Red;
            LblFirmShortNameCheck.Text = "Kısa Firma Adı kaldırıldı, uygulamadan çıkıp tekrar çalıştırınız";
            btnFirmaAdiKaldir.IsVisible = false;
        }

        private void AnaSayfa_Clicked(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new Main());

            IsPresented = false;
        }

        private void About_Clicked(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new About());

            IsPresented = false;
        }

        private void Settings_Clicked(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new Settings());

            IsPresented = false;
        }
    }
}

PS-1 : I’ve set related permissions at AndroidManifest file

PS-2 : I’ve tried some suggestions about permission requests, custom renderers etc. but I couldn’t success :/ may be you can update my codes

PS-3 : I saw a Permission Plugin which is author @jamesmontemagno James Montemagno at this address https://github.com/jamesmontemagno/PermissionsPlugin?tab=readme-ov-file. I doubt if it solve my problem so that with the newest maui version specially Blazor webview solution is will be the best when i success to migrate my existing codes with your helps

PS-4 : you’ll find full project and related jscodes text file which is attached

Thanks a lot from now for your valuable helps.

@jamesmontemagno @jfversluis @davidortinau

CozbimPermobil.zip
jsCodes.txt