html5-qrcode - npm Package Compare versions

Comparing version 2.0.8 to 2.0.9

package.json

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

README.md

@@ -6,9 +6,12 @@ # Html5-QRCode
 Use this lightweight library to easily / quickly integrate QR code, bar code, and other common code scanning capabilities to your web application. 
- - Supports easy scanning using an integrated webcam or camera in smartphones (Android / IOS).
- - Supports scanning codes from files or default cameras on smartphones. 
- - **<u>Recently Added</u>**  Supports bar code scanning in various formats.
- - Supports two kind of APIs
-    - `Html5QrcodeScanner` - End-to-end scanner with UI, integrate with less than ten lines of code.
-    - `Html5Qrcode` - Powerful set of APIs you can use to build your UI without worrying about camera setup, handling permissions, reading codes, etc.
+-  Supports easy scanning using an integrated webcam or camera in smartphones (Android / IOS).
 
+-  Supports scanning codes from files or default cameras on smartphones.
+
+-  **<u>Recently Added</u>**  Supports bar code scanning in various formats.
+
+-  Supports two kind of APIs
+    -  `Html5QrcodeScanner` - End-to-end scanner with UI, integrate with less than ten lines of code.
+    -  `Html5Qrcode` - Powerful set of APIs you can use to build your UI without worrying about camera setup, handling permissions, reading codes, etc.
+
 > Support for scanning local files on the device is a new addition and helpful for the web browser which does not support inline web-camera access in smartphones. **Note:** This doesn't upload files to any server - everything is done locally.
@@ -30,5 +33,5 @@
 
-##### Legends
- - ![](assets/done.png) Means full support - inline webcam and file based 
- - ![](assets/partial.png) Means partial support - only file based, webcam in progress
+**Legends**
+-  ![](assets/done.png) Means full support - inline webcam and file based 
+-  ![](assets/partial.png) Means partial support - only file based, webcam in progress
 
@@ -88,6 +91,6 @@ ### PC / Mac
 Supports:
- - Querying camera on the device (with user permissions)
- - Rendering live camera feed, with easy to use user interface for scanning
- - Supports scanning a different kind of QR codes, bar codes and other formats
- - Supports selecting image files from the device for scanning codes
+-  Querying camera on the device (with user permissions)
+-  Rendering live camera feed, with easy to use user interface for scanning
+-  Supports scanning a different kind of QR codes, bar codes and other formats
+-  Supports selecting image files from the device for scanning codes
 
@@ -125,5 +128,5 @@ ## How to use?
 ```js
-function onScanSuccess(qrMessage) {
+function onScanSuccess(decodedText, decodedResult) {
   // handle the scanned code as you like, for example:
-  console.log(`QR matched = ${qrMessage}`);
+  console.log(`Code matched = ${decodedText}`, decodedResult);
 }
@@ -134,3 +137,3 @@
   // for example:
-  console.warn(`QR error = ${error}`);
+  console.warn(`Code scan error = ${error}`);
 }
@@ -179,12 +182,12 @@
   {
-    fps: 10,    // Optional frame per seconds for qr code scanning
-    qrbox: 250  // Optional if you want bounded box UI
+    fps: 10,    // Optional, frame per seconds for qr code scanning
+    qrbox: 250  // Optional, if you want bounded box UI
   },
-  qrCodeMessage => {
+  (decodedText, decodedResult) => {
     // do something when code is read
   },
-  errorMessage => {
+  (errorMessage) => {
     // parse error, ignore it.
   })
-.catch(err => {
+.catch((err) => {
   // Start failed, handle it.
@@ -205,3 +208,5 @@ });
 const html5QrCode = new Html5Qrcode("reader");
-const qrCodeSuccessCallback = message => { /* handle success */ }
+const qrCodeSuccessCallback = (decodedText, decodedResult) => {
+    /* handle success */
+};
 const config = { fps: 10, qrbox: 250 };
@@ -231,5 +236,5 @@
 ```js
-html5QrCode.stop().then(ignore => {
+html5QrCode.stop().then((ignore) => {
   // QR Code scanning is stopped.
-}).catch(err => {
+}).catch((err) => {
   // Stop failed, handle it.
@@ -280,5 +285,5 @@ });
   html5QrCode.scanFile(imageFile, true)
-  .then(qrCodeMessage => {
-    // success, use qrCodeMessage
-    console.log(qrCodeMessage);
+  .then(decodedText => {
+    // success, use decodedText
+    console.log(decodedText);
   })
@@ -290,2 +295,8 @@ .catch(err => {
 });
+
+// Note: Current public API `scanFile` only returns the decoded text. There is
+// another work in progress API (in beta) which returns a full decoded result of
+// type `QrcodeResult` (check interface in src/core.ts) which contains the
+// decoded text, code format, code bounds, etc.
+// Eventually, this beta API will be migrated to the public API.
 ```
@@ -301,4 +312,4 @@
 Check these articles on how to use this library:
- - [HTML5 QR Code scanning - launched v1.0.1 without jQuery dependency and refactored Promise based APIs](https://blog.minhazav.dev/HTML5-QR-Code-scanning-launched-v1.0.1/).
- - [HTML5 QR Code scanning with javascript - Support for scanning the local file and using default camera added (v1.0.5)](https://blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera/)
+-  [HTML5 QR Code scanning - launched v1.0.1 without jQuery dependency and refactored Promise based APIs](https://blog.minhazav.dev/HTML5-QR-Code-scanning-launched-v1.0.1/).
+-  [HTML5 QR Code scanning with javascript - Support for scanning the local file and using default camera added (v1.0.5)](https://blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera/)
 
@@ -342,2 +353,31 @@ ## Screenshots
 
+/** Format of detected code. */
+class QrcodeResultFormat {
+    public readonly format: Html5QrcodeSupportedFormats;
+    public readonly formatName: string;
+}
+
+/** Detailed scan result. */
+interface QrcodeResult {
+    /** Decoded text. */
+    text: string;
+
+    /** Format that was successfully scanned. */
+    format?: QrcodeResultFormat,
+}
+
+/** QrCode result object. */
+interface Html5QrcodeResult {
+    decodedText: string;
+    result: QrcodeResult;
+}
+
+/** Type for a callback for a successful code scan. */
+type QrcodeSuccessCallback
+  = (decodedText: string, result: Html5QrcodeResult) => void;
+
+/** Type for a callback for failure during code scan. */
+type QrcodeErrorCallback
+  = (errorMessage: string, error: Html5QrcodeError) => void;
+
 /**
@@ -369,4 +409,5 @@ * Interface for configuring {@class Html5Qrcode} class instance.
   /**
-   * Optional, width of QR scanning box, this should be smaller than the width
-   * and height of the box. This would make the scanner look like this:
+   * Optional, width of scanning region box, this should be smaller than the
+   * width and height of the full region.
+   * This would make the scanner look like this:
    *          ----------------------
@@ -382,3 +423,3 @@ *          |********************|
    */
-  qrbox: number | undefined;
+  qrbox?: number | undefined;
 
@@ -390,3 +431,3 @@ /**
    */
-  aspectRatio: number | undefined;
+  aspectRatio?: number | undefined;
 
@@ -398,3 +439,3 @@ /**
    */
-  disableFlip: boolean | undefined;
+  disableFlip?: boolean | undefined;
 
@@ -412,3 +453,3 @@ /**
    */
-  videoConstraints: MediaTrackConstraints | undefined;
+  videoConstraints?: MediaTrackConstraints | undefined;
 }
@@ -536,6 +577,6 @@
 
-#### `disableFlip` - Boolean (Optional), default = false.
+#### `disableFlip` - Boolean (Optional), default = false
 By default, the scanner can scan for horizontally flipped QR Codes. This also enables scanning QR code using the front camera on mobile devices which are sometimes mirrored. This is `false` by default and I recommend changing this only if:
- - You are sure that the camera feed cannot be mirrored (Horizontally flipped)
- - You are facing performance issues with this enabled.
+-  You are sure that the camera feed cannot be mirrored (Horizontally flipped)
+-  You are facing performance issues with this enabled.
 
@@ -584,3 +625,5 @@ Here's an example of a normal and mirrored QR Code
   "reader", { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] });
-const qrCodeSuccessCallback = message => { /* handle success */ }
+const qrCodeSuccessCallback = (decodedText, decodedResult) => {
+    /* handle success */
+};
 const config = { fps: 10, qrbox: 250 };
@@ -594,5 +637,5 @@
 ```js
-function onScanSuccess(qrMessage) {
-  // handle the scanned code as you like, for example:
-  console.log(`QR matched = ${qrMessage}`);
+function onScanSuccess(decodedText, decodedResult) {
+  // Handle the scanned code as you like, for example:
+  console.log(`Code matched = ${decodedText}`, decodedResult);
 }
@@ -614,12 +657,16 @@
 ## How to modify and build
-1. Code changes should only be made to [/src](./src) only.
-2. Run `npm install` to install all dependencies.
-3. Run `npm run-script build` to build javascript output. The output javascript distribution is built to [/dist/html5-qrcode.min.js](./dist/html5-qrcode.min.js). If you are developing on Windows OS, run `npm run-script build-windows`.
+1.  Code changes should only be made to [/src](./src) only.
+
+2.  Run `npm install` to install all dependencies.
+
+3.  Run `npm run-script build` to build javascript output. The output javascript distribution is built to [/dist/html5-qrcode.min.js](./dist/html5-qrcode.min.js). If you are developing on Windows OS, run `npm run-script build-windows`.
+
 4. Testing
-	- Run `npm test`
-	- Run the tests before sending a pull request, all tests should run.
-	- Please add tests for new behaviors sent in PR.
+    -  Run `npm test`
+    -  Run the tests before sending a pull request, all tests should run.
+    -  Please add tests for new behaviors sent in PR.
+
 5. Send a pull request
-	- Include code changes only to `./src`. **Do not change `./dist` manually.**
-	- In the pull request add a comment like
+    -  Include code changes only to `./src`. **Do not change `./dist` manually.**
+    -  In the pull request add a comment like
 	```
@@ -629,5 +676,5 @@ @all-contributors please add @mebjas for this new feature or tests
 	For calling out your contributions - the bot will update the contributions file.
-  	- Code will be built & published by the author in batches.
+    -  Code will be built & published by the author in batches.
 
 ## Credits
 The decoder used for the QRcode reading is from `Zxing-js` https://github.com/zxing-js/library<br>

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

367266

increased by0.75%

Lines of code

1249

increased by0.48%

Number of lines in readme file

659

increased by7.68%

No dependency changes