search

bitpay / cordova-plugin-qrscanner

A fast, energy efficient, highly-configurable QR code scanner for Cordova apps and the browser.
MIT License
568 stars 772 forks source link

Camera never appearing #108

Closed justinhenricks closed 6 years ago

justinhenricks commented 6 years ago

I am running Cordova 6.4 along with Sencha Touch. The plugin is installed successfully but when I call the scan() method the camera in iOS and Android is not popping up. I can see when I open up the object that it says scanning and camera showing is true, in yet I see not camera. Anyone know what could be going on here?

ivan94fi commented 6 years ago

Hi, be sure to set every background transparent, as specified in docs, otherwise you will not be able to see camera preview. In my case i had to set the css property "background: none" to html, body and jQuery mobile page. Qhen it's done scanning, revert every background to what it was before.

Story5 commented 6 years ago

There is no camera preview but can scan qrcode and  gain the text. I try to set every item background transparent but not work. Do I write the wrong code? html - file

 <ion-content class="content" scroll="true" overflow-scroll="true">
  <button class="button" ion-button (click)="qrscanner()">qrscanner</button>
</ion-content>

scss - file

page-home {

}

.content {
    background: transparent
}

.buttuon {
    background: transparent
}
ivan94fi commented 6 years ago

As far as i can tell ypur code is incomplete ( there is also a typo: .buttuon should be .button ): as I said before, you should set background:none also to <html> element and to <body> element.

This is the code used in my app to make Camera Preview work: I actually use jQuery to dinamically change these css properties:

html , body, #my_page {
    background: none;
}
Story5 commented 6 years ago

Thanks for your reminder of my write error. I just set the ion-content background : none transparent and got a transparent view.

screenshot

It is not similar to the the example image. There is no box in the middle

ivan94fi commented 6 years ago

Yes, you have to add it yourself. Just create a transparent image with a box in the middle and set the image as background. Below there's what i use in my app (it fits a 1080x1920 screen): Scanner background

Story5 commented 6 years ago

Got it, thank you very much.

ivan94fi commented 6 years ago

You are welcome!

romanrast commented 6 years ago

hi @Story5 could you share your code as a starter template? Would be amazing!

Story5 commented 6 years ago

@romanrast Hi, romanrast. here is my demo (qrscannerdemo), I just achieve showing a camera preview, but haven't code for a qrscanner view with a scanner background. Hope it can help!

shinuneo commented 6 years ago

Hi,

I have tried this code but for me it is not opening camera for android as well as iphone any tips. Thanks

ghost commented 6 years ago

There is a bug in the browser version. (browser version has got memory leak if you call show after scan, on android version you need to call show())

I have tested Story5 approach, which i think nice, but unfortunately not working.

There is a nav-decor in the css which should be transparent, i'm not sure, what is doing. I have tested only in browser because i have hacked previously, but i think it will work.

Instead of the push you need to use setRoot - the push means just add a new layer increasing the z-index, which does not solve any problem with the layer transparency.

Story5 solution anyway is good, if you have bunch of embedded content, just remove them from the root, and put back, when the camera is off, because now you have much less pain, just the simple page with some control button.

Liminghao0922 commented 6 years ago

I resolved this issue by adding the following css. Hope this can help someone. .nav-decor{ background-color: transparent !important; }

bitjson commented 6 years ago

Looks like this issue has been solved. Please feel free to open a new issue if you're still having trouble.

daksamedia commented 5 years ago

I'm not using Ionic, is there any solution? My camera didn't appear since I click my button to scan. Is there any best practice for this plugin?

bitjson commented 5 years ago

@daksamedia try cloning this repo and running the tests for a working example. See the Readme for more details.

daksamedia commented 5 years ago

@bitjson I already tested it, but still didn't work. I'm using framework7 anyway. Is it possible?

bitjson commented 5 years ago

What didn't work about it? Did the tests fail on your devices?

This plugin should work for all Cordova projects, javascript frameworks shouldn't matter.

daksamedia commented 5 years ago

@bitjson it's work in browser, but in my android device my camera didn't open.

on prepare action it gave a response, but camera didn't show up.

bitjson commented 5 years ago

Trying to reproduce – when you ran the generated tests on Android, which buttons did you click/what order?

alemdg commented 5 years ago

Worked great in Android, but in IOS is not showing the camera preview