More info in the Opacity of the WebView section #7

Jacobra93 · 2020-12-10T19:24:40Z

I do not see the scanner open up when the method is fired. I think this is because the webview is blocking it, because I can see that background: 'transparent'; is applied but I guess it's not enough. I have tried applying background: 'transparent'; to other layers, like ion-app and ion-content, to no avail.

Any tips or examples of other plugins getting the webview transparent?

I am trying to use this in an Ionic Capacitor app. The scanner doesn't show up on Android or iOS.

The text was updated successfully, but these errors were encountered:

Jacobra93 · 2020-12-10T19:58:17Z

I got it to work by adding:

Android, on the body tag:
opacity: 0;
background: none;

iOS, on the html tag:
opacity: 0;

tafelnl · 2020-12-10T21:41:13Z

Thanks for sharing!

lewdea · 2020-12-11T10:23:00Z

I got it to work by adding:

Android, on the body tag:
opacity: 0;
background: none;

iOS, on the html tag:
opacity: 0;

If the root Html tag is set to "opacity: 0", then how can we implement custom UI on camera view?

tafelnl · 2020-12-11T10:31:13Z

@lewdea Fair point. Changing the opacity should not be necessary. Most of the time you should just change the background of one of more divs to none. You can try opening up the app with chrome://inspect/#devices for example and inspect every div (top to bottom) to hide their background.

Jacobra93 · 2020-12-14T13:20:22Z

@lewdea Good point. Were you able to get it working without using the opacity? I would like to utilize custom UI on the camera view so I guess I'll have to figure something else out.
@tafelnl I tried putting transparent on multiple levels in an Ionic app and nothing seemed to make the camera view show up, but I will try to play around with it some more.

tafelnl · 2020-12-14T13:30:26Z

What you could do to discover what divs are responsible for it, is the following:

Inspect your webapp in your browser. Add some very noticeable background color to <html>. Then delete the most upper root div and see if you can see the background color of <html>. You do? Nice. Undo the deletion and remove the child of that div. Etc etc. This way you can gradually debug and discover what divs are responsible for overlaying the barcode scanner.

lewdea · 2020-12-15T03:35:35Z

@Jacobra93 I got it working by setting body tag background to transparent too. There is no need to set every element's style. My app is built with ionic-vue and capacitor.
BarcodeScanner.hideBackground(); document.body.style.background = "transparent"; result.value = await BarcodeScanner.startScan();

SalahAdDin · 2021-03-03T08:58:55Z

What you could do to discover what divs are responsible for it, is the following:

Inspect your webapp in your browser. Add some very noticeable background color to <html>. Then delete the most upper root div and see if you can see the background color of <html>. You do? Nice. Undo the deletion and remove the child of that div. Etc etc. This way you can gradually debug and discover what divs are responsible for overlaying the barcode scanner.

I got the IonTabs component is hiding it, so, how can i handle it? Also, if we want to create a custom UI, how can we do that?

tafelnl · 2021-03-03T09:27:53Z

You should probably use the native Ionic way of hiding such components (which I do not know anything about unfortunately). You could also try and hide it with JavaScript.

Custom UI can be created in any way you like. An example can be found here: https://github.com/capacitor-community/barcode-scanner/tree/main/examples/scan-area-layout

SalahAdDin · 2021-03-03T11:19:02Z

@tafelnl is there no other way to do this without handling background by ourselves? cardIo scanner put the camera over the browser markup as far as i could understand.

Maybe like this one: https://bitbucket.org/golbros/capacitor-qrscanner/src/master/

It is specially a matter since:

We can find another example here.

tafelnl · 2021-03-03T14:32:34Z

I am not sure what you are trying to accomplish. Your screenvideo looks good to me. Could you elaborate?

SalahAdDin · 2021-03-03T17:01:09Z

Every time i have to reload the app, the scanner screen is showed, it must not be like that; but when i open the scanner, well, i couldn't handle the IonTabs component opacity yet.

I mean, i'm not opening the scanner, I'M loading/reloading the application.

tafelnl · 2021-03-04T10:31:35Z

I am trying my best to understand @SalahAdDin . But I am still not sure what you mean. What exactly do you mean by reloading? And what exactly happens that you think should not happen?

SalahAdDin · 2021-03-04T11:39:27Z

I made my template like this:

    <div id="scanner-ui" class="scanner-ui">
      <div class="sample-background">
        <!-- this background simulates the camera view -->
      </div>
      <div class="container">
        <div class="barcode-scanner--area--container">
          <div class="relative">
            <p>Kameranızı bir barkoda doğrultun</p>
          </div>
          <div class="square surround-cover">
            <div class="barcode-scanner--area--outer surround-cover">
              <div class="barcode-scanner--area--inner"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="root"></div>

.scanner-ui has display: none by default.

In React i get both one and i switch them when it is required.

Thanks.

tpharaoh · 2021-03-15T14:02:50Z

@lewdea I am having a similar issue with vuejs, do you mind posting a snippet?

tpharaoh · 2021-03-15T14:59:17Z

Thanks @lewdea I tried this based on your idea above and it essentially worked

const startScan = async () => {
        document.body.style.opacity="0.2";
      document.body.style.background = "transparent";
      
       BarcodeScanner.hideBackground(); // make background of WebView transparent

      const result = await BarcodeScanner.startScan(); // start scanning and wait for a result

      // if the result has content
      if (result.hasContent) {
          document.body.style.background = "";
          document.body.style.opacity="1";
        console.log(result.content); // log the raw scanned content
      }
    }

tpharaoh · 2021-03-22T11:41:48Z

@SalahAdDin did you succeed with this plugin and your design?

Our app has a background, and as other posters that meant I needed the background='transparent' and opacity

I would have liked to have just a portion of the screen with the camera...

Its OK, client doesn't require it, but I just had a vision :)

SalahAdDin · 2021-03-22T14:21:54Z

We handle it by changing the body display attribute while the scanner is on.

renatojobal · 2022-08-22T16:03:10Z

For someone still wondering how to achieve that on an ionic app:
There should be a file ionicapp/src/theme/variables.css. Here you could set the background to transparent on the items .md body { and .ios body {. For example:

The opacity is set by the last two digits on an hexadecimal color. So using 00 at the end will be full transparent.

betosimo · 2024-01-24T16:44:51Z

on ionic, insted of transparent I put a display none on body, like this on global styles:
body.scanner-active {
--background: transparent;
--ion-background-color: transparent;
display: none;
}
works, but how to get out? theres no cancel button and the slide to left dont work either

JanMisker · 2024-01-25T17:24:22Z

@betosimo with display:none you basically remove/hide your entire app. A cancel button is then also hidden, and swipe gesture probably doesn't work because there is nothing to swipe on.
What you would have to do is make everything transparent except your cancel/back button.

selcukbeyhan · 2024-01-26T18:15:06Z

on ionic, insted of transparent I put a display none on body, like this on global styles: body.scanner-active { --background: transparent; --ion-background-color: transparent; display: none; } works, but how to get out? theres no cancel button and the slide to left dont work either

this worked for me too :)

What you can do is:

if the scan is successful, you set the background back to its original value --> this is what I do
you can have a timeout to stop the scan if the scan is not successful for some seconds.

tafelnl closed this as completed Dec 10, 2020

tafelnl mentioned this issue Dec 22, 2020

Getting @color/colorPrimary instead of the BarcodeView #12

Closed

tafelnl mentioned this issue Jan 12, 2021

hideBackground not working? #15

Closed

tafelnl mentioned this issue Mar 3, 2021

Plugin example in ionic/angular project #20

Closed

SalahAdDin mentioned this issue Mar 4, 2021

Lector codigo de barras JhonArlex/capacitor_qrcode#5

Open

tafelnl mentioned this issue Mar 19, 2021

Can't open the QR Code Scanner: Access denied finding property "vendor.camera.aux.packagelist" #25

Closed

This was referenced May 25, 2021

Capacitor 3 support #23

Closed

need help to use barcode scanner #26

Closed

rbalet mentioned this issue Aug 31, 2022

Explain in the DOC what to find in the DOM, in case the camera doesn't show up #151

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

More info in the Opacity of the WebView section #7

More info in the Opacity of the WebView section #7

Jacobra93 commented Dec 10, 2020

Jacobra93 commented Dec 10, 2020

tafelnl commented Dec 10, 2020

lewdea commented Dec 11, 2020

tafelnl commented Dec 11, 2020

Jacobra93 commented Dec 14, 2020

tafelnl commented Dec 14, 2020

lewdea commented Dec 15, 2020

SalahAdDin commented Mar 3, 2021

tafelnl commented Mar 3, 2021

SalahAdDin commented Mar 3, 2021 •

edited

Loading

tafelnl commented Mar 3, 2021 •

edited

Loading

SalahAdDin commented Mar 3, 2021 •

edited

Loading

tafelnl commented Mar 4, 2021

SalahAdDin commented Mar 4, 2021

tpharaoh commented Mar 15, 2021

tpharaoh commented Mar 15, 2021

tpharaoh commented Mar 22, 2021

SalahAdDin commented Mar 22, 2021

renatojobal commented Aug 22, 2022

betosimo commented Jan 24, 2024

JanMisker commented Jan 25, 2024

selcukbeyhan commented Jan 26, 2024

More info in the Opacity of the WebView section #7

More info in the Opacity of the WebView section #7

Comments

Jacobra93 commented Dec 10, 2020

Jacobra93 commented Dec 10, 2020

tafelnl commented Dec 10, 2020

lewdea commented Dec 11, 2020

tafelnl commented Dec 11, 2020

Jacobra93 commented Dec 14, 2020

tafelnl commented Dec 14, 2020

lewdea commented Dec 15, 2020

SalahAdDin commented Mar 3, 2021

tafelnl commented Mar 3, 2021

SalahAdDin commented Mar 3, 2021 • edited Loading

tafelnl commented Mar 3, 2021 • edited Loading

SalahAdDin commented Mar 3, 2021 • edited Loading

tafelnl commented Mar 4, 2021

SalahAdDin commented Mar 4, 2021

tpharaoh commented Mar 15, 2021

tpharaoh commented Mar 15, 2021

tpharaoh commented Mar 22, 2021

SalahAdDin commented Mar 22, 2021

renatojobal commented Aug 22, 2022

betosimo commented Jan 24, 2024

JanMisker commented Jan 25, 2024

selcukbeyhan commented Jan 26, 2024

SalahAdDin commented Mar 3, 2021 •

edited

Loading

tafelnl commented Mar 3, 2021 •

edited

Loading

SalahAdDin commented Mar 3, 2021 •

edited

Loading