Description
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.