Fix error when qrbox size is not set.

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;
 
@@ -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

@@ -4,6 +4,10 @@
     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)
 
 ### Version 2.1.4
 

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;
 
@@ -1022,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."
         }
     }
 
@@ -1048,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) {