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.

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

Fullscreen camera size #83

Open
yenyih opened this Issue Dec 11, 2018 · 7 comments

Comments

Projects
None yet
4 participants
@yenyih
Copy link

yenyih commented Dec 11, 2018

Hi,
First of all, great work and a very nice piece of code!

I am using this in browsers on mobile devices and tablets. May I know how to make the camera full screen based on different devices screen size (Just like WhatsApp camera scan) ? Is it possible to emit the canvas width and height so that can pass in a custom width and height?

@gruhn

This comment has been minimized.

Copy link
Owner

gruhn commented Dec 11, 2018

thanks 😁

I'd suggest you wrap the component in div that occupies the entire viewport. Somewhat like this:

<div class="fullscreen">
   <qrcode-steam></qrcode-stream>
</div>
.fullscreen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: black;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

QrcodeStream automatically fills the space available up to the resolution provided by the camera. For most mobile devices this should be sufficient to fill the hole viewport.

Of course this leaves the address bar visible. Unless you are in PWA mode.

Alternatively, you can use the Fullscreen API on the root element:

<qrcode-steam ref="rootElement"></qrcode-stream>
this.$refs.rootElement.requestFullscreen()

This however will prompt users with a permission dialog. Since you are already asking for camera access permission this might be a little bit too invasive.

Please close this issue as soon as you feel your question is answered.

@gruhn gruhn added the question label Dec 11, 2018

@yenyih

This comment has been minimized.

Copy link
Author

yenyih commented Dec 12, 2018

thanks 😁

I'd suggest you wrap the component in div that occupies the entire viewport. Somewhat like this:

<div class="fullscreen">
   <qrcode-steam></qrcode-stream>
</div>
.fullscreen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: black;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

QrcodeStream automatically fills the space available up to the resolution provided by the camera. For most mobile devices this should be sufficient to fill the hole viewport.

Of course this leaves the address bar visible. Unless you are in PWA mode.

Alternatively, you can use the Fullscreen API on the root element:

<qrcode-steam ref="rootElement"></qrcode-stream>
this.$refs.rootElement.requestFullscreen()

This however will prompt users with a permission dialog. Since you are already asking for camera access permission this might be a little bit too invasive.

Please close this issue as soon as you feel your question is answered.

Hi, thank you for your reply.

I tried the first solution you suggested. Unfortunately it's not working.

capture

By the way, i haven't try the second solution yet (Fullscreen API). I will update here again the progress after I tried. Thanks again.

@gruhn

This comment has been minimized.

Copy link
Owner

gruhn commented Dec 12, 2018

What if you set :camera="{ width: true, height: true }"?

EDIT:

Wait a minute that makes no sense. Try this:

<qrcode-stream :camera="{ width: { min: 0 }, height: { min: 0 } }" />
@yenyih

This comment has been minimized.

Copy link
Author

yenyih commented Dec 13, 2018

What if you set :camera="{ width: true, height: true }"?

EDIT:

Wait a minute that makes no sense. Try this:

<qrcode-stream :camera="{ width: { min: 0 }, height: { min: 0 } }" />

Unfortunately, same.... not working. By the way, the requestFullScreen also not working. :(
``

@gruhn gruhn removed the question label Dec 13, 2018

@allenwalker2015

This comment has been minimized.

Copy link

allenwalker2015 commented Jan 22, 2019

Hi, i'm using VUE + ONSEN UI and this component is awesome, but my problem like this guy is i cant set the video to use the full screen on the phone :c
whatsapp image 2019-01-21 at 11 03 15 pm

@allenwalker2015

This comment has been minimized.

Copy link

allenwalker2015 commented Jan 22, 2019

I found a fix, the problem is in the component CSS:
Paste this in wherever you use the component and use it in an not scoped css and it will work
.qrcode-stream__camera,
.qrcode-stream__pause-frame {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
max-width: inherit !important;
max-height: inherit !important;
}

.qrcode-stream__inner-wrapper {
position: inherit !important;
max-width: inherit !important;
max-height: inherit !important;
z-index: inherit !important;
}

@Mombuyish

This comment has been minimized.

Copy link

Mombuyish commented Feb 25, 2019

@allenwalker2015

it's works for me, amazing.

<style> and not scoped it's very important.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.