Monaca Onsen UI Discord Chat Github Repo

Plugin cordova-plugin-inappbrowser camera Android 10



  • Agluem already gone through this situation?

    When I try to call the camera from cordova-plugin-inappbrowser on Android 10 or higher, it does not offer an option to access the camera, only access to the gallery. In IOs it works.

    0_1614354379181_Screenshot_20210226-124412.jpg

    Does anyone have any idea how to solve?


    in my test I used:

    a) inappbrowser open index.html in server
    <! DOCTYPE html>
    <html>
    <meta http-equiv = “Content-Security-Policy” content = "default-src ‘self’ data: gap: ms-appdata: https://ssl.gstatic.com ‘unsafe-eval’; style-src 'self ‘’ unsafe-inline '; media-src * ">
    <body>
    <p> My test capture. </p>
    <label for = “test”> Take Picture: </label>
    <input accept = “image / png, image / jpeg” type = “file” capture = “”>
    </body>
    </html>

    In App

    a) config.xml
    <plugin name = “cordova-plugin-inappbrowser” spec = “5.0.0” />
    <plugin name = “cordova-plugin-camera” spec = “5.0.1” />
    <plugin name = “cordova-plugin-media-capture” spec = “3.0.3” />
    <plugin name = “cordova-plugin-device” spec = “2.0.3” />
    <plugin name = “cordova-plugin-file” spec = “6.0.2” />
    <plugin name = “cordova-plugin-media” spec = “5.0.3” />

    <uses-permission android: name = “android.permission.CAMERA” />
    <uses-permission android: name = “android.permission.READ_EXTERNAL_STORAGE” />
    <uses-permission android: name = “android.permission.WRITE_EXTERNAL_STORAGE” />

    b) index.hml
    <! DOCTYPE HTML>
    <html>
    <head>
    <meta charset = “utf-8”>
    <meta name = “viewport” content = “width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = no”>
    <meta http-equiv = “Content-Security-Policy” content = "default-src * data: gap: content: https://ssl.gstatic.com; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’ ">
    <script src = “components / loader.js”> </script>
    <link rel = “stylesheet” href = “components / loader.css”>
    <link rel = “stylesheet” href = “css / style.css”>

    <script src = "app.js"> </script>
    <script>
        document.addEventListener ("deviceready", onDeviceReady, false);
        function onDeviceReady ()
        {
    

    showHelp (‘https://homologacao.moblink.com.br/_upcidadao/_appMobile/testecamera.html’);
    }
    </script>
    </head>
    <body>
    <br />
    This is a template for Monaca app1.
    </body>
    </html>

    c) app.js
    var inAppBrowserRef;

    function showHelp (url) {

    var target = "_self";
    
    var options = "location = yes, hidden = yes, beforeload = yes";
    
    inAppBrowserRef = cordova.InAppBrowser.open (url, target, options);
    
    inAppBrowserRef.addEventListener ('loadstart', loadStartCallBack);
    
    inAppBrowserRef.addEventListener ('loadstop', loadStopCallBack);
    
    inAppBrowserRef.addEventListener ('loaderror', loadErrorCallBack);
    
    inAppBrowserRef.addEventListener ('beforeload', beforeloadCallBack);
    
    inAppBrowserRef.addEventListener ('message', messageCallBack);
    

    }

    function loadStartCallBack () {

    $ ('# status-message'). text ("loading please wait ...");
    

    }

    function loadStopCallBack () {

    if (inAppBrowserRef! = undefined) {
    
        inAppBrowserRef.insertCSS ({code: "body {font-size: 25px;"});
    
        inAppBrowserRef.executeScript ({code: "\
            var message = 'this is the message'; \
            var messageObj = {my_message: message}; \
            var stringifiedMessageObj = JSON.stringify (messageObj); \
            webkit.messageHandlers.cordova_iab.postMessage (stringifiedMessageObj); "
        });
    
        $ ('# status-message'). text ("");
    
        inAppBrowserRef.show ();
    }
    

    }

    function loadErrorCallBack (params) {

    $ ('# status-message'). text ("");
    
    var scriptErrorMesssage =
       "alert ('Sorry we cannot open that page. Message from the server is:"
       + params.message + "');"
    
    inAppBrowserRef.executeScript ({code: scriptErrorMesssage}, executeScriptCallBack);
    
    inAppBrowserRef.close ();
    
    inAppBrowserRef = undefined;
    

    }

    function executeScriptCallBack (params) {

    if (params [0] == null) {
    
        $ ('# status-message'). text (
           "Sorry we couldn't open that page. Message from the server is: '"
           + params.message + "'");
    }
    

    }

    function beforeloadCallBack (params, callback) {

    if (params.url.startsWith ("http://www.example.com/")) {
    
        // Load this URL in the inAppBrowser.
        callback (params.url);
    } else {
    
        // The callback is not invoked, so the page will not be loaded.
        $ ('# status-message'). text ("This browser only opens pages on http://www.example.com/");
    }
    

    }

    function messageCallBack (params) {
    $ (’# status-message’). text (“message received:” + params.data.my_message);
    }