Orientation Change Scanner Bug

[RileyIsOnGitHub]

Hello, Instascan is awesome and I'm only having one problem. Rotating a phone and changing the orientation from the original loaded orientation to the second orientation, makes the scanner not work. The scanner will not find the QR code in the second orientation. If you go back to the original first orientation it will work. The starting original orientation does not matter whether it's Portrait or Landscape. This is happening for us on all mobile phone devices including the last couple Android OS's and iOS 14.5/15.1. I have tried using screen.orientation.addEventListener to resolve the issue, but it makes no difference.

EXAMPLE
Page is loaded in Portrait mode and successfully scans. Rotate the phone to Landscape mode and camera does not scan anything.
Page is loaded in Landscape mode and successfully scans. Rotate the phone to Portrait mode and camera does not scan anything.

SAMPLE CODE

    var self = this;
    self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), mirror: false, scanPeriod: 5 });
    self.scanner.addListener('scan', function (content, image) {
		if (content > "") 
		{
			var audio = new Audio('https://media.geeksforgeeks.org/wp-content/uploads/20190531135120/beep.mp3');
			audio.play();

                       /*
                          My code to determine what was scanned and find it in the DB
                      */

			var myVar = setTimeout(myTimer, 2500);
		  function myTimer() 
		  {	
			$content = "";
		  }
               } 
	      else 
	      {
              }
    });

    Instascan.Camera.getCameras().then(function (cameras) {
      self.cameras = cameras;
      if (cameras.length > 0) {
        self.activeCameraId = cameras[0].id;
        self.scanner.start(cameras[0]);
      } else {
        console.error('No cameras found.');
      }
    }).catch(function (e) {
      console.error(e);
    });`

I have tried using screen.orientation.addEventListener to resolve the issue, but it makes no difference.

screen.orientation.addEventListener("change", () => {
			  self.scanner.stop();
			  self.activeCameraId = cameras[0].id;
			  self.scanner.start(cameras[0]);
	  });

Please let me know if you need me to provide anything else.

[yuresko]

How did you get the scanner to work in portrait? No matter what, it only scans in landscape. iOS 15 seems to have changed something.

[RileyIsOnGitHub]

@yuresko is the basis of your code the same as mine or different? Could I see what you're doing?

[yuresko]

This is how I'm calling it in the html...and it's using instascan.min.js from the releases

function startCam() {
    var scanner = new Instascan.Scanner({
        video: document.getElementById('preview'),
        scanPeriod: 5,
        mirror: false,
        refractoryPeriod: 10000
    });
    scanner.addListener('scan', function(content) {
        document.getElementById("qrusername").value = content;
        // alert(content);
        //window.open(content);
        //window.location.href=content;
    });
    Instascan.Camera.getCameras().then(function(cameras) {
        if (cameras.length > 0) {
            scanner.start(cameras[1]);
            $('[name="options"]').on('change', function() {
                if ($(this).val() == 1) {
                    if (cameras[1] != "") {
                        scanner.start(cameras[1]);
                    } else {
                        alert('No Front camera found!');
                    }
                } else if ($(this).val() == 2) {
                    if (cameras[0] != "") {
                        scanner.start(cameras[0]);
                    } else {
                        alert('No Back camera found!');
                    }
                }
            });
        } else {
            console.error('No cameras found.');
            alert('No cameras found.');
        }
    }).catch(function(e) {
        console.error(e);
        alert(e);
    });
}

[RileyIsOnGitHub]

@yuresko you've got a few differences in your code compared to my code.

I am not using the instascan.min.js from the releases. I switched to one I found in the forums that I have attached.

instascan.min.zip
.

[yuresko]

Ahh gotchya...I tried yours and it did the same thing. No portrait, only landscape. Thanks for your help, will keep digging.

[RileyIsOnGitHub]

@yuresko here's a css workaround I figured out.

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>

[huangsong]

@RileyIsOnGitHub https://github.com/huangsong/instascan/tree/master/docs there is my test code. it work well on my iphone7p 15.2 and pixel3 android 12

[ibnusulaiman83]

https://design.lovol.cn/test/

not working after i click this url sir

[huangsong]

https://design.lovol.cn/test/

not working after i click this url sir

https://github.com/huangsong/instascan/tree/master/docs