0.3.4

* Fix typo

* Fix require

* Remove deprecated nextjs

* Update package.json

* Update package.json

.babelrc

@@ -0,0 +1,71 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": [
+            ">0.25%"
+          ]
+        },
+        "useBuiltIns": "usage"
+      }
+    ],
+    "@babel/typescript"
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        "@babel/transform-runtime"
+      ]
+    },
+    "production": {
+      "plugins": [
+        "@babel/transform-runtime",
+        "transform-remove-console"
+      ]
+    },
+    "test": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "modules": "commonjs",
+            "targets": {
+              "node": "current"
+            }
+          }
+        ],
+        "@babel/typescript"
+      ]
+    }
+  },
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    "@babel/plugin-proposal-optional-chaining",
+    [
+      "@babel/plugin-proposal-pipeline-operator",
+      {
+        "proposal": "minimal"
+      }
+    ],
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-do-expressions"
+  ]
+}

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+ [*]
+insert_final_newline = true
+ [*.{js,ts}]
+indent_style = space
+indent_size = 2
+charset = utf-8

.github/workflows/ci.yml

@@ -0,0 +1,108 @@
+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

.gitignore

@@ -0,0 +1,13 @@
+node_modules
+.DS_STORE
+lerna-debug.log
+yarn-error.log
+dist
+includes
+tsconfig.tsbuildinfo
+.env
+coverage
+yarn.lock
+.rpt2_cache
+
+demo/lib/index.min.js

.npmignore

@@ -0,0 +1,29 @@
+node_modules
+*.map
+tests
+test
+__tests__
+__test__
+.github
+.env*
+jest.config.js
+.eslintrc.js
+.eslintignore
+.prettierignore
+prettier.config.js
+release.config.js
+commitlint.config.js
+.editorconfig
+lerna.json
+tsconfig.tsbuildinfo
+tsconfig.json
+tsconfig.base.json
+.rpt2_cache
+.vscode
+/demo
+/doc
+/scripts
+tslint.json
+yarn-error.log
+.babelrc
+yarn.lock

.npmrc

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

.prettierignore

@@ -0,0 +1,9 @@
+
+
+# Development folders and files #
+#################################
+.tmp/
+node_modules/
+package.json
+.travis.yml
+dist

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "overrides": [
+    {
+      "files": "*.json",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Yuga Sun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,128 @@
+# [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)
+
+[简体中文](./README.zh-CN.md) | English
+
+A tool for decoding qrcode.
+
+## Directory
+
+```
+.
+├── demo            code demo
+├── dist            build output
+├── doc             docs
+├── src             source code
+├── test            unit test
+├── CHANGELOG.md    change log
+└── TODO.md         todo list
+```
+
+## Guide
+
+Use `pnpm` to install.
+
+```bash
+$ pnpm install --save qrcode-decoder
+```
+
+Using in webpack:
+
+```js
+import QrcodeDecoder from 'qrcode-decoder';
+```
+
+Using in browser:
+
+```html
+<script src="https://unpkg.com/qrcode-decoder@0.3.1/dist/index.min.js"></script>
+```
+
+## Demo
+
+### QrcodeDecoder()
+
+User `new` to create a decoder object.
+
+```javascript
+var qr = new QrcodeDecoder();
+```
+
+#### decodeFromImage(img, options)
+
+Decodes an image from url or an `<img>` element with a `src` attribute set.
+
+```javascript
+qr.decodeFromImage(img).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/image.html)
+
+#### decodeFromVideo(videoElem, options)
+
+Decodes directly from a video with a well specified `src` attribute
+
+```javascript
+qr.decodeFromVideo(videoElement).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/video.html)
+
+#### decodeFromCamera(videoElem, options)
+
+Decodes from a videoElement.
+
+```javascript
+qr.decodeFromCamera(videoElem).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/camera.html)
+
+#### stop()
+
+Stops the current `qr` from searching for a QRCode.
+
+## Develop
+
+Install dependencies:
+
+```bash
+$ pnpm install
+```
+
+Build code:
+
+```bash
+$ pnpm run build
+```
+
+Run unit test:
+
+```bash
+$ pnpm test
+```
+
+Modify version in `package.json`, run `release` script:
+
+```bash
+$ pnpm run release
+```
+
+Publish
+
+```bash
+$ pnpm publish
+```
+
+## License
+
+[MIT](./LICENSE)

README.zh-CN.md

@@ -0,0 +1,128 @@
+# [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)
+
+简体中文 | [English](./README.md)
+
+二维码解析工具。
+
+## 目录介绍
+
+```
+.
+├── demo 使用demo
+├── dist 编译产出代码
+├── doc 项目文档
+├── src 源代码目录
+├── test 单元测试
+├── CHANGELOG.md 变更日志
+└── TODO.md 计划功能
+```
+
+## 使用者指南
+
+通过 pnpm 下载安装代码
+
+```bash
+$ pnpm install --save qrcode-decoder
+```
+
+如果你是 webpack 等环境
+
+```js
+import QrcodeDecoder from 'qrcode-decoder';
+```
+
+如果你是浏览器环境
+
+```html
+<script src="https://unpkg.com/qrcode-decoder@0.3.1/dist/index.min.js"></script>
+```
+
+## 示例
+
+### QrcodeDecoder()
+
+通过 `new` 关键字生成处理对象。
+
+```javascript
+var qr = new QrcodeDecoder();
+```
+
+#### decodeFromImage(img, options)
+
+解析页面中的图片二维码。
+
+```javascript
+qr.decodeFromImage(img).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/image.html)
+
+#### decodeFromVideo(videoElem, options)
+
+解析页面中的视频中的二维码。
+
+```javascript
+qr.decodeFromVideo(videoElement).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/video.html)
+
+#### decodeFromCamera(videoElem, options)
+
+通过获取摄像头视频来扫描解析二维码。
+
+```javascript
+qr.decodeFromCamera(videoElem).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/camera.html)
+
+#### stop()
+
+停止当前视频捕获。
+
+## 开发
+
+首次运行需要先安装依赖
+
+```bash
+$ pnpm install
+```
+
+一键打包生成生产代码
+
+```bash
+$ pnpm run build
+```
+
+运行单元测试，浏览器环境需要手动测试，位于`test/browser`
+
+```bash
+$ pnpm test
+```
+
+修改 package.json 中的版本号，修改 README.md 中的版本号，修改 CHANGELOG.md，然后发布新版
+
+```bash
+$ pnpm run release
+```
+
+将新版本发布到 pnpm
+
+```bash
+$ pnpm publish
+```
+
+## License
+
+[MIT](./LICENSE)

TODO.md

@@ -0,0 +1,5 @@
+# TODO
+
+Rewrite unit test.
+
+- [x] Rewrite unit test.

__tests__/index.test.ts

@@ -0,0 +1,26 @@
+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();
+  });
+});

doc/api.md

@@ -0,0 +1,49 @@
+# Api
+
+### QrcodeDecoder()
+
+User `new` to create a decoder object.
+
+```javascript
+var qr = new QrcodeDecoder();
+```
+
+#### decodeFromImage(img, options)
+
+Decodes an image from url or an `<img>` element with a `src` attribute set.
+
+```javascript
+qr.decodeFromImage(img).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/image.html)
+
+#### decodeFromVideo(videoElem, options)
+
+Decodes directly from a video with a well specified `src` attribute
+
+```javascript
+qr.decodeFromVideo(videoElement).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/video.html)
+
+#### decodeFromCamera(videoElem, options)
+
+Decodes from a videoElement.
+
+```javascript
+qr.decodeFromCamera(videoElem).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/camera.html)
+
+#### stop()
+
+Stops the current `qr` from searching for a QRCode.

doc/api.zh-CN.md

@@ -0,0 +1,49 @@
+# Api
+
+### QrcodeDecoder()
+
+通过 `new` 关键字生成处理对象。
+
+```javascript
+var qr = new QrcodeDecoder();
+```
+
+#### decodeFromImage(img, options)
+
+解析页面中的图片二维码。
+
+```javascript
+qr.decodeFromImage(img).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/image.html)
+
+#### decodeFromVideo(videoElem, options)
+
+解析页面中的视频中的二维码。
+
+```javascript
+qr.decodeFromVideo(videoElement).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/video.html)
+
+#### decodeFromCamera(videoElem, options)
+
+通过获取摄像头视频来扫描解析二维码。
+
+```javascript
+qr.decodeFromCamera(videoElem).then((res) => {
+  console.log(res);
+});
+```
+
+[Demo](./demo/camera.html)
+
+#### stop()
+
+停止当前视频捕获。

jest.config.js

@@ -0,0 +1,16 @@
+const isDebug = process.env.DEBUG === 'true';
+
+module.exports = {
+  verbose: true,
+  silent: !isDebug,
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testTimeout: 60000,
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*\\.(test|spec))\\.tsx?$',
+  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/demo/'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

package.json

@@ -0,0 +1,100 @@
+{
+  "name": "qrcode-decoder",
+  "version": "0.3.4",
+  "description": "Tool for decoding qrcode",
+  "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,
+  "packageManager": "pnpm@7.11.0",
+  "scripts": {
+    "build": "ts-node -P scripts/tsconfig.json scripts/bundle.ts commonjs,esm,aio && pnpm run dts && pnpm run copy-file",
+    "dts": "tsc src/index.ts --declaration --emitDeclarationOnly --outDir './dist'",
+    "prettier": "prettier --check '**/*.{ts,tsx,md}' --config .prettierrc",
+    "prettier:fix": "prettier --write '**/*.{ts,tsx,md}' --config .prettierrc",
+    "test": "jest",
+    "codecov": "jest --coverage && codecov",
+    "copy-file": "cp dist/index.min.js demo/lib",
+    "release": "git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags",
+    "pages": "gh-pages -d demo --remote origin",
+    "demo": "http-server demo -c-1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,md}": [
+      "pnpm run prettier:fix",
+      "git add ."
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-decorators": "^7.7.0",
+    "@babel/plugin-proposal-do-expressions": "^7.6.0",
+    "@babel/plugin-proposal-export-default-from": "^7.5.2",
+    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
+    "@babel/plugin-proposal-function-sent": "^7.7.0",
+    "@babel/plugin-proposal-json-strings": "^7.2.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
+    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.5.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-syntax-import-meta": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/polyfill": "^7.7.0",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-typescript": "^7.7.2",
+    "@babel/runtime": "^7.7.2",
+    "@types/jest": "^24.9.0",
+    "@types/node": "^13.1.8",
+    "chalk": "^3.0.0",
+    "codecov": "^3.8.1",
+    "cross-env": "^6.0.3",
+    "fancy-log": "^1.3.3",
+    "gh-pages": "^3.1.0",
+    "http-server": "^14.1.0",
+    "husky": "^3.0.9",
+    "jest": "^24.9.0",
+    "lint-staged": "^9.5.0",
+    "prettier": "^1.18.2",
+    "rollup": "^2.38.1",
+    "rollup-plugin-commonjs": "^8.3.0",
+    "rollup-plugin-json": "^3.1.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-typescript2": "0.17.1",
+    "rollup-plugin-uglify": "^6.0.4",
+    "ts-jest": "^24.3.0",
+    "ts-node": "^8.4.1",
+    "tslint": "^5.20.1",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "^4.4.3"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yugasun/qrcode-decoder.git"
+  },
+  "keywords": [
+    "node-utils"
+  ],
+  "author": "yugasun",
+  "bugs": {
+    "url": "https://github.com/yugasun/qrcode-decoder/issues"
+  },
+  "homepage": "https://github.com/yugasun/qrcode-decoder#readme",
+  "dependencies": {
+    "jsqr": "^1.4.0"
+  }
+}

scripts/bundle.ts

@@ -0,0 +1,144 @@
+import * as path from 'path';
+import * as rollup from 'rollup';
+import resolve from 'rollup-plugin-node-resolve';
+import typescript2 from 'rollup-plugin-typescript2';
+import { uglify } from 'rollup-plugin-uglify';
+import globals from 'rollup-plugin-node-globals';
+import commonjs from 'rollup-plugin-commonjs';
+import ts from 'typescript';
+
+import { createLogger } from './logger';
+
+const logBundle = createLogger('bundle');
+
+const plugins: rollup.Plugin[] = [
+  resolve({
+    browser: true,
+    jsnext: true,
+    preferBuiltins: true,
+  }),
+  commonjs(),
+  typescript2({
+    tsconfig: path.join(__dirname, '..', 'tsconfig.json'),
+  }),
+];
+
+async function bundleEsm() {
+  const bundle = await rollup.rollup({
+    input: path.join(process.cwd(), 'src/index.ts'),
+    plugins: [...plugins, globals()],
+    external: ['jsqr'],
+  });
+  await bundle.write({
+    file: 'dist/index.esm.js',
+    name: 'QrcodeDecoder',
+    format: 'esm',
+    sourcemap: false,
+    globals: {
+      jsqr: 'jsqr',
+      tslib: 'tslib',
+    },
+  });
+}
+async function bundleUmd() {
+  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: 'umd',
+    sourcemap: false,
+    globals: {
+      jsqr: 'jsqr',
+      tslib: 'tslib',
+    },
+  });
+}
+
+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() {
+  const bundle = await rollup.rollup({
+    input: path.join(process.cwd(), 'src/index.ts'),
+    plugins: [
+      ...plugins,
+      uglify({
+        compress: {
+          drop_debugger: true,
+          drop_console: false,
+        },
+      }),
+    ],
+  });
+  await bundle.write({
+    file: 'dist/index.min.js',
+    name: 'QrcodeDecoder',
+    format: 'iife',
+    sourcemap: true,
+  });
+}
+
+async function bundle() {
+  try {
+    const outputs = process.argv.slice(2)[0].split(',');
+    logBundle(`Creating bundle`);
+
+    if (outputs.indexOf('esm') === -1) {
+      logBundle(`Skipping esm`);
+    } else {
+      logBundle(`Creating esm`);
+      await bundleEsm();
+    }
+
+    if (outputs.indexOf('umd') === -1) {
+      logBundle(`Skipping umd`);
+    } else {
+      logBundle(`Creating umd`);
+
+      await bundleUmd();
+    }
+
+    if (outputs.indexOf('commonjs') === -1) {
+      logBundle(`Skipping commonjs`);
+    } else {
+      logBundle(`Creating commonjs`);
+
+      await bundleCommonjs();
+    }
+
+    if (outputs.indexOf('aio') === -1) {
+      logBundle(`Skipping umd aio`);
+    } else {
+      logBundle(`Creating umd aio`);
+
+      await bundleAio();
+    }
+  } catch (err) {
+    logBundle('Failed to bundle:');
+    logBundle(err);
+    process.exit(1);
+  }
+}
+
+bundle();

scripts/logger.ts

@@ -0,0 +1,16 @@
+import * as l from 'fancy-log';
+const log = <typeof import('fancy-log')>(<any>(<any>l).default || l);
+import * as c from 'chalk';
+const chalk = <import('chalk').Chalk>(c.default || c);
+
+export function createLogger(name: string): typeof log {
+  const prefix = `> ${chalk.green(name)} `;
+  const logger = <typeof log>log.bind(log, prefix);
+  logger.info = log.info.bind(log, prefix);
+  logger.dir = log.dir.bind(log, prefix);
+  logger.warn = log.warn.bind(log, prefix);
+  logger.error = log.error.bind(log, prefix);
+  return logger;
+}
+
+export { chalk as c };

scripts/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "target": "es2015",
+    "resolveJsonModule": true
+  }
+}

src/index.ts

@@ -0,0 +1,356 @@
+import jsQR, { QRCode, Options } from 'jsqr';
+
+export type CodeResult = QRCode | null;
+
+const videoSize = {
+  width: { min: 360, ideal: 720, max: 1080 },
+  height: { min: 360, ideal: 720, max: 1080 },
+};
+
+export class QrcodeDecoder {
+  timerCapture: null | NodeJS.Timeout;
+  canvasElem: null | HTMLCanvasElement;
+  gCtx: null | CanvasRenderingContext2D;
+  stream: null | MediaStream;
+  videoElem: null | HTMLVideoElement;
+  getUserMediaHandler: null;
+  videoConstraints: MediaStreamConstraints;
+  defaultOption: Options;
+
+  constructor() {
+    this.timerCapture = null;
+    this.canvasElem = null;
+    this.gCtx = null;
+    this.stream = null;
+    this.videoElem = null;
+    this.getUserMediaHandler = null;
+    this.videoConstraints = {
+      // default use rear camera
+      video: { ...videoSize, facingMode: { exact: 'environment' } },
+      audio: false,
+    };
+
+    this.defaultOption = { inversionAttempts: 'attemptBoth' };
+  }
+
+  /**
+   * Verifies if canvas element is supported.
+   */
+  isCanvasSupported() {
+    const elem = document.createElement('canvas');
+    return !!(elem.getContext && elem.getContext('2d'));
+  }
+
+  _createImageData(target: CanvasImageSource, width: number, height: number) {
+    if (!this.canvasElem) {
+      this._prepareCanvas(width, height);
+    }
+
+    this.gCtx!.clearRect(0, 0, width, height);
+    this.gCtx!.drawImage(target, 0, 0, width, height);
+
+    const imageData = this.gCtx!.getImageData(
+      0,
+      0,
+      this.canvasElem!.width,
+      this.canvasElem!.height,
+    );
+
+    return imageData;
+  }
+
+  /**
+   * Prepares the canvas element (which will
+   * receive the image from the camera and provide
+   * what the algorithm needs for checking for a
+   * QRCode and then decoding it.)
+   *
+   *
+   * @param  {DOMElement} canvasElem the canvas
+   *                                 element
+   * @param  {number} width      The width that
+   *                             the canvas element
+   *                             should have
+   * @param  {number} height     The height that
+   *                             the canvas element
+   *                             should have
+   * @return {DOMElement}            the canvas
+   * after the resize if width and height
+   * provided.
+   */
+  _prepareCanvas(width: number, height: number) {
+    if (!this.canvasElem) {
+      this.canvasElem = document.createElement('canvas');
+      this.canvasElem.style.width = `${width}px`;
+      this.canvasElem.style.height = `${height}px`;
+      this.canvasElem.width = width;
+      this.canvasElem.height = height;
+    }
+
+    this.gCtx = this.canvasElem.getContext('2d');
+  }
+
+  /**
+   * Based on the video dimensions and the canvas
+   * that was previously generated captures the
+   * video/image source and then paints into the
+   * canvas so that the decoder is able to work as
+   * it expects.
+   * @param  {DOMElement} videoElem <video> dom element
+   * @param  {Object} options     options (optional) - Additional options.
+   *  inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
+   *  refer to jsqr options: https://github.com/cozmo/jsQR
+   */
+  async _captureToCanvas(
+    videoElem: HTMLVideoElement,
+    options: Options,
+  ): Promise<CodeResult> {
+    if (this.timerCapture) {
+      clearTimeout(this.timerCapture);
+    }
+    const proms = () => {
+      const p = new Promise(async (resolve) => {
+        let code;
+        if (videoElem.videoWidth && videoElem.videoHeight) {
+          const imageData = this._createImageData(
+            videoElem,
+            videoElem.videoWidth,
+            videoElem.videoHeight,
+          );
+
+          code = jsQR(
+            imageData.data,
+            imageData.width,
+            imageData.height,
+            options,
+          );
+
+          if (code) {
+            resolve(code);
+          } else {
+            this.timerCapture = setTimeout(async () => {
+              code = await this._captureToCanvas(videoElem, options);
+              resolve(code);
+            }, 500);
+          }
+        } else {
+          this.timerCapture = setTimeout(async () => {
+            code = await this._captureToCanvas(videoElem, options);
+            resolve(code);
+          }, 500);
+        }
+      });
+
+      return p;
+    };
+
+    const result = await proms();
+
+    return result as CodeResult;
+  }
+
+  /**
+   * Prepares the video element for receiving
+   * camera's input. Releases a stream if there
+   * was any (resets).
+   *
+   * @param  {DOMElement} videoElem <video> dom element
+   * @param  {Object} options     options (optional) - Additional options.
+   *  inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
+   *  refer to jsqr options: https://github.com/cozmo/jsQR
+   */
+  async decodeFromCamera(
+    videoElem: HTMLVideoElement,
+    options: any = {},
+  ): Promise<CodeResult> {
+    const opts = {
+      ...this.defaultOption,
+      ...options,
+    };
+
+    this.stop();
+    if (!navigator.mediaDevices.getUserMedia) {
+      throw new Error("Couldn't get video from camera");
+    }
+
+    let stream: MediaStream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia(this.videoConstraints);
+    } catch (e) {
+      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.src = window.URL.createObjectURL(stream);
+      this.videoElem = videoElem;
+      this.stream = stream;
+
+      const code = await this.decodeFromVideo(videoElem, opts);
+      return code;
+    }
+
+    return null;
+  }
+
+  /**
+   * Prepares the video element for video file.
+   *
+   * @param  {DOMElement} videoElem <video> dom element
+   * @param  {Object} options     options (optional) - Additional options.
+   *  inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
+   *  refer to jsqr options: https://github.com/cozmo/jsQR
+   */
+  async decodeFromVideo(
+    videoElem: HTMLVideoElement,
+    options = {},
+  ): Promise<CodeResult> {
+    const opts = {
+      ...this.defaultOption,
+      ...options,
+    };
+    try {
+      this.videoElem = videoElem;
+      const code = await this._captureToCanvas(videoElem, opts);
+      return code;
+    } catch (e) {
+      throw e;
+    }
+  }
+
+  /**
+   * Decodes an image from its src.
+   * @param  {DOMElement} imageElem
+   * @param  {Object} options     options (optional) - Additional options.
+   *  inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
+   *  refer to jsqr options: https://github.com/cozmo/jsQR
+   */
+  async decodeFromImage(
+    img: HTMLImageElement | string,
+    options: { crossOrigin?: string } = {},
+  ): Promise<CodeResult> {
+    let imgDom: HTMLImageElement | null = null;
+    const opts = {
+      ...this.defaultOption,
+      ...options,
+    };
+
+    if (typeof img === 'string') {
+      imgDom = document.createElement('img');
+      if (options.crossOrigin) {
+        imgDom.crossOrigin = options.crossOrigin;
+      }
+      imgDom.src = img;
+      const proms = () =>
+        new Promise((resolve) => {
+          imgDom!.onload = () => resolve(true);
+        });
+      await proms();
+    } else if (+img.nodeType > 0) {
+      if (!img.src) {
+        throw new Error('The ImageElement must contain a src');
+      }
+      imgDom = img;
+    }
+
+    let code = null;
+    if (imgDom) {
+      code = this._decodeFromImageElm(imgDom, opts);
+    }
+    return code;
+  }
+
+  _decodeFromImageElm(imgObj: HTMLImageElement, options = {}) {
+    const opts: Options = {
+      ...this.defaultOption,
+      ...options,
+    };
+    const imageData = this._createImageData(
+      imgObj,
+      imgObj.width,
+      imgObj.height,
+    );
+
+    const code = jsQR(imageData.data, imageData.width, imageData.height, opts);
+
+    if (code) {
+      return code;
+    }
+
+    return null;
+  }
+
+  /**
+   * Releases a video stream that was being
+   * captured by prepareToVideo
+   */
+  stop() {
+    if (this.stream) {
+      const track = this.stream.getTracks()[0];
+      track.stop();
+      this.stream = null;
+
+      // fix: clear black bg after camera capture
+      this.videoElem!.srcObject = null;
+    }
+
+    if (this.timerCapture) {
+      clearTimeout(this.timerCapture);
+      this.timerCapture = null;
+    }
+
+    return this;
+  }
+
+  /**
+   * Sets the sourceId for the camera to use.
+   */
+  setGroupId(groupId: string) {
+    if (groupId) {
+      this.videoConstraints.video = {
+        advanced: [{ groupId }],
+      };
+    } else {
+      this.videoConstraints.video = true;
+    }
+
+    return this;
+  }
+
+  /**
+   * Gets a list of all available video sources on
+   * the current device.
+   */
+  async getVideoDevices() {
+    if (navigator.mediaDevices.enumerateDevices) {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      return devices.filter((item: MediaDeviceInfo) => {
+        if (item.kind === 'videoinput') {
+          return true;
+        }
+        return false;
+      });
+    } else {
+      throw new Error(
+        'Current browser doest not support MediaStreamTrack.getSources',
+      );
+    }
+  }
+}
+
+export default QrcodeDecoder;

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": ".",
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "downlevelIteration": true,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "preserveConstEnums": true,
+    "importHelpers": false,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "sourceMap": false,
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "strict": true,
+    "target": "es5"
+  }
+}

tslint.json

@@ -0,0 +1,23 @@
+{
+  "extends": ["tslint:latest", "tslint-config-prettier"],
+  "rules": {
+    "interface-name": [true, "never-prefix"],
+    "member-access": false,
+    "no-angle-bracket-type-assertion": false,
+    "no-bitwise": false,
+    "no-console": false,
+    "no-default-export": true,
+    "no-empty-interface": false,
+    "no-implicit-dependencies": false,
+    "no-submodule-imports": false,
+    "ordered-imports": [false],
+    "object-literal-sort-keys": false,
+    "object-literal-key-quotes": [true, "as-needed"],
+    "quotemark": [true, "single"],
+    "semicolon": [true, "always", "ignore-bound-class-methods"],
+    "jsx-boolean-value": false
+  },
+  "linterOptions": {
+    "exclude": ["config/**/*.js", "node_modules/**/*.ts"]
+  }
+}