Maui blazor OCR scanner

Question

I am trying to implement an OCR reader in MAUI blazor application using the canvas frame invoking it through java script functions, but the camera does not open in my android device even after giving permissions to the app , kindly help me out with the working code that works like an OCR reader for iPhone and android deices , the same code works fine in browser

await JSRuntime.InvokeVoidAsync("startVideo", "videoFeed");

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
            let video = document.getElementById(src);
            if ("srcObject" in video) {
                video.srcObject = stream;
            } else {
                video.src = window.URL.createObjectURL(stream);
            }
            video.onloadedmetadata = function (e) {
                video.play();
            };
            //mirror image
            video.style.webkitTransform = "scaleX(-1)";
            video.style.transform = "scaleX(-1)";
        });
    }
}

function getFrame(src, dest, dotNetHelper) {
    let video = document.getElementById(src);
    let canvas = document.getElementById(dest);
    canvas.getContext('2d').drawImage(video, 0, 0, 320, 240);

    let dataUrl = canvas.toDataURL("image/jpeg");
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}
function getFrames(src, dest, dotNetHelper) {
    let video = document.getElementById(src);
    let canvas = document.getElementById(dest);
    canvas.getContext('2d').drawImage(video, 0, 0, 320, 240);

    let dataUrl = canvas.toDataURL("image/jpeg");
    dotNetHelper.invokeMethodAsync('ProcessImages', dataUrl);
}

function stopVideo(src) {
    let video = document.getElementById(src);
    if (video && "srcObject" in video) {
        const stream = video.srcObject;
        if (stream) {
            const tracks = stream.getTracks();
            tracks.forEach(track => track.stop());
        }
        video.srcObject = null;
    }
}```` 
--UI code--
````<video id="videoFeed" width="320" height="240" /><canvas class="d-none" id="currentFrame" width="320" height="240" />````

Answer 1

In the android, not only the app needs to request the permission but also website in the webview. So you can try the following code:

In the AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Declare the two classes in the \Platforms\Android:

public class MyWebChromeClient : WebChromeClient
    {
        public override void OnPermissionRequest(PermissionRequest request)
        {
            request.Grant(request.GetResources());

        }
    }
    public class CustomBlazorWebViewHandler : BlazorWebViewHandler
    {
        protected override void ConnectHandler(global::Android.Webkit.WebView platformView)
        {
            base.ConnectHandler(platformView);
            platformView.SetWebChromeClient(new MyWebChromeClient());
        }
    }

And in the MauiProgram.cs:

builder
                  .UseMauiApp<App>()
                  .ConfigureMauiHandlers(handlers =>
                  {
#if ANDROID
                        handlers.AddHandler(typeof(BlazorWebView),typeof(Platforms.Android.CustomBlazorWebViewHandler));
#endif
                  })