Compare commits

..

No commits in common. 'master' and 'v0.1.3' have entirely different histories.

@ -1,108 +0,0 @@
name: CI
env:
NODE_OPTIONS: --max-old-space-size=6144
# install playwright binary manually (because pnpm only runs install script once)
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
on:
push:
branches:
- main
- master
- release/*
- feat/*
- fix/*
- perf/*
- v1
- v2
pull_request:
workflow_dispatch:
concurrency:
group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
cancel-in-progress: true
jobs:
build:
timeout-minutes: 20
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest]
node_version: [16]
fail-fast: false
name: "Build&Test: node-${{ matrix.node_version }}, ${{ matrix.os }}"
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Install pnpm
uses: pnpm/action-setup@v2.2.2
- name: Set node version to ${{ matrix.node_version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node_version }}
cache: "pnpm"
- name: Install deps
run: pnpm install
- name: Build
run: pnpm run build
test:
timeout-minutes: 10
runs-on: ubuntu-latest
name: "Lint: node-16, ubuntu-latest"
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install pnpm
uses: pnpm/action-setup@v2.2.2
- name: Set node version to 16
uses: actions/setup-node@v3
with:
node-version: 16
cache: "pnpm"
- name: Install deps
run: pnpm install
- name: Build
run: pnpm run build
- name: Test
run: pnpm run test
lint:
timeout-minutes: 10
runs-on: ubuntu-latest
name: "Lint: node-16, ubuntu-latest"
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install pnpm
uses: pnpm/action-setup@v2.2.2
- name: Set node version to 16
uses: actions/setup-node@v3
with:
node-version: 16
cache: "pnpm"
- name: Install deps
run: pnpm install
- name: Build
run: pnpm run build
- name: Check formatting
run: pnpm run prettier

2
.gitignore vendored

@ -9,5 +9,3 @@ tsconfig.tsbuildinfo
coverage coverage
yarn.lock yarn.lock
.rpt2_cache .rpt2_cache
demo/lib/index.min.js

@ -20,10 +20,3 @@ tsconfig.json
tsconfig.base.json tsconfig.base.json
.rpt2_cache .rpt2_cache
.vscode .vscode
/demo
/doc
/scripts
tslint.json
yarn-error.log
.babelrc
yarn.lock

@ -1,3 +1 @@
shamefully-hoist=true package-lock=false
strict-peer-dependencies=true
auto-install-peers=true

@ -1,8 +1,7 @@
# [qrcode-decoder](https://github.com/yugasun/qrcode-decoder) # [qrcode-decoder](https://github.com/yugasun/qrcode-decoder)
[![npm](https://img.shields.io/npm/v/qrcode-decoder)](http://www.npmtrends.com/qrcode-decoder)
[![NPM downloads](http://img.shields.io/npm/dm/qrcode-decoder.svg?style=flat-square)](http://www.npmtrends.com/qrcode-decoder)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/yugasun/qrcode-decoder/blob/master/LICENSE) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/yugasun/qrcode-decoder/blob/master/LICENSE)
[![NPM downloads](http://img.shields.io/npm/dm/qrcode-decoder.svg?style=flat-square)](http://www.npmtrends.com/qrcode-decoder)
[简体中文](./README.zh-CN.md) | English [简体中文](./README.zh-CN.md) | English
@ -23,10 +22,10 @@ A tool for decoding qrcode.
## Guide ## Guide
Use `pnpm` to install. Use `npm` to install.
```bash ```bash
$ pnpm install --save qrcode-decoder $ npm install --save qrcode-decoder
``` ```
Using in webpack: Using in webpack:
@ -38,7 +37,7 @@ import QrcodeDecoder from 'qrcode-decoder';
Using in browser: Using in browser:
```html ```html
<script src="https://unpkg.com/qrcode-decoder@0.3.1/dist/index.min.js"></script> <script src="https://unpkg.com/qrcode-decoder"></script>
``` ```
## Demo ## Demo
@ -96,31 +95,31 @@ Stops the current `qr` from searching for a QRCode.
Install dependencies: Install dependencies:
```bash ```bash
$ pnpm install $ npm install
``` ```
Build code: Build code:
```bash ```bash
$ pnpm run build $ npm run build
``` ```
Run unit test: Run unit test:
```bash ```bash
$ pnpm test $ npm test
``` ```
Modify version in `package.json`, run `release` script: Modify version in `package.json`, run `release` script:
```bash ```bash
$ pnpm run release $ npm run release
``` ```
Publish Publish
```bash ```bash
$ pnpm publish $ npm publish
``` ```
## License ## License

@ -1,8 +1,7 @@
# [qrcode-decoder](https://github.com/yugasun/qrcode-decoder) # [qrcode-decoder](https://github.com/yugasun/qrcode-decoder)
[![npm](https://img.shields.io/npm/v/qrcode-decoder)](http://www.npmtrends.com/qrcode-decoder)
[![NPM downloads](http://img.shields.io/npm/dm/qrcode-decoder.svg?style=flat-square)](http://www.npmtrends.com/qrcode-decoder)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/yugasun/qrcode-decoder/blob/master/LICENSE) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/yugasun/qrcode-decoder/blob/master/LICENSE)
[![NPM downloads](http://img.shields.io/npm/dm/qrcode-decoder.svg?style=flat-square)](http://www.npmtrends.com/qrcode-decoder)
简体中文 | [English](./README.md) 简体中文 | [English](./README.md)
@ -23,10 +22,10 @@
## 使用者指南 ## 使用者指南
通过 pnpm 下载安装代码 通过 npm 下载安装代码
```bash ```bash
$ pnpm install --save qrcode-decoder $ npm install --save qrcode-decoder
``` ```
如果你是 webpack 等环境 如果你是 webpack 等环境
@ -38,7 +37,7 @@ import QrcodeDecoder from 'qrcode-decoder';
如果你是浏览器环境 如果你是浏览器环境
```html ```html
<script src="https://unpkg.com/qrcode-decoder@0.3.1/dist/index.min.js"></script> <script src="https://unpkg.com/qrcode-decoder"></script>
``` ```
## 示例 ## 示例
@ -96,31 +95,31 @@ qr.decodeFromCamera(videoElem).then((res) => {
首次运行需要先安装依赖 首次运行需要先安装依赖
```bash ```bash
$ pnpm install $ npm install
``` ```
一键打包生成生产代码 一键打包生成生产代码
```bash ```bash
$ pnpm run build $ npm run build
``` ```
运行单元测试,浏览器环境需要手动测试,位于`test/browser` 运行单元测试,浏览器环境需要手动测试,位于`test/browser`
```bash ```bash
$ pnpm test $ npm test
``` ```
修改 package.json 中的版本号,修改 README.md 中的版本号,修改 CHANGELOG.md然后发布新版 修改 package.json 中的版本号,修改 README.md 中的版本号,修改 CHANGELOG.md然后发布新版
```bash ```bash
$ pnpm run release $ npm run release
``` ```
将新版本发布到 pnpm 将新版本发布到 npm
```bash ```bash
$ pnpm publish $ npm publish
``` ```
## License ## License

@ -2,4 +2,4 @@
Rewrite unit test. Rewrite unit test.
- [x] Rewrite unit test. - [] Rewrite unit test.

@ -1,26 +0,0 @@
import QrcodeDecoder from '../';
describe('QrcodeDecoder', () => {
test('use', async () => {
const res = await import('../dist');
expect(res.default).toEqual(QrcodeDecoder);
});
test('new QrcodeDecoder()', async () => {
const qr = new QrcodeDecoder();
expect(qr).toBeDefined();
expect(qr.videoConstraints).toEqual({
video: {
width: { min: 360, ideal: 720, max: 1080 },
height: { min: 360, ideal: 720, max: 1080 },
facingMode: { exact: 'environment' },
},
audio: false,
});
expect(qr.decodeFromImage).toBeDefined();
expect(qr.decodeFromCamera).toBeDefined();
expect(qr.decodeFromVideo).toBeDefined();
});
});

@ -1,54 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>QrcodeDecoder - Camera</title>
</head>
<body>
<button id="start">Start</button> <button id="stop">Stop</button><br />
<span id="result">Click start to scan qrcode.</span><br />
<hr />
<video id="video" autoplay></video>
<head> <script src="./lib/vconsole.min.js"></script>
<meta charset="UTF-8" /> <script src="./index.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script type="text/javascript">
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> var vConsole = new VConsole();
<title>QrcodeDecoder - Camera</title> console.log('Hello world');
</head> function main() {
var qr = new QrcodeDecoder();
var video = document.querySelector('#video');
var start = document.querySelector('#start');
var stop = document.querySelector('#stop');
var result = document.querySelector('#result');
async function startScan() {
if (!qr.isCanvasSupported()) {
alert("Your browser doesn't match the required specs.");
throw new Error('Canvas and getUserMedia are required');
}
<body> let code = await qr.decodeFromCamera(video);
<button id="start">Start</button> <button id="stop">Stop</button><br /> console.log('code', code);
<span id="result">Click start to scan qrcode.</span><br /> result.innerText = 'Result: ' + code.data;
<hr />
<video id="video" autoplay></video>
<script src="./lib/vconsole.min.js"></script>
<script src="./lib/index.min.js"></script>
<script type="text/javascript">
var vConsole = new VConsole();
console.log('Hello world');
function main() {
var qr = new QrcodeDecoder.default();
var video = document.querySelector('#video');
var start = document.querySelector('#start');
var stop = document.querySelector('#stop');
var result = document.querySelector('#result');
async function startScan() {
if (!qr.isCanvasSupported()) {
alert("Your browser doesn't match the required specs.");
throw new Error('Canvas and getUserMedia are required');
} }
start.onclick = startScan;
let code = await qr.decodeFromCamera(video, stop.onclick = function() {
// you can customize your camera size like below qr.stop();
// { };
// width: 400,
// height: 400,
// }
);
console.log('code', code);
result.innerText = 'Result: ' + code.data;
} }
start.onclick = startScan; main();
</script>
stop.onclick = function () { </body>
qr.stop();
};
}
main();
</script>
</body>
</html> </html>

@ -1,66 +1,61 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>QrcodeDecoder - Image</title>
</head>
<body>
<section>
<h3>Same domain image</h3>
<img src="./assets/qrcode.png" alt="qr code" /><br />
<button id="decode1">Decode!</button><br />
<span id="result1"></span><br />
</section>
<hr />
<section>
<h3>Different domain image</h3>
<button id="decode2">Decode!</button><br />
<span id="result2"></span><br />
</section>
<script src="./lib/vconsole.min.js"></script>
<script src="./index.min.js"></script>
<script src="./index.min.js"></script>
<script type="module">
var vConsole = new VConsole();
console.log('Hello world');
function main() {
var qr = new QrcodeDecoder();
<head> var btn1 = document.querySelector('button#decode1');
<meta charset="UTF-8" /> var btn2 = document.querySelector('button#decode2');
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> var result1 = document.querySelector('#result1');
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> var result2 = document.querySelector('#result2');
<title>QrcodeDecoder - Image</title> var img = document.querySelector('img');
</head>
<body> btn1.onclick = async () => {
<section> // you can also decode from image path
<h3>Same domain image</h3> // const code = await qr.decodeFromImage('./assets/qrcode.png');
<img id="img1" src="./assets/qrcode.png" alt="qr code" /><br /> const code = await qr.decodeFromImage(img);
<button id="decode1">Decode!</button><br /> console.log(code);
<span id="result1"></span><br /> result1.innerText = code.data;
</section> };
<hr />
<section>
<h3>Different domain image</h3>
<input
id="img2"
value="https://yugasun.com/static/wechat.jpg"
style="width: 400px" /><br />
<button id="decode2">Decode!</button><br />
<span id="result2"></span><br />
</section>
<script src="./lib/vconsole.min.js"></script>
<script src="./lib/index.min.js"></script>
<script type="module">
var vConsole = new VConsole();
function main() {
var qr = new QrcodeDecoder.default();
var btn1 = document.querySelector('button#decode1'); btn2.onclick = async () => {
var btn2 = document.querySelector('button#decode2'); // you can also decode from image path
var result1 = document.querySelector('#result1'); // const code = await qr.decodeFromImage('./assets/qrcode.png');
var result2 = document.querySelector('#result2'); const code = await qr.decodeFromImage(
var img1 = document.querySelector('#img1'); 'https://yugasun.com/static/wechat.jpg',
var img2 = document.querySelector('#img2'); {
crossOrigin: 'anonymous',
btn1.onclick = async () => { },
// you can also decode from image path );
// const code = await qr.decodeFromImage('./assets/qrcode.png'); console.log(code);
const code = await qr.decodeFromImage(img1); result2.innerText = code.data;
console.log(code); };
result1.innerText = code.data; }
};
btn2.onclick = async () => {
// you can also decode from image path
// const code = await qr.decodeFromImage('./assets/qrcode.png');
const code = await qr.decodeFromImage(img2.value, {
crossOrigin: 'anonymous',
});
console.log(code);
result2.innerText = code.data;
};
}
window.onload = () => {
main(); main();
}; </script>
</script> </body>
</body>
</html> </html>

1
demo/index.min.js vendored

File diff suppressed because one or more lines are too long

@ -1,45 +1,43 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>QrcodeDecoder - Video</title>
</head>
<body>
<button id="start">Start</button> <button id="stop">Stop</button><br />
<span id="result">Click start to scan qrcode.</span><br />
<head> <video src="./assets/qrcode-video.mp4"></video>
<meta charset="UTF-8" /> <script src="./lib/vconsole.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="./index.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script type="text/javascript">
<title>QrcodeDecoder - Video</title> var vConsole = new VConsole();
</head> console.log('Hello world');
function main() {
var video = document.querySelector('video');
var result = document.querySelector('#result');
var start = document.querySelector('#start');
var stop = document.querySelector('#stop');
var qr = new QrcodeDecoder();
<body> start.onclick = startScan;
<button id="start">Start</button> <button id="stop">Stop</button><br />
<span id="result">Click start to scan qrcode.</span><br />
<video src="./assets/qrcode-video.mp4"></video> stop.onclick = function() {
<script src="./lib/vconsole.min.js"></script> qr.stop();
<script src="./lib/index.min.js"></script> video.pause();
<script type="text/javascript"> };
var vConsole = new VConsole();
function main() {
var video = document.querySelector('video');
var result = document.querySelector('#result');
var start = document.querySelector('#start');
var stop = document.querySelector('#stop');
var qr = new QrcodeDecoder.default();
start.onclick = startScan; async function startScan() {
video.play();
stop.onclick = function () { const code = await qr.decodeFromVideo(video);
qr.stop(); console.log('code', code);
video.pause(); result.innerText = 'Result: ' + code.data;
}; }
async function startScan() {
video.play();
const code = await qr.decodeFromVideo(video);
console.log('code', code);
result.innerText = 'Result: ' + code.data;
} }
} main();
main(); </script>
</script> </body>
</body>
</html> </html>

@ -1,11 +1,5 @@
const isDebug = process.env.DEBUG === 'true';
module.exports = { module.exports = {
verbose: true, verbose: true,
silent: !isDebug,
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
testTimeout: 60000, testTimeout: 60000,
transform: { transform: {
'^.+\\.tsx?$': 'ts-jest', '^.+\\.tsx?$': 'ts-jest',

@ -1,25 +1,18 @@
{ {
"name": "qrcode-decoder", "name": "qrcode-decoder",
"version": "0.3.4", "version": "0.1.3",
"description": "Tool for decoding qrcode", "description": "Tool for decoding qrcode",
"main": "dist/index.js", "main": "dist/index.js",
"browser": "dist/index.min.js",
"unpkg": "dist/index.min.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"sideEffects": false, "sideEffects": false,
"packageManager": "pnpm@7.11.0",
"scripts": { "scripts": {
"build": "ts-node -P scripts/tsconfig.json scripts/bundle.ts commonjs,esm,aio && pnpm run dts && pnpm run copy-file", "build": "ts-node -P scripts/tsconfig.json scripts/bundle.ts umd,esm,aio && npm run copy-file",
"dts": "tsc src/index.ts --declaration --emitDeclarationOnly --outDir './dist'",
"prettier": "prettier --check '**/*.{ts,tsx,md}' --config .prettierrc", "prettier": "prettier --check '**/*.{ts,tsx,md}' --config .prettierrc",
"prettier:fix": "prettier --write '**/*.{ts,tsx,md}' --config .prettierrc", "prettier:fix": "prettier --write '**/*.{ts,tsx,md}' --config .prettierrc",
"test": "jest", "test": "jest",
"codecov": "jest --coverage && codecov", "codecov": "jest --coverage && codecov",
"copy-file": "cp dist/index.min.js demo/lib", "copy-file": "cp dist/index.min.js demo/",
"release": "git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags", "release": "git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags",
"pages": "gh-pages -d demo --remote origin", "deploy": "gh-pages -d demo --remote origin"
"demo": "http-server demo -c-1"
}, },
"husky": { "husky": {
"hooks": { "hooks": {
@ -28,7 +21,7 @@
}, },
"lint-staged": { "lint-staged": {
"*.{ts,tsx,md}": [ "*.{ts,tsx,md}": [
"pnpm run prettier:fix", "npm run prettier:fix",
"git add ." "git add ."
] ]
}, },
@ -61,13 +54,11 @@
"codecov": "^3.8.1", "codecov": "^3.8.1",
"cross-env": "^6.0.3", "cross-env": "^6.0.3",
"fancy-log": "^1.3.3", "fancy-log": "^1.3.3",
"gh-pages": "^3.1.0",
"http-server": "^14.1.0",
"husky": "^3.0.9", "husky": "^3.0.9",
"jest": "^24.9.0", "jest": "^24.9.0",
"lint-staged": "^9.5.0", "lint-staged": "^9.5.0",
"prettier": "^1.18.2", "prettier": "^1.18.2",
"rollup": "^2.38.1", "rolllup": "^2.38.1",
"rollup-plugin-commonjs": "^8.3.0", "rollup-plugin-commonjs": "^8.3.0",
"rollup-plugin-json": "^3.1.0", "rollup-plugin-json": "^3.1.0",
"rollup-plugin-node-builtins": "^2.1.2", "rollup-plugin-node-builtins": "^2.1.2",
@ -79,7 +70,7 @@
"ts-node": "^8.4.1", "ts-node": "^8.4.1",
"tslint": "^5.20.1", "tslint": "^5.20.1",
"tslint-config-prettier": "^1.18.0", "tslint-config-prettier": "^1.18.0",
"typescript": "^4.4.3" "typescript": "^3.7.5"
}, },
"license": "MIT", "license": "MIT",
"repository": { "repository": {
@ -95,6 +86,6 @@
}, },
"homepage": "https://github.com/yugasun/qrcode-decoder#readme", "homepage": "https://github.com/yugasun/qrcode-decoder#readme",
"dependencies": { "dependencies": {
"jsqr": "^1.4.0" "jsqr": "^1.3.1"
} }
} }

File diff suppressed because it is too large Load Diff

@ -20,6 +20,16 @@ const plugins: rollup.Plugin[] = [
commonjs(), commonjs(),
typescript2({ typescript2({
tsconfig: path.join(__dirname, '..', 'tsconfig.json'), tsconfig: path.join(__dirname, '..', 'tsconfig.json'),
typescript: ts, // ensure we're using the same typescript (3.x) for rollup as for regular builds etc
tsconfigOverride: {
module: 'esnext',
stripInternal: true,
emitDeclarationOnly: false,
composite: false,
declaration: false,
declarationMap: false,
sourceMap: false,
},
}), }),
]; ];
@ -59,25 +69,6 @@ async function bundleUmd() {
}); });
} }
async function bundleCommonjs() {
const bundle = await rollup.rollup({
input: path.join(process.cwd(), 'src/index.ts'),
plugins: [...plugins],
external: ['jsqr'],
});
await bundle.write({
file: 'dist/index.js',
exports: 'named',
name: 'QrcodeDecoder',
format: 'commonjs',
sourcemap: false,
globals: {
jsqr: 'jsqr',
tslib: 'tslib',
},
});
}
async function bundleAio() { async function bundleAio() {
const bundle = await rollup.rollup({ const bundle = await rollup.rollup({
input: path.join(process.cwd(), 'src/index.ts'), input: path.join(process.cwd(), 'src/index.ts'),
@ -86,7 +77,7 @@ async function bundleAio() {
uglify({ uglify({
compress: { compress: {
drop_debugger: true, drop_debugger: true,
drop_console: false, drop_console: true,
}, },
}), }),
], ],
@ -95,7 +86,7 @@ async function bundleAio() {
file: 'dist/index.min.js', file: 'dist/index.min.js',
name: 'QrcodeDecoder', name: 'QrcodeDecoder',
format: 'iife', format: 'iife',
sourcemap: true, sourcemap: false,
}); });
} }
@ -119,14 +110,6 @@ async function bundle() {
await bundleUmd(); await bundleUmd();
} }
if (outputs.indexOf('commonjs') === -1) {
logBundle(`Skipping commonjs`);
} else {
logBundle(`Creating commonjs`);
await bundleCommonjs();
}
if (outputs.indexOf('aio') === -1) { if (outputs.indexOf('aio') === -1) {
logBundle(`Skipping umd aio`); logBundle(`Skipping umd aio`);
} else { } else {

@ -1,13 +1,7 @@
import jsQR, { QRCode, Options } from 'jsqr'; import { Options } from 'jsqr';
import jsQR from 'jsqr';
export type CodeResult = QRCode | null; class QrcodeDecoder {
const videoSize = {
width: { min: 360, ideal: 720, max: 1080 },
height: { min: 360, ideal: 720, max: 1080 },
};
export class QrcodeDecoder {
timerCapture: null | NodeJS.Timeout; timerCapture: null | NodeJS.Timeout;
canvasElem: null | HTMLCanvasElement; canvasElem: null | HTMLCanvasElement;
gCtx: null | CanvasRenderingContext2D; gCtx: null | CanvasRenderingContext2D;
@ -25,8 +19,7 @@ export class QrcodeDecoder {
this.videoElem = null; this.videoElem = null;
this.getUserMediaHandler = null; this.getUserMediaHandler = null;
this.videoConstraints = { this.videoConstraints = {
// default use rear camera video: true,
video: { ...videoSize, facingMode: { exact: 'environment' } },
audio: false, audio: false,
}; };
@ -101,10 +94,7 @@ export class QrcodeDecoder {
* inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst) * inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
* refer to jsqr options: https://github.com/cozmo/jsQR * refer to jsqr options: https://github.com/cozmo/jsQR
*/ */
async _captureToCanvas( async _captureToCanvas(videoElem: HTMLVideoElement, options: Options) {
videoElem: HTMLVideoElement,
options: Options,
): Promise<CodeResult> {
if (this.timerCapture) { if (this.timerCapture) {
clearTimeout(this.timerCapture); clearTimeout(this.timerCapture);
} }
@ -146,7 +136,7 @@ export class QrcodeDecoder {
const result = await proms(); const result = await proms();
return result as CodeResult; return result;
} }
/** /**
@ -159,10 +149,7 @@ export class QrcodeDecoder {
* inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst) * inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
* refer to jsqr options: https://github.com/cozmo/jsQR * refer to jsqr options: https://github.com/cozmo/jsQR
*/ */
async decodeFromCamera( async decodeFromCamera(videoElem: HTMLVideoElement, options = {}) {
videoElem: HTMLVideoElement,
options: any = {},
): Promise<CodeResult> {
const opts = { const opts = {
...this.defaultOption, ...this.defaultOption,
...options, ...options,
@ -173,29 +160,10 @@ export class QrcodeDecoder {
throw new Error("Couldn't get video from camera"); throw new Error("Couldn't get video from camera");
} }
let stream: MediaStream;
try { try {
stream = await navigator.mediaDevices.getUserMedia(this.videoConstraints); const stream = await navigator.mediaDevices.getUserMedia(
} catch (e) { this.videoConstraints,
if ((e as OverconstrainedError).name === 'OverconstrainedError') { );
console.log('[OverconstrainedError] Can not use rear camera.');
stream = await navigator.mediaDevices.getUserMedia({
video: {
...videoSize,
...{
width: opts.width,
height: opts.height,
},
},
audio: false,
});
} else {
throw e;
}
}
if (stream) {
videoElem.srcObject = stream; videoElem.srcObject = stream;
// videoElem.src = window.URL.createObjectURL(stream); // videoElem.src = window.URL.createObjectURL(stream);
this.videoElem = videoElem; this.videoElem = videoElem;
@ -203,9 +171,9 @@ export class QrcodeDecoder {
const code = await this.decodeFromVideo(videoElem, opts); const code = await this.decodeFromVideo(videoElem, opts);
return code; return code;
} catch (e) {
throw e;
} }
return null;
} }
/** /**
@ -216,10 +184,7 @@ export class QrcodeDecoder {
* inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst) * inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
* refer to jsqr options: https://github.com/cozmo/jsQR * refer to jsqr options: https://github.com/cozmo/jsQR
*/ */
async decodeFromVideo( async decodeFromVideo(videoElem: HTMLVideoElement, options = {}) {
videoElem: HTMLVideoElement,
options = {},
): Promise<CodeResult> {
const opts = { const opts = {
...this.defaultOption, ...this.defaultOption,
...options, ...options,
@ -241,31 +206,30 @@ export class QrcodeDecoder {
* refer to jsqr options: https://github.com/cozmo/jsQR * refer to jsqr options: https://github.com/cozmo/jsQR
*/ */
async decodeFromImage( async decodeFromImage(
img: HTMLImageElement | string, img: HTMLImageElement,
options: { crossOrigin?: string } = {}, options: { crossOrigin?: string } = {},
): Promise<CodeResult> { ) {
let imgDom: HTMLImageElement | null = null; let imgDom: HTMLImageElement | null = null;
const opts = { const opts = {
...this.defaultOption, ...this.defaultOption,
...options, ...options,
}; };
if (+img.nodeType > 0) {
if (typeof img === 'string') { if (!img.src) {
throw new Error('The ImageElement must contain a src');
}
imgDom = img;
} else if (typeof img === 'string') {
imgDom = document.createElement('img'); imgDom = document.createElement('img');
imgDom.src = img;
if (options.crossOrigin) { if (options.crossOrigin) {
imgDom.crossOrigin = options.crossOrigin; imgDom.crossOrigin = options.crossOrigin;
} }
imgDom.src = img;
const proms = () => const proms = () =>
new Promise((resolve) => { new Promise((resolve) => {
imgDom!.onload = () => resolve(true); imgDom!.onload = () => resolve(true);
}); });
await proms(); await proms();
} else if (+img.nodeType > 0) {
if (!img.src) {
throw new Error('The ImageElement must contain a src');
}
imgDom = img;
} }
let code = null; let code = null;
@ -292,7 +256,7 @@ export class QrcodeDecoder {
return code; return code;
} }
return null; return false;
} }
/** /**

@ -0,0 +1,24 @@
{
"compilerOptions": {
"rootDir": "src",
"outDir": "dist",
"baseUrl": ".",
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"preserveConstEnums": true,
"importHelpers": false,
"target": "es5",
"module": "commonjs",
"lib": ["es5", "es6", "dom"],
"moduleResolution": "node",
"sourceMap": false,
"paths": {
"*": ["typings/*", "includes/*"]
},
"resolveJsonModule": true,
"noUnusedLocals": true,
"strict": true
}
}

@ -1,6 +1,5 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "dist",
"baseUrl": ".", "baseUrl": ".",
"composite": true, "composite": true,
"declaration": true, "declaration": true,
@ -11,13 +10,13 @@
"experimentalDecorators": true, "experimentalDecorators": true,
"preserveConstEnums": true, "preserveConstEnums": true,
"importHelpers": false, "importHelpers": false,
"lib": [ "lib": ["esnext", "dom"],
"esnext",
"dom"
],
"module": "ESNext", "module": "ESNext",
"moduleResolution": "node", "moduleResolution": "node",
"sourceMap": false, "sourceMap": false,
"paths": {
"*": ["typings/*", "includes/*"]
},
"resolveJsonModule": true, "resolveJsonModule": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"strict": true, "strict": true,

Loading…
Cancel
Save