Screen Rotation adaptation on mobile with javascript and html

[Uhrien92]

Greetings,
I've made a solution to let the scanner UI adapt for both landscape and portrait:
Since aspect ratio and qrbox changes are not possible with the scanner active, i've opted for a stop and start solution on screen rotation:
`<script type="text/javascript">
window.div_img = document.getElementById("reader_img");
window.div_reader = document.getElementById("reader");
window.header = document.getElementById("header_navbar");
window.body = document.getElementsByTagName('body')[0];
window.background = document.getElementById("background");
window.html5QrCode
let qrboxWidth;
let qrboxHeight;
let config;
let divAspectRatio;
let width = window.outerWidth;
let height = window.outerHeight;
//landscape orientation
if(width > height)
{
// If width is less than 1204, we are not on a PC so hide header bar for more space
if(width < 1024)
{
$("#header_navbar").hide();
body.style.paddingTop = "";
background.style.height = "180vh";
}

  qrboxWidth = 700; 
  qrboxHeight = 150; 
  divAspectRatio = 1.777778; 
  /* div_reader.setAttribute("height", "60vh");
  div_reader.setAttribute("width", "80%");

*/
}
// portrait orientation
else if(height > width)
{
qrboxWidth = 250;
qrboxHeight = 250;
divAspectRatio = 1.333334;

  /* div_reader.setAttribute("height", "20%");
  div_reader.setAttribute("width", "20%"); */
}

    html5QrCode = new Html5Qrcode(/* element id */ "reader");
     config = {
        fps: 20, // frame per seconds for qr code scanning
        qrbox: { width: qrboxWidth, height: qrboxHeight, },
        aspectRatio: divAspectRatio,           
         
      };

      Html5Qrcode.getCameras().then(devices => {

/**

• devices would be an array of objects of type:
• { id: "id", label: "label" }
  */
  if (devices && devices.length) {
  if(typeof div_img !== 'undefined')
  {
  div_img.remove();
  }
  var cameraId = devices[1].id;

html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);
// .. use this to start scanning.

}
}).catch(err => {
// handle err
alert(err);
});

///// At screen rotation
window.addEventListener("orientationchange", (event) => {
width = window.outerWidth;
height = window.outerHeight;
// stop scanner
html5QrCode.stop();

//Retake the size for landscape
if(width > height)
{
  
  if(width < 1024)
  {
    $("#header_navbar").hide();
    body.style.paddingTop = "";
    background.style.height = "180vh";
  }
  //Le misure del riquadro dello scanner
  qrboxWidth = 700;
  qrboxHeight = 150;
  divAspectRatio = 1.777778; //Più si aumenta più diminuisce il riquadro del video
  
}
//Retake the size for portrait
else if(height > width)
{
  $("#header_navbar").show();
  if(body.style.paddingTop == "")
  {
    body.style.paddingTop = "60px";
  }
  background.style.height = "100vh";
  qrboxWidth = 250;
  qrboxHeight = 250;
  divAspectRatio = 1.333334;
  
}
//setup new size configuration
config = {
        fps: 20, // frame per seconds for qr code scanning
        qrbox: { width: qrboxWidth, height: qrboxHeight },  
        aspectRatio: divAspectRatio,           
      };

     //check again if any camera exist
Html5Qrcode.getCameras().then(devices => {

if (devices && devices.length) {
    if(typeof div_img !== 'undefined')
    {
        div_img.remove();
    }

    var cameraId = devices[1].id;

    //start a new scanner
    html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);
      // .. use this to start scanning.
  }
    }).catch(err => {
      // handle err
    alert(err);
  });

//alert("altezza : " + qrboxHeight + " larghezza: " + qrboxWidth);

});

const qrCodeSuccessCallback = (decodedText, decodedResult) => {
//alert(decodedText);
let action = document.getElementById("action").value;

        $.ajax({
        "url": '<?php echo base_url(); ?>Main/convalida_QrCode',
        "type": "POST",
        "data": { "Commessa": decodedText, "action"  : action},
        dataType:"json",             
              success: function (data) {                                          
                    alert(data);                     
              }   
      }); 

};

</script>`

Sorry for bad coded and uncoded writing but this is my first post here on github. Hope this can help someone who need the same feature