Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Version 2.2.7 (see comment for list of changes) #575

Merged
merged 9 commits into from
Nov 4, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,21 @@ interface Html5QrcodeConfigs {
* Array of formats to support of type {@type Html5QrcodeSupportedFormats}.
*/
formatsToSupport: Array<Html5QrcodeSupportedFormats> | undefined;


/**
* {@class BarcodeDetector} is being implemented by browsers at the moment.
* It has very limited browser support but as it gets available it could
* enable faster native code scanning experience.
*
* Set this flag to true, to enable using {@class BarcodeDetector} if
* supported. This is false by default.
*
* Documentations:
* - https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector
* - https://web.dev/shape-detection/#barcodedetector
*/
useBarCodeDetectorIfSupported?: boolean | undefined;
}

/** Configuration for creating {@class Html5Qrcode}. */
Expand Down
61 changes: 61 additions & 0 deletions changelog.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,64 @@
### 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](https://github.com/mebjas/html5-qrcode/issues/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:

```css
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

2. 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](https://scanapp.org) 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.

##### TODOS
- [ ] Update documentation on readme.
- [ ] Update documentation on [qrcode.minhazav.dev](https://qrcode.minhazav.dev).
- [ ] Publish article around this.

### Version 2.2.5 & Version 2.2.6

> Small minification fix in Version 2.2.6.
Expand Down
17 changes: 7 additions & 10 deletions experimental.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@ library. In future, based on the support level and compatibility, some of
these features will get upgraded to general feature list.

## Using experimental native BarcodeDetector API

> **Note** This config has now been graduated to `Html5QrcodeConfigs` and deprecated from experimental config.

Turning on this flag allows using native [BarcodeDetector](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector)
api now being introduced in web browsers for code scanning instead of `ZXing`
library we use officially.

### How to turn this on
It can be turned on using new config called `useBarCodeDetectorIfSupported`
added to `experimentalFeatures` config group. It's off (`value = false`) by
default. If set to on (`value = true`) and the `BarcodeDetector` is supported
by the browser, it'll be used for scanning all the kind of 1d and 2d codes.
Setting `useBarCodeDetectorIfSupported` to `true` in `Html5QrcodeConfigs` will
enable this option.

#### Html5Qrcode class

Expand All @@ -25,9 +26,7 @@ function onScanSuccess(decodedText, decodedResult) {

let html5qrcode = new Html5Qrcode("reader", {
// Use this flag to turn on the feature.
experimentalFeatures: {
useBarCodeDetectorIfSupported: false
}
useBarCodeDetectorIfSupported: false
});

const scanConfig = { fps: 10, qrbox: 250 };
Expand All @@ -48,9 +47,7 @@ let html5QrcodeScanner = new Html5QrcodeScanner(
fps: 10,
qrbox: 250,
// Use this flag to turn on the feature.
experimentalFeatures: {
useBarCodeDetectorIfSupported: false
}
useBarCodeDetectorIfSupported: false
});
html5QrcodeScanner.render(onScanSuccess);
```
Expand Down
2 changes: 1 addition & 1 deletion minified/html5-qrcode.min.js

Large diffs are not rendered by default.

13 changes: 7 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "html5-qrcode",
"version": "2.2.6",
"version": "2.2.7",
"description": "A cross platform HTML5 QR Code & bar code scanner",
"main": "./cjs/index.js",
"module": "./esm/index.js",
Expand All @@ -9,12 +9,11 @@
"unpkg": "./html5-qrcode.min.js",
"scripts": {
"build-windows": "npm run build:es2015 && npm run build:esm && npm run build:esnext && npm run build:cjs && npm run build:umd_windows && npm run build:typing && npm run build:copy_windows",
"test": "npm run-script test:build && npm run-script test:run && npm run-script test:clean",
"test_windows": "npm run-script test:build && npm run-script test:run && npm run-script test:clean_windows",
"test": "npm run-script test:build && npm run-script test:run",
"test_windows": "npm run-script test:build && npm run-script test:run_windows",
"test:build": "tsc --build tsconfig.test.json",
"test:clean": "rm -Rf ./output",
"test:clean_windows": "rmdir /s /q .\\output",
"test:run": "mocha -r tsconfig-paths/register --timeout 200000 output/tests/**/*.test.js",
"test:run_windows": ".\\scripts\\test-run.bat",
"test:run": "./scripts/test-run.sh",
"lint-md": "remark .",
"clean": "rm -Rf ./lib/* ./build/* ./meta/bundlesize/* ./meta/coverage/* ./.rpt2_cache ./dist/* ./src/*.d.ts",
"prebuild": "npm run clean",
Expand Down Expand Up @@ -61,6 +60,8 @@
"babel-minify": "^0.5.1",
"chai": "^4.3.4",
"expose-loader": "^2.0.0",
"jsdom": "20.0.2",
"jsdom-global": "3.0.2",
"mocha": "^9.1.3",
"mocha-lcov-reporter": "^1.3.0",
"promise-polyfill": "^8.1.3",
Expand Down
11 changes: 11 additions & 0 deletions scripts/test-run.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@ECHO OFF
:: This is a script for running tests on Windows OS.

ECHO Initiating test script.

mocha -r tsconfig-paths/register -r jsdom-global/register --timeout 200000 output/tests/**/*.test.js output/tests/tests/ui/scanner/*.test.js

:: Cleanup
ECHO Cleaning up test artifacts

rmdir /s /q .\\output
14 changes: 14 additions & 0 deletions scripts/test-run.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
#!/bin/bash
## Build Script

echo 'Initiating test script.'

mocha -r tsconfig-paths/register \
-r jsdom-global/register \
--timeout 200000 \
output/tests/**/*.test.js \
output/tests/tests/ui/scanner/*.test.js

# Cleanup.
echo 'Cleaning up test artifacts'
rm -Rf ./output
17 changes: 9 additions & 8 deletions src/code-decoder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {

import { ZXingHtml5QrcodeDecoder } from "./zxing-html5-qrcode-decoder";
import { BarcodeDetectorDelegate } from "./native-bar-code-detector";
import { ExperimentalFeaturesConfig } from "./experimental-features";

/**
* Shim layer for {@interface QrcodeDecoder}.
Expand All @@ -35,14 +34,14 @@ export class Html5QrcodeShim implements QrcodeDecoderAsync {

public constructor(
requestedFormats: Array<Html5QrcodeSupportedFormats>,
useBarCodeDetectorIfSupported: boolean,
verbose: boolean,
logger: Logger,
experimentalFeatureConfig: ExperimentalFeaturesConfig) {
logger: Logger) {
this.verbose = verbose;

// Use BarcodeDetector library if enabled by config and is supported.
if (experimentalFeatureConfig.useBarCodeDetectorIfSupported === true
&& BarcodeDetectorDelegate.isSupported()) {
if (useBarCodeDetectorIfSupported
&& BarcodeDetectorDelegate.isSupported()) {
this.decoder = new BarcodeDetectorDelegate(
requestedFormats, verbose, logger);
} else {
Expand All @@ -51,16 +50,18 @@ export class Html5QrcodeShim implements QrcodeDecoderAsync {
}
}

decodeAsync(canvas: HTMLCanvasElement): Promise<QrcodeResult> {
async decodeAsync(canvas: HTMLCanvasElement): Promise<QrcodeResult> {
let start = performance.now();
return this.decoder.decodeAsync(canvas).finally(() => {
try {
return await this.decoder.decodeAsync(canvas);
} finally {
if (this.verbose) {
let executionTime = performance.now() - start;
this.executionResults.push(executionTime);
this.executions++;
this.possiblyFlushPerformanceReport();
}
});
}
}

// Dumps mean decoding latency to console for last
Expand Down
28 changes: 5 additions & 23 deletions src/experimental-features.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,32 +31,14 @@ export interface ExperimentalFeaturesConfig {
* Set this flag to true, to enable using {@class BarcodeDetector} if
* supported. This is false by default.
*
* @deprecated This configuration has graduated to
* {@code Html5QrcodeCameraScanConfig} you can set it there directly. All
* documentation and future improvements shall be added to that one. This
* config will still work for backwards compatibility.
*
* Documentations:
* - https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector
* - https://web.dev/shape-detection/#barcodedetector
*/
useBarCodeDetectorIfSupported?: boolean | undefined;
}

/** Factory for {@interface ExperimentalFeaturesConfig}. */
export class ExperimentalFeaturesConfigFactory {

/**
* Creates fully filled experimental config.
*/
public static createExperimentalFeaturesConfig(
config?: ExperimentalFeaturesConfig | undefined)
: ExperimentalFeaturesConfig {
if (!config) {
return {
useBarCodeDetectorIfSupported: false
};
}

if (config.useBarCodeDetectorIfSupported !== true) {
config.useBarCodeDetectorIfSupported = false;
}

return config;
}
}
Loading