Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Camera never appearing #108

Closed
justinhenricks opened this issue Jul 24, 2017 · 20 comments
Closed

Camera never appearing #108

justinhenricks opened this issue Jul 24, 2017 · 20 comments

Comments

@justinhenricks
Copy link

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
Copy link

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
Copy link

Story5 commented Jul 26, 2017 •
edited

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
Copy link

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
Copy link

Story5 commented Jul 27, 2017 •
edited

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
Copy link

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
Copy link

Story5 commented Jul 28, 2017

Got it, thank you very much.

@ivan94fi
Copy link

You are welcome!

@romanrast
Copy link

romanrast commented Jul 31, 2017 •
edited

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

@Story5
Copy link

Story5 commented Aug 1, 2017 •
edited

@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!

@Story5 Story5 mentioned this issue Aug 4, 2017
Closed
@shinuneo
Copy link

Hi,

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

@ghost
Copy link

ghost commented Aug 12, 2017 •
edited by ghost

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
Copy link

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

@bitjson
Copy link
Contributor

bitjson commented May 17, 2018

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

@bitjson bitjson closed this as completed May 17, 2018
@daksamedia
Copy link

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
Copy link
Contributor

bitjson commented Jun 1, 2018

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

@daksamedia
Copy link

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

@bitjson
Copy link
Contributor

bitjson commented Jun 1, 2018

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
Copy link

@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
Copy link
Contributor

bitjson commented Jun 1, 2018

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

@alemdg
Copy link

alemdg commented Jan 24, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@bitjson @romanrast @justinhenricks @daksamedia @Story5 @alemdg @shinuneo @Liminghao0922 @ivan94fi