iPhone scan window larger than browser viewport

[develorem]

I'm just trying to get a simple scenario working.

I want to livestream capture a single barcode being scanned from my iPhone. It's all mostly working; it scans the barcode, fires the event, etc. Great. However the camera preview is much larger than the div it is showing inside of. It stretches off the screen to the right and the bottom. I expect this is just some config I am missing?

I've put a border around the div to see where it is drawing. It seems to be drawing inside the right hand screen bounds, but it is also stretching down off the screen. There are no styles on this div at all other than the border.

When I access the example page it works fine. I've compared that code to my code and can't see what could be causing it.

I'm using Angular with typescript (but not using the typings in your repo yet), and have a Scanner component.

Here's my init inside scanner.component.ts in ngOnInit():

Quagga.init({
        inputStream : {
          name : 'Live',
          type : 'LiveStream'
        },
        decoder : {
          readers : ['ean_reader']
        }
      }, function(err) {
          if (err) {
            t.canScan = false;
            console.log('quagga init error', err);
            return;
          }
          Quagga.start();
          t.canScan = true;
        }
      );

And scanner.component.html:

<h3>Scanner</h3>
<div *ngIf="!canScan">Error; Your device cannot scan.</div>
<div id="interactive" class="viewport"></div>

Any help appreciated.

Versions

• quagga@0.12.1
• typescript@2.4.2
• @angular/core@5.2.11

[ericblade]

fwiw, i haven't figured out the secret to resizing the video display to match phone, or getting the coordinates for drawing to match up, either. and it works quite differently on Android versus on a desktop PC, which makes iterating on it a bit difficult -- i wonder if there's a way to get webpack-dev-server or some such to serve with https so it can be used by a phone, or some other ideas for rapid iteration with a mobile device

[develorem]

When it goes full screen, it looks to size properly. So I'm wondering if there is a way to make it go to full screen by default? I'll try to have a look at the code to see how it works, but I would have thought it would just use that particular div. And as I said, the demos work fine, its just my code that is 'special'.

[ericblade]

I'm not sure about that. I've added full-screen on my app to try to minimize the offset that is occuring when drawing on the canvas, but that neither seemed to help minimize the offset, nor solve the problem where only a part of the camera's view is visible. I suspect it may be something CSS related . . . but i'm not sure exactly what. If you're using the same javascript as live_w_locator, it seems like it has to be related to the DOM or the CSS setup, no?