ionic2 IOS 10 not able to preview

[Malkiat-Singh]

HI I have spent 4-5 hours to make this plugin working in ionic2 on ios 10 But only visible when I remove the ion-nav component

Why you guys wasting community time if this plugin does not support ios just put in readme.md

Also I want ti mention that the scanning process is working only the preview is not visible

Please reply asap. Waiting for response

[Malkiat-Singh]

here is code to view https://github.com/Malkiat-Singh/qrScanner thanks

[doppelganger9]

Hello, I think you have to first call QRScanner.prepare before calling QRScanner.scan

I managed to make it work with Ionic2 and iOS 10.2.1 :

• Everything works (switching lights, switching cameras, pausing previews, hide/show preview, scanning, stop scanning, etc.).
• I did have to change the styles of ion-app (which have a white background), ion-content, ion-nav (div with nav-decor class), which are all having a non transparent background. After that, the preview can show through the webview and shows OK.

[trinvh]

Hi @doppelganger9 , can you share the working code you're using ? I can't make it works too.

Via readme:

this plugin appends the

No video element was created, no preview.

QRScanner.show((res) => {
    console.log(res);
});

And output:

authorized: true
canChangeCamera: true
canEnableLight: false
canOpenSettings: true
currentCamera: 0
denied: false
lightEnabled: false
prepared: true
previewing: true
restricted: false
scanning: true
showing: true

[Ethan9001]

@doppelganger9 Hello，I would like to know how you solve the html element transparent problem; in iOS, I always can not solve the problem with a white screen, even though I set the background are transparent. However, when I debug the time to trigger an element of white screen will disappear.

[doppelganger9]

I'm working on a sample app for you ;-) I'll let you know when it is available...

[Malkiat-Singh]

@doppelganger9 you can start with https://github.com/Malkiat-Singh/qrScanner Thanks

[trinvh]

I confirm this works. I don't find where's new DOM element created but @doppelganger9 was right :)

@Malkiat-Singh you'll need style to transparent these elements:

html, body, ion-app, ion-content, ion-page, .nav-decor {
  background-color: transparent !important;
}

However I think this plugin should allow scan apart of screen instead of full screen.

[stefanhuber]

I have added something like this inside the respective component

    ionViewWillEnter() {
        this.setupScanner();
        window['QRScanner'].show();
        window.document.getElementsByClassName('app-root').item(0).classList.add('hide');
    }

    ionViewWillLeave() {
        window.document.getElementsByClassName('app-root').item(0).classList.remove('hide');
        window['QRScanner'].destroy();
    }

[bitjson]

Thanks for sharing your solution @stefanhuber 👍

For anyone having trouble, you can also see how Copay implements this (albeit in Ionic v1 currently – upgrade happening soon) here: https://github.com/bitpay/copay

If anyone has any ideas for how we can improve the documentation to make this clearer please let me know. Otherwise, I think this is solved, so closing for now. (Please let me know if I should reopen!)