html5-qrcode - npm Package Versions

Version 2.2.7

Add support for custom CSS

Developer / User Story: As a developer I can write custom CSS for Html5QrcodeScanner.

Feature request: Issue#389

List of CSS class and IDs added.

1. All key elements will have a common CSS class html5-qrcode-element. This way developers can customise element by element. For example:

button.html5-qrcode-element {
    color: 'red';
    border: '1px solid red';
}

Key elements are:

• Request camera permission button.
• "Scan and image file" vs "Scan using camera directly" link.
• "File selection" input ('file')
• Start or Stop camera button.
• Camera selection Select element
• Torch button

1. key elements will have specific IDs defined in src/ui/scanner/base.ts. This can be used to customise per elements.

TODOs

• [ ] Document in a blog post
• [ ] Add pointer in qrcode.minhazav.dev
• [ ] Add pointer in Readme

Change file selection UI from input to button

Modified the UI a little to hide the file selection as input and replace with custom button and javascript based solution.

One motivation here is this will allow more uniform style for the widget.

Graduate useBarCodeDetectorIfSupported to Html5QrcodeConfigs.

useBarCodeDetectorIfSupported was tested as an experimental configuration for a long time and has proven to be very efficient and well supported. It has been tested in ScanApp for quiet some time.

Considering this experimental API is not well documented, it makes it hard for folks to discover it. By graduating this configuration to Html5QrcodeConfigs I hope to make it more discoverable.

In this version the ExperimentalFeaturesConfig#useBarCodeDetectorIfSupported has been marked deprecated but not removed due to backwards compatibility reasons. Users can set either of them but Html5QrcodeConfigs one will take precedence if set.

Once further support is added to browsers, this can be set as true by default.

Version 2.2.5 & Version 2.2.6

Small minification fix in Version 2.2.6.

Added support for turning torch On and Off in Html5QrcodeScanner.

On supported devices + browsers.

This new feature will implement the feature request - Issue#129 and add support for torch (also called flash) on supported devices and browsers.

So far I have confirmed functionality on Samsung Flip 4 Chrome and Internet (Samsung's default browser).

This is only supported on Html5QrcodeScanner and can be enabled using the config like this.

let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", 
    { 
        fps: 10,
        qrbox: qrboxFunction,
        // Important notice: this is experimental feature, use it at your
        // own risk. See documentation in
        // mebjas@/html5-qrcode/src/experimental-features.ts
        experimentalFeatures: {
            useBarCodeDetectorIfSupported: true
        },
        rememberLastUsedCamera: true,
        aspectRatio: 1.7777778,
        showTorchButtonIfSupported: true
    });

The showTorchButtonIfSupported: true part is the crucial one. It's off by default for now as I don't like the UI very much.

Added support for getRunningTrackSettings().

Added a new API to get settings (type: MediaTrackSettings) for running video streams while QR code is being scanned.

/**
 * Returns the object containing the current values of each constrainable
 * property of the running video track.
 * 
 * Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getSettings
 * 
 * Important:
 *  1. Must be called only if the camera based scanning is in progress.
 *
 * @returns the supported settings of the running video track.
 * @throws error if the scanning is not in running state.
 */
public getRunningTrackSettings(): MediaTrackSettings {}

This API can be used to check the currently applied settings on the running video stream like weather torch is on or not.

getRunningTrackCapabilities(..) and applyVideoConstraints(..) out of beta.

Both Html5Qrcode and Html5QrcodeScanner classes had support for following APIs.

/**
 * Returns the capabilities of the running video track.
 * 
 * Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getConstraints
 * 
 * Important:
 *  1. Must be called only if the camera based scanning is in progress.
 *
 * @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.
 *
 * Important:
 *  1. Must be called only if the camera based scanning is in progress.
 *  2. Changing aspectRatio while scanner is running is not yet supported.
 *
 * @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)
    : Promise<any> {}

These have now been taken out of beta and publicly documented. More blog articles to be published for these.

Sponsorship

Thanks <a href="https://github.com/bujjivadu"><img src="https://github.com/bujjivadu.png" width="40px" alt="" /></a> for sponsorship!

Version 2.2.5 & Version 2.2.6

Small minification fix in Version 2.2.6.

Added support for turning torch On and Off in Html5QrcodeScanner.

On supported devices + browsers.

This new feature will implement the feature request - Issue#129 and add support for torch (also called flash) on supported devices and browsers.

So far I have confirmed functionality on Samsung Flip 4 Chrome and Internet (Samsung's default browser).

This is only supported on Html5QrcodeScanner and can be enabled using the config like this.

let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", 
    { 
        fps: 10,
        qrbox: qrboxFunction,
        // Important notice: this is experimental feature, use it at your
        // own risk. See documentation in
        // mebjas@/html5-qrcode/src/experimental-features.ts
        experimentalFeatures: {
            useBarCodeDetectorIfSupported: true
        },
        rememberLastUsedCamera: true,
        aspectRatio: 1.7777778,
        showTorchButtonIfSupported: true
    });

The showTorchButtonIfSupported: true part is the crucial one. It's off by default for now as I don't like the UI very much.

Added support for getRunningTrackSettings().

Added a new API to get settings (type: MediaTrackSettings) for running video streams while QR code is being scanned.

/**
 * Returns the object containing the current values of each constrainable
 * property of the running video track.
 * 
 * Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getSettings
 * 
 * Important:
 *  1. Must be called only if the camera based scanning is in progress.
 *
 * @returns the supported settings of the running video track.
 * @throws error if the scanning is not in running state.
 */
public getRunningTrackSettings(): MediaTrackSettings {}

This API can be used to check the currently applied settings on the running video stream like weather torch is on or not.

getRunningTrackCapabilities(..) and applyVideoConstraints(..) out of beta.

Both Html5Qrcode and Html5QrcodeScanner classes had support for following APIs.

/**
 * Returns the capabilities of the running video track.
 * 
 * Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getConstraints
 * 
 * Important:
 *  1. Must be called only if the camera based scanning is in progress.
 *
 * @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.
 *
 * Important:
 *  1. Must be called only if the camera based scanning is in progress.
 *  2. Changing aspectRatio while scanner is running is not yet supported.
 *
 * @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)
    : Promise<any> {}

These have now been taken out of beta and publicly documented. More blog articles to be published for these.

Sponsorship

Thanks <a href="https://github.com/bujjivadu"><img src="https://github.com/bujjivadu.png" width="40px" alt="" /></a> for sponsorship!

Version 2.2.4

• Improved support for Huawei browser with PR#563, Contribution by jackhe16.
• Fixed QR Border Placement with PR#555, Contribution by allanbrault.
• Fixed config issue (Issue#494) with PR#521, Contribution by rlueder.

Version 2.2.1

• Added support for supportedScanType in Html5QrcodeScanner. This feature was implemented by our latest contributor - mohsinaav@

  Now users can decide to only use camera based scan or file based scan or use them in different order. How to use:

   function onScanSuccess(decodedText, decodedResult) {
       // handle the scanned code as you like, for example:
       console.log(`Code matched = ${decodedText}`, decodedResult);
   }
  
   let config = {
       fps: 10,
       qrbox: {width: 100, height: 100},
       rememberLastUsedCamera: true,
       // Only support camera scan type.
       supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA]
   };
  
   let html5QrcodeScanner = new Html5QrcodeScanner(
       "reader", config, /* verbose= */ false);
   html5QrcodeScanner.render(onScanSuccess);
  

  For file based scan only choose:

  supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
  

  For supporting both as it is today, you can ignore this field or set as:

  supportedScanTypes: [
      Html5QrcodeScanType.SCAN_TYPE_CAMERA,
       Html5QrcodeScanType.SCAN_TYPE_FILE]
  

  To set the file based scan as defult change the order:

     supportedScanTypes: [
       Html5QrcodeScanType.SCAN_TYPE_FILE,
       Html5QrcodeScanType.SCAN_TYPE_CAMERA]
  

Version 2.2.0

• config.qrbox now supports consuming function of type

  /**
   * A function that takes in the width and height of the video stream 
  * and returns QrDimensions.
  * 
  * Viewfinder refers to the video showing camera stream.
  */
  export type QrDimensionFunction =
      (viewfinderWidth: number, viewfinderHeight: number) => QrDimensions;
  

  This will allow developers to define custom QR box dimensions for their implementations.

  Example:

  function onScanSuccess(decodedText, decodedResult) {
      // handle the scanned code as you like, for example:
      console.log(`Code matched = ${decodedText}`, decodedResult);
  }
  
  // Square QR box with edge size = 70% of the smaller edge of the viewfinder.
  let qrboxFunction = function(viewfinderWidth, viewfinderHeight) {
      let minEdgePercentage = 0.7; // 70%
      let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
      let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
      return {
          width: qrboxSize,
          height: qrboxSize
      };
  }
  
  let html5QrcodeScanner = new Html5QrcodeScanner(
      "reader",
      { fps: 10, qrbox: qrboxFunction },
      /* verbose= */ false);
  html5QrcodeScanner.render(onScanSuccess);
  

Version 2.1.6

• Add alt information to info icon to improve accessibility.

Version 2.1.5

• Changed behavior from throwing error in case qrbox.width or qrbox is larger 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
• 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.
• Calling Html5QrcodeScanner#clear() will also clear the UI rendered due to image based scan. This should address issue#193