Scanthng.js Versions Save

Features

• Add onScanFrameData option that allows an app to obtain an image of the video stream at the point in time a code was scanned, which can be useful for driving UIs. It accepts a callback function that is called with the base64 image data in the chosen imageConversion format:

  const opts = {
    filter: { method, type },
    containerId,
    onScanFrameData: (base64) => {
      // Show the frame at the point of decode
      img.src = base64;
    },
  };
  
  const res = await operator.scanStream(opts);
  console.log(res);
  

  If the autoStop: false option is used, then this callback is called for each successive scan.

Features

• Add idealWidth and idealHeight options to adjust the request for video stream constraints with scanStream.
• Add onScanValue callback option, to be used when autoStop is false to receive scan values instead of via promise resolution.
  • For use-cases where repeated scanning is required, use this option instead of repeatedly restarting the stream:

  // Before - each time a scan was required, perhaps in some loop or by button press
  const res = await operator.scanStream({
    filter,
    containerId,
  });
  
  // After - receive values until scanning is no longer required
  operator.scanStream({
    filter,
    containerId,
    autoStop: false,
    /**
     * When a new item is scanned.
     *
     * @param {string} value - New scan value.
     */
    onScanValue: (value) => items.push(value),
  });
  
  // Sometime later...
  operator.stopStream();
  

  Note: When autoStop: false is used, onScanValue must also be specified.

• Adjust minimum allowed local scanning intervals (500 local and 1000 remote).
• Clean up and update README.md, making the full list of options more readable.

Fixes

• Reduce objects allocated on each invocation and on each frame.
• Fix bug where only usage of jsQR would dictate local scanning interval preference.

Features

• Add ability to scan 1D barcodes locally with zxing-js/browser, in addition to the already implemented local scanning of 2D barcodes with jsQR. To use, include the library and use the following options:

  <script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
  

  const opts = {
    filter: {
      method: '1d',
      type: 'auto',
    },
    containerId: SCANSTREAM_CONTAINER_ID,
    useZxing: true,
  };
  
  const res = await operator.scanStream(opts);
  console.log(res);
  

  If the scanned value has a mappable type to the EVRYTHNG Identifier Recognition API, the usual Thng/product lookup by identifiers will be done and a Thng or product included in the results.

  See the test/zxing-test-app directory for a full usable example.

Other

• Tidy up example apps
• Tidy up feature tests
• Improve README.md

Features

• Updated the integration with Digimarc discover.js to use the latest version of the library (v1.0.0), if configured to do so and the library files are included first.

• onWatermarkDetected now passes the full result from discover.js, not just the detected state.

Before this version:

operator.scanStream({
  containerId,
  filter,
  useDiscover: true,
  onWatermarkDetected: (detected) => console.log(`Watermark detected: ${detected}`),
}).then(console.log);

After this version:

operator.scanStream({
  containerId,
  filter,
  useDiscover: true,
  onWatermarkDetected: (discoverResult) => {
    const detected = discoverResult.watermark;

    // x, y, width, height, rotation also available
    console.log(discoverResult);
  },
}).then(console.log);

Features

• Add useDiscover option to enable client-side Digimarc watermark sensing, if the library is also made available.
• Add onWatermarkDetected option to get called when the detection state changes.
• Add imageConversion.cropPercent option to square crop some of the sent frame when useDiscover is true.
• Add downloadFrames option to prompt file download for frames sent to the API.
• Add setTorchEnabled to enable the torch, on supported devices, while the video stream is open.
• When method is digimarc, autoselect imageConversion options if not already specified.

Other changes

• Replace MegaPixImage dependency with native canvas scaling.
• Update default remote image frame send interval to 1500ms.
• Add new discover-test-app.
• Rework stream.js so that the same post-compression image data is given to discover and the API.
• Apply eslint with eslint-config-airbnb where there was no linter before.

Bump patch version to publish to npmjs

Features

• ScanThng.convertToDataUrl: Provides functionality to read a user file into a data URL.

• ScanThng.convertImageFormat: Pre-processs an image for QR decoding.

<input
  id="file"
  name="file"
  type="file"
  onChange={async event => {
    const file = event.currentTarget.files[0];
    const dataUrl = await ScanThng.convertToDataUrl(file);
    const processedDataUrl = await ScanThng.convertImageFormat(
      dataUrl,
      {
        imageConversion: {
          exportFormat: 'image/jpeg',
          exportQuality: 0.9,
          greyscale: false,
          resizeTo: 480,
        },
      },
    );
    console.log(processedDataUrl);
  }}
/>

Features

• Operator - Operator SDK scopes can now use scanning functionality (scan(), identify(), scanStream(), stopStream() etc)

Note: When using with an Operator scope, the createAnonymousUser option is not available.

Debt

Cleaned up unit test page, and improved Playground feature test page.

Features

• Add optional autoStop (default: true) option to App.scanStream() and ScanThng.scanQrCode(). When set, the video stream will not close.

Fixes

• Use the last video input available