Version 2.1.1

Version 2.1.1

• Fixed dashboard section exceeding the parent HTML element width.

• Added support for following beta APIs which allows modifying running video
  stream state, which camera stream is running.

  /**
   * Returns the capabilities of the running video track.
   * 
   * Note: Should only be called if {@code Html5QrcodeScanner#getState()}
   *   returns {@code Html5QrcodeScannerState#SCANNING} or 
   *   {@code Html5QrcodeScannerState#PAUSED}.
   *
   * @beta This is an experimental API
   * @returns the capabilities of a running video track.
   * @throws error if the scanning is not in running state.
   */
  public getRunningTrackCapabilities(): MediaTrackCapabilities;
  
  /**
   * Apply a video constraints on running video track from camera.
   *
   * Note: Should only be called if {@code Html5QrcodeScanner#getState()}
   *   returns {@code Html5QrcodeScannerState#SCANNING} or 
   *   {@code Html5QrcodeScannerState#PAUSED}.
   *
   * @beta This is an experimental API
   * @param {MediaTrackConstraints} specifies a variety of video or camera
   *  controls as defined in
   *  https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints
   * @returns a Promise which succeeds if the passed constraints are applied,
   *  fails otherwise.
   * @throws error if the scanning is not in running state.
   */
  public applyVideoConstraints(videoConstaints: MediaTrackConstraints)   

  Important note: Both these APIs are beta and not publicly documented.

• Support for pausing and resuming code scanning in camera scan mode. New APIs
  are added to both Html5QrcodeScanner and Html5Qrcode. They should only be called when the scanner state is Html5QrcodeScannerState#SCANNING (== 2) or
  Html5QrcodeScannerState#PAUSED (== 3).

  APIs added:

  /**
   * Pauses the ongoing scan.
   * 
   * Note: this will not stop the viewfinder, but stop decoding camera stream.
   * 
   * @throws error if method is called when scanner is not in scanning state.
   */
  public pause();
  
  /**
   * Resumes the paused scan.
   * 
   * Note: with this caller will start getting results in success and error
   * callbacks.
   * 
   * @throws error if method is called when scanner is not in paused state.
   */
  public resume();
  
      /**
   * Gets state of the camera scan.
   *
   * @returns state of type {@enum ScannerState}.
   */
  public getState(): Html5QrcodeScannerState;

  Example usage:

  let html5QrcodeScanner = new Html5QrcodeScanner(
      "reader", 
      { 
          fps: 10,
          qrbox: {width: 250, height: 250},
          rememberLastUsedCamera: true,
          aspectRatio: 1.7777778
      });
  
  function onScanSuccess(decodedText, decodedResult) {
      if (html5QrcodeScanner.getState() 
          !== Html5QrcodeScannerState.NOT_STARTED) {
          // Add this check to ensure success callback is not being called
          // from file based scanner.
  
          // Pause on scan result
          html5QrcodeScanner.pause();
      }
  
  
      // Handle your business logic
      // ...
  
      // .. ok to resume now or elsewhere.
      // just call html5QrcodeScanner.resume();
      // Make sure to check if the state is !== NOT_STARTED
  }
  html5QrcodeScanner.render(onScanSuccess);

  Note: when camera scan is paused it adds a UI element indicating that state.

Version 2.1.0

Version 2.1.0

• [Fixed] issues related to using with lodash - #284
• [Fixed] Unable to use with typescript definition - #283
• [Fixed] Not working with react - #322
• [Fixed] TypeError: Html5QrcodeScanner is not a constructor - #270
• [Fixed] TypeError: window._ is undefined - #248

Version 2.0.13

Version 2.0.13

Added ability to set custom width and height to the scanner with config.qrbox argument.

Now we can pass config.qrbox argument as instance of interface QrDimensions.

function onScanSuccess(decodedText, decodedResult) { /* handle success. */ }
function onScanFailure(error) { /* handle failure. */ }

let config = { fps: 10, qrbox: { width: 250, height: 250 } };

let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", config , /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);

For a rectangular QR Scanning box we can set it to something like:

// .. rest of the code
let config = { fps: 10, qrbox: { width: 400, height: 150 } };

let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", config , /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);

Version 2.0.12

Version 2.0.12

• Redundant information in the top status bar removed.
• Added support for remembering permission and last camera used. This feature is on by default. Can be turned on or off using rememberLastUsedCamera flag in Html5QrcodeScannerConfig. How to explicitly enable it:

    function onScanSuccess(decodedText, decodedResult) {
        // handle success.
    }
    let html5QrcodeScanner = new Html5QrcodeScanner(
      "reader", 
      { 
          fps: 10,
          qrbox: 250,
          rememberLastUsedCamera: true
          // ^ set this to false to disable this.
      });
    html5QrcodeScanner.render(onScanSuccess);

Version 2.0.11

Version 2.0.11

• Add support for native BarcodeDetector based scanning.
  • On Chrome ZXing based decoder takes 20-25 ms on my Mac book pro 16.
  • On Chrome BarcodeDetector based decoder takes 8.6-11 ms on my Mac book pro 16.

  // How to enable
  // Note: will only work if browser / OS supports this HTML api.
  // Read more: https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector#browser_compatibility
  function onScanSuccess(decodedText, decodedResult) {
      // handle success.
  }
  let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", 
    { 
        fps: 10,
        qrbox: 250,
        experimentalFeatures: {
            useBarCodeDetectorIfSupported: true
        }
    });
  html5QrcodeScanner.render(onScanSuccess);

Version 2.0.9

Version 2.0.9

• Added support for returning the type of code scanned (
  feature request)

Version 2.0.10

Version 2.0.10

• Migrate from assets hosted on Github to embedded base64 assets.

Version 2.0.8

Version 2.0.8

• Added support for configuring supported formats in Html5Qrcode & Html5QrcodeScanner.

Example usage:

Only scanning with QR code - using Html5Qrcode

const html5QrCode = new Html5Qrcode(
    "reader", { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] });
const qrCodeSuccessCallback = message => { /* handle success */ }
const config = { fps: 10, qrbox: 250 };

// If you want to prefer front camera
html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);

Scanning with QR code and bunch of UPC codes - using Html5QrcodeScanner

function onScanSuccess(qrMessage) {
    // handle the scanned code as you like, for example:
    console.log(`QR matched = ${qrMessage}`);
}

const formatsToSupport = [
    Html5QrcodeSupportedFormats.QR_CODE,
    Html5QrcodeSupportedFormats.UPC_A,
    Html5QrcodeSupportedFormats.UPC_E,
    Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION,
];
const html5QrcodeScanner = new Html5QrcodeScanner(
    "reader",
    { fps: 10, qrbox: 250, formatsToSupport: formatsToSupport },
    /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess);

By default scanning with all formats supported today

function onScanSuccess(qrMessage) {
    // handle the scanned code as you like, for example:
    console.log(`QR matched = ${qrMessage}`);
}

const html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", { fps: 10, qrbox: 250 }, /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess);

• Feature request: #177
• Pull request: #222

Version2.0.6

Version 2.0.6

• Issue#211 fixed - swapped text for file based scanning and camera scanning during typescript migration.

Version2.0.5

Version 2.0.5

• Issue#202 fixed - error logs dumped to console even if verbose flag is not set in Html5Qrcode.