Version 2.1.4 (#365)

* Version 2.1.4

2 bug fixes in the UI

* Add support for pausing video with pause(..) API

* Update changelog.md

README.md

@@ -526,15 +526,20 @@ class Html5Qrcode {
   /**
    * Pauses the ongoing scan.
    * 
-   * Note: this will not stop the viewfinder, but stop decoding camera stream.
+   * @param shouldPauseVideo (Optional, default = false) If {@code true} the
+   * video will be paused.
    * 
    * @throws error if method is called when scanner is not in scanning state.
    */
-  pause();
+  pause(shouldPauseVideo?: boolean);
 
   /**
    * Resumes the paused scan.
    * 
+   * If the video was previously paused by setting {@code shouldPauseVideo}
+   * to {@code true} in {@link Html5Qrcode#pause(shouldPauseVideo)}, calling
+   * this method will resume the video.
+   *
    * Note: with this caller will start getting results in success and error
    * callbacks.
    * 
@@ -608,15 +613,21 @@ class Html5QrcodeScanner {
    * 
    * Notes:
    * -   Should only be called if camera scan is ongoing.
-   * -   This will not stop the viewfinder, but stop decoding camera stream.
+   *
+   * @param shouldPauseVideo (Optional, default = false) If {@code true}
+   * the video will be paused.
    * 
    * @throws error if method is called when scanner is not in scanning state.
    */
-  pause();
+  pause(shouldPauseVideo?: boolean);
 
   /**
    * Resumes the paused scan.
    * 
+   * If the video was previously paused by setting {@code shouldPauseVideo}
+   * to {@code true} in {@link Html5QrcodeScanner#pause(shouldPauseVideo)},
+   * calling this method will resume the video.
+   *
    * Notes:
    * -   Should only be called if camera scan is ongoing.
    * -   With this caller will start getting results in success and error

changelog.md

@@ -1,3 +1,15 @@
+### Version 2.1.4
+
+#### Huge thanks to [Ben Richardson](https://github.com/ben-gy) for one time sponsorship!!
+This is helpful in keeping the project in shape! Cheers to you!!
+
+[See sponsorship dashboard](https://github.com/sponsors/mebjas)
+
+### Changelog
+-   Fix bug in `stop()` method in `Html5Qrcode` class.
+-   Fix a minor UI error, where error message shown due to a certain camera not working, is not hidden when a functional camera is selected.
+-   [Feature Request#356](https://github.com/mebjas/html5-qrcode/issues/356) - Freeze the image (not clear) on success.
+
 ### Version 2.1.3
 -   Reduce the assets size using SVG instead of GIF files.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html5-qrcode",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A cross platform HTML5 QR Code & bar code scanner",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -26,6 +26,7 @@
     "build:cjs": "tsc --build tsconfig.lib-cjs.json",
     "build:typing": "tsc --emitDeclarationOnly --outDir ./dist",
     "build:umd": "./scripts/build-webpack.sh",
+    "build:umd_windows": ".\\scripts\\build-webpack.bat",
     "build:copy": "cp README.md dist && cp package.json dist && cp LICENSE dist",
     "release": "npm run build && cd dist && npm publish"
   },

scripts/build-webpack.bat

@@ -0,0 +1,16 @@
+@ECHO OFF
+:: This is a build script for webpack/UMD based build.
+
+ECHO Initiating webpack build sequence.
+
+webpack
+
+:: Script copied to dist/html5-qrcode.min.js
+:: Fork content of 'webpack_append_data.js' to final js file to
+:: make classes global to be backwards compatible.
+type scripts\webpack_append_data.js >> dist\html5-qrcode.min.js
+
+copy dist\html5-qrcode.min.js minified\html5-qrcode.min.js
+
+ECHO Copied the webpack script to minified/..
+ECHO Webpack building done.

src/html5-qrcode-scanner.ts

@@ -19,6 +19,7 @@ import {
     CameraDevice,
     BaseLoggger,
     Logger,
+    isNullOrUndefined,
 } from "./core";
 
 import {
@@ -202,21 +203,31 @@ export class Html5QrcodeScanner {
      * 
      * Notes:
      * -   Should only be called if camera scan is ongoing.
-     * -   This will not stop the viewfinder, but stop decoding camera stream.
+     * 
+     * @param shouldPauseVideo (Optional, default = false) If {@code true}
+     * the video will be paused.
      * 
      * @throws error if method is called when scanner is not in scanning state.
      */
-    public pause() {
+    public pause(shouldPauseVideo?: boolean) {
         if (!this.html5Qrcode) {
             throw "Code scanner not initialized.";
         }
 
-        this.html5Qrcode.pause();
+        if (isNullOrUndefined(shouldPauseVideo) || shouldPauseVideo !== true) {
+            shouldPauseVideo = false;
+        }
+
+        this.html5Qrcode.pause(shouldPauseVideo);
     }
 
     /**
      * Resumes the paused scan.
      * 
+     * If the video was previously paused by setting {@code shouldPauseVideo}
+     * to {@code true} in {@link Html5QrcodeScanner#pause(shouldPauseVideo)},
+     * calling this method will resume the video.
+     * 
      * Notes:
      * -   Should only be called if camera scan is ongoing.
      * -   With this caller will start getting results in success and error
@@ -653,12 +664,16 @@ export class Html5QrcodeScanner {
         };
 
         cameraActionStartButton.addEventListener("click", (_) => {
+            // Update the UI.
             cameraActionStartButton.innerText
                 = Html5QrcodeScannerStrings.scanButtonScanningStarting();
             cameraSelectionSelect.disabled = true;
             cameraActionStartButton.disabled = true;
             cameraActionStartButton.style.opacity = "0.5";
             $this.showHideScanTypeSwapLink(false);
+            $this.resetHeaderMessage();
+
+            // Attempt starting the camera.
             const cameraId = cameraSelectionSelect.value;
             $this.persistedDataManager.setLastUsedCameraId(cameraId);
 

src/html5-qrcode.ts

@@ -55,7 +55,7 @@ class Constants extends Html5QrcodeConstants {
     static SHADED_RIGHT = 2;
     static SHADED_TOP = 3;
     static SHADED_BOTTOM = 4;
-    static SHADED_REGION_CLASSNAME = "qr-shaded-region";
+    static SHADED_REGION_ELEMENT_ID = "qr-shaded-region";
     static VERBOSE = false;
     static BORDER_SHADER_DEFAULT_COLOR = "#ffffff";
     static BORDER_SHADER_MATCH_COLOR = "rgb(90, 193, 56)";
@@ -425,21 +425,34 @@ export class Html5Qrcode {
     /**
      * Pauses the ongoing scan.
      * 
-     * Note: this will not stop the viewfinder, but stop decoding camera stream.
+     * @param shouldPauseVideo (Optional, default = false) If {@code true} the
+     * video will be paused.
      * 
      * @throws error if method is called when scanner is not in scanning state.
      */
-    public pause() {
+    public pause(shouldPauseVideo?: boolean) {
         if (!this.stateManagerProxy.isStrictlyScanning()) {
             throw "Cannot pause, scanner is not scanning.";
         }
         this.stateManagerProxy.directTransition(Html5QrcodeScannerState.PAUSED);
         this.showPausedState();
+
+        if (isNullOrUndefined(shouldPauseVideo) || shouldPauseVideo !== true) {
+            shouldPauseVideo = false;
+        }
+
+        if (shouldPauseVideo && this.videoElement) {
+            this.videoElement.pause();
+        }
     }
 
     /**
      * Resumes the paused scan.
      * 
+     * If the video was previously paused by setting {@code shouldPauseVideo}
+     * to {@code true} in {@link Html5Qrcode#pause(shouldPauseVideo)}, calling
+     * this method will resume the video.
+     * 
      * Note: with this caller will start getting results in success and error
      * callbacks.
      * 
@@ -449,9 +462,33 @@ export class Html5Qrcode {
         if (!this.stateManagerProxy.isPaused()) {
             throw "Cannot result, scanner is not paused.";
         }
-        this.stateManagerProxy.directTransition(
-            Html5QrcodeScannerState.SCANNING);
-        this.hidePausedState();
+
+        if (!this.videoElement) {
+            throw "VideoElement doesn't exist while trying resume()";
+        }
+
+        const $this = this;
+        const transitionToScanning = () => {
+            $this.stateManagerProxy.directTransition(
+                Html5QrcodeScannerState.SCANNING);
+            $this.hidePausedState();
+        }
+
+        let isVideoPaused = this.videoElement.paused;
+        if (!isVideoPaused) {
+            transitionToScanning();
+            return;
+        }
+
+        // Transition state, when the video playback has resumed
+        // in case it was paused.
+        const onVideoResume = () => {
+            // Transition after 300ms to avoid the previous canvas frame being rescanned.
+            setTimeout(transitionToScanning, 200);
+            $this.videoElement?.removeEventListener("playing", onVideoResume);
+        }
+        this.videoElement.addEventListener("playing", onVideoResume);
+        this.videoElement.play();
     }
 
     /**
@@ -487,13 +524,11 @@ export class Html5Qrcode {
             if (!this.element) {
                 return;
             }
-            while (this.element.getElementsByClassName(
-                Constants.SHADED_REGION_CLASSNAME).length) {
-                const shadedChild = this.element.getElementsByClassName(
-                    Constants.SHADED_REGION_CLASSNAME)[0];
-                this.element.removeChild(shadedChild);
+            let childElement = document.getElementById(Constants.SHADED_REGION_ELEMENT_ID);
+            if (childElement) {
+                this.element.removeChild(childElement);
             }
-        };
+         };
 
         return new Promise((resolve, _) => {
             const onAllTracksClosed = () => {
@@ -1187,19 +1222,20 @@ export class Html5Qrcode {
                 // Attach listeners to video.
                 videoElement.onabort = reject;
                 videoElement.onerror = reject;
-                videoElement.onplaying = () => {
+
+                const onVideoStart = () => {
                     const videoWidth = videoElement.clientWidth;
                     const videoHeight = videoElement.clientHeight;
                     $this.setupUi(videoWidth, videoHeight, internalConfig);
-
                     // start scanning after video feed has started
                     $this.foreverScan(
                         internalConfig,
                         qrCodeSuccessCallback,
                         qrCodeErrorCallback);
+                    videoElement.removeEventListener("playing", onVideoStart);
                     resolve(/* void */ null);
                 }
-
+                videoElement.addEventListener("playing", onVideoStart);
                 videoElement.srcObject = mediaStream;
                 videoElement.play();
 
@@ -1467,7 +1503,7 @@ export class Html5Qrcode {
         shadingElement.style.bottom = "0px";
         shadingElement.style.left = "0px";
         shadingElement.style.right = "0px";
-        shadingElement.id = `${Constants.SHADED_REGION_CLASSNAME}`;
+        shadingElement.id = `${Constants.SHADED_REGION_ELEMENT_ID}`;
 
         // Check if div is too small for shadows. As there are two 5px width
         // borders the needs to have a size above 10px.