Version 2.1.5 (#371)

* Version 2.1.5

### Changelog

 - Changed behavior from throwing error in case `qrbox.width` or `qrbox` is larger
    than the width of the root element. In such cases the dimension will automatically
    be truncated to the size of root element and will throw a warning based on verbosity
    settings. This should address [issue#357](#357)

* Fix error when qrbox size is not set.

* fix codacy error

* Calling Html5QrcodeScanner#clear() will clear the entire UI

Calling `Html5QrcodeScanner#clear()` will also clear the UI rendered due to image based scan. This should address [issue#193](#193)

README.md

@@ -444,6 +444,9 @@ interface Html5QrcodeCameraScanConfig {
    * 
    * Instance of {@interface QrDimensions} can be passed to construct a non
    * square rendering of scanner box.
+   * 
+   * If this value is not set, no shaded QR box will be rendered and the scanner
+   * will scan the entire area of video stream.
    */
   qrbox?: number | QrDimensions | undefined;
 
@@ -644,7 +647,7 @@ class Html5QrcodeScanner {
    */
   getState(): Html5QrcodeScannerState;
 
-  /** Removes the QR Code scanner. */
+  /** Removes the QR Code scanner UI. */
   clear(): Promise<void>  {}
 }
 ```
@@ -655,7 +658,7 @@ Configuration object that can be used to configure both the scanning behavior an
 #### `fps` — Integer, Example = 10
 A.K.A frame per second, the default value for this is 2, but it can be increased to get faster scanning. Increasing too high value could affect performance. Value `>1000` will simply fail.
 
-#### `qrbox` — `QrDimensions`, Example = `{ width: 250, height: 250 }`
+#### `qrbox` — `QrDimensions` (Optional), Example = `{ width: 250, height: 250 }`
 Use this property to limit the region of the viewfinder you want to use for scanning. The rest of the viewfinder would be shaded. For example, by passing config `{ qrbox : { width: 250, height: 250 } }`, the screen will look like:
 
 <img src="./assets/screen.gif">
@@ -668,6 +671,8 @@ let config = { qrbox : { width: 400, height: 150 } }
 
 > This might be desirable for bar code scanning.
 
+If this value is not set, no shaded QR box will be rendered and the scanner will scan the entire area of video stream.
+
 #### `aspectRatio` — Float, Example 1.777778 for 16:9 aspect ratio
 Use this property to render the video feed in a certain aspect ratio. Passing a nonstandard aspect ratio like `100000:1` could lead to the video feed not even showing up. Ideal values can be:
 | Value | Aspect Ratio | Use Case |

changelog.md

@@ -1,3 +1,9 @@
+### Version 2.1.5
+
+-   Changed behavior from throwing error in case `qrbox.width` or `qrbox` is larger than the width of the root element. In such cases the dimension will automatically be truncated to the size of root element and will throw a warning based on verbosity settings. This should address [issue#357](https://github.com/mebjas/html5-qrcode/issues/357)
+-   If `qrbox` is not set in config for either `Html5QrcodeScanner` or `Html5Qrcode` the scanning box will default to the size of video stream. From UI perspective there will be no shaded QR scanning box visible to user. This should resolve [Issue#343](https://github.com/mebjas/html5-qrcode/issues/343).
+-   Calling `Html5QrcodeScanner#clear()` will also clear the UI rendered due to image based scan. This should address [issue#193](https://github.com/mebjas/html5-qrcode/issues/193)
+
 ### Version 2.1.4
 
 #### Huge thanks to [Ben Richardson](https://github.com/ben-gy) for one time sponsorship!!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html5-qrcode",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "A cross platform HTML5 QR Code & bar code scanner",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",

src/html5-qrcode-scanner.ts

@@ -294,6 +294,10 @@ export class Html5QrcodeScanner {
                         }
                         reject(error);
                     });
+                } else {
+                    // Assuming file based scan was ongoing.
+                    this.html5Qrcode.clear();
+                    emptyHtmlContainer();
                 }
             });
         }

src/html5-qrcode.ts

@@ -126,6 +126,9 @@ export interface Html5QrcodeCameraScanConfig {
      * 
      * Instance of {@interface QrDimensions} can be passed to construct a non
      * square rendering of scanner box.
+     * 
+     * If this value is not set, no shaded QR box will be rendered and the
+     * scanner will scan the entire area of video stream.
      */
     qrbox?: number | QrDimensions | undefined;
 
@@ -968,7 +971,7 @@ export class Html5Qrcode {
      */
     private validateQrboxSize(
         internalConfig: InternalHtml5QrcodeConfig,
-        rootElementWidth: Number) {
+        rootElementWidth: number) {
         const qrboxSize = internalConfig.qrbox!;
         this.validateQrboxConfig(qrboxSize);
         let qrDimensions = this.toQrdimensions(qrboxSize);
@@ -980,16 +983,28 @@ export class Html5Qrcode {
             }
         };
 
-        const validateAgainstRootElementSize = (size: number) => {
-            if (size > rootElementWidth) {
-                throw "'config.qrbox' dimensions values should not be greater "
-                    + "than the width of the HTML element.";
+        /**
+         * The 'config.qrbox.width' shall be overriden if it's larger than the
+         * width of the root element.
+         * 
+         * Based on the verbosity settings, this will be logged to the logger.
+         * 
+         * @param configWidth the width of qrbox set by users in the config.
+         */
+        const correctWidthBasedOnRootElementSize = (configWidth: number) => {
+            if (configWidth > rootElementWidth) {
+                this.logger.warn("`qrbox.width` or `qrbox` is larger than the"
+                    + " width of the root element. The width will be truncated"
+                    + " to the width of root element.");
+                configWidth = rootElementWidth;
             }
+            return configWidth;
         };
 
         validateMinSize(qrDimensions.width);
         validateMinSize(qrDimensions.height);
-        validateAgainstRootElementSize(qrDimensions.width);
+        qrDimensions.width = correctWidthBasedOnRootElementSize(
+            qrDimensions.width);
         // Note: In this case if the height of the qrboxSize turns out to be
         // greater than the height of the root element (which should later be
         // based on the aspect ratio of the camera stream), it would be silently
@@ -1010,7 +1025,7 @@ export class Html5Qrcode {
         // Alternatively, the config is expected to be of type QrDimensions.
         if (qrboxSize.width === undefined || qrboxSize.height === undefined) {
             throw "Invalid instance of QrDimensions passed for "
-                + "'config.qrbox'."
+                + "'config.qrbox'. Both 'width' and 'height' should be set.";
         }
     }
 
@@ -1036,7 +1051,12 @@ export class Html5Qrcode {
         width: number,
         height: number,
         internalConfig: InternalHtml5QrcodeConfig): void {
-        const qrboxSize = internalConfig.qrbox!;
+
+        // If `qrbox` size is not set, it will default to the dimensions of the
+        // viewfinder.
+        const qrboxSize = isNullOrUndefined(internalConfig.qrbox) ? 
+            {width: width, height: height}: internalConfig.qrbox!;
+
         this.validateQrboxConfig(qrboxSize);
         let qrDimensions = this.toQrdimensions(qrboxSize);
         if (qrDimensions.height > height) {