Device rotation breaks scanning

[robert777robert777]

Detecting qr codes stops working after rotating an android phone.

How to reproduce this bug

1. browse to demo website (or create one).
2. make sure device rotation is allowed in android
3. scan a qr code - it works.
4. rotate the device by 90 degrees (from portrait to landscape)
5. try to scan - no qr codes are scanned
6. rotate the device back to the initial rotation - it works.

• if i reload in in landscape rotation it works only in landscape (but not portrait anymore)

Tested on 2 phone (xiaomi redmi 4 and samsung j5) I guess it has something to do with camera rotation that changes resolution (for example from 640X480 to 480X640)

[phphil]

Same thing on a Samsung S8

[DavorLovric]

Same thing on Samsung A10.

[broy5209]

Please help on this, i have the same problem on Samsung J7 Prime

[karellodewijk]

Same here, you can reinitialize the scanner when the orientation changes to work around it.

let scanner;
async function start_scan() {
  scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
  Instascan.Camera.getCameras().then(function (cameras) {
    if (cameras.length === 0) return alert('No cameras found.');
    let selected = null;
    for (let camera of cameras) {
      if (camera.name.toLowerCase().includes('back')) selected = camera;
    }
    if (!selected) selected = cameras[cameras.length-1];
    scanner.addListener('scan', locate);
    scanner.start(selected);
  }).catch(function (e) {
    console.error(e);
    alert(e.message);
  });
}
window.addEventListener("orientationchange", async (event) => {
  await scanner.stop();
  start_scan()
});
start_scan();

[RileyIsOnGitHub]

@karellodewijk I tried a addEventListener as you described and it did not help. Any idea on why it works for you but not for me and likely others?

What min.js file are you using?

[RileyIsOnGitHub]

@DavorLovric @broy5209 @robert777robert777 @phphil For everyone's reference here's a css workaround I figured out. I have it set to portrait only, but it can also be set to landscape.

CSS

<style> 
   #warning-message { display: none; } 
   @media only screen and (orientation:portrait){ 
      #warning-message { display:none; } 
   } 
   @media only screen and (orientation:landscape){ 
      #container { display:none; }    
      #warning-message { display:block; } } 
</style>

HTML <div id="warning-message" style="text-align: center;"> <p> TEXT EXPLAINING PAGE ONLY WORKS IN PORTAIT </p> </div>

[AndresFS]

window.addEventListener("orientationchange", (event) => { location.reload(); });