Width and height in config are not considered. Rectangular box cannot be drawn.

[YTKowshik]

Describe the bug
We have an option to configure width and height in qrbox.
qrbox: { width: 250, height: 250 }
But the UI is always a square box irrespective of the height provided.

To Reproduce
Steps to reproduce the behavior:

1. Change the config to the above qrbox
2. Run the app

Expected behavior
Rectangular box supposed to be visible.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] - All
• OS: [e.g. iOS8.1] - All
• Browser [e.g. stock browser, safari] - All
• Version [e.g. 22]

[YTKowshik]

@mebjas , is it possible to configure the width and height of box other than square?

[YTKowshik]

As there was no update, I decided to give a try and changed the heights in html5-qrcode.js.

I did the change as below.

_possiblyInsertShadingElement(element, width, height, qrboxSize) {
if ((width - qrboxSize) < 1 || (height - qrboxSize) < 1) {
return;
}
const shadingElement = document.createElement('div');
shadingElement.style.position = "absolute";
shadingElement.style.borderLeft = ${(qrboxSize * 0.05)}px solid #0000007a;
shadingElement.style.borderRight = ${(qrboxSize * 0.05)}px solid #0000007a;
shadingElement.style.borderTop = ${(qrboxSize * 0.7)}px solid #0000007a;
shadingElement.style.borderBottom = ${(qrboxSize * 0.7)}px solid #0000007a;
shadingElement.style.boxSizing = "border-box";
shadingElement.style.top = "0px";
shadingElement.style.bottom = "0px";
shadingElement.style.left = "0px";
shadingElement.style.right = "0px";
shadingElement.id = ${Html5Qrcode.SHADED_REGION_CLASSNAME};

  // Check if div is too small for shadows. As there are two 5px width borders the needs to have a size above 10px.
  if ((width - qrboxSize) < 11 || (height - qrboxSize) < 11) {
    this.hasBorderShaders = false;
  } else {
      const smallSize = 5;
      const largeSize = 40;
      this._insertShaderBorders(shadingElement, largeSize, smallSize, -smallSize, 0, true);
      this._insertShaderBorders(shadingElement, largeSize, smallSize, -smallSize, 0, false);
      this._insertShaderBorders(shadingElement, largeSize, smallSize, (qrboxSize * 0.6), 0, true);
      this._insertShaderBorders(shadingElement, largeSize, smallSize, (qrboxSize * 0.6), 0, false);
      this._insertShaderBorders(shadingElement, smallSize, largeSize + smallSize, -smallSize, -smallSize, true);
      this._insertShaderBorders(shadingElement, smallSize, largeSize + smallSize, (qrboxSize * 0.6) - largeSize, -smallSize, true);
      this._insertShaderBorders(shadingElement, smallSize, largeSize + smallSize, -smallSize, -smallSize, false);
      this._insertShaderBorders(shadingElement, smallSize, largeSize + smallSize, (qrboxSize * 0.6) - largeSize, -smallSize, false);
      this.hasBorderShaders = true;
  }
  element.append(shadingElement);

}