html5-qrcode - npm Package Compare versions

Comparing version 2.0.12 to 2.0.13

package.json

 {
   "name": "html5-qrcode",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "A cross platform HTML5 QR Code & bar code scanner",
@@ -5,0 +5,0 @@ "main": "dist/html5-qrcode.min.js",

README.md

@@ -141,3 +141,5 @@ # Html5-QRCode
 let html5QrcodeScanner = new Html5QrcodeScanner(
-	"reader", { fps: 10, qrbox: 250 }, /* verbose= */ false);
+  "reader",
+  { fps: 10, qrbox: {width: 250, height: 250} },
+  /* verbose= */ false);
 html5QrcodeScanner.render(onScanSuccess, onScanFailure);
@@ -183,3 +185,3 @@ ```
     fps: 10,    // Optional, frame per seconds for qr code scanning
-    qrbox: 250  // Optional, if you want bounded box UI
+    qrbox: { width: 250, height: 250 }  // Optional, if you want bounded box UI
   },
@@ -211,3 +213,3 @@ (decodedText, decodedResult) => {
 };
-const config = { fps: 10, qrbox: 250 };
+const config = { fps: 10, qrbox: { width: 250, height: 250 } };
 
@@ -351,6 +353,12 @@ // If you want to prefer front camera
 
+/** Defines dimension for QR Code Scanner. */
+interface QrDimensions {
+  width: number;
+  height: number;
+}
+
 /** Format of detected code. */
 class QrcodeResultFormat {
-    public readonly format: Html5QrcodeSupportedFormats;
-    public readonly formatName: string;
+  public readonly format: Html5QrcodeSupportedFormats;
+  public readonly formatName: string;
 }
@@ -360,7 +368,7 @@
 interface QrcodeResult {
-    /** Decoded text. */
-    text: string;
+  /** Decoded text. */
+  text: string;
 
-    /** Format that was successfully scanned. */
-    format?: QrcodeResultFormat,
+  /** Format that was successfully scanned. */
+  format?: QrcodeResultFormat,
 }
@@ -370,4 +378,4 @@
 interface Html5QrcodeResult {
-    decodedText: string;
-    result: QrcodeResult;
+  decodedText: string;
+  result: QrcodeResult;
 }
@@ -409,4 +417,4 @@
   /**
-   * Optional, width of scanning region box, this should be smaller than the
-   * width and height of the full region.
+   * Optional, edge size or dimension of QR scanning box, this should be 
+   * smaller than the width and height of the full region.
    * This would make the scanner look like this:
@@ -422,4 +430,7 @@ *          ----------------------
    *          ----------------------
+   * 
+   * Instance of {@interface QrDimensions} can be passed to construct a non
+   * square rendering of scanner box.
    */
-  qrbox?: number | undefined;
+  qrbox?: number | QrDimensions | undefined;
 
@@ -567,7 +578,15 @@ /**
 
-#### `qrbox` — Integer, Example = 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 : 250 }`, the screen will look like:
+#### `qrbox` — `QrDimensions`, 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">
 
+This can be used to set a rectangular scanning area with config like:
+
+```js
+let config = { qrbox : { width: 400, height: 150 } }
+```
+
+> This might be desirable for bar code scanning.
+
 #### `aspectRatio` — Float, Example 1.777778 for 16:9 aspect ratio
@@ -641,3 +660,3 @@ 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:
 };
-const config = { fps: 10, qrbox: 250 };
+const config = { fps: 10, qrbox: { width: 250, height: 250 } };
 
@@ -648,3 +667,3 @@ // If you want to prefer front camera
 
-#### Scaning only QR code and UPC codes with `Html5QrcodeScanner`
+#### Scanning only QR code and UPC codes with `Html5QrcodeScanner`
 ```js
@@ -664,3 +683,7 @@ function onScanSuccess(decodedText, decodedResult) {
   "reader",
-  { fps: 10, qrbox: 250, formatsToSupport: formatsToSupport },
+  {
+    fps: 10,
+    qrbox: { width: 250, height: 250 },
+    formatsToSupport: formatsToSupport
+  },
   /* verbose= */ false);
@@ -667,0 +690,0 @@ html5QrcodeScanner.render(onScanSuccess);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

440607

increased by0.3%

Lines of code

1522

increased by0.13%

Number of lines in readme file

711

increased by3.34%

No dependency changes