Search code examples
javascriptandroidwebviewqr-code

I am getting "Uncaught ReferenceError: globalThis is not defined" HTML5-qrcode scanner in Android WebView, Works perfect on chrome and Web Browsers

I have a web app (https://salon.techwithin.in) that will be used on both Browsers and Android apps.

Sample QR Code for my app https://i.postimg.cc/Fsm9bKwT/sample-qr-scan.jpg

To convert this web app to Android App I have created a simple Android application with WebView

public class MainActivity extends AppCompatActivity {
    private WebView mywebView;
    private String userAgent;
    private static final int PERMISSION_REQUEST_CODE = 200;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (checkPermission()) {

        } else {
            requestPermission();
        }

        setContentView(R.layout.activity_main);
        mywebView=findViewById(R.id.webview);
        mywebView.setWebViewClient(new mywebClient());
        
        // TO TEST ON DEVELOPERS DEMO PORTAL I USED THEIR PAGE TO LOAD IN WEBVIEW, BUT SAME ERROR ON THAT PAGE TOO.
        //mywebView.loadUrl("https://blog.minhazav.dev/research/html5-qrcode.html");

        mywebView.loadUrl("https://salon.techwithin.in");

        WebSettings webSettings=mywebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setDatabaseEnabled(true);
        webSettings.setPluginState(WebSettings.PluginState.ON);
        webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        webSettings.setLoadWithOverviewMode(false);
        webSettings.setAllowFileAccess(true);
        webSettings.setSupportZoom(true);
        webSettings.setBuiltInZoomControls(false);
        webSettings.setSupportMultipleWindows(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        CookieManager.getInstance().setAcceptCookie(true);

        //userAgent = System.getProperty("http.agent");
        //webSettings.setUserAgentString(webSettings.getUserAgentString().replace("; wv",""));

        mywebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onPermissionRequest(final PermissionRequest request) {
                request.grant(request.getResources());
            }
        });
    }

I am getting the following error in logcat, and the QR scanner area remains blank.

2022-09-06 09:05:44.877 2932-2932/in.techwithin.thesalonman I/chromium: [INFO:CONSOLE(2)] "Uncaught ReferenceError: globalThis is not defined", source: https://blog.minhazav.dev/assets/research/html5qrcode/html5-qrcode.min.js (2) 2022-09-06 09:05:44.894 2932-2932/in.techwithin.thesalonman I/Choreographer: Skipped 33 frames! The application may be doing too much work on its main thread. 2022-09-06 09:05:44.975 2932-2932/in.techwithin.thesalonman I/chromium: [INFO:CONSOLE(432)] "Uncaught TypeError: Html5QrcodeScanner is not a constructor", source: https://blog.minhazav.dev/research/html5-qrcode.html (432)

Current Plugin Used to scan qr codes in my web app

https://github.com/mebjas/html5-qrcode

I have tried using the developer's Html5-qrcode demo page in webview which throws the same error. (Check the comments in code sample)

The android app is requesting CAMERA Access properly, To test the camera working I have tested another plugins demo web page

https://nimiq.github.io/qr-scanner/demo/

It opens the camera and scans QR codes properly,

But for now, I won't be able to switch to this working plugin in my web app, hence I need a solution with a current plugin (html5-qrcode) only. My current web app is built in Core PHP and Used html5-qrcode plugin directly in browser without any loader <script src="https://unpkg.com/html5-qrcode" type="text/javascript">

I am new to android app development hence any help will be appreciated.

Solution

  • Problem is not with your android code as per issues list of the project, problem is in html5-qrcode.min.js files after version 2.3.1

    so i copied file from following link , and it started working. https://github.com/mebjas/html5-qrcode/releases/tag/v2.3.1